caimei-applets-store/pages/views/order/order-detail.vue

<template>
    <view class="order-detail">
        <view class="order-top sticky-top">
            <view class="order-status">{{ stateExpFormat(orderInfo.status) }}</view>
            <!-- 收货地址 -->
            <order-choose-address :addressInfo="userInfo" :disabled="true"></order-choose-address>
        </view>
        <!-- 特殊商品退货须知 -->
        <view class="return-instructions">
            为保障会员权益，特殊类商品（包括耗材/配件/私密商品等），除外观跟质量问题之外，其他原因均不支持退货！
        </view>
        <!-- 订单商品列表-->
        <view class="shop-list">
            <view class="shop-section" v-for="shopInfo in shopOrderList" :key="shopInfo.shopId">
                <order-supplier-area :shopInfo="shopInfo"></order-supplier-area>
                <tui-divider :height="48"></tui-divider>
                <!-- 商品统计 -->
                <!-- <view class="total">
                    <view class="count">共{{ shopInfo.itemCount }}件商品</view>
                    <view class="price">
                        <text class="label">商品总额：</text>
                        <text>￥{{ shopInfo.totalAmount | priceFormat }}</text>
                    </view>
                </view> -->
                <view class="remark">
                    <text class="label">留言：</text>
                    <text class="content">{{ shopInfo.note }}</text>
                </view>
                <tui-divider :height="48"></tui-divider>
                <view class="description">
                    <view class="collapse-content" v-if="isCollapse">
                        <view class="row">
                            <text class="label">商品总额：</text>
                            <text class="content">￥{{ shopInfo.needPayAmount | priceFormat }}</text>
                        </view>
                        <view class="row">
                            <text class="label">优惠：</text>
                            <text class="content">￥{{ shopInfo.eachDiscount | priceFormat }}</text>
                        </view>
                        <view class="row">
                            <text class="label">应付金额：</text>
                            <text class="content">￥{{ shopInfo.realPay | priceFormat }}</text>
                        </view>
                        <view class="row">
                            <text class="label">已付金额：</text>
                            <text class="content">￥{{ shopInfo.receiptAmount | priceFormat }}</text>
                        </view>
                    </view>
                    <view class="row">
                        <text class="label active">待付金额：</text>
                        <text class="content active">￥{{ shopInfo.restAmount | priceFormat }}</text>
                    </view>
                    <view class="collapse" :class="isCollapse ? 'arrowup' : 'arrowdown'" @click="onCollapse">
                        {{ isCollapse ? '收起' : '展开' }}
                    </view>
                </view>
            </view>
        </view>
        <!-- 订单详细信息 -->
        <order-information :orderInfo="orderInfo"></order-information>
        <!-- 底部操作按钮 -->
        <view class="control fixed-bottom" v-if="orderInfo.userId == userId">
            <simple-safe-view>
                <order-contror :orderInfo="orderInfo" @confirm="handleConfirmClick"></order-contror>
            </simple-safe-view>
        </view>
        <!-- 操作弹窗 -->
        <tui-modal :show="modal" :content="modalText" @click="handleModalConfirm"></tui-modal>
        <!-- 失效商品列表 -->
        <order-invalid-modal
            :goodsList="invalidList"
            :visible="buyAgainModal"
            @confirm="buyAgainModalClick"
            @cancel="buyAgainModalHide"
        ></order-invalid-modal>
    </view>
</template>

<script>
import { fetchOrderDetail } from '@/services/api/order.js'
import orderList from '@/pages/views/order/mixins/orderList.js'
import wechatPay from '@/pages/views/order/mixins/wechatPay.js'
import { mapGetters } from 'vuex'
export default {
    mixins: [orderList, wechatPay],
    data() {
        return {
            orderId: 0,
            discernReceiptList: [],
            orderInfo: {},
            shopOrderList: [],
            userInfo: {},
            isCollapse: false
        }
    },
    computed: {
        ...mapGetters(['userId'])
    },
    onLoad(options) {
        this.orderId = options.orderId
        this.fetchOrderDetail()
        this.$on('orderAction', (type) => {
            if(type === 'delete'){
                this.$router.navigateBack(1)
            }else{
                this.fetchOrderDetail()
            }
        })
    },
    methods: {
        async fetchOrderDetail() {
            try {
                const res = await fetchOrderDetail({ orderId: this.orderId })
                this.discernReceiptList = res.data.discernReceiptList
                this.orderInfo = res.data.order
                this.shopOrderList = res.data.shopOrderList
                this.userInfo = res.data.userInfo
            } catch (e) {
                console.log(e)
            }
        },
        onCollapse() {
            this.isCollapse = !this.isCollapse
        }
    }
}
</script>

<style lang="scss" scoped>
.order-detail {
    padding-bottom: 150rpx;
}

.order-top {
    .order-status {
        font-size: 26rpx;
        color: #f83c6c;
        background-color: #fff;
        padding: 10rpx 24rpx 0;
        line-height: 30rpx;
    }
}

.control {
    @extend .cm-flex-center;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    background-color: #fff;
    box-sizing: border-box;
    padding: 12rpx 24rpx;
    border-top: 1px solid #eee;
}

.return-instructions{
    font-size: 26rpx;
    color: #E15616;
    line-height: 42rpx;
    padding: 32rpx 50rpx;
    background-color: #FFFAF8;
    text-align: justify;
}

.shop-list {
    .shop-section {
        padding: 24rpx;
        margin: 24rpx 0;
        background-color: #fff;

        .total {
            display: flex;
            justify-content: space-between;
            align-items: center;

            font-size: 26rpx;
            color: #333333;

            .count {
                font-weight: bold;
            }

            .price {
                color: #ff457b;

                .label {
                    color: #333333;
                }
            }
        }
    }

    .remark {
        font-size: 26rpx;
        color: #333333;
        padding: 0 24rpx;
        margin: 8rpx 0;
    }
    .description {
        overflow: hidden;
        padding: 0 24rpx;
        font-size: 26rpx;
        .row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 16rpx 0;
            .label {
                color: #999999;

                &.active {
                    color: #333333;
                }
            }
            .content {
                color: #333333;

                &.active {
                    color: #ff457b;
                }
            }
        }

        .collapse {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 168rpx;
            height: 48rpx;
            margin: 24rpx auto 40rpx;
            border: 1rpx solid #e1e1e1;
            border-radius: 8rpx;
            font-size: 24rpx;
            color: #b2b2b2;
            &.arrowdown,
            &.arrowup {
                &::after {
                    content: '';
                    display: block;
                    width: 30rpx;
                    height: 30rpx;
                    margin-left: 6rpx;
                    background-repeat: no-repeat;
                    background-size: 30rpx;
                    background-position: center;
                    background-image: url(https://static.caimei365.com/app/mini-hehe/icon/icon-arrowdown.png);
                }
            }
            &.arrowup {
                &::after {
                    transform: rotateZ(180deg);
                }
            }
        }
    }
}
</style>