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>
								<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>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="lz-margin--b-md"></view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: "auth-vip",
		data() {
			return {
				vipnum: '',
				mode: '',
			}
		},
		computed: {
			...mapState(['subject', 'userinfo', 'subjectVip']),
		},
		mounted() {
			this.mode = this.$myConfig.mode
		},
		methods: {
			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)
			//  },
		}
	}
</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>