dati/components/authVip.vue

<template>
	<view>
		<view class="lz-modal lz-modal-show">
			<view class="lz-modal-dialog">
				<view class="lz-list">
					<view class="lz-list-header" style="display: flex;flex-direction: row;">
						<view>温馨提示</view>
						<view class="iconfont icon-cuo1" @tap="hideAuthVip()"></view>
					</view>
					<view class="lz-list-body">
						<view class="lz-list-item lz-list-item-middle">
							<view class="lz-list-line">
								<view class="ktvip">
									<image src="../static/img/zs.png" mode="" class="ktvip-img"></image>
									<view class="ktvip-flex"><text>请激活VIP</text>（当前科目：{{subject.subject_name}}）</view>
									<view class="ktvip-flex">价格：{{subject.price}}</view>
								</view>
								<!-- <view class="index-bm-title">
									<input class="uni-input" v-model="vipnum" confirm-type="search"
										placeholder="请输入激活码" />
								</view> -->
								<view class="ktvip-b">
									<!-- #ifdef H5 || APP-PLUS -->
									<button @tap="$openrul('/pages/my/about?id=1')">联系客服</button>
									<!-- #endif -->
									<!-- #ifdef MP-WEIXIN -->
									<button open-type="contact">联系客服</button>
									<!-- #endif -->
									<!-- <button @tap="authVip()" class="ktvip-b-r">确认激活</button> -->
									<button @tap="gobuy" class="ktvip-b-r" v-if="auth != 1">立即购买</button>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="lz-margin--b-md"></view>
			</view>
		</view>

	</view>
</template>

<script>
	// #ifdef H5
	import weichatObj from '@/plugin/jweixin-module/index.js';
	// #endif
	import {
		mapState
	} from 'vuex';
	export default {
		name: "auth-vip",
		data() {
			return {
				// #ifdef H5
				auth: 0,
				// #endif
				// #ifdef MP
				auth: 1,
				// #endif
				vipnum: '',
				mode: '',
			}
		},
		computed: {
			...mapState(['subject', 'userinfo', 'subjectVip']),
		},
		mounted() {
			this.mode = this.$myConfig.mode
			// #ifdef MP
			this.getSh()
			// #endif
		},
		methods: {
			async getSh() {
				let res = await this.$myHttp.get({
					url: this.$myHttp.urlMap.sh,
					data: {},
					needLogin: false,
				})
				if (res.code == 1) {
					// this.navList = res.data.data
					console.log(res)
					this.auth =  res.data.auth
				}
			},
			hideAuthVip() {
				this.$emit('hideAuthVip', false)
			},
			async authVip() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.exchangesubject,
					data: {
						code: this.vipnum,
						subject_id: this.subject.id
					},
					needLogin: true
				})
				if (res.code == 1) {
					uni.showToast({
						title: '激活成功',
						icon: 'none',
						duration: 1000
					})
					this.$myUserLogin.getSubvip(this.subject.id)
					this.hideAuthVip()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000
					})
				}
			},
			//获取获取解密手机号
			//  async userDecryptData(encryptedData,iv,code) {
			//   let res = await this.$myHttp.post({
			//    url: this.$myHttp.urlMap.decryptData,
			//    data: {
			//     encryptedData:encryptedData,
			//     iv:iv,
			//     code:code,
			//    },
			//    needLogin: true
			//   })
			//   if (res.code == 1) {
			//    let jmPnumber = res.data
			//    let myPhone = jmPnumber.phoneNumber
			// console.log(myPhone);
			//   }
			//  },


			//  getPhoneNumber(e) {
			//   let enc = e.detail.encryptedData
			//    let iv = e.detail.iv
			//   this.userDecryptData(enc,iv,this.cod)
			//  },
			async gobuy() {
				console.log(this.subject)
				let that = this

				var pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
				let qdata = {
					returnurl: currentRoute,
					pay_type: 'wechat',
					subject_id: this.subject.id,
					// #ifdef MP
					user_type: 'mini'
					// #endif
					// #ifdef H5
					user_type: 'mp'
					// #endif
				}
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.buyJhm,
					data: qdata,
					needLogin: true
				})
				console.log(res)
				if (res.code == 1) {
					let da = res.data
					// #ifdef MP
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: da.timeStamp,
						nonceStr: da.nonceStr,
						package: da.package,
						signType: da.signType,
						paySign: da.paySign,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));

							uni.showToast({
								title: '激活成功',
								icon: 'none',
								duration: 1000
							})
							that.$myUserLogin.getSubvip(that.subject.id)
							that.hideAuthVip()
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
					// #endif
					// #ifdef H5
					// weichatObj.chooseWXPay(rdata);
					WeixinJSBridge.invoke(
						'getBrandWCPayRequest', {
							"appId": da.appId, //公众号ID，由商户传入     
							"timeStamp": da.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": da.nonceStr, //随机串     
							"package": da.package,
							"signType": da.signType, //微信签名方式：     
							"paySign": da.paySign //微信签名 
						},
						function(res) {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								// 使用以上方式判断前端返回,微信团队郑重提示：
								//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
								uni.showToast({
									title: '激活成功',
									icon: 'none',
									duration: 1000
								})
								that.$myUserLogin.getSubvip(that.subject.id)
								that.hideAuthVip()
							}
						});
					// #endif

					// uni.showToast({
					// 	title: '激活成功',
					// 	icon: 'none',
					// 	duration: 1000
					// })
					// this.$myUserLogin.getSubvip(this.subject.id)
					// this.hideAuthVip()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000
					})
				}
			}
		}
	}
</script>

<style>
	.ktvip {
		color: #848484;
		font-size: 15px;
	}

	.ktvip-flex {
		width: 84%;
		margin: 0px auto;
	}

	.ktvip-flex text {
		color: #000;
		font-weight: bold;
	}

	.ktvip-img {
		width: 68px;
		height: 68px;
		margin-bottom: 3px;
	}

	.ktvip-b {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		margin: 14px 0;
	}

	.ktvip-b button {
		font-size: 14px;
		margin: 0 8px;
		border: solid 1px #ebebeb;
	}

	.ktvip-b-r {
		font-size: 14px;
		background: #3c7bfc;
		border: solid 1px #3c7bfc !important;
		color: #fff;
	}

	.ktvip-b-r button::after,
	.ktvip-b button::after {
		border: none;
	}

	.index-bm-title {
		width: 86%;
		margin: 12px auto 10px;
	}

	.index-bm-content {
		margin-top: 10px;
	}

	.index-bm-flex {
		display: flex;
		font-size: 15px;
		align-items: center;
		margin-bottom: 8px;
	}

	.index-bm-title input {
		border-radius: 5px;
		border: none;
		padding: 10px;
		flex: 1;
		font-size: 15px;
		color: #000;
		text-align: left;
		border: 1px #eee solid;
	}
</style>