retail-app/pages/mall/mallRecharge/index.vue

<template>
	<!-- 充值套餐 -->
	<view class="mall-recharge">
		<view class="white-box">
			<view class="account-text">充值账号</view>
			<u-input class="account-name" v-model="phone" type="text" maxlength="11" placeholder="请输入手机号"
				placeholder-style="font-size:32rpx;font-weight:400" fontSize="56rpx" :customStyle="{ padding: '0'}"
				clearable></u-input>
		</view>
		<view v-if="phone" class="tip flex aic">
			<re-image imgSrc="/retail/mall/ic_tip.png" width="28" height="28"></re-image>
			<text>请确认账户是否正确无误</text>
		</view>
		<view class="list-title flex aic">
			<span class="title-line"></span>
			您选择的游戏币套餐
		</view>
		<view class="order-info">
			<view class="info-top">
				<view class="top-nums flex jcsb aic">
					<view>
						<span class="yxb-num">{{data.gameCurrency}}</span>
						<span class="yxb-text">游戏币</span>
					</view>
					<view>
						<span class="price-text">¥</span>
						<span class="price-num">{{data.realPrice}}</span>
					</view>
				</view>
				<view class="info-msg flex jcsb aic">
					<view class="msg-left">
						<span class="zeng" v-if="data.additionalGameCurrency || data.grabTimes">赠</span>
						<span class="game-num"
							v-if="data.additionalGameCurrency">{{data.additionalGameCurrency}}游戏币</span>
						<!-- <span class="og">
							<span class="${additionalGameCurrency && trafficSize ? 'show' : 'hide'}">+</span>
							<span class="bold ${trafficSize ? 'show' : 'hide'}">2M</span>
						</span> -->
						<span class="og red" v-if="data.additionalGameCurrency && data.grabTimes">
							<span style="margin-left:2px">+</span>
							<view class="red-box">
								<re-image width="30" imgSrc="/retail/main/ic_putonghb.png"></re-image>
								<span>红包机会x{{data.grabTimes}}</span>
							</view>
						</span>
					</view>
					<span class="time-text">{{data.expireDays}}天有效</span>
				</view>
			</view>
			<view class="info-btm">
				<view class="date-wrapper flex jcsb aic">
					<view>立即生效</view>
					<view class="date-box">{{date}}</view>
				</view>
				<!-- <view class="jubaopen-ctrl margin-top-20 flex jcsb aic jbp">
					<view class="jubaop">
						<view class="juntop">
							<image class="img-4" src="" alt="" />
							<span>聚宝盆余额抵扣</span>
							<i class="fx-icon icon-wenhao-xianxingyuankuang"></i>
						</view>
						<view class="dikou">
							<span class="gongyou dikoujine"></span>
							<span class="kedi kedikoujine"></span>
						</view>
						<view class="desc">聚宝盆余额整数部分可参与抵扣</view>
					</view>
					<image class="img-2 check-icon3-i" src="" alt="" />
					<span class="check-icon check-icon3"></span>
				</view> -->
				<!-- <view class="margin-top-30 flex jcsb aic" id="zfbCtrl">
					<view class="flex aic">
						<image class="img-3" src="" alt="" />
						<span>支付宝支付</span>
					</view>
					<image class="img-2 check-icon2-i" src="" alt="" />
					<span class="check-icon check-icon2"></span>
				</view> -->

				<view class="wx-ctrl flex jcsb aic">
					<view class="flex aic">
						<re-image width="48" height="48" imgSrc="/retail/mall/weixin-icon.png" alt="" />
						<span style="margin-left:16rpx">微信支付</span>
					</view>
					<re-image width="48" height="48" imgSrc="/retail/mall/yigou.png" alt="" />
					<!-- <span class="check-icon check-icon1"></span> -->
				</view>
			</view>
		</view>
		<!-- 支付按钮 -->
		<view class="btn-wrapper">
			<view id="checkBox" class="margin-bottom-17">
				<view class="check-text text-center">点击“确认支付”，即代表您已阅读并同意<span class="red" @click="agreeEl">《用户购买协议》</span>
				</view>
			</view>
			<view class="btns flex jcsb aic safe-area-inset-bottom">
				<view>
					<span class="btn-price-text1">应付款：</span>
					<span class="btn-price-text2">¥</span>
					<span class="price-num btn-price-num">{{data.realPrice}}</span>
				</view>
				<u-button class="primary-btn" id="buyBtn" @click="confirm()">确认支付</u-button>
			</view>
		</view>
		<!-- <u-popup :show="isPay" mode="center" :round="10">
			<view class="white-box-pay">
				<view class="title bold text-center">提示</view>
				<view class="text">未完成支付请点击<span class="red">“继续支付”</span></view>
				<view class="text">更换金额或支付方式请点击<span class="red">“取消支付”</span></view>
				<view class="text">完成支付请点击<span class="red">“完成支付”</span></view>
				<view class="btn flex jcc" @click="contPay">
					<view class="primary-btn width100" id="payCon">继续支付</view>
				</view>
				<view class="btn flex jcc" @click="cancel">
					<view class="normal-btn width100" id="cancelBtn">取消支付</view>
				</view>
				<view class="btn flex jcc" @click="enterPayRes">
					<span class="line" id="enterPayRes">完成支付</span>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>
