MeetMateApp/pages/my/M_purchase.vue

<template>
	<view class="page">
		<view class="topBody">
			<view class="header">
			</view>
			<view class="myinfo">

				<view class="purchaseList" style="margin-top: 60rpx;">
					<view class="item" :class="index==sel?'itemSel':''" v-for="(item,index) in list"
						@click="selTA(item,index)">
						<view class="num1">
							<view class="name">{{ item.num_gmm }}M{{$t('txt.币')}}</view>
						</view>
						<view class="num2">
							<view class="name">{{ item.money }}{{$t('txt.￥')}}</view>
						</view>
					</view>
				</view>

				<view style="padding-top: 20rpx;margin-left: 10rpx;" class="jinchu">
					<text style="color:#FFFFFF;font-size: 32rpx;font-weight: bold;">{{$t('txt.支付方式')}}</text>
				</view>

				<view class="mingxiList" @click="selPay('wechat')">
					<view class="left">
						<image class="icon" src="../../static/me/icon_wechat.png" mode="widthFix" />
						<text style="font-size: 28rpx;margin-left: 20rpx;color: #ffffff;">{{$t('txt.微信支付')}}</text>
					</view>
					<view class="right">
						<image class="icon"
							:src="payType=='wechat'?'../../static/me/icon_select.png':'../../static/me/icon_unsel.png'"
							mode="heightFix" />
					</view>
				</view>
				<!-- <view class="line"></view>
				<view class="mingxiList" @click="selPay('alipay')">
					<view class="left">
						<image class="icon" src="../../static/me/icon_alipay.png" mode="widthFix" />
						<text style="font-size: 28rpx;margin-left: 20rpx;color: #ffffff;">{{$t('txt.支付宝支付')}}</text>
					</view>
					<view class="right">
						<image class="icon"
							:src="payType=='alipay'?'../../static/me/icon_select.png':'../../static/me/icon_unsel.png'"
							mode="heightFix" />
					</view>
				</view -->>
				<view class="line"></view>
				<view class="btn_submit" @click="submitData">{{$t('txt.立即支付')}}{{$t('txt.￥')}}{{money}}</view>
				<view class="bottom" @click="goPage('/pages/AboutUs/pay_xy')">
					<text style="font-size: 28rpx;color: #FFFFFF;">{{$t('txt.点击支付即代表同意')}}</text>
					<text style="font-size: 28rpx;color: #FF2A95;">{{$t('txt.M币充值协议')}}</text>
				</view>
			</view>



			<view class="blankHeight"></view>
		</view>


		<!-- 提示框 -->
		<DialogBox ref="DialogBox"></DialogBox>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				title: '',
				sel: 1,
				payType: 'wechat',
				list: [],
				money: 0,
				tid: 0,
				linkid: '',

			}
		},
		onLoad() {
			// setTimeout(function() {
			// 	uni.setNavigationBarColor({
			// 		frontColor: '#ffffff',
			// 		backgroundColor: '#00000000',
			// 		animation: {
			// 			duration: 400,
			// 			timingFunc: 'easeIn'
			// 		}
			// 	})
			// }, 200);
		},
		onShow() {
			this.loadData();
			let that = this;
		},
		methods: {
			onBack() {},
			goPage(page) {
				uni.navigateTo({
					url: page,
				})
			},
			selTA(item, se) {
				this.tid = item.id;
				this.sel = se;
				if (this.list != null && this.list != undefined) {
					this.money = this.list[se]['money'];
				}

			},
			selPay(se) {
				this.payType = se;
			},
			chkSel() {
				if (this.sel == 1) {
					this.sel = 0;
				} else {
					this.sel = 1;
				}
			},
			submitData() {
				// #ifdef H5
				uni.showToast({
					title: '请使用app充值',
					icon: "error"
				});
				return;
				// #endif
				let that = this;
				uni.request({
					url: this.$apiHost + '/Order/submit', //仅为示例，并非真实接口地址。
					data: {
						uuid: getApp().globalData.uuid,
						product_id: this.tid,
						type: 'buyM',
						payType: 'wechat'
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log("res-pay", res.data);
						if (res.data.success == 'yes') {
							this.linkid = res.data.linkid;

							uni.requestPayment({
								"provider": "wxpay",
								"orderInfo": res.data.wepay,
								success(res) {
									console.log("res-suu:", res)
									setTimeout(function() {
										that.showPayCall();
									}, 1000);
								},
								fail(e) {
									console.log("fail", e);
								}
							});
						} else {
							uni.showToast({
								title: '创建订单失败，请联系客服',
								icon: "error"
							});
						}
					}
				});
			},
			showPayCall() {
				let that = this;
				this.$refs['DialogBox'].confirm({
					title: '提示',
					content: '我已经支付完成',
					DialogType: 'inquiry',
					btn1: '否',
					btn2: '是',
					animation: 0
				}).then((res) => {
					uni.request({
						url: this.$apiHost + "/Order/getstatus",
						data: {
							uuid: getApp().globalData.uuid,
							linkid: that.linkid
						},
						header: {
							"content-type": "application/json"
						},
						success: (res) => {
							if (res.data.success == "yes") {
								uni.showToast({
									title: '充值成功',
									icon: "none"
								});
							} else {
								uni.showToast({
									title: '还未检测到充值状态，请稍后再试',
									icon: "none"
								});
								setTimeout(function() {
									that.showPayCall();
								}, 1000);
							}
						},
						complete: (com) => {},
					});
				})
			},
			loadData() {
				var offset = (this.page - 1) * 20;
				uni.request({
					url: this.$apiHost + '/User/getCzList',
					data: {
						uuid: getApp().globalData.uuid
					},
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						console.log("res", res.data)
						this.num = res.data.num;
						if (res.data.list != null && res.data.list != undefined) {
							this.list = res.data.list;
							this.tid = this.list[1]['id'];
							this.sel = 1;
							this.money = this.list[1]['money'];
						}
					}
				});

			},

		}
	}
</script>

<style scoped lang="scss">
	@import 'M_purchase.scss';
</style>