caimei-applets-mcare/pages/user/order/order-list.vue

<template>
    <view class="container" :style="{ paddingTop: navbarHeight + 'px' }">
        <!-- 自定义返回 -->
        <header-back
            :systeminfo="systeminfo"
            :navbar-data="nvabarData"
            :headerBtnPosi="headerBtnPosi"
            :isDelete="isDelete"
            @goSearchPath="handlSearchPath"
        ></header-back>
        <tui-skeleton
            v-if="skeletonShow"
            backgroundColor="#fafafa"
            borderRadius="10rpx"
            :isLoading="true"
            :loadingType="5"
        ></tui-skeleton>
        <template v-else>
            <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>
                    </view>
                </scroll-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" @touchmove.stop="">
                    <scroll-view scroll-y class="scoll-y tui-skeleton" @scrolltolower="scrolltolower">
                        <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">订单编号：{{ order.orderNo }}</text>
										</view>
										<view class="order-title-b">
											<view class="order-title-btxt tui-skeleton-fillet"
												>下单时间：{{ order.orderTime }}</view
											>
											<view class="order-title-tip tui-skeleton-fillet">{{
												StateExpFormat(order.status)
											}}</view>
										</view>
									</view> -->
                                    <block v-for="(shop, sindex) in order.orderProductList" :key="sindex">
                                        <view class="goods-title">
                                            <view class="title-text tui-skeleton-fillet">
                                                {{ shop.shopName }}
                                                <label class="iconfont icon-jinrudianpu"></label>
                                            </view>
                                            <view class="order-title-tip">{{
                                            	StateExpFormat(order.status)
                                            }}</view>
                                        </view>
                                        <view
                                            class="goods-item"
                                            @click.stop="detail(shop.shopOrderId, shop.orderId)"
                                        >
                                            <view class="goods-pros-t">
                                                <view class="pros-img tui-skeleton-fillet">
                                                    <image :src="shop.image" alt="" />
                                                </view>
                                                <view class="pros-product clearfix">
                                                    <view class="producttitle tui-skeleton-fillet">
                                                        {{ shop.name }}
                                                    </view>
                                                    <view
                                                        class="productspec tui-skeleton-fillet"
                                                        v-if="shop.productCategory != 2"
                                                    >
                                                        规格:{{ shop.productUnit }}
                                                    </view>
                                                    <view class="productprice">
                                                        <view class="price tui-skeleton-fillet">
                                                            <text>￥{{ shop.price | NumFormat }}</text>
                                                        </view>
                                                        <view class="count tui-skeleton-fillet">
                                                            <text class="small">x</text>
                                                            {{ shop.num }}
                                                        </view>
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                    </block>
                                    <view class="order-footer">
                                        <view class="order-footer-bot">
                                            <view class="count tui-skeleton-fillet">
                                                共{{ order.itemCount }}件商品
                                            </view>
                                            <view
                                                class="money tui-skeleton-fillet"
                                                v-if="order.status == 31 || order.status == 32 || order.status == 33"
                                            >
                                                已支付：
                                                <label style="color:#f94b4b ;">
                                                    ¥{{ order.receiptAmount | NumFormat }}
                                                </label>
                                            </view>
                                            <view class="money tui-skeleton-fillet" v-else>
                                                待付总额：
                                                <label style="color:#f94b4b ;">
                                                    ¥{{ order.obligation | NumFormat }}
                                                </label>
                                            </view>
                                        </view>
                                    </view>
                                    <!-- 底部button -->
                                    <order-button
                                        ref="orderButton"
                                        :status="order.status"
                                        :order="order"
                                        @shareConfirm="handButtonShareConfirm"
                                        @buttonConfirm="handButtonConfirm"
                                    ></order-button>
                                </view>
                                <!--加载loadding-->
                                <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
                                <tui-nomore
                                    :visible="!pullUpOn"
                                    :backgroundColor="'#ffffff'"
                                    :text="nomoreText"
                                ></tui-nomore>
                                <!--加载loadding-->
                            </view>
                        </view>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </template>
        <!-- 分享弹窗 -->
        <share-alert v-if="isShareModal" :orderId="handleOrderId" @shareConfirm="onShareAppMessage" />
        <!-- 提示弹窗 -->
        <tui-modal
            :show="modal"
            @click="handleClick"
            :content="contentModalText"
            :button="modalButton"
            color="#333"
            :size="32"
            shape="circle"
            :maskClosable="false"
        ></tui-modal>
        <!-- 透明模态层 -->
        <modal-layer v-if="isModalLayer"></modal-layer>
    </view>
</template>

