popularize-front/pages_order/payOrder.vue

<template>
	<view class="orderDetails">
		<Navbar 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">待支付</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">{{dataInfo.title}}</view>
							<view class="date">{{dataInfo.startTime}}</view>
							<view class="address">{{dataInfo.address}}</view>
						</view>
						<view class="price"><text>价格</text>¥{{dataInfo.payPrice}}</view>
					</view>
				</view>
			</view>
			<view class="orderInfo">
				<view class="title">订单信息</view>
				<view class="details">
					
					<uv-cell :border="false"
					title="购票数量">
						<template #value>
							<uv-number-box v-model="num"/>
						</template>
					</uv-cell>
					
					<uv-cell :border="false"
					title="购票内容"
					:value="typeList[dataInfo.typePrice].name"
					/>
					
					<uv-cell :border="false"
					title="订单总金额" :value="'¥' + (dataInfo.payPrice * num)"></uv-cell>
					
					<uv-cell :border="false"
					title="订单状态" :value="orderStatus"></uv-cell>
					
					<uv-cell :border="false"
					v-if="dataInfo.type == 0"
					title="邀请码">
						<template #value>
							<input type="text" 
							style="color: #fff;"
							placeholder="请输入邀请码" v-model="code"/>
						</template>
					</uv-cell>
				</view>

			</view>
			<view class="tips">
				<view class="title">支付须知</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="支付订单"></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 : '',//邀请码
				typeList:[
					{
						name:'早鸟票',
						price:168
					},
					{
						name:'单人票',
						price:198.01
					},
					{
						name:'尊享票',
						price:268
					}
				],
			}
		},
		onLoad(e) {
			this.orderId = e.id
			this.getorderInfo()
		},
		computed:{
			orderStatus() {
				let text = ""
				let state = this.dataInfo.state
				if( state == 0) {
					text = '未付款'
				}else if(state == 1) {
					text = '待参加'
				}else if(state == 2) {
					text = '已完成'
				}else{
					text = '已取消'
				}
				return text
			},
			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:{
			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: '支付成功',
								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>