popularize-front/pages_order/payOrder.vue

<template>
    <view class="orderDetails">
        <Navbar :title="$t('pages_order.pay_order.title')" :autoBack="true" :bgColor="bgColor" leftIconSize="18px"
            height="100rpx" :leftIconColor="leftIconColor" :titleStyle="{ color: fontColor }" /><!-- 支付详情 -->
        <view class="content">
            <view class="baseInfo cardBackground_">
                <view class="statusBox">
                    <i></i>
                    <view class="status">{{ $t('pages_order.pay_order.pending_payment') }}</view><!-- 待支付 -->
                </view>
                <view class="info grayBg cardStyle_">
                    <view class="left">
                        <image :src="images" mode="aspectFill" />
                    </view>
                    <view class="right">
                        <view class="detailed">
                            <view class="title">{{ getTitle() }}</view>
                            <view class="date">{{ dataInfo.startTime }}</view>
                            <view class="address">{{ getAddress() }}</view>
                        </view>
                        <view class="price"><text>{{ $t('pages_order.pay_order.price') }}</text>¥{{ dataInfo.payPrice }}
                        </view><!-- 价格 -->
                    </view>
                </view>
            </view>
            <view class="orderInfo">
                <view class="title">{{ $t('pages_order.pay_order.order_info') }}</view><!-- 订单信息 -->
                <view class="details">

                    <uv-cell :border="false" :title="$t('pages_order.pay_order.ticket_quantity')"><!-- 购票数量 -->
                        <template #value>
                            <uv-number-box v-model="num" />
                        </template>
                    </uv-cell>

                    <uv-cell :border="false" :title="$t('pages_order.pay_order.ticket_content')"
                        :value="ticketName" /><!-- 购票内容 -->

                    <uv-cell :border="false" :title="$t('pages_order.pay_order.order_total')"
                        :value="'¥' + (dataInfo.payPrice * num)"></uv-cell><!-- 订单总金额 -->

                    <uv-cell :border="false" :title="$t('pages_order.pay_order.order_status')"
                        :value="orderStatus"></uv-cell><!-- 订单状态 -->

                    <uv-cell :border="false" v-if="dataInfo.type == 0"
                        :title="$t('pages_order.pay_order.invitation_code')"><!-- 邀请码 -->
                        <template #value>
                            <input type="text" style="color: #fff;"
                                :placeholder="$t('pages_order.pay_order.enter_invitation_code')"
                                v-model="code" /><!-- 请输入邀请码 -->
                        </template>
                    </uv-cell>
                </view>

            </view>
            <view class="tips">
                <view class="title">{{ $t('pages_order.pay_order.payment_notice') }}</view><!-- 支付须知 -->
                <view class="details">
                    <uv-parse :content="configList.recharge_instructions"></uv-parse>
                </view>
            </view>
        </view>
        <view style="padding: 65rpx 35rpx;">
            <uv-button :custom-style="customStyle" type="primary" shape="circle" color="#381615" @click="confirmClick"
                :text="$t('pages_order.pay_order.pay_order')"></uv-button><!-- 支付订单 -->
        </view>
    </view>
</template>

<script>
import Navbar from '@/pages/components/Navbar.vue'
import {
    globalMixin
} from '../pages/mixins/globalMixin';

