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

<template>
    <view class="order-pay">
        <view class="top-tip">请对每家店铺分别进行付款</view>
        <template v-for="order in orderList">
            <view class="shop-info" :key="order.shopId">
                <view class="shop-name">{{ order.shopName }}</view>
                <view class="product-list">
                    <template v-for="product in order.orderProductList">
                        <view class="product" :key="product.orderProductId">
                            <image class="cover" :src="product.productImage" mode="widthFix"></image>
                            <view class="content">
                                <view class="count">×{{ product.num }}</view>
                                <view class="title">{{ product.name }}</view>
                                <view class="unit">规格：{{ product.productUnit }}</view>
                                <view class="tags">
                                    <!-- 促销 自营 -->
                                    <view class="tag cx" v-if="userId === product.heUserId">促销</view>
                                    <view class="tag cx" v-else>自营</view>
                                    <!-- 拼团价  活动价  限时特价  券后价   -->
                                    <view class="tag pt" v-if="isCollagePrice(product)">拼团价</view>
                                    <view class="tag hd" v-else-if="isActivityPrice(product)">活动价</view>
                                    <view class="tag other" v-else-if="isDiscountPrice(product)">限时特价</view>
                                    <view class="tag other" v-else-if="product.couponStatus > 1">
                                        {{ product.couponInfo }}
                                    </view>
                                    <view class="tag other" v-else-if="product.couponStatus > 0">券后价</view>
                                </view>
                                <view class="price">
                                    <text class="active">￥{{ product.price | priceFormat }}</text>
                                    <text class="deleted" v-if="product.price < product.normalPrice">
                                        ￥{{ product.normalPrice | priceFormat }}
                                    </text>
                                </view>
                            </view>
                        </view>
                    </template>
                </view>
                <view class="total">
                    <text>优惠：￥{{ order.eachDiscount | priceFormat }}</text>
                    <text>已付：￥{{ order.receiptAmount | priceFormat }}</text>
                </view>
                <view class="foot" v-if="order.receiptStatus !== 3">
                    <view class="price">
                        <text>待付：</text>
                        <text class="active">￥{{ order.restAmount | priceFormat }}</text>
                    </view>
                    <view class="submit" @click="onPayOrder(order)">付款</view>
                </view>
            </view>
        </template>

        <!-- <view class="shop-info">
            <view class="shop-name">采美快递物流商</view>
            <view class="product-list">
                <view class="product">
                    <image
                        class="cover"
                        src="https://static.caimei365.com/app/mini-hehe/icon/icon-logistics.png"
                        mode="widthFix"
                    ></image>
                    <view class="content between">
                        <view class="title">运费</view>
                        <view class="price"><text>￥0</text></view>
                        <view class="count">×1</view>
                    </view>
                </view>
            </view>
            <view class="foot">
                <view class="price">
                    <text>待付：</text>
                    <text class="active">￥0</text>
                </view>
            </view>
        </view> -->

        <!-- 操作弹窗 -->
        <tui-modal :show="modal" content="确认支付？" :maskClosable="false" @click="handleModalConfirm"></tui-modal>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
