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="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>
        </view>
        <!-- 订单详细信息 -->
        <order-information :orderInfo="orderInfo"></order-information>
        <!-- 底部操作按钮 -->
        <view class="control fixed-bottom" v-if="orderInfo.userId == userId">
            <order-contror :orderInfo="orderInfo" @confirm="handleConfirmClick"></order-contror>
            <cm-safe-area-bottom></cm-safe-area-bottom>
        </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: {}
        }
    },
    computed: {
        ...mapGetters(['userId'])
    },
    onLoad(options) {
        this.orderId = options.orderId
        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)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.order-detail {
    margin-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: 0 24rpx;
    padding-top: 12rpx;
}

.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;
                }
            }
        }
    }
}
</style>