high-mini/subPages/recharge-centre/recharge-centre.vue

<template>
	<view>
		<view class="width100 height100p backcorf06">
			<view class="block">
				<view class="content height60">
					<input type="number" class="my flleft font18 fcorfff" placeholder-style="color:#ffffff;"
						placeholder="请输入充值号码" v-model="inputPhone" />
				</view>
				<view class="line1 width100 backcorfff"></view>
			</view>
		</view>
		<view class="width90 font16 fcor333 fontwig6 mart40">
			选择金额
		</view>
		<view class="list">
			<view class="box" :class="{'on':item.id == inputAmountId}" v-for="(item,index) in amountList" :key="index"
				@click="select(item)">
				<view class="heTitle">{{item.price}}元</view>
				<view class="font13 fcor999" v-if="item.status == 2">已售空</view>
			</view>
		</view>
		<view class="mart5 width90 font18 fcor333 fontwig6">
			话费充值温馨提示：
		</view>
		<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
			<view style="width: 5%;" class="flleft">1:</view>
			<view style="margin-left: 5%;">慢充话费与营业厅充值一样，只是到账时间稍长。充值过程中可能出现分批到账的情况，但是总金额不会少，请耐心等待。</view>
		</view>
		<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
			<view style="width: 5%;" class="flleft">2:</view>
			<view style="margin-left: 5%;">此业务为话费慢充，日常72小时内到账，如遇月初、月末高峰期或系统更新到账时间会有一定延迟，敬请谅解！急单勿拍！</view>
		</view>
		<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
			<view style="width: 5%;" class="flleft">3:</view>
			<view style="margin-left: 5%;">目前仅支持(移动、联通、电信三网号段)，
				运营商黑名单号码(长期欠费或非实名制认证)、携号转网，空号、虚拟卡（如165.167.170.171.162等等虚拟号段）、副卡号码或做过某些特殊套餐绑定的卡暂不支持充值，请勿下单。</view>
		</view>
		<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
			<view style="width: 5%;" class="flleft">4:</view>
			<view style="margin-left: 5%;">停机号码需要额外补缴欠费后，慢充话费才能到账。<text
					class="fcoreb5">此服务为虚拟充值类服务，无特殊情况不支持退款，下单前请确认充值的号码无误。</text></view>
		</view>
		<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
			<view style="width: 5%;" class="flleft">5:</view>
			<view style="margin-left: 5%;">空号、错号充值后不支持退款，请您务必核对确认号码无误后再进行充值。非空号欠费可充，欠费1个月导致空号的不能充值，损失自负无法退款。</view>
		</view>
		<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
			<view style="width: 5%;" class="flleft">6:</view>
			<view style="margin-left: 5%;"><text
					class="fcoreb5">本充值业务不提供发票</text>。如需发票请在运营商手机客户端储开取电子发票，也可以凭身份证到运营商实体营业厅打印发票。</view>
		</view>
		<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
			<view style="width: 5%;" class="flleft">7:</view>
			<view style="margin-left: 5%;">如遇系统维护充值失败，将72小时后原路退款到付款账户。 </view>
		</view>
		<view class="mart5 width80 font14 fcor999 fontwig6 marb40" style="list-style-type: decimal;">
			<view style="width: 5%;" class="flleft">8:</view>
			<view style="margin-left: 5%;">请登录所属运营商app（手机营业厅）查看充值号码的到账情况，如金额有出入或未到账，请截图充值记录明细反馈给客服。</view>
		</view>
		<view class="height100p"></view>
		<view class="bombtn width94 font16">
			<view class="width50 flleft payem">应付: {{inputAmount}}元</view>
			<view class="width50 flright paybtn" @click="addOrderPay">立即购买</view>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	var jweixin = require('jweixin-module');
	// #endif
	let app = getApp();
	import {
		getListOutRechargePrice,
		addOrderPay,
		orderToUNionPay
	} from '../../Utils/Api.js';
	export default {
		data() {
			return {
				typeId: '',
				inputAmountId: '',
				inputAmount: '',
				inputPhone: '',
				amoutType: '',
				codesVlues: '',
				amountList: [],
				price: '',
				amoutstatus:''
			}
		},
		onLoad(options) {
			this.typeId = options.id;
			if (this.typeId == 1) {
				uni.setNavigationBarTitle({
					title: '中国移动'
				})
				this.amoutType = 2;
				this.getListOutRechargePrice(2);
				return;
			}
			if (this.typeId == 2) {
				uni.setNavigationBarTitle({
					title: '中国电信'
				})
				this.amoutType = 1;
				this.getListOutRechargePrice(1);
				return;
			}
			if (this.typeId == 3) {
				uni.setNavigationBarTitle({
					title: '中国联通'
				})
				this.amoutType = 3;
				this.getListOutRechargePrice(3);
				return;
			}


		},
		methods: {
			select(amoutinfos) {
				this.inputAmount = amoutinfos.realPrice;
				this.price = amoutinfos.price;
				this.inputAmountId = amoutinfos.id;
				this.amoutstatus = amoutinfos.status;
			},

			/**
			 * 查询价格
			 */
			getListOutRechargePrice(item) {
				uni.showLoading({
					title: '加载中...'
				})
				let	showType;
				// #ifdef H5
				showType = 2;
				// #endif
				// #ifdef MP
				showType = 1;
				// #endif
				let params = {
					type: item,
					regionId: app.globalData.cityId,
					showType: showType
				}
				getListOutRechargePrice(params).then(res => {
					uni.hideLoading()
					if (res.return_code == '000000') {
						this.amountList = res.return_data;
					}
				})
			},

			/**
			 * 提交订单
			 */
			addOrderPay() {
				let that = this;
				if(that.amoutstatus == 2){
					uni.showToast({
						title: '当前面值已售空',
						duration:2000,
						icon: "none"
					});
					return;
				}
				if (that.inputPhone == '') {
					uni.showToast({
						title: '请输入充值号码',
						duration:2000,
						icon: "none"
					});
					return;
				}
				if (that.inputAmount == '') {
					uni.showToast({
						title: '请选择价格',
						duration:2000,
						icon: "none"
					});
					return false;
				}
				// let params = {
				// 	"orderPrice": this.inputAmount,
				// 	"payPrice": this.inputAmount,
				// 	"rechargeContent": this.inputPhone,
				// 	"rechargeModel": this.amoutType,
				// 	"agentKey": this.codesVlues,
				// 	"objectId": this.inputAmountId,
				// }
				uni.showToast({
					title: '提交订单...',
					icon: 'none',
					duration: 2000,
					success() {
						uni.navigateTo({
							url: '../unionComfirmation/unionComfirmation?orderPrice=' + that.price +
								'&payPrice=' + that.inputAmount + '&rechargeContent=' + that.inputPhone +
								'&rechargeModel=' + that.amoutType + '&agentKey=' + that.codesVlues +
								'&objectId=' + that.inputAmountId
						})
					}
				})



				// uni.showLoading({
				// 	title: '加载中...'
				// })
				// addOrderPay(params).then(res => {
				// 	uni.hideLoading()
				// 	if (res.return_code == '000000') {
				// 		let params = {
				// 			"orderId": res.return_data.id,
				// 			"openId": app.globalData.openId
				// 		}
				// 		this.orderToUNionPay(params);
				// 	} else {
				// 		uni.showToast({
				// 			title: res.return_msg,
				// 			icon: "none"
				// 		})
				// 	}
				// })

			},
			//获取订单信息
			orderToUNionPay(item) {
				orderToUNionPay(item).then(res => {
					if (res.return_code == '000000') {
						//判断是否是公众号
						// #ifdef H5
						//判断微信浏览器
						this.payRequest(res);
						// #endif
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none'
						})
					}
				})
			},
			//唤起支付
			payRequest: function(self) {
				uni.showLoading({
					title: '支付中...'
				})
				jweixin.config({
					// debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: self.return_data.appId, // 必填，公众号的唯一标识
					timestamp: self.return_data.timeStamp, // 必填，生成签名的时间戳
					nonceStr: self.return_data.nonceStr, // 必填，生成签名的随机串
					signature: self.return_data.sign, // 必填，签名，见附录1
					jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				});
				uni.hideLoading();
				jweixin.ready(function() {
					jweixin.checkJsApi({
						jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
						success: function(res) {},
						fail: function(res) {}
					});
					jweixin.chooseWXPay({
						appId: self.return_data.appId,
						timestamp: self.return_data
							.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: self.return_data.nonceStr, // 支付签名随机串，不长于 32 位
						package: self.return_data
							.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
						signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
						paySign: self.return_data.sign, // 支付签名
						success: function(res) {
							// 支付成功后的回调函数
							uni.showToast({
								title: '支付成功'
							})
							if (that.jumpType == 4) {
								uni.reLaunch({
									url: '/pages/tabBar/user/user'
								});
							} else {
								uni.reLaunch({
									url: '../success/success?id=' + that.couponId
								});
							}
						},
						cancel: function(r) {},
						fail: function(res) {}
					});
				});

				jweixin.error(function(res) {
					uni.showToast({
						icon: 'none',
						title: '支付失败了',
						duration: 4000
					});
					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					/*alert("config信息验证失败");*/
				});
			},
		}
	}