<script>
	import {
		doPay,
		getPackageDetail,
		orderPolling
	} from '@/apis/main'
	import {
		wxPay
	} from '@/utils/pay.js'
	import config from "@/config"
	export default {
		// components:{
		// 	'u-input': () => import('@/plugins/uview-ui/components/u-input') 
		// }
		data() {
			return {
				phone: '',
				id: '',
				data: {},
				date: '',
				timer: null,
				time: 1,
				orderNo: '',
				isPay:false,
				wxOpenid:uni.getStorageSync('wxOpenid'),
				payDate:''
			}

		},
		onLoad(params) {
			this.id = params.id
			this.orderNo = params.orderNo
			this.getData()
			this.getDate()
			// if (params.orderNo) {
			// 	this.orderNo = params.orderNo
			// 	this.polling(params.id)
			// }
		},
		methods: {
			// getOrder(){
			// 	let orderNo = uni.getStorageSync('orderNo')
			// 	if(orderNo){
			// 		this.polling(orderNo)
			// 		removeStorageSync('orderNo')
			// 	}
			// },
			agreeEl(){
				uni.navigateTo({
					url:'/pages/agree/index'
				})
			},
			// 获取日期
			getDate() {
				let today = new Date();
				let year = today.getFullYear();
				let month = today.getMonth() + 1;
				let day = today.getDate();
				let formattedDate = year + "年" + month + "月" + day + "日";
				this.date = formattedDate
			},
			async getData() {
				uni.showLoading()
				const res = await getPackageDetail({
					id: this.id
				})
				if (res) {
					this.data = res
				}
				uni.hideLoading();

			},
			// 确认支付
			async confirm() {
				if (!this.phone) {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					})
					return
				}
				uni.showLoading();
				let params = {
					orderNo: this.orderNo,
					packageId: this.id,
					payChannel: 2,
					payType: 1,
					phone: this.phone,
					wxOpenid: this.wxOpenid
				}
				const res = await doPay(params)
				this.payDate = new Date(res.timeStamp)
				// let redirect_url = encodeURIComponent(
				// 	`${config.wapUrl}pages/mall/mallRecharge/index?orderNo=${res.orderNo}`)
				uni.hideLoading();
				const payRes = await wxPay(res)
				if (payRes) {
					console.log(payRes,88);
					this.polling(res.orderNo)
					// uni.navigateTo({
					// 	url: `/pages/mall/mallPay/index?mwebUrl=${res.mwebUrl}`
					// })
				}

				// location.href = `${res.mwebUrl}&redirect_url=${redirect_url}`
			},
			// contPay(){
			// 	confirm()
			// },
			// // 取消支付
			// cancel(){
			// 	this.isPay = false
			// },
			// // 完成支付
			// async enterPayRes(no){
			// 	const res = await orderPolling({
			// 		orderNo: no
			// 	})
			// 	clearTimeout(timer)
			// 	if(res.status === 1){
			// 		uni.navigateTo({
			// 			url: `/pages/mall/mallSuccess/index?gameCurrency=${this.data.gameCurrency}&price=${this.data.price}`
			// 		})
			// 	}else{
			// 		uni.showToast({
			// 			title:'还未支付成功'
			// 		})
			// 	}
			// },
			// 获取支付状态
			async polling(no) {
				if (no) {
					clearTimeout(this.timer)
					const res = await orderPolling({
						orderNo: no
					})
					if (res) {
						if (res.status === 1) {
							let query = ''
							for (let k in res) {
								query += `${k}=${res[k]}&`
							}
							console.log(query,'query');
							uni.navigateTo({
								url: `/pages/mall/mallSuccess/index?${query}&price=${this.data.price}`
							})
						} else {
							clearTimeout(this.timer)
							if (this.times <= 10) {
								this.times++
								this.timer = setTimeout(() => {
									this.polling(no)
								}, 1000)
							}
						}
					} else {
						this.times = 1
					}
				}
			}

		}
	}
	// const data = reactive({

	// })
