MoeNovaClient/pages/vip/M_purchase.vue

<template>
	<view class="page">
		<view class="topBody">
			<PageHeader title="会员" class="PageHeader">
				<template slot="right">
					<view class="more-options" @tap="toggleDropdown">
						<text class="fa fa-ellipsis-h"></text>
						<view class="dropdown-menu" v-if="showDropdown">
							<view class="dropdown-item" @tap="handleOption('vipRecord')">购买记录记录</view>
						</view>
					</view>
				</template>
			</PageHeader>
			<view class="reserveASeat"></view>

			<view class="myGoldCoin-box">
				<view>我的M币</view>
				<view class="myGoldCoin-box-content">
					<image src="../../static/icon/coin_m.png" mode="widthFix" />
					<text>1000</text>
				</view>
			</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)" :key="index">
						<view class="num1">
							<image src="../../static/icon/coin_m.png" mode="widthFix" />
							<view class="name">{{ item.num_gmm }} </view>
						</view>
						<view class="num2">
							<view class="name">{{ item.money }}{{ $t("txt.￥") }}</view>
						</view>
					</view>
				</view>

				<view class="jinchu">
					<text>{{
						$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;  ">{{ $t("txt.微信支付") }}</text>
					</view>
					<view class="right">
						<image class="icon" :src="payType == 'wechat'
							? '../../static/icon/wd_icon_gouxuan04.png'
							: '../../static/icon/wd_icon_gouxuan05.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; ">{{ $t('txt.支付宝支付') }}</text>
					</view>
					<view class="right">
						<image class="icon"
							:src="payType == 'alipay' ? '../../static/icon/wd_icon_gouxuan04.png' : '../../static/icon/wd_icon_gouxuan05.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: "",
			showDropdown: false,
		};
	},
	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() {
			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"];
					}
				},
			});
		},
		toggleDropdown() {
			this.showDropdown = !this.showDropdown;
		},
		handleOption(type) {
			this.showDropdown = false;
			switch (type) {
				case 'vipRecord':
					uni.navigateTo({
						url: '/pages/vip/record'
					});
					break;
				case 'contact':
					uni.navigateTo({
						url: '/pages/contact/index'
					});
					break;
				case 'help':
					uni.navigateTo({
						url: '/pages/help/index'
					});
					break;
				case 'feedback':
					uni.navigateTo({
						url: '/pages/feedback/index'
					});
					break;
			}
		},
	},
};
</script>

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