<script>
import headerBack from '@/components/cm-module/headerNavbar/header-back' //自定义导航
import btSearch from '@/components/uni-search/bt-search.vue' //搜索
import orderButton from './components/details/orderListButton' //按钮
import modalLayer from '@/components/modal-layer'
import empty from './components/empty'
import shareAlert from '@/components/cm-module/modelAlert/shareAlert' //分享弹窗

export default {
    components: {
        headerBack,
        empty,
        btSearch,
        orderButton,
        modalLayer,
        shareAlert
    },
    data() {
        return {
            CustomBar: this.CustomBar, // 顶部导航栏高度
            headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
            systeminfo: this.setSysteminfo(), //获取设备信息
            winHeight: '', //窗口高度
            nvabarData: {
                //顶部自定义导航
                showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
                showSearch: 1,
                title: '我的订单' // 导航栏 中间的标题
            },
            orderTabBar: [
                { state: 0, text: '全部订单', orderList: [] },
                { state: 2, text: '待付款', orderList: [] },
                { state: 3, text: '待发货', orderList: [] },
                { state: 4, text: '已发货', orderList: [] },
                { state: 5, text: '退货/款', orderList: [] }
            ],
            currentTab: 0, //预设当前项的值
            scrollLeft: 0, //tab标题的滚动条位置
            listQuery: {
                orderState: 0,
                userId: 0,
                pageNum: 1,
                pageSize: 10
            },
            orderData: [],
            scrollTop: 0,
            skeletonShow: true,
            isDelete: false,
            isClickChange: false,
            isShareModal: false, //控制分享弹窗
            isModalLayer: false,
            loadding: false,
            pullUpOn: true,
            hasNextPage: false,
            pullFlag: true,
            navbarHeight: '',
            modelType: 0,
            nomoreText: '上拉显示更多',
            isOnloadFlag: false,
            handleOrderId: 0, //点击按钮传入的的订单ID
            handleModelEven: 0,
            modal: false,
            contentModalText: '订单查询失败,请稍候重试~', //操作文字提示语句
            modalButton: [
                {
                    text: '取消',
                    type: 'gray',
                    plain: true //是否空心
                },
                {
                    text: '确定',
                    customStyle: {
                        color: '#fff',
                        bgColor: '#F3B574'
                    },
                    plain: false
                }
            ]
        }
    },
    onLoad(e) {
        if (e.type === 'detele') {
            this.isDelete = true
        }
        const evStateMap = { 0: 0, 2: 1, 3: 2, 4: 3, 5: 4 }
        this.currentTab = evStateMap[e.state]
        console.log('currentTab', this.currentTab)
        this.isOnloadFlag = true
        this.getHeaderTopHeight() //设置自定义导航高度
        this.initStorage()
    },
    filters: {
        NumFormat(value) {
            //处理金额
            return Number(value).toFixed(2)
        }
    },
    methods: {
        async initStorage() {
            //初始化
            const usrInfo = await this.$api.getStorage()
            this.listQuery.userId = usrInfo.userId ? usrInfo.userId : 0
            this.getOrderDatainit(this.currentTab)
        },
        // 滚动切换标签样式
        onChange: function(e) {
            let tabIndex = e.target.current || e.detail.current
            if (this.isClickChange) {
                this.currentTab = tabIndex
                this.isClickChange = false
                return
            }
            this.isClickChange = false
            this.currentTab = tabIndex
            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.listQuery.pageNum = 1
                this.pullUpOn = true //切换时隐藏
                this.loadding = false //切换时隐藏
                this.getOrderDatainit(this.currentTab)
            }
        },
        //判断当前滚动超过一屏时，设置tab标题滚动条。
        checkCor: function() {
            if (this.currentTab > 3) {
                //这里距离按实际计算
                this.scrollLeft = 300
            } else {
                this.scrollLeft = 0
            }
        },
        async getOrderDatainit(index, source) {
            let orderItem = this.orderTabBar[index]
            if (source === 'tabChange' && orderItem.loaded === true) {
                //tab切换只有第一次需要加载数据
                return
            }
            try {
                this.listQuery.orderState = this.orderTabBar[index].state
                const res = await this.OrderService.QueryOrderList(this.listQuery)
                const data = res.data
                const orderList = data.list.filter(item => {
                    //添加不同状态下订单的表现形式
                    item = Object.assign(item, this.StateExpFormat(item.status))
                    return item
                })
                orderItem.orderList = []
                orderList.forEach(item => {
                    orderItem.orderList.push(item)
                })
                //loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
                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 = '已至底部'
                    }
                }
                this.skeletonShow = false
                this.isOnloadFlag = false
            } catch (error) {
                this.$util.msg(error.msg, 2000)
            }
        },
        async getOnReachBottomData(index) {
            //上拉加载
            try {
                this.listQuery.pageNum += 1
                this.listQuery.orderState = this.orderTabBar[index].state
                const res = await this.OrderService.QueryOrderList(this.listQuery)
                const data = res.data
                const orderItem = this.orderTabBar[index]
                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(shopOrderId, orderId) {
            //订单详情跳转
            this.isModalLayer = true
            this.$api.navigateTo(`/pages/user/order/order-details?state=${this.currentTab}&shopOrderId=${shopOrderId}`)
        },
        handButtonConfirm(data) {
            console.log(data)
            //获取点击
            this.handleOrderId = data.order.shopOrderId
            switch (data.type) {
                case 'cancel':
                    //取消订单
                    this.modal = true
                    this.contentModalText = '确认取消该订单吗？'
                    this.handleModelEven = 1
                    break
                case 'query':
                    this.$api.navigateTo('/pages/user/order/order-logistics?orderId=' + this.handleOrderId)
                    break
                case 'upload':
                    this.$api.navigateTo('/pages/user/order/order-addpay?orderId=' + this.handleOrderId)
                    break
                case 'confirm':
                    //确认收货
                    this.modal = true
                    this.contentModalText = '确认收货吗？'
                    this.handleModelEven = 2
                    break
                case 'pay':
                    this.orderPaymentValidation(data)
                    break
            }
        },
        async orderPaymentValidation(data) {
            //监听根据付款状态做操作
            try {
                const res = await this.OrderService.OrderPaymentValidation({ shopOrderId: this.handleOrderId })
                this.$api.navigateTo(`/pages/user/order/order-pay-list?shopOrderId=${res.data.shopOrderId}`)
                // if (res.data.onlinePayFlag == 1) {
                //     // 只能线下
                //     this.$api.navigateTo(`/pages/user/pay/card-under?orderId=${this.handleOrderId}`)
                // } else {
                //     this.$api.navigateTo(`/pages/user/order/order-pay-list?orderId=${this.handleOrderId}`)
                // }
            } catch (error) {
                this.$util.msg(error.msg, 2000)
            }
        },
        handleClick(e) {
            //确认操作
            if (e.index == 1) {
                switch (this.handleModelEven) {
                    case 1: //取消订单
                        this.cancelOrder()
                        break
                    case 2: //确认收货
                        this.confirmReceipt()
                        break
                }
            }
            this.modal = false
        },
        async confirmReceipt() {
            //确认收货
            try {
                const res = await this.OrderService.ConfirmReceipt({ shopOrderId: this.handleOrderId })
                this.$util.msg(res.msg, 2000, true, 'success')
                setTimeout(() => {
                    this.getOrderDatainit(this.currentTab)
                }, 2000)
            } catch (error) {
                this.$util.msg(error.msg, 2000)
            }
        },
        async cancelOrder() {
            //取消订单
            try {
                const res = await this.OrderService.CancelOrder({ shopOrderId: this.handleOrderId, userIdentity: 0 })
                this.$util.msg(res.msg, 2000, true, 'success')
                setTimeout(() => {
                    this.getOrderDatainit(this.currentTab)
                }, 2000)
            } catch (error) {
                this.$util.msg(error.msg, 2000)
            }
        },
        handlSearchPath() {
            this.$api.navigateTo('/pages/search/search-order')
        },
        handButtonShareConfirm(data) {
            this.handleOrderId = data
        },
        onShareAppMessage(res) {
            console.log(res)
            //分享转发
            this.isShareModal = false
            if (res.from === 'button') {
                // 来自页面内转发按钮
            }
            return {
                title: '您有新的分享订单，快来查看吧~',
                path: `/pages/user/order/order-sharelogin?shopOrderId=${this.handleOrderId}&userId=${
                    this.listQuery.userId
                }`,
                imageUrl: 'https://static.caimei365.com/app/mini-mcare/icon/icon_shareOrder@2x.png'
            }
        },
        orderPriceToFixed(n) {
            let price = ''
            price = n.toFixed(2)
            return price
        },
        getHeaderTopHeight() {
            // 状态栏高度
            let self = this
            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
            //  高度自适应
            uni.getSystemInfo({
                success: function(res) {
                    let calc = res.windowHeight
                    self.winHeight = calc - self.CustomBar
                }
            })
        },
        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 = {
                    0: '待确认',
                    2: '交易完成',
                    4: '已关闭',
                    5: '交易全退',
                    6: '交易全退',
                    11: '待付款待发货',
                    12: '待付款部分发货',
                    13: '待付款已发货',
                    21: '部分付款待发货',
                    22: '部分付款部分发货',
                    23: '部分付款已发货',
                    31: '已付款待发货',
                    32: '已付款部分发货',
                    33: '已付款已发货'
                }
            Object.keys(stateTextObject).forEach(function(key) {
                if (key == state) {
                    HtmlStateText = stateTextObject[key]
                }
            })
            return HtmlStateText
        },
        handleBeanlClick() {
            //关闭采美豆弹窗
            this.isActivityBean = false
            this.getOrderDatainit(this.currentTab)
        }
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop
    },
    onShow() {
        this.isModalLayer = false
    }
}
</script>

