caimei-applets-hehe/pages/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">
                                    <template v-if="product.activeStatus">
                                        <view class="tag type1" v-if="userId === product.heUserId">促销</view>
                                        <view class="tag type1" v-else>自营</view>
                                        <view
                                            class="tag type2"
                                            v-if="product.ladderList && product.ladderList.length > 0"
                                        >
                                            活动价
                                        </view>
                                    </template>
                                </view>
                                <view class="price">
                                    <text class="active">￥{{ product.price | formatPrice }}</text>
                                    <text class="deleted">￥{{ product.normalPrice | formatPrice }}</text>
                                </view>
                            </view>
                        </view>
                    </template>
                </view>
                <view class="total">
                    <text v-if="order.eachDiscount">优惠：￥{{ order.eachDiscount }}</text>
                    <text v-if="order.receiptAmount">已付：￥{{ order.receiptAmount }}</text>
                </view>
                <view class="foot" v-if="order.receiptStatus !== 3">
                    <view class="price">
                        <text>待付：</text>
                        <text class="active">￥{{ order.restAmount | formatPrice }}</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>￥50.00</text></view>
						<view class="count">×7</view>
					</view>
				</view>
			</view>
			<view class="total">
				<text>优惠：￥20.00</text>
				<text>已付：￥0</text>
			</view>
			<view class="foot">
				<view class="price">
					<text>待付：</text>
					<text class="active">￥100.00</text>
				</view>
				<view class="submit" @click="onPay">付款</view>
			</view>
		</view> -->

        <!-- 操作弹窗 -->
        <tui-modal
            :show="modal"
            content="确认支付？"
            :size="32"
            :maskClosable="false"
            color="#333"
            shape="circle"
            @click="handleModalConfirm"
        ></tui-modal>

        <!-- 加载框 -->
        <cm-loading :visible="isSubLoading" :text="loadingText"></cm-loading>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
import wechatPay from './mixins/wechatPay.js'
import CmLoading from '@/components/cm-module/cm-loading/cm-loading.vue'
export default {
    mixins: [wechatPay],
    components: {
        CmLoading
    },
    data() {
        return {
            orderId: '',
            modal: false,
            orderList: [],
            hanldOrder: {
                order: {}
            }
        }
    },
    computed: {
        ...mapGetters(['userId'])
    },
    onLoad(option) {
        this.orderId = option.orderId
        this.getOrderDetail()
        this.orderPaySuccess()
    },
    methods: {
        // 支付回调执行函数
        orderPaySuccess() {
            this.$on('orderPaySuccess', () => {
                const orderInfo = this.hanldOrder.order
                this.getOrderDetail()
                if (orderInfo.collageFlag) {
                    uni.navigateTo({ url: `/pages/fight-order/fight-detail?collageId=${orderInfo.collageId}` })
                } else {
                    uni.redirectTo({ url: '/pages/order/success' })
                }
            })
        },
        handleModalConfirm(e) {
            this.modal = false
            if (!e.index) return
            this.miniWxPayFor(this.hanldOrder.order)
        },
        // 子订单支付
        onPayOrder(orderInfo) {
            orderInfo.payableAmount = orderInfo.restAmount
            this.hanldOrder.order = orderInfo
            this.modal = true
        },
        getOrderDetail() {
            this.OrderService.QueryOrderDetails({ orderId: this.orderId })
                .then(res => {
                    this.orderList = res.data.shopOrderList
                })
                .catch(err => {
                    this.$util.modal('提示', '订单查询失败，请稍后重试~', '确定', '', false, () => {
                        this.$api.switchTabTo('/pages/tabBar/index/index')
                    })
                })
        }
    }
}
</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;
                    }
                    .tags {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        width: 100%;
                        height: 30rpx;
                        .tag {
                            margin-right: 8rpx;
                            font-size: 22rpx;
                            height: 30rpx;
                            line-height: 30rpx;
                            text-align: center;

                            &.type1 {
                                padding: 0 8rpx;
                                background: #f83c6c;
                                border-radius: 4rpx;
                                color: #fff;
                            }

                            &.type2 {
                                width: 80rpx;
                                color: #f83c6c;
                                background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top
                                    center no-repeat;
                                background-size: contain;
                            }
                            &.type3 {
                                width: 80rpx;
                                background: linear-gradient(270deg, #ff457b 0%, #b03bb8 51%, #6431f2 100%);
                                color: #fff;
                                border-radius: 4rpx;
                            }
                            &.type4 {
                                border: 1rpx solid #f83c6c;
                                padding: 0 6rpx;
                                color: #f83c6c;
                                border-radius: 4rpx;
                            }
                        }
                    }
                }
                .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>