</script>
<style lang="scss">
	.mall-recharge {
		padding: 32rpx;

		.white-box {
			padding: 48rpx 48rpx 56rpx;
			background-color: #fff;
			border-radius: 32rpx;

			.account-text {
				font-size: 32rpx;
				font-weight: 500;
				color: #2C2B28;
				line-height: 14rpx;
				margin-bottom: 40rpx;
			}

			.account-name {
				color: #2C2B28;
				font-weight: bold;
				font-size: 56rpx;
				line-height: 32rpx;
			}
		}

		.tip {
			font-size: 24rpx;
			color: #8B8B8B;
			margin-top: 16rpx;
			margin-left: 46rpx;

			text {
				margin-left: 6rpx;
			}
		}

		.list-title {
			color: #363531;
			font-weight: bold;
			font-size: 36rpx;
			line-height: 36rpx;
			margin: 48rpx 0 32rpx;

			.title-line {
				width: 8rpx;
				height: 32rpx;
				background-color: #FF8800;
				margin-right: 10rpx;
			}
		}

		.order-info {
			background-color: #fff;
			border-radius: 32rpx;

			.info-top {
				padding: 40rpx;
				border-bottom: 1rpx solid #E8E8E8;
			}

			.top-nums {
				font-weight: bold;
				color: #2C2B28;

				.yxb-num {
					font-size: 48rpx;
					margin-right: 8rpx;
				}

				.yxb-text {
					font-size: 24rpx;
					color: #564C47;
				}

				.price-num {
					font-size: 48rpx;
				}

				.price-text {
					font-size: 28rpx;
				}
			}

			.info-msg {
				margin-top: 32rpx;
				font-size: 32rpx;
				color: #2C2B28;
				font-weight: bold;
				white-space: nowrap;

				.msg-left {
					width: calc(100% - 142rpx);
					display: flex;
					align-items: center;
					font-weight: bold;
					font-size: 28rpx;

					.game-num {
						font-weight: bold;
					}
				}

				.red {
					display: flex;
					align-items: center;

					.red-box {
						display: flex;
						align-items: center;
					}
				}

				.og {
					color: #FF7C00;
				}

				.time-text {
					font-size: 24rpx;
					color: #564C47;
					font-weight: normal;
				}

				.zeng {
					flex-shrink: 0;
					display: inline-block;
					background-color: #5CB020;
					width: 40rpx;
					height: 32rpx;
					line-height: 32rpx;
					color: #fff;
					font-size: 24rpx;
					border-radius: 8rpx;
					text-align: center;
					font-weight: normal;
					margin-right: 6rpx;
				}

				.show {
					display: inline-block;
					vertical-align: middle;
				}

				.hide {
					display: none;
				}
			}
		}

		// .info-msg {
		// 	margin-top: 16rpx;
		// 	font-size: 16rpx;
		// 	color: #2C2B28;
		// 	font-weight: bold;

		// 	.msg-left {
		// 		width: calc(100% - 150rpx);
		// 		display: flex;
		// 		align-items: center;
		// 		font-weight: normal;
		// 		font-size: 12rpx;
		// 	}

		// 	.red {
		// 		display: flex;
		// 		align-items: center;

		// 		.red-box {
		// 			display: flex;
		// 			align-items: center;
		// 		}
		// 	}

		// 	.og {
		// 		color: #FF7C00;
		// 	}

		// 	.time-text {
		// 		font-size: 12rpx;
		// 		color: #564C47;
		// 		font-weight: normal;
		// 	}

		// 	.zeng {
		// 		display: inline-block;
		// 		background-color: #5CB020;
		// 		width: 20rpx;
		// 		height: 16rpx;
		// 		line-height: 16rpx;
		// 		color: #fff;
		// 		font-size: 12rpx;
		// 		border-radius: 4rpx;
		// 		text-align: center;
		// 		font-weight: normal;
		// 		margin-right: 3rpx;
		// 	}

		// 	.show {
		// 		display: inline-block;
		// 		vertical-align: middle;
		// 	}

		// 	.hide {
		// 		display: none;
		// 	}
		// }

		.info-btm {
			padding: 40rpx;
			font-size: 32rpx;
			color: #2C2B28;
			font-weight: 500;

			// .date-wrapper {}

			.wx-ctrl {
				margin-top: 78rpx;

				.check-icon1-i {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.margin-top-40 {
				margin-top: 40rpx;
			}

			.margin-top-30 {
				margin-top: 30rpx;
			}

			.margin-top-20 {
				margin-top: 20rpx;
			}

			img {
				width: 24rpx;
				height: 24rpx;
			}

			.img-1 {
				margin-right: 16rpx;
			}

			.img-4 {
				margin-right: 16rpx;
			}

			.img-3 {
				margin-right: 16rpx;
				transform: scale(0.9);
			}

			.check-icon {
				width: 40rpx;
				height: 40rpx;
				border: 1rpx solid #bbb;
				border-radius: 100%;
				margin-right: 2rpx;
			}

			.jbp {
				padding: 10rpx 0rpx 10rpx 0rpx;
				border-bottom: 1rpx solid #E8E8E8;
			}

			.dikou {
				// height: 42rpx;
				// float:left;
				// position:absolute;
				// margin-top: 70rpx;
				margin-left: 30rpx;


				.gongyou {
					font-weight: normal;
					font-size: 28px;
					color: #8B8B8B;
				}

				.kedi {
					font-weight: normal;
					font-size: 28px;
					color: #FF7C00;
				}
			}
		}

		.btn-wrapper {
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			padding: 24rpx 32rpx 0;
			z-index: 200;
			background-color: rgb(252, 252, 252);
			border-top: 1rpx solid #eee;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(109, 84, 52, 0.19);

			.btn-price-text1 {
				color: #2C2B28;
				font-size: 32rpx;
				font-weight: bold;
			}

			.btn-price-text2 {
				color: #FF6400;
				font-size: 32rpx;
				font-weight: bold;
			}

			.btn-price-num {
				font-size: 48rpx;
				color: #FF6400;
				font-weight: bold;
			}

			.fx-icon {
				font-size: 32rpx;
				margin-right: 12rpx;

				&.check-icon1 {
					color: #281A13;
				}

				&.check-icon2 {
					color: #0087fb;
				}

				&.check-icon3 {
					color: #0087fb;
				}
			}

			.check-text {
				color: #281A13;
				font-size: 24rpx;

				.red {
					color: #FF6400;
				}
			}

			.btns {
				margin: 24rpx 0 8rpx;
			}

			.primary-btn {
				width: 296rpx;
				height: 96rpx;
				font-size: 36rpx;
				color: #FFFFFF;
				background: linear-gradient(140deg, #FF8500 0%, #FFA600 100%);
				border-radius: 48rpx;
				font-weight: bold;
				margin: 0;
			}
		}
		.white-box-pay {
			width: 600rpx;
			background-color: #fff;
			padding: 60rpx;
			// border-radius: 32rpx;

			.red {
				color: #FF591C;
			}

			.line {
				text-decoration: underline;
				font-size: 28rpx;
			}

			.title {
				font-size: 36rpx;
				color: #333;
				margin-bottom: 40rpx;
			}

			.text {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				color: #666;
				line-height: 40rpx;
			}

			.btn {
				margin-bottom: 20rpx;
				
			}
			.primary-btn {
				font-size: 28rpx;
				padding: 28rpx 60rpx;
				background-color: #1890ff;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 48rpx;
			}
			.normal-btn{
				font-size: 28rpx;
				padding: 28rpx 60rpx;
				background-color: #fff;
				color: #1890ff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 48rpx;
				border: 1px solid #1890ff;
			}
		}
	}
</style>