import wechatPay from './mixins/wechatPay.js'
import { fetchOrderDetail } from '@/services/api/order.js'
export default {
    mixins: [wechatPay],
    data() {
        return {
            orderId: '',
            modal: false,
            orderList: [],
            orderInfo: {}
        }
    },
    computed: {
        ...mapGetters(['userId'])
    },
    onLoad(option) {
        this.orderId = option.orderId
        this.getOrderDetail() // 获取订单支付列表
        this.orderPaySuccess() // 支付回调执行函数
    },
    methods: {
        // 支付成功回调
        orderPaySuccess() {
            this.$on('orderPaySuccess', orderInfo => {
                if (orderInfo.collageFlag) {
                    this.$router.redirectTo(`share-buy/share-buy-detail?collageId=${orderInfo.collageId}`)
                } else {
                    uni.setStorageSync('PAY_ORDER_INFO', orderInfo)
                    this.$router.redirectTo('order/pay-success')
                }
            })
        },
        // 确认支付
        handleModalConfirm(e) {
            this.modal = false
            if (!e.index) return
            this.miniWxPayFor(this.orderInfo)
        },
        // 子订单支付
        onPayOrder(orderInfo) {
            orderInfo.payableAmount = orderInfo.restAmount
            this.orderInfo = orderInfo
            this.modal = true
        },
        // 获取订单支付列表
        async getOrderDetail() {
            try {
                const { data } = await fetchOrderDetail({ orderId: this.orderId })
                // 如果该订单为拼团订单
                if (data.order.collageFlag) {
                    this.orderList = data.shopOrderList.map(order => {
                        order.collageFlag = data.order.collageFlag
                        order.collageId = data.order.collageId
                        order.collageStatus = data.order.collageStatus
                        order.collageEndTime = data.order.collageEndTime
                        return order
                    })
                } else {
                    this.orderList = data.shopOrderList.map(order => {
                        order.shareFlag = data.order.shareFlag
                        return order
                    })
                }
            } catch (e) {
                console.log('获取订单信息失败')
                console.log(e)
            }
        },
        // 活动价
        isActivityPrice(product) {
            return product.activeStatus > 0 || product.actProduct === '1'
        },
        // 拼团价
        isCollagePrice(product) {
            return product.collageStatus > 0 || product.actProduct === '2'
        },
        // 限时特价
        isDiscountPrice(product) {
            return product.discountStatus > 0 || product.actProduct === '3'
        }
    }
}
</script>

<style lang="scss" scoped>
.order-pay {
    min-height: 100vh;
    background: #f7f7f7;
    .top-tip {
        position: sticky;
        top: 0;
        z-index: 99;
        width: 750rpx;
        height: 80rpx;
        line-height: 80rpx;
        padding: 0 24rpx;
        background: #fff3f7;
        color: #ff457b;
        font-size: 26rpx;
        box-sizing: border-box;
    }

    .shop-info {
        padding: 32rpx 24rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        .shop-name {
            font-size: 30rpx;
            color: #333333;
            font-weight: bold;
        }
        .product-list {
            .product {
                display: flex;
                margin: 20rpx 0;
                .cover {
                    width: 180rpx;
                    height: 180rpx;
                    border-radius: 8rpx;
                    background-color: #f7f7f7;
                }
                .content {
                    position: relative;
                    width: 500rpx;
                    margin-left: 16rpx;

                    .count {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        font-size: 26rpx;
                        color: #666;
                    }

                    &.between {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                    }

                    .title {
                        font-size: 28rpx;
                        color: #333333;
                        text-align: justify;
                        height: 72rpx;
                        line-height: 36rpx;
                    }
                    .unit {
                        font-size: 20rpx;
                        color: #999999;
                        margin: 8rpx 0;
                    }
                }
                .price {
                    font-size: 26rpx;
                    .active {
                        color: #ff457b;
                    }

                    .deleted {
                        margin-left: 24rpx;
                        font-size: 24rpx;
                        color: #999;
                        text-decoration: line-through;
                    }
                }
            }
        }
        .total {
            padding-left: 220rpx - 24rpx;
            margin: 16rpx 0 20rpx;
            font-size: 26rpx;
            color: #333;

            text {
                &:nth-child(2) {
                    margin-left: 56rpx;
                }
            }
        }
        .foot {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .price {
                font-size: 26rpx;
                color: #333333;

                .active {
                    color: #ff457b;
                }
            }
            .submit {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 160rpx;
                height: 64rpx;
                margin-left: 40rpx;
                background: linear-gradient(90deg, #fa55bf 0%, #f83c6c 100%);
                color: #ffffff;
                border-radius: 32rpx;
                font-size: 26rpx;
            }
        }
    }
}
</style>