fny-ugd-palace-uniapp/components/c-pop-adulthood/c-pop-adulthood.vue

<template>
	<view class="mask" catchtouchmove="true" :class="!adulthoodStatus ? 'none' : adulthoodStatus ? 'show' : ''">
	   <view class="mask-content" @click.stop.prevent="stopPrevent">
		   <view class="mask-content-inner">
			   <view class="logo-wrap">
				  <image style="width: 100%;height: 100%;" src="/static/adulthood.png" mode="aspectFill"></image>
			   </view>
			   <view class="action-msg">
				   <text>请在使用前请确认您已满18周岁</text>
			   </view>
			   <view class="action-wrap">
					<u-button type="warning" shape="circle" size="large" text="未满18岁" @click="exitApp(0)"></u-button>
					<view style="width: 100rpx;"></view>
					<u-button type="warning" shape="circle" size="large" text="已满18岁" @click="setAdult(1)"></u-button>
			   </view>
		   </view>
	   </view>
	   <u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
	   <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import store from '@/store'
	import { setStorage, getStorage, removeStorage } from '@/util/index.js'
	import { mapActions, mapState, mapGetters } from 'vuex';
	export default {
		name:"c-pop-adulthood",
		data() {
			return {
				maskState: 0,
				isAuth: false,
				tips: '获取验证码',
				seconds: 60,
				send: false,
				form: {
					phone: '',
					code: '',
				}
			};
		},
		props: {
			onComplate: {
				type: Function,
				default: () => { }
			},
		},
		computed: {
			...mapGetters(['adulthoodStatus']),
		},
		mounted() {
			// 微信隐藏tabBar
			// #<!-- #ifdef MP-WEIXIN -->
			// if(this.adulthoodStatus){
			// 	wx.hideTabBar()
			// }
			// <!-- #endif -->
		},
		destroyed() {
			// 微信显示tabBar
			// #<!-- #ifdef MP-WEIXIN -->
			// if(!this.adulthoodStatus){
			// 	wx.showTabBar()
			// }
			// <!-- #endif -->
		},
		methods: {
			...mapActions({
				'login': 'login',
				'loginRefresh': 'loginRefresh',
				'adulthood': 'adulthood',
			}),
			stopPrevent(e){
				console.log(e)
			},
			toggleMask(type){
				let timer = type === 'show' ? 10 : 0;
				let	state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(()=>{
					this.maskState = state;
				}, timer)
			},
			/**
			 * @description 确认
			 * @param {Object}  title: String desc: String
			 */
			$confirm(options = {}){
				// 继承原来的
				// this.defautlOptions = Object.assign(this.defautlOptions, options);
				return new Promise((resolve,reject)=> {
					
					this.toggleMask('show')
					this._confirm = () => {
						resolve(1)
						this._confirm = null;
					}
					this._cancel = () => {
						resolve(0)
						this._cancel = null;
					}
				})
			},
			confirm() {
				wx.showTabBar()
				if(this._confirm){
					this._confirm()
					this.toggleMask();
				}
			},
			cancel() {
				wx.showTabBar()
				if(this._cancel){
					this._cancel()
					this.toggleMask();
				}
			},
			getPosition(){
				const that = this;
				return new Promise((resolve,reject) => {
					uni.getSetting({
					   success(res) {
						   console.log(res)
						   if(!res.authSetting['scope.userLocation']){
							   console.log("没有权限")
							   uni.authorize({
								 scope: 'scope.userLocation',
								 success () {
									console.log("用户已同意")
									 uni.getLocation({
										 type: 'wgs84',
										 success: function (res) {
											 that.getAddress(res.latitude,res.longitude).then((posObj) => {
												 resolve(posObj)
											 }).catch(() => {
												reject({})
											 })
										 }
									 });
								 },
								 fail() {
									console.log("用户拒绝")
								 	reject()
								 }
							   })
						   }else{
							   uni.getLocation({
								   type: 'wgs84',
								   success: function (res) {
									   that.getAddress(res.latitude,res.longitude).then((posObj) => {
											resolve(posObj) 
									   }).catch(() => {
										   reject({})
									   })
								   },
								   fail() {
									 reject()
								   }
							   });
						   }
					   }
					})
				})
			},
			getAddress(latitude,longitude){
				return new Promise((resolve,reject) => {
					const keys = 'PLZBZ-HSD66-JRXSW-MHAU5-4BTOQ-FUBLQ';
					wx.request({
					  url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${keys}`,
					  header: {
						'Content-Type': 'application/json'
					  },
					  success: function(res) {
						//console.log(res.data.result.address_component.district, res.data.result)
						// 国家
						let country = res.data.result.address_component.nation
						// 省
						let province = res.data.result.address_component.province;
						// 市
						let city = res.data.result.address_component.city;
						// 区
						let district = res.data.result.address_component.district;
						
						console.log(city)
						resolve({country: country,province: province, city: city, district: district})
						// apiUpdateWxData({sex:0, country: country,province: province, city: city, district: district})
					  },
					  fail:function(err){
						  reject(err)
					  }
					})
				})
			},
			async setAdult(type) {
				this.$refs.uToast.show({
					type: 'loading',
					message: '',
				})
				// uni.showModal({
				// 	title: '提示',
				// 	content: "点击了，方法"
				// });
				try{
					const objres = await this.getPosition();
					// 已成年
					if(type == 1){
						// uni.showModal({
						// 	title: '提示',
						// 	content: "获取位置成功"
						// });
						console.log("success: 获取位置成功")
						store.dispatch('disAdulthood', {detail: true, pos: objres}).then(res => {
							console.log("设置成年")
							// uni.showModal({
							// 	title: '提示',
							// 	content: "设置成年成功"
							// });
							this.$refs.uToast.hide()
						})
						return
					}
				}catch(e){
					//TODO handle the exception
					if(type == 1){
						// uni.showModal({
						// 	title: '提示',
						// 	content: "获取位置失败"
						// });
						console.log("error: 获取位置失败")
						store.dispatch('disAdulthood', {detail: true, pos: {country: "未知地区",province: "未知地区", city: "未知地区", district: "未知地区"}}).then(res => {
							console.log("设置成年")
							this.$refs.uToast.hide()
						})
						return
					}
				}
			},
			exitApp(){
				store.dispatch('disAdulthood', {detail: false, pos: {}}).then(res => {
					this.$refs.uToast.hide()
				})
				uni.showModal({
					title: '提示',
					content: "未满18周岁不可饮酒",
					confirmText: "退出",
					showCancel: false,
					success() {
						wx.exitMiniProgram({
							success(e) {
								console.log("退出")
							},
							fail(e) {
								console.log("退出失败")
							},
						})	
					}
				});
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					this.$refs.uToast.show({
						type: 'loading',
						message: '正在获取验证码',
					})
					
					// TODO 发起请求: 
					this.$api('h5.getCode', {mobile: this.form.phone}).then(res => {
						console.log(res)
						this.$refs.uToast.hide()
						if(res.code == 1){
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送')
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start()
						}
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.send = false;
			},
			start() {
				this.send = true;
			},
			loginAction() {
				this.$refs.uToast.show({
					type: 'loading',
					message: '正在登录，请稍后',
				})
				this.login({mobile: this.form.phone, code: this.form.code}).then(res => {
					this.$refs.uToast.hide()
					if(res.code == 1){
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('登录成功')
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start()
					}
					this.onComplate()
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.mask{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0);
		z-index: 10001;
		transition: .3s;
		
		.mask-content{
			background-color: #fff;
			width: 100vw;
			align-self: stretch;
			min-height: 597rpx;
			border-top-left-radius: 28rpx;
			border-top-right-radius: 28rpx;
			padding-bottom: 100rpx;
			overflow: hidden;
			// padding-top: 60rpx;
			// display: flex;
			// flex-direction: column;
			// width: 590rpx;
			// max-height: 45vh;
			// min-height: 361rpx;
			// background: #fff;
			// border-radius: 15px;
		}
		.mask-content-inner{
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.auth-bg{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 100vw;
				height: 393rpx;
			}
			
			.logo-wrap{
				width: 101vw;
				height: 345rpx;
			}
			
			.action-wrap{
				margin-top: 48rpx;
				padding: 0 30rpx;
				align-self: stretch;
				display: flex;
			}
			
			.action-msg{
				display: flex;
				justify-content: center;
				margin-top: 48rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #000000;
			}
		}
		
		
		
		
		
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.8);
			
			.mask-content{
				transform: translateY(0);
			}
		}
		
	}
</style>