<style lang="scss">
/*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-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;
    border-top: 1px solid #f7f7f7;
}
.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;
}
.tab-bar-title {
    height: 80rpx;
    line-height: 80rpx;
    font-size: $font-size-28;
    color: $text-color;
}

.active {
    border-bottom: 6rpx solid $color-system;
}

.active .tab-bar-title {
    color: $color-system !important;
}

/*tabbar end*/
.scoll-y {
    height: 100%;
}
page {
    background: #f7f7f7;
}
.container {
    padding-bottom: env(safe-area-inset-bottom);
    height: auto;
    position: relative;
}
.tui-order-content {
    width: 100%;
    height: auto;
}
.tui-order-list {
    margin-top: 90rpx;
    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;
    .order-title-t {
        width: 100%;
        height: 68rpx;
        float: left;
        line-height: 68rpx;
        position: relative;
        .bage-icon {
            width: 50rpx;
            height: 50rpx;
            display: block;
            position: absolute;
            right: 0;
            top: 9rpx;
        }
        .bage-buss {
            display: inline-block;
            width: 72rpx;
            height: 30rpx;
            background: radial-gradient(circle, rgba(255, 39, 180, 1) 0%, rgba(193, 77, 245, 1) 100%);
            border-radius: 4rpx;
            line-height: 30rpx;
            font-size: $font-size-22;
            text-align: center;
            color: #ffffff;
        }
        .bage-auto {
            display: inline-block;
            width: 72rpx;
            height: 30rpx;
            background: radial-gradient(circle, rgba(255, 180, 39, 1) 0%, rgba(245, 142, 77, 1) 100%);
            border-radius: 4rpx;
            line-height: 30rpx;
            font-size: $font-size-22;
            text-align: center;
            color: #ffffff;
        }
        .bage-text {
            display: inline-block;
            font-size: $font-size-28;
            line-height: 68rpx;
            text-align: left;
            color: $text-color;
            margin-left: 10rpx;
        }
    }
    .order-title-b {
        width: 100%;
        height: 40rpx;
        float: left;
        margin-top: 8rpx;
        .order-title-btxt {
            float: left;
            font-size: $font-size-28;
            line-height: 40rpx;
            color: #999999;
            text-align: lef;
        }
        .order-title-tip {
            float: right;
            font-size: $font-size-28;
            line-height: 40rpx;
            text-align: right;
            color: #ff2a2a;
        }
    }
}
.goods-title {
    width: 100%;
    height: 56rpx;
    float: left;
    margin-top: 10rpx;
    .order-title-tip {
        float: right;
        font-size: $font-size-28;
        line-height: 40rpx;
        text-align: right;
        color: #ff2a2a;
    }
    .floor-item-act {
        height: 56rpx;
        text-align: center;
        box-sizing: border-box;
        float: left;
        padding: 10rpx 0;
        margin-right: 12rpx;
    }
    .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;
        .iconfont {
            color: #999999;
            font-size: 28rpx;
            margin-left: 10rpx;
        }
        .paymenttext {
            color: #f9a94b;
            font-size: $font-size-22;
            margin-left: 20rpx;
        }
    }
}
.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;
        .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: 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: 30rpx 0;
    }
    .productprice {
        height: 48rpx;
        width: 100%;
        float: left;
        .price {
            line-height: 48rpx;
            font-size: $font-size-28;
            width: 48%;
            color: #ff2a2a;
            float: left;
            font-weight: bold;
            &.none {
                text-decoration: line-through;
                color: #999999;
            }
        }
        .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;
    }
}
.order-footer {
    width: 100%;
    height: 78rpx;
    float: left;
    margin-top: 20rpx;
    .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;
        color: $text-color;
        .count {
            width: 50%;
            float: left;
            text-align: left;
            font-weight: bold;
        }
        .money {
            width: 50%;
            float: right;
            text-align: right;
        }
    }
}
</style>