caimei-applets-hehe/pages/user/order/order-list-retail.vue

<template>
    <view class="container" :style="{ paddingTop: navbarHeight + 82 + 'px' }">
        <!-- 自定义返回 -->
        <header-order
            :systeminfo="systeminfo"
            :navbar-data="nvabarData"
            :headerBtnPosi="headerBtnPosi"
            :isDelete="isDelete"
            :isUsertype="1"
            @goSearchPath="handlSearchPath"
        >
        </header-order>
        <view class="order-section-top" :style="{ marginTop: navbarHeight + 'px' }">
            <scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="scrollLeft">
                <view
                    v-for="(item, index) in orderTabBar"
                    :key="index"
                    class="tab-bar-item"
                    :class="[currentTab == index ? 'active' : '']"
                    :data-current="index"
                    @tap.stop="onClickTab"
                >
                    <text class="tab-bar-title">{{ item.text }}</text> <text class="line"></text>
                </view>
            </scroll-view>
            <view class="tab-screen">
                <view
                    v-for="(item, index) in screenTabBar"
                    :key="index"
                    class="tab-screen-item"
                    :class="[screenTab == index ? 'active' : '']"
                    :data-current="index"
                    @tap.stop="onClickScreenTab(index)"
                    >{{ item.text }}</view
                >
            </view>
        </view>
        <swiper
            class="tab-content"
            :current="currentTab"
            duration="80"
            @animationfinish="onChange"
            :style="{ height: winHeight + 'px' }"
        >
            <swiper-item v-for="(tabItem, index) in orderTabBar" :key="index">
                <tui-skeleton
                    v-if="skeletonShow"
                    backgroundColor="#fafafa"
                    borderRadius="10rpx"
                    :isLoading="false"
                    :loadingType="5"
                ></tui-skeleton>
                <scroll-view
                    scroll-y
                    class="scoll-y tui-skeleton"
                    @scrolltolower="scrolltolower"
                    :style="{ height: winHeight + 'px' }"
                >
                    <view :class="{ 'tui-order-list': scrollTop >= 0 }" class="tui-skeleton clearfix">
                        <!-- 空白页 -->
                        <empty
                            v-if="tabItem.loaded === true && tabItem.orderList.length === 0"
                            :typeIndex="currentTab"
                            :navbarHeight="navbarHeight"
                        ></empty>
                        <!-- 列表 -->
                        <view v-else class="tui-order-content">
                            <view
                                class="tui-order-item"
                                v-for="(order, orderIndex) in tabItem.orderList"
                                :key="orderIndex"
                            >
                                <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, sindex) in order.shopOrderList" :key="sindex">
                                    <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"
                                        @click.stop="detail(order.orderId)"
                                    >
                                        <view class="goods-pros-t">
                                            <view class="pros-img tui-skeleton-fillet">
                                                <image :src="pros.productImage" alt="" />
                                            </view>
                                            <view class="pros-product clearfix">
                                                <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="floor-item-act" v-if="pros.ladderPriceFlag === '1'">
                                                    <text class="tag tag-01" v-if="!pros.heUserId">自营</text>
                                                    <text class="tag tag-01" v-else>促销</text>
                                                    <text class="tag tag-02" @click.stop="clickPopupShow(pros, 2)"
                                                        >活动价</text
                                                    >
                                                </view>
                                                <view class="productprice">
                                                    <view class="price tui-skeleton-fillet"
                                                        ><text>￥{{ pros.price | NumFormat }}</text></view
                                                    >
                                                    <view class="count tui-skeleton-fillet"
                                                        ><text class="small">x</text>{{ pros.num }}</view
                                                    >
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </block>
                                <view class="order-footer">
                                    <view class="order-footer-bot">
                                        <view class="count tui-skeleton-fillet">共{{ order.productCount }}件商品</view>
                                        <view
                                            class="money tui-skeleton-fillet"
                                            v-if="order.status == 31 || order.status == 32 || order.status == 33"
                                        >
                                            已支付：<text class="color">¥{{ order.receiptAmount | NumFormat }}</text>
                                        </view>
                                        <view class="money tui-skeleton-fillet" v-else>
                                            待付总额：<text class="color"
                                                >¥{{ order.pendingPayments | NumFormat }}</text
                                            >
                                        </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>
            </swiper-item>
        </swiper>
        <!-- 操作弹窗 -->
        <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 authorize from '@/common/authorize.js'
