caimei-applets-hehe/pages/user/order/search-order.vue

<template>
    <view class="search-container">
        <!-- <or-search :theme="themeClass" @getSearchText="getSearchText"></or-search> -->
        <view class="search-main">
            <view class="search">
                <view class="search-input">
                    <text class="iconfont icon-sousuo"></text>
                    <input
                        maxlength="20"
                        focus
                        type="text"
                        value=""
                        confirm-type="search"
                        @focus="onFocus"
                        @input="onShowClose"
                        @confirm="subMitSearch()"
                        placeholder="请输入商品关键词"
                        v-model.trim="searchInputVal"
                    />
                    <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
                </view>
                <view class="search-btn" @click="subMitSearch()">搜索</view>
            </view>
        </view>
        <view class="search-container-history" v-if="!isShowWrapper">
            <view :class="'s-' + themeClass" v-if="serachRecordList.length > 0">
                <view class="header"> 搜索历史<text class="iconfont icon-shanchu" @click="confirmDetele"></text> </view>
                <view class="list">
                    <view v-for="(item, index) in serachRecordList" :key="index" @click="keywordsClick(item)">{{
                        item
                    }}</view>
                </view>
            </view>
        </view>
        <view
            class=" order-container"
            v-if="isShowWrapper"
            :style="{ overflow: 'auto', height: showSkeleton ? windowHeight + 'px' : 'auto' }"
        >
            <scroll-view
                class="tui-skeleton"
                :style="{ height: scrollHeight + 'px' }"
                @scrolltolower="scrolltolower"
                scroll-y
            >
                <view :class="{ 'tui-order-list': scrollTop >= 0 }" class="tui-skeleton clearfix">
                    <!-- 空白页 -->
                    <empty v-if="isShowEmpty" :navbarHeight="navbarHeight"></empty>
                    <!-- 列表 -->
                    <view v-else class="tui-order-content">
                        <view
                            class="tui-order-item"
                            v-for="(order, orderIndex) in orderList"
                            :key="orderIndex"
                            @click.stop="detail(order.orderId)"
                        >
                            <view class="order-title">
                                <view class="order-title-t">
                                    <text class="bage-text tui-skeleton-fillet"
                                        ><text class="text">订单编号：</text>{{ order.orderNo }}</text
                                    >
                                </view>
                                <view class="order-title-b">
                                    <view class="order-title-btxt tui-skeleton-fillet"
                                        ><text class="text">下单时间：</text>{{ order.orderTime }}</view
                                    >
                                    <view class="order-title-tip tui-skeleton-fillet">{{
                                        StateExpFormat(order.status)
                                    }}</view>
                                </view>
                            </view>
                            <block v-for="(shop, index) in order.shopOrderList" :key="index">
                                <view class="goods-title">
                                    <view class="title-logo"><image :src="shop.shopLogo" mode=""></image></view>
                                    <view class="title-text tui-skeleton-fillet">{{ shop.shopName }}</view>
                                </view>
                                <view
                                    class="goods-item"
                                    v-for="(pros, prosIndex) in shop.orderProductList"
                                    :key="prosIndex"
                                >
                                    <view class="goods-pros-t">
                                        <view class="pros-img tui-skeleton-fillet">
                                            <image :src="pros.productImage" alt="" />
                                            <text class="tips" v-if="pros.productType == 2 || pros.productType == 1"
                                                >赠品</text
                                            >
                                        </view>
                                        <view class="pros-product">
                                            <view class="producttitle tui-skeleton-fillet">{{ pros.name }}</view>
                                            <view
                                                class="productspec tui-skeleton-fillet"
                                                v-if="pros.productCategory != 2"
                                                >规格:{{ pros.productUnit }}</view
                                            >
                                            <view class="productprice">
                                                <view
                                                    class="price "
                                                    v-if="pros.productType == 2 || pros.productType == 1"
                                                >
                                                    <text>￥0.00</text>
                                                </view>
                                                <view
                                                    v-else
                                                    class="price tui-skeleton-fillet"
                                                    :class="PromotionsFormat(pros.productPromotion) ? 'disabled' : ''"
                                                >
                                                    <text>￥{{ pros.price | NumFormat }}</text>
                                                </view>
                                                <view class="count tui-skeleton-fillet">
                                                    <text class="small">x</text>{{ pros.num }}
                                                </view>
                                            </view>
                                            <view class="floor-item-act" v-if="pros.productPromotion != null">
                                                <view v-if="PromotionsFormat(pros.productPromotion)" class="floor-tags">
                                                    {{ pros.productPromotion.name }}
                                                    <text
                                                        v-if="
                                                            pros.productPromotion != null &&
                                                                pros.productPromotion.type != 3
                                                        "
                                                    >
                                                        :￥{{
                                                            pros.productPromotion == null
                                                                ? '0.00'
                                                                : pros.productPromotion.touchPrice | NumFormat
                                                        }}
                                                    </text>
                                                </view>
                                                <view v-else-if="pros.productPromotion.type != 3" class="floor-tags">{{
                                                    pros.productPromotion.name
                                                }}</view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </block>
                            <view class="order-footer">
                                <view class="order-footer-top" v-if="order.discountFee != 0"
                                    >经理折扣：¥{{ order.discountFee | NumFormat }}</view
                                >
                                <view class="order-footer-bot">
                                    <view class="count tui-skeleton-fillet">共{{ order.productCount }}件商品</view>
                                    <view class="money tui-skeleton-fillet"
                                        >待付总额：¥{{ order.pendingPayments | NumFormat }}</view
                                    >
                                </view>
                            </view>
                            <!-- 底部button -->
                            <order-button
                                v-if="order.userId == userId"
                                ref="orderButton"
                                :status="order.status"
                                :order="order"
                                @buttonConfirm="handButtonConfirm"
                            >
                            </order-button>
                        </view>
                        <!--加载loadding-->
                        <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
                        <tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText"></tui-nomore>
                        <!--加载loadding-->
                    </view>
                </view>
            </scroll-view>
        </view>
        <!-- 操作弹窗 -->
        <tui-modal
            :show="modal"
            @click="handleClick"
            @cancel="hideMobel(1)"
            :content="contentModalText"
            color="#333"
            :size="32"
            shape="circle"
            :maskClosable="false"
        ></tui-modal>
        <!-- 再次购买订单商品全部下架弹窗 -->
        <tui-modal
            :show="modal2"
            @click="handleClick2"
            @cancel="hideMobel(2)"
            shape="circle"
            content="订单内商品已全部下架，不能购买！"
            :button="button"
        ></tui-modal>
        <!-- 再次购买部分商品失效弹窗 -->
        <tui-modal :show="modal3" @cancel="hideMobel(3)" :custom="true">
            <view class="tui-modal-custom">
                <view class="tui-modal-custom-text">
                    <view class="title">以下商品已失效，不能进行购买；是否先将其他商品加入购物车？</view>
                    <scroll-view scroll-y class="tui-modal-custom-list">
                        <view class="custom-list" v-for="(invalid, index) in invalidList" :key="index">
                            <view class="custom-list-image"><image :src="invalid.productImage" mode=""></image></view>
                            <view class="custom-list-name">{{ invalid.name }}</view>
                        </view>
                    </scroll-view>
                </view>
                <view class="tui-modal-button">
                    <button class="modal-button cancel" @click="hideMobel(3)">我再想想</button>
                    <button class="modal-button confirm" @click="handleClick3">加入购物车</button>
                </view>
            </view>
        </tui-modal>
        <!-- 透明模态层 -->
        <modal-layer v-if="isModalLayer"></modal-layer>
    </view>
</template>

<script>
import orderButton from '@/components/cm-module/orderDetails/orderListButton' //按钮
import modalLayer from '@/components/cm-module/modal-layer/modal-layer'
import empty from '@/components/cm-module/empty/empty'
import authorize from '@/common/authorize.js'
export default {
    components: {
        orderButton,
        empty
    },
    data() {
        return {
            themeClass: 'block',
            searchInputVal: '',
            isShowClose: false, //是否显示清空输入框图标
            isSearchHistory: false, //是都显示搜索历史
            serachRecordList: [],
            isShowWrapper: false,
            isShowEmpty: false,
            windowHeight: '',
            showSkeleton: true,
            userId: 0,
            orderList: [],
            btnoRderID: 0, //点击按钮传入的的订单ID
            pageNum: 1, //页数
            pageSize: 10, //条数
            scrollTop: 0,
            deteleType: '',
            skeletonShow: true,
            isModalLayer: false,
            loadding: false,
            pullUpOn: true,
            hasNextPage: false,
            pullFlag: true,
            navbarHeight: '',
            nomoreText: '上拉显示更多',
            scrollHeight: '',
            modal: false,
            modal2: false,
            modal3: false,
            OperationType: '',
            contentModalText: '',
            button: [
                {
                    text: '确定',
                    type: 'danger'
                }
            ],
            invalidList: []
        }
    },
    onLoad() {
        this.$api.getStorage().then(resolve => {
            this.userId = resolve.userId
            this.InitGetSerachRecord(this.userId)
        })
    },
    filters: {
        NumFormat(value) {
            //处理金额
            return Number(value).toFixed(2)
        }
    },
    methods: {
        subMitSearch() {
            if (this.searchInputVal == '') {
                this.$util.msg('请输入商品关键词', 2000)
            } else {
                this.commodityList = []
                this.GetOrderDatainit()
            }
        },
        InitGetSerachRecord() {
            this.OrderService.SearchOrderHistory({ userId: this.userId })
                .then(response => {
                    this.serachRecordList = response.data
                    if (this.serachRecordList.length > 0) {
                        this.isSearchHistory = true
                    } else {
                        this.isSearchHistory = false
                    }
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        onShowClose() {
            //输入框失去焦点时触发
            this.inputEmpty(this.searchInputVal)
        },
        onFocus() {
            //输入框获取焦点时触发
            this.inputEmpty(this.searchInputVal)
            this.InitGetSerachRecord()
        },
        delInputText() {
            //清除输入框内容
            this.searchInputVal = ''
            this.isShowClose = false
            this.isShowWrapper = false
            this.inputEmpty(this.searchInputVal)
            this.InitGetSerachRecord()
        },
        keywordsClick(item) {
            //关键词搜索与历史搜索
            this.searchInputVal = item
            this.isShowClose = true
            this.subMitSearch()
        },
        confirmDetele() {
            //清空历史记录
            this.modal = true
            this.contentModalText = '确定删除历史记录？'
            this.OperationType = 'history'
        },
        inputEmpty(val) {
            this.isShowWrapper = false
            if (val != '') {
                this.isShowClose = true
            } else {
                this.isShowClose = false
            }
        },
        GetOrderDatainit(index, source) {
            /**
             * @订单初始化加载  仅加载第一页码
             * @param：searchWord(搜索关键词)
             * @param：userId(用户ID)
             * @param：pageNum(页码数)
             * @param：pageSize(每页条数)
             * @param：userId(全局变量组织ID)
             */

            this.OrderService.QueryOrderDealerList({
                orderState: 0,
                orderType: 0,
                searchWord: this.searchInputVal,
                userId: this.userId,
                pageNum: 1,
                pageSize: this.pageSize
            })
                .then(response => {
                    this.isShowWrapper = true
                    this.showSkeleton = true
                    const _responseData = response.data.list
                    if (_responseData && _responseData.length > 0) {
                        let filrerData = _responseData.filter(item => {
                            //添加不同状态下订单的表现形式
                            item = Object.assign(item, this.StateExpFormat(item.state))
                            return item
                        })
                        this.orderList = []
                        filrerData.forEach(item => {
                            this.orderList.push(item)
                        })
                        this.hasNextPage = response.data.hasNextPage
                        if (this.hasNextPage) {
                            this.pullUpOn = false
                            this.nomoreText = '上拉显示更多'
                        } else {
                            if (this.orderList.length < 2) {
                                this.pullUpOn = true
                            } else {
                                this.pullUpOn = false
                                this.nomoreText = '已至底部'
                            }
                        }
                        this.isShowEmpty = false
                    } else {
                        this.isShowEmpty = true
                    }
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        getOnReachBottomData(index) {
            //上拉加载
            this.pageNum += 1
            this.OrderService.QueryOrderDealerList({
                orderState: 0,
                orderType: 0,
                searchWord: this.searchInputVal,
                userId: this.userId,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            })
                .then(response => {
                    let resData = response.data.list
                    this.hasNextPage = response.data.hasNextPage
                    this.orderList = this.orderList.concat(resData)
                    this.pullFlag = false // 防上拉暴滑
                    setTimeout(() => {
                        this.pullFlag = true
                    }, 500)
                    if (this.hasNextPage) {
                        this.pullUpOn = false
                        this.nomoreText = '上拉显示更多'
                    } else {
                        this.loadding = false
                        this.pullUpOn = false
                        this.nomoreText = '已至底部'
                    }
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        scrolltolower() {
            if (this.hasNextPage) {
                this.loadding = true
                this.pullUpOn = true
                this.showSkeleton = false
                this.getOnReachBottomData()
            }
        },
        detail(id) {
            //订单详情跳转
            this.isModalLayer = true
            this.$api.navigateTo(`/pages/user/order/order-details?state=${this.currentTab}&orderId=${id}`)
        },
        handButtonConfirm(data) {
            //获取点击
            this.hanldOrder = data
            this.btnoRderID = data.orderId
            this.OperationType = data.type
            this.handShowAlert(data)
        },
        handShowAlert(data) {
            //执行
            switch (data.type) {
                case 'cancel':
                    this.modal = true
                    this.contentModalText = '确认取消该订单吗？'
                    break
                case 'delete':
                    this.modal = true
                    this.contentModalText = '确认删除该订单吗？'
                    break
                case 'confirm':
                    this.modal = true
                    this.contentModalText = '是否确认收货？'
                    break
                case 'query':
                    this.isModalLayer = true
                    this.$api.navigateTo('/pages/user/order/order-logistics?orderId=' + data.orderId)
                    break
                case 'again':
                    this.handBuyAgainInfo()
                    break
                case 'pay':
                    this.MiniWxPayFor(data.order)
                    break
            }
        },
        handleClick(e) {
            //用户操作订单
            let index = e.index
            if (index == 1) {
                switch (this.OperationType) {
                    case 'delete':
                        this.handOrderDetele(this.btnoRderID)
                        break
                    case 'cancel':
                        this.handCenceConfirm(this.btnoRderID)
                        break
                    case 'confirm':
                        this.handOrderConfirm(this.btnoRderID)
                        break
                }
            }
            this.modal = false
        },
        handleClick2() {
            this.modal2 = false
        },
        handleClick3() {
            this.handShoppingAgainCart()
            this.modal3 = false
        },
        hideMobel(index) {
            switch (index) {
                case 1:
                    this.modal = false
                    break
                case 2:
                    this.modal2 = false
                    break
                case 3:
                    this.modal3 = false
                    break
            }
        },
        handBuyAgainInfo() {
            //再次购买初始化查询订单商品信息
            this.OrderService.GetOrderBuyAgain({
                orderId: this.btnoRderID
            })
                .then(response => {
                    this.handShoppingAgainCart()
                })
                .catch(error => {
                    if (error.data && error.data.length > 0) {
                        this.modal3 = true
                        this.invalidList = error.data
                    } else {
                        this.modal2 = true
                    }
                })
        },
        handShoppingAgainCart() {
            //一键加入购物车
            this.ProductService.ShoppingAgainCart({
                orderId: this.btnoRderID
            })
                .then(response => {
                    this.ProductService.QueryShoppingQuantity({ userId: this.userId })
                        .then(response => {
                            this.$api.switchTabTo('/pages/tabBar/cart/index')
                        })
                        .catch(error => {
                            console.log('查询购物车数量错误信息', error)
                        })
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        handOrderConfirm(id) {
            //确认收货
            this.OrderService.ConfirmReceipt({ orderId: id })
                .then(response => {
                    this.$util.msg(response.msg, 2000, true, 'success')
                    setTimeout(() => {
                        this.GetOrderDatainit(this.currentTab)
                    }, 2000)
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        handOrderDetele(id) {
            //删除订单
            this.OrderService.DeleteOrder({ orderId: id })
                .then(response => {
                    this.$util.msg(response.msg, 2000, true, 'success')
                    setTimeout(() => {
                        this.GetOrderDatainit(this.currentTab)
                    }, 2000)
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        handCenceConfirm(id) {
            //取消订单
            this.OrderService.CancelOrder({ orderId: id })
                .then(response => {
                    this.$util.msg(response.msg, 2000, true, 'success')
                    setTimeout(() => {
                        this.GetOrderDatainit(this.currentTab)
                    }, 2000)
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        MiniWxPayFor(data) {
            this.PayService.PayOrderOnLineSwitch().then(response => {
                if (response.data === 1) {
                    this.WeChatMiniWxPay(data)
                } else {
                    this.$api.navigateTo(`/pages/user/order/order-payment?money=${data.payableAmount}`)
                }
            })
        },
        async WeChatMiniWxPay(data) {
            const wechatCode = await authorize.getCode('weixin')
            this.PayService.WeChatMiniWxPay({
                payAmount: data.payableAmount * 100,
                payWay: 'WEIXIN',
                code: wechatCode,
                orderId: data.orderId
            })
                .then(response => {
                    let PayInfo = JSON.parse(response.data.data.payInfo)
                    this.WxRequestPayment(PayInfo)
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        WxRequestPayment(data) {
            let self = this
            wx.requestPayment({
                timeStamp: data.timeStamp,
                nonceStr: data.nonceStr,
                package: data.package,
                signType: data.signType,
                paySign: data.paySign,
                success: function(res) {
                    wx.reLaunch({ url: '/pages/tabBar/index/index' })
                },
                fail: function(res) {
                    console.log(res)
                    self.$api.redirectTo(
                        `/pages/user/order/success?data=${JSON.stringify({ data: self.hanldOrder.order })}`
                    )
                },
                complete: function(res) {}
            })
        },
        handlSearchPath() {
            this.$api.navigateTo('/pages/user/order/search-order')
        },
        setScrollHeight() {
            const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
            this.windowHeight = windowHeight - 1
            this.scrollHeight = windowHeight - 1
        },
        PromotionsFormat(promo) {
            //促销活动类型数据处理
            if (promo != null) {
                if (promo.type == 1 && promo.mode == 1) {
                    return true
                } else {
                    return false
                }
            }
            return false
        },
        StateExpFormat(state) {
            //订单状态文字和颜色
            var HtmlStateText = '',
                stateTextObject = {
                    0: '待确认',
                    4: '交易完成',
                    5: '订单完成',
                    6: '已关闭',
                    7: '交易全退',
                    77: '交易全退',
                    11: '待付款待发货',
                    12: '待付款部分发货',
                    13: '待付款已发货',
                    21: '部分付款待发货',
                    22: '部分付款部分发货',
                    23: '部分付款已发货',
                    31: '已付款待发货',
                    32: '已付款部分发货',
                    33: '已付款已发货',
                    111: '待付款待发货'
                }
            Object.keys(stateTextObject).forEach(function(key) {
                if (key == state) {
                    HtmlStateText = stateTextObject[key]
                }
            })
            return HtmlStateText
        }
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop
    },
    onShow() {
        this.setScrollHeight()
    }
}
</script>

<style lang="scss">
@import '@/uni.scss';
page {
    background-color: #f7f7f7 !important;
}
.search {
    width: 702rpx;
    height: 70rpx;
    padding: 12rpx 24rpx;
    border-bottom: 1px solid #f0f0f0;
    position: fixed;
    top: 0;
    left: 0;
    background: #ffffff;
    z-index: 1001;
    .search-input {
        width: 448rpx;
        height: 70rpx;
        padding: 0 68rpx;
        line-height: 70rpx;
        border-radius: 40rpx;
        position: relative;
        background: #f0f0f0;
        float: left;
        .icon-sousuo {
            font-size: 36rpx;
            color: #8a8a8a;
            position: absolute;
            left: 24rpx;
            z-index: 10;
        }
        .icon-shanchu1 {
            font-size: 36rpx;
            color: #8a8a8a;
            position: absolute;
            right: 24rpx;
            top: 0;
            padding: 0 10rpx;
            z-index: 10;
        }
        input {
            width: 448rpx;
            height: 70rpx;
            background-color: #f0f0f0;
            font-size: 26rpx;
        }
    }
    .search-btn {
        width: 118rpx;
        height: 70rpx;
        line-height: 70rpx;
        color: $color-system;
        font-size: 30rpx;
        text-align: center;
        float: left;
    }
    .voice-icon {
        width: 36rpx;
        height: 36rpx;
        padding: 16rpx 20rpx 16rpx 0;
        position: absolute;
        left: 16rpx;
        top: 4rpx;
        z-index: 10;
    }
}
.search-container {
    padding-top: 106rpx;
}
.s-block {
    background: #ffffff;
    .header {
        font-size: 32rpx;
        padding: 40rpx 24rpx 22rpx 24rpx;
        line-height: 42rpx;
        font-size: 30rpx;
        font-weight: bold;
        position: relative;
        .icon-shanchu {
            font-size: 36rpx;
            color: #333333;
            float: right;
            padding: 0 10rpx;
            z-index: 10;
            font-weight: normal;
        }
    }
    .list {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 40rpx;
        view {
            color: #8a8a8a;
            font-size: 24rpx;
            box-sizing: border-box;
            text-align: center;
            height: 48rpx;
            line-height: 48rpx;
            border-radius: 24rpx;
            margin: 12rpx;
            padding: 0 30rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            background-color: #f3f3f3;
        }
    }
}
.s-circle {
    margin-top: 30rpx;
    .header {
        font-size: 32rpx;
        padding: 30rpx;
        border-bottom: 2rpx solid #f9f9f9;
        position: relative;
        image {
            width: 36rpx;
            height: 36rpx;
            padding: 10rpx;
            position: absolute;
            right: 40rpx;
            top: 24rpx;
        }
    }
    .list {
        display: flex;
        flex-wrap: wrap;
        padding: 0 30rpx 20rpx;
        view {
            padding: 8rpx 30rpx;
            margin: 20rpx 30rpx 0 0;
            font-size: 28rpx;
            color: #8a8a8a;
            background-color: #f7f7f7;
            box-sizing: border-box;
            text-align: center;
            border-radius: 20rpx;
        }
    }
}
.wanted-block {
    margin-top: 30rpx;
    .header {
        font-size: 32rpx;
        padding: 30rpx;
    }
    .list {
        display: flex;
        flex-wrap: wrap;
        view {
            width: 50%;
            color: #8a8a8a;
            font-size: 28rpx;
            box-sizing: border-box;
            text-align: center;
            padding: 20rpx 0;
            border-top: 2rpx solid #fff;
            border-left: 2rpx solid #fff;
            background-color: #f7f7f7;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}
.wanted-circle {
    margin-top: 30rpx;
    .header {
        font-size: 32rpx;
        padding: 30rpx;
    }
    .list {
        display: flex;
        flex-wrap: wrap;
        padding: 0 30rpx 20rpx;
        view {
            padding: 8rpx 30rpx;
            margin: 20rpx 30rpx 0 0;
            font-size: 28rpx;
            color: #8a8a8a;
            background-color: #f7f7f7;
            box-sizing: border-box;
            text-align: center;
            border-radius: 20rpx;
        }
    }
}
.order-container {
    scroll-view {
        height: 100%;
        overflow: scroll;
    }
}
.container {
    padding-bottom: env(safe-area-inset-bottom);
    height: auto;
    position: relative;
}
.tui-order-content {
    width: 100%;
    height: auto;
}
.tui-order-list {
    width: 100%;
    position: relative;
}
.tui-order-item {
    display: flex;
    flex-direction: column;
    width: 702rpx;
    padding: 20rpx 24rpx 0 24rpx;
    background: #fff;
    border-bottom: 20rpx solid #f7f7f7;
}
.order-title {
    width: 100%;
    height: auto;
    padding-bottom: 20rpx;
    .order-title-t {
        width: 100%;
        height: 48rpx;
        float: left;
        line-height: 48rpx;
        position: relative;
        .bage-text {
            display: inline-block;
            font-size: $font-size-28;
            line-height: 48rpx;
            text-align: left;
            color: $color-system;
            .text {
                color: #999999;
            }
        }
    }
    .order-title-b {
        width: 100%;
        height: 48rpx;
        float: left;
        margin-top: 8rpx;
        .order-title-btxt {
            float: left;
            font-size: $font-size-28;
            line-height: 48rpx;
            color: #999999;
            text-align: left;
            .text {
                color: #999999;
            }
        }
        .order-title-tip {
            float: right;
            font-size: $font-size-28;
            line-height: 48rpx;
            text-align: right;
            color: #ff2a2a;
        }
    }
}
.goods-title {
    width: 100%;
    height: 56rpx;
    float: left;
    margin-top: 10rpx;
    .title-logo {
        width: 56rpx;
        height: 56rpx;
        float: left;
        border-radius: 8rpx;
        border: 1px solid #e1e1e1;
        margin-right: 8rpx;
        image {
            border-radius: 8rpx;
            width: 56rpx;
            height: 56rpx;
        }
    }
    .title-text {
        width: 400rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        float: left;
        font-size: $font-size-28;
        color: $text-color;
        text-align: left;
        line-height: 56rpx;
        font-weight: bold;
    }
}
.goods-item {
    width: 100%;
    height: auto;
}
.goods-pros-t {
    display: flex;
    align-items: center;
    width: 100%;
    height: 217rpx;
    padding: 24rpx 0;
    .pros-img {
        float: left;
        width: 210rpx;
        height: 100%;
        border-radius: 10rpx;
        margin: 0 26rpx 0 0;
        position: relative;
        .tips {
            display: inline-block;
            width: 80rpx;
            height: 40rpx;
            background-image: linear-gradient(214deg, #ff4500 0%, #ff5800 53%, #ff4367 100%);
            line-height: 40rpx;
            text-align: center;
            font-size: $font-size-24;
            color: #ffffff;
            border-radius: 10rpx 0 10rpx 0;
            position: absolute;
            top: 0;
            left: 0;
        }
        image {
            width: 210rpx;
            height: 210rpx;
            border-radius: 10rpx;
            border: 1px solid #f3f3f3;
        }
    }
}
.pros-product {
    width: 468rpx;
    height: 100%;
    line-height: 36rpx;
    font-size: $font-size-26;
    position: relative;
    .producttitle {
        width: 100%;
        display: inline-block;
        height: auto;
        text-overflow: ellipsis;
        display: -webkit-box;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: 8rpx;
    }
    .productspec {
        height: 36rpx;
        color: #999999;
    }
    .productprice {
        height: 48rpx;
        position: absolute;
        width: 100%;
        bottom: 0;
        .price {
            line-height: 48rpx;
            font-size: $font-size-28;
            width: 48%;
            color: #ff2a2a;
            float: left;
            font-weight: bold;
            &.disabled {
                color: #999999;
                text-decoration: line-through;
            }
        }
        .count {
            height: 100%;
            float: right;
            position: relative;
            .small {
                color: #666666;
            }
        }
    }
    .floor-item-act {
        width: 100%;
        height: 56rpx;
        text-align: center;
        box-sizing: border-box;
        float: left;
        padding: 0 0 10rpx 0;
        .floor-tags {
            height: 28rpx;
            border-radius: 6rpx;
            background-color: #ffffff;
            line-height: 28rpx;
            color: #ff2a2a;
            text-align: center;
            display: inline-block;
            padding: 0 5rpx;
            font-size: $font-size-20;
            border: 1px solid #ff2a2a;
            float: left;
        }
    }
}
.order-footer {
    width: 100%;
    height: 78rpx;
    float: left;
    .order-footer-top {
        width: 100%;
        height: 34rpx;
        line-height: 34rpx;
        font-size: $font-size-24;
        color: #999999;
        text-align: right;
    }
    .order-footer-bot {
        width: 100%;
        float: left;
        height: 48rpx;
        line-height: 48rpx;
        font-size: $font-size-28;
        font-weight: bold;
        color: $text-color;
        .count {
            width: 50%;
            float: left;
            text-align: left;
        }
        .money {
            width: 50%;
            float: right;
            text-align: right;
        }
    }
}
.tui-modal-custom-text {
    min-height: 300rpx;
    margin-bottom: 30rpx;
    .title {
        width: 100%;
        height: auto;
        font-size: $font-size-30;
        text-align: justify;
        color: #333333;
        line-height: 40rpx;
        margin-bottom: 30rpx;
    }
    .tui-modal-custom-list {
        width: 100%;
        height: 350rpx;
        overflow: hidden;
        .custom-list {
            width: 100%;
            height: 117rpx;
            box-sizing: border-box;
            float: left;
            padding: 15rpx 0;
            .custom-list-image {
                width: 86rpx;
                height: 86rpx;
                float: left;
                border-radius: 6rpx;
                box-sizing: border-box;
                border: 1px solid #e1e1e1;
                image {
                    width: 84rpx;
                    height: 84rpx;
                    border-radius: 6rpx;
                    display: block;
                }
            }
            .custom-list-name {
                width: 400rpx;
                height: 86rpx;
                float: right;
                line-height: 43rpx;
                font-size: $font-size-26;
                color: #666666;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
    }
}
.tui-modal-button {
    width: 100%;
    height: 72rpx;
    display: flex;
    .modal-button {
        width: 200rpx;
        height: 72rpx;
        line-height: 72rpx;
        border-radius: 36rpx;
        box-sizing: border-box;
        &.cancel {
            border: 1px solid #b2b2b2;
            background: #ffffff;
            color: #333333;
        }
        &.confirm {
            background: $btn-confirm;
            color: #ffffff;
        }
    }
}
</style>