</script>

<style lang="scss">
	.block {
		width: 94%;
		padding: 60upx 3%;

		.my {
			width: 80%;
			height: 120upx;
			display: flex;
			align-items: center;
		}

		.uni-input-placeholder {
			color: #FFFFFF;
		}
	}

	.list {
		width: 94%;
		margin-left: 3%;
		display: flow-root;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 0;

		.box {
			width: 30%;
			margin-left: 1%;
			margin-right: 2%;
			margin-top: 20upx;
			float: left;
			height: 120upx;
			// line-height: 120upx;
			display: inline-grid;
			justify-content: center;
			align-items: center;
			text-align: center;
			box-shadow: 0upx 0upx 4upx #666666;
			font-size: 36upx;
			color: #089bf5;

			&.on {
				background-color: #089bf5;
				color: #ffffff;
			}
		}

		.heTitle {
			width: 100%;
			font-size: 15px;
		}
	}

	.bombtn {
		position: fixed;
		height: 45px;
		bottom: 20px;
		border-radius: 6px;

		.payem {
			height: 45px;
			line-height: 45px;
			text-align: center;
			background-color: #007AFF;
			color: #FFFFFF;
			border-radius: 6px 0 0 6px;
		}

		.paybtn {
			height: 45px;
			line-height: 45px;
			text-align: center;
			background-color: #F8A628;
			border-radius: 0 6px 6px 0;
			color: #FFFFFF;
		}
	}
</style>