import HeaderOrder from '@/components/cm-module/headerNavbar/header-order' //自定义导航
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'

export default {
    components: {
        HeaderOrder,
        empty,
        orderButton,
        modalLayer
    },
    data() {
        return {
            CustomBar: this.CustomBar, // 顶部导航栏高度
            orderTabBar: [
                { state: 0, text: '全部', orderList: [] },
                { state: 1, text: '待付款', orderList: [] },
                { state: 2, text: '待发货', orderList: [] },
                { state: 3, text: '已发货', orderList: [] },
                { state: 4, text: '退货/款', orderList: [] }
            ],
            screenTabBar: [{ type: 0, text: '全部订单' }, { type: 1, text: '用户订单' }, { type: 2, text: '自身订单' }],
            headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
            systeminfo: this.setSysteminfo(), //获取设备信息
            nvabarData: {
                //顶部自定义导航
                showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
                showSearch: 1,
                title: '我的订单' // 导航栏 中间的标题
            },
            winHeight: '', //窗口高度
            currentTab: 0, //预设当前项的值
            screenTab: 0, //筛选预设当前项的值
            scrollLeft: 0, //tab标题的滚动条位置
            userId: 0,
            orderData: [],
            btnoRderID: 0, //点击按钮传入的的订单ID
            pageNum: 1, //页数
            pageSize: 10, //条数
            scrollTop: 0,
            skeletonShow: true,
            isDelete: false,
            isClickChange: false,
            isModalLayer: false,
            isPayModel: false,
            loadding: false,
            pullUpOn: true,
            hasNextPage: false,
            pullFlag: true,
            navbarHeight: '',
            payModelData: {},
            hanldOrderData: {},
            modelType: 0,
            nomoreText: '上拉显示更多',
            isOnloadFlag: false,
            modal: false,
            modal2: false,
            modal3: false,
            OperationType: '',
            contentModalText: '',
            button: [
                {
                    text: '确定',
                    type: 'danger'
                }
            ],
            invalidList: []
        }
    },
    onLoad(e) {
        let self = this
        if (e.type === 'detele') {
            self.isDelete = true
        }
        self.currentTab = e.state
        self.isOnloadFlag = true
        self.getHeaderTopHeight() //设置自定义导航高度
        //  高度自适应
        uni.getSystemInfo({
            success: function(res) {
                let calc = res.windowHeight
                self.winHeight = calc - self.CustomBar
            }
        })
    },
    filters: {
        NumFormat(value) {
            //处理金额
            return Number(value).toFixed(2)
        }
    },
    methods: {
        goShophome(id) {
            this.$api.navigateTo(`/supplier/pages/user/my-shop?shopId=${id}`)
        },
        // 滚动切换标签样式
        onChange: function(e) {
            let index = e.target.current || e.detail.current
            if (this.isClickChange) {
                this.currentTab = index
                this.isClickChange = false
                return
            }
            this.isClickChange = false
            this.currentTab = index
            this.checkCor()
            this.pageNum = 1
            this.pullUpOn = true //切换时隐藏
            this.loadding = false //切换时隐藏
            this.nomoreText = ''
            if (!this.isOnloadFlag) {
                this.GetOrderDatainit(this.currentTab, 'tabChange')
            }
        },
        // 点击标题切换当前页时改变样式
        onClickTab: function(e) {
            let tabIndex = e.target.dataset.current || e.currentTarget.dataset.current
            if (this.currentTab === tabIndex) {
                return false
            } else {
                this.isClickChange = true
                this.currentTab = tabIndex
                this.pageNum = 1
                this.pullUpOn = true //切换时隐藏
                this.loadding = false //切换时隐藏
                this.GetOrderDatainit(this.currentTab)
            }
        },
        onClickScreenTab(index) {
            this.screenTab = index
            this.pageNum = 1
            this.pullUpOn = true //切换时隐藏
            this.loadding = false //切换时隐藏
            this.nomoreText = ''
            this.GetOrderDatainit(this.currentTab)
        },
        //判断当前滚动超过一屏时，设置tab标题滚动条。
        checkCor: function() {
            if (this.currentTab > 3) {
                //这里距离按实际计算
                this.scrollLeft = 300
            } else {
                this.scrollLeft = 0
            }
        },
        GetOrderDatainit(index, source) {
            /**
             * @订单初始化加载  仅加载第一页码
             * @param：orderState(订单状态:0全部,1待付款,2待发货,3已发货,4退货款)
             * @param：userId(用户ID)
             * @param：pageNum(页码数)
             * @param：pageSize(每页条数)
             * @param：organizeID(全局变量组织ID)
             */

            setTimeout(() => {
                this.skeletonShow = false
                this.isOnloadFlag = false
            }, 1500)
            let orderItem = this.orderTabBar[index]
            let state = orderItem.state
            if (source === 'tabChange' && orderItem.loaded === true) {
                //tab切换只有第一次需要加载数据
                return
            }
            setTimeout(() => {
                this.$api.getStorage().then(resolve => {
                    this.userId = resolve.userId
                    this.OrderService.QueryOrderDealerList({
                        orderState: index,
                        orderType: this.screenTab,
                        userId: resolve.userId,
                        pageNum: 1,
                        pageSize: this.pageSize
                    })
                        .then(response => {
                            let data = response.data
                            //loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
                            let orderList = data.list.filter(item => {
                                //添加不同状态下订单的表现形式
                                item = Object.assign(item, this.StateExpFormat(item.state))
                                return item
                            })
                            orderItem.orderList = []
                            orderList.forEach(item => {
                                orderItem.orderList.push(item)
                            })
                            this.$set(orderItem, 'loaded', true)
                            this.hasNextPage = data.hasNextPage
                            if (this.hasNextPage) {
                                this.pullUpOn = false
                                this.nomoreText = '上拉显示更多'
                            } else {
                                if (orderItem.orderList.length < 2) {
                                    this.pullUpOn = true
                                } else {
                                    this.pullUpOn = false
                                    this.nomoreText = '已至底部'
                                }
                            }
                        })
                        .catch(error => {
                            this.$util.msg(error.msg, 2000)
                        })
                })
            }, 600)
        },
        getOnReachBottomData(index) {
            //上拉加载
            this.pageNum += 1
            this.OrderService.QueryOrderDealerList({
                orderState: index,
                orderType: this.screenTab,
                userId: this.userId,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            })
                .then(response => {
                    let orderItem = this.orderTabBar[index]
                    let data = response.data
                    this.hasNextPage = data.hasNextPage
                    orderItem.orderList = orderItem.orderList.concat(data.list)
                    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.getOnReachBottomData(this.currentTab)
            }
        },
        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')
        },
        orderPriceToFixed(n) {
            let price = ''
            price = n.toFixed(2)
            return price
        },
        getHeaderTopHeight() {
            // 状态栏高度
            let statusBarHeight = this.systeminfo.statusBarHeight
            let headerPosi = this.headerBtnPosi
            let btnPosi = {
                // 胶囊实际位置，坐标信息不是左上角原点
                height: headerPosi.height,
                width: headerPosi.width,
                // 胶囊top - 状态栏高度
                top: headerPosi.top - statusBarHeight,
                // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
                bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
                // 屏幕宽度 - 胶囊right
                right: this.systeminfo.screenWidth - headerPosi.right
            }
            this.navbarHeight = headerPosi.bottom + btnPosi.bottom // 原胶囊bottom + 现胶囊bottom
        },
        setHeaderBtnPosi() {
            // 获得胶囊按钮位置信息
            let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
            return headerBtnPosi
        },
        setSysteminfo() {
            let systeminfo
            uni.getSystemInfo({
                // 获取设备信息
                success: res => {
                    systeminfo = res
                }
            })
            return systeminfo
        },
        PromotionsFormat(promo) {
            //促销活动类型数据处理
            if (promo != null) {
                if (promo.type == 1 && promo.mode == 1) {
                    return true
                } else {
                    return false
                }
            }
            return false
        },
        StateExpFormat(state) {
            //订单状态文字和颜色
            var HtmlStateText = '',
                stateTextObject = {
                    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.isModalLayer = false
        this.GetOrderDatainit(this.currentTab)
        // console.log(this.orderTabBar)
    }
}
</script>

<style lang="scss">
page {
    background-color: #ffffff;
}
/*tabbar start*/
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}
.order-section-top {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background: #ffffff;
    .tab-screen {
        height: 48rpx;
        width: 702rpx;
        padding: 20rpx 24rpx 30rpx 24rpx;
        .tab-screen-item {
            height: 48rpx;
            border-radius: 24rpx;
            background: #f7f7f7;
            margin-right: 48rpx;
            line-height: 48rpx;
            font-size: $font-size-26;
            color: #333333;
            text-align: center;
            padding: 0 24rpx;
            float: left;
            &.active {
                color: $color-system;
                background-color: #fff3f7;
            }
            &:last-child {
                margin-right: 0;
            }
        }
    }
}
.tab-view::before {
    content: '';
    position: absolute;
    border-bottom: 1rpx solid #eaeef1;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    bottom: 0;
    right: 0;
    left: 0;
}
.tab-view {
    width: 100%;
    height: 80rpx;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    white-space: nowrap;
}
.tab-bar-item {
    padding: 0;
    height: 80rpx;
    min-width: 80rpx;
    line-height: 80rpx;
    margin: 0 28rpx;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    .tab-bar-title {
        height: 80rpx;
        line-height: 80rpx;
        font-size: $font-size-28;
        color: $text-color;
    }
    .line {
        width: 40rpx;
        height: 4rpx;
        border-radius: 2rpx;
        position: absolute;
        bottom: 8rpx;
        left: 50%;
        margin-left: -20rpx;
        background-color: #ffffff;
    }
    &.active {
        .line {
            background-color: $color-system;
        }
        .tab-bar-title {
            color: $color-system !important;
        }
    }
}
.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;
    border-bottom: 1px solid #e1e1e1;
    .order-title-t {
        width: 100%;
        height: 48rpx;
        float: left;
        line-height: 48rpx;
        position: relative;
        .bage-icon {
            width: 50rpx;
            height: 50rpx;
            display: block;
            position: absolute;
            right: 0;
            top: 9rpx;
        }
        .bage-text {
            display: inline-block;
            font-size: $font-size-28;
            line-height: 48rpx;
            text-align: left;
            color: $text-color;
            .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: $text-color;
            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 {
    width: 100%;
    height: auto;
    padding: 24rpx 0;
    .pros-img {
        float: left;
        width: 210rpx;
        height: 100%;
        border-radius: 10rpx;
        margin: 0 26rpx 0 0;
        position: relative;
        image {
            width: 210rpx;
            height: 210rpx;
            border-radius: 10rpx;
            border: 1px solid #f3f3f3;
        }
    }
}
.pros-product {
    width: 460rpx;
    height: 100%;
    line-height: 36rpx;
    font-size: $font-size-26;
    position: relative;
    float: left;
    .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;
        margin: 10rpx 0 0 0;
    }
    .productprice {
        height: 48rpx;
        width: 100%;
        float: left;
        margin-top: 10rpx;
        .price {
            line-height: 48rpx;
            font-size: $font-size-28;
            width: 48%;
            color: $color-system;
            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: 30rpx;
        margin-top: 8rpx;
        float: left;
        .tag {
            display: inline-block;
            height: 32rpx;
            font-size: 22rpx;
            line-height: 30rpx;
            text-align: center;
            color: #f83c6c;
            float: left;
            margin-right: 10rpx;
            &.tag-02 {
                width: 80rpx;
                background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center no-repeat;
                background-size: contain;
            }
            &.tag-01 {
                width: 56rpx;
                color: #fff;
                background-color: #f83c6c;
                border-radius: 4rpx;
            }
        }
    }
}
.order-footer {
    width: 100%;
    height: 78rpx;
    float: left;
    margin-top: 20rpx;
    .order-footer-bot {
        width: 100%;
        float: left;
        height: 48rpx;
        line-height: 48rpx;
        font-size: $font-size-28;
        color: $text-color;
        .count {
            width: 50%;
            float: left;
            text-align: left;
            font-weight: bold;
        }
        .money {
            width: 50%;
            float: right;
            text-align: right;
            .color {
                color: $color-system;
                font-weight: bold;
            }
        }
    }
}
.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>