export default {
    mixins: [globalMixin],
    components: {
        Navbar
    },
    data() {
        return {
            orderId: '',
            dataInfo: {},
            customStyle: {
                color: '#FF5858'
            },
            num: 1,
            code: '',//邀请码
        }
    },
    onLoad(e) {
        this.orderId = e.id
        this.getorderInfo()
    },
    computed: {
        orderStatus() {
            let state = this.dataInfo.state
            const statusKeys = [
                'pages_order.pay_order.status.unpaid',    // 未付款
                'pages_order.pay_order.status.pending',   // 待参加
                'pages_order.pay_order.status.completed', // 已完成
                'pages_order.pay_order.status.cancelled'  // 已取消
            ]
            return this.$t(statusKeys[state] || statusKeys[3])
        },
        ticketName() {
            const typeIndex = this.dataInfo.typePrice || 0
            const typeKeys = [
                'pages_order.pay_order.ticket_types.early_bird',    // 早鸟票
                'pages_order.pay_order.ticket_types.single_ticket', // 单人票
                'pages_order.pay_order.ticket_types.premium_ticket' // 尊享票
            ]
            return this.$t(typeKeys[typeIndex] || typeKeys[0])
        },
        showOrderId() {//0活动 1旅行
            let id = ""
            if (this.dataInfo.type == 0) {
                id = this.dataInfo.activityOrderId
            } else {
                id = this.dataInfo.travelOrderId
            }
            return id
        },
        images() {
            return this.dataInfo.image && this.dataInfo.image.split(',')[0]
        },
    },
    methods: {
        getTitle() {
            if (!this.dataInfo) return ''
            return this.dataInfo.type == 0
                ? this.$ot(this.dataInfo.activity, 'active', 'title')
                : this.$ot(this.dataInfo.travel, 'travel', 'title')
        },
        getAddress() {
            if (!this.dataInfo) return ''
            return this.dataInfo.type == 0
                ? this.$ot(this.dataInfo.activity, 'active', 'address')
                : this.$ot(this.dataInfo.travel, 'travel', 'address')
        },
        getorderInfo() {
            this.$api('orderInfo', { orderId: this.orderId }, res => {
                if (res.code == 200) {
                    this.dataInfo = res.result.orderDetails
                }
            })
        },
        confirmClick(typePrice) {
            this.$api('createOrderPay', {
                id: this.orderId,
                num: this.num,
                code: this.code,
            }, res => {
                if (res.code === 200) {
                    uni.requestPaymentWxPay(res)
                        .then(res => {
                            uni.showToast({
                                title: this.$t('pages_order.pay_order.payment_success'), // 支付成功
                                icon: 'none'
                            })

                            setTimeout(uni.switchTab, 800, {
                                url: '/pages/index/cart'
                            })

                        }).catch(n => {
                            setTimeout(uni.navigateBack, 800, -1)
                        })
                }
            })
        }
    }
}
</script>
<style scoped lang="scss">
.orderDetails {
    padding-bottom: 80rpx;
}

.details {
    padding: 50rpx 40rpx;

    /deep/.uv-cell {
        .uv-cell__body {
            padding: 0rpx;
            padding-bottom: 30rpx;
        }

        &:last-child {
            .uv-cell__body {
                padding-bottom: 0rpx;
            }
        }

        .uv-cell__body__content {
            .uv-cell__title-text {
                color: $uni-text-color-grey !important;
                font-size: 28rpx
            }
        }

        .uv-cell__value {
            color: #DCDCDC !important;
            font-size: 28rpx
        }

    }
}

.orderDetails {
    margin-top: 40rpx;

    /deep/.uv-navbar__content__title {
        color: #fff;
    }

    .content {
        padding: 0 35rpx;
        color: #fff;
        padding-top: calc(var(--status-bar-height) + 110rpx);

        .baseInfo {
            .statusBox {
                display: flex;
                align-items: center;
                padding: 33rpx 47rpx 24rpx;

                i {
                    background: url('@/static/image/cart/U-status.png') no-repeat;
                    background-size: 100% 100%;
                    display: block;
                    width: 39rpx;
                    height: 34rpx;
                    margin-right: 15rpx;
                }

                .status {
                    font-size: 32rpx;
                }
            }
        }

        .orderInfo,
        .tips {
            .title {
                font-size: 29rpx;
                padding-bottom: 26rpx;
                margin-top: 36rpx;
            }

            .details {
                background-color: $uni-color-card-background;
                border-radius: 26rpx;
            }
        }

        .tips {
            .details {
                p {
                    color: #CCC;
                    font-size: 25rpx;
                    line-height: 50rpx;
                }
            }
        }
    }
}
</style>