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

<template>
    <view class="container cashier">
        <tui-skeleton
            v-if="skeletonShow"
            backgroundColor="#fafafa"
            borderRadius="10rpx"
            :isLoading="true"
            :loadingType="5"
        ></tui-skeleton>
        <template v-else>
            <view class="pay-content">
                <view class="pay-list" v-for="(list, index) in list" :key="index">
                    <view class="pay-list-title">{{ list.shopName }}</view>
                    <view class="pay-list-goods" v-for="(pros, prosIndex) in list.orderProductList" :key="prosIndex">
                        <view class="pay-list-image"><image :src="pros.image" class="image" mode=""></image></view>
                        <view class="pay-list-info">
                            <view class="info-title">{{ pros.name }}</view>
                            <view class="info-view" v-if="pros.productUnit != ''">
                                规格:{{ pros.productUnit ? pros.productUnit : '' }}
                            </view>
                            <!-- 							<view class="info-view" v-if="pros.productCode != '' && pros.productCode != null">
								商品编码:{{ pros.productCode ? pros.productCode : '' }}
							</view> -->
                            <view class="info-price">
                                <view class="price">￥{{ pros.price | NumFormat }}</view>
                                <view class="count">
                                    <text class="sm">X</text>
                                    {{ pros.num }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="pay-list-msg">
                        <view class="list-msg" >
                            运费:
                            <text class="text">{{ list.postageInfo }}</text>
                        </view>
                        <view class="list-msg" v-if="Number(list.receiptAmount) > 0">
                            已付:
                            <text class="text">￥{{ list.receiptAmount | NumFormat }}</text>
                        </view>
                        <view class="list-msg" v-if="Number(list.obligation) > 0">
                            待付:
                            <text class="text red">￥{{ list.obligation | NumFormat }}</text>
                        </view>
                        <!-- 						<view class="list-msg" v-if="list.eachDiscount > 0"
							>优惠:<text class="text">￥{{ list.eachDiscount | NumFormat }}</text></view
						> -->
                    </view>
                    <!-- 					<view class="pay-list-btn">
						<view class="btn" v-if="list.receiptStatus != 3" @click="handlePayOrder(list.shopOrderId)">付款</view>
						<view class="list-msg" v-if="list.obligation > 0"
							>待付:<text class="text red">￥{{ list.obligation | NumFormat }}</text></view
						>
					</view> -->
                    <view class="pay-list-btn pay-btn">
                        <view
                            class="btn"
                            @click="handlePayunder(list.shopOrderId)"
                            v-if="list.onlinePay === 0 || list.onlinePay === 2"
                        >
                            线下转账
                        </view>
                        <view
                            class="btn"
                            @click="handlePayOrder(list.shopOrderId)"
                            v-if="list.onlinePay === 0 || list.onlinePay === 1"
                        >
                            线上支付
                        </view>
                    </view>
                </view>
            </view>
        </template>
    </view>
</template>

<script>
export default {
    data() {
        return {
            orderId: 0,
            showPayUnder: false,
            skeletonShow: true,
            list: []
        }
    },
    onLoad(option) {
        this.initData(option)
    },
    filters: {
        NumFormat(value) {
            //处理金额
            if (value) {
                return Number(value).toFixed(2)
            } else {
                return '0.00'
            }
        }
    },
    methods: {
        initData(e) {
            console.log(e)
            this.orderId = e.orderId
            this.payOrderId = '#' + e.orderId + '#'
            this.PayOrderShoporders(this.orderId)
        },
        async PayOrderShoporders(orderId) {
            try {
                const res = await this.PayService.PayOrderShoporders({ orderId: orderId })
                this.list = res.data
                // this.PayOrderCheckoutCounter(orderId)
                this.skeletonShow = false
            } catch (error) {
                this.$util.msg(error.msg, 2000)
            }
        },
        handlePayOrder(shopOrderId) {
            this.$api.navigateTo(`/pages/user/pay/card-order?shopOrderId=${shopOrderId}`)
        },
        handlePayunder(shopOrderId) {
            this.$api.navigateTo(
                `/pages/user/pay/card-under?shopOrderId=${shopOrderId}`
            )
        }
    },
    onShow() {}
}
</script>

<style lang="scss">
page {
    height: auto !important;
    background-color: #f7f7f7;
}
.cashier {
    width: 100%;
}
.pay-title {
    width: 100%;
    height: 144rpx;
    box-sizing: border-box;
    padding: 24rpx 24rpx 0 24rpx;
    background-color: #ffffff;
    .content {
        width: 100%;
        height: 100%;
        position: relative;
        box-sizing: border-box;
        padding: 20rpx 100rpx 20rpx 24rpx;
        background: url(https://static.caimei365.com/app/img/bg/pay-bgtitle@2x.png) no-repeat;
        background-size: 100% 100%;
        line-height: 40rpx;
        font-size: $font-size-26;
        text-align: justify;
        color: $color-system;
        .content-icon {
            width: 40rpx;
            height: 100%;
            position: absolute;
            top: 0;
            right: 24rpx;
            line-height: 120rpx;
            .iconfont {
                font-size: $font-size-34;
                color: $color-system;
                text-align: right;
            }
        }
    }
}
.pay-content {
    width: 100%;
    height: auto;
    .pay-list {
        width: 100%;
        height: auto;
        padding: 30rpx 24rpx 30rpx 24rpx;
        box-sizing: border-box;
        background-color: #ffffff;
        margin-bottom: 20rpx;
        .pay-list-title {
            width: 100%;
            height: 42rpx;
            line-height: 42rpx;
            font-size: $font-size-30;
            color: #333333;
            margin-bottom: 20rpx;
        }
        .pay-list-goods {
            width: 100%;
            height: 180rpx;
            margin-bottom: 56rpx;
            .pay-list-image {
                width: 180rpx;
                height: 180rpx;
                box-sizing: border-box;
                border: 1px solid #e1e1e1;
                border-radius: 8rpx;
                float: left;
                margin-right: 13rpx;
                .image {
                    width: 100%;
                    height: 100%;
                    display: block;
                    border-radius: 8rpx;
                }
            }
            .pay-list-info {
                width: 508rpx;
                height: 100%;
                float: right;
                .info-title {
                    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;
                    line-height: 40rpx;
                    font-size: $font-size-28;
                    color: #333333;
                    margin-bottom: 8rpx;
                }
                .info-view {
                    height: 40rpx;
                    line-height: 40rpx;
                    color: #999999;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    word-break: break-all;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    font-size: $font-size-22;
                    margin-bottom: 24rpx;
                }
                .info-price {
                    height: 40rpx;
                    width: 100%;
                    float: left;
                    line-height: 40rpx;
                    font-size: $font-size-26;
                    .price {
                        color: #f85050;
                        float: left;
                        font-size: 28rpx;
                    }
                    .count {
                        float: right;
                        color: #666666;
                        .sm {
                            font-size: $font-size-22;
                        }
                    }
                }
            }
        }
        .pay-list-msg {
            width: 100%;
            line-height: 40rpx;
            font-size: $font-size-28;
            margin-bottom: 30rpx;
            .list-msg {
                font-size: $font-size-28;
                color: #333333;
                display: flex;
                justify-content: space-between;
                margin-bottom: 16rpx;
                .text {
                    font-weight: normal;
                    &.red {
                        color: #f94b4b;
                    }
                }
            }
        }
        .pay-list-btn {
            width: 100%;
            flex-direction: row-reverse;
            display: flex;
            .btn {
                width: 160rpx;
                height: 64rpx;
                line-height: 64rpx;
                background: $btn-confirm;
                font-size: $font-size-26;
                text-align: center;
                color: #ffffff;
                border-radius: 32rpx;
                margin-left: 20rpx;
            }
            .list-msg {
                line-height: 64rpx;
                margin-right: 40rpx;
                font-size: $font-size-26;
                color: #333333;
                font-weight: bold;
                .text {
                    font-weight: normal;
                    &.red {
                        color: #f94b4b;
                    }
                }
            }
        }
    }
}
</style>