hengmei-one/components/empower.vue

<template>
	<view>
		<view @touchmove.stop.prevent="moveHandle" v-if="vision" style="position: fixed;top: 0;right: 0;left: 0;bottom: 0;display: flex;justify-content: center;align-items: center;z-index: 3;">
			<view style="background-color: #FFFFFF;border-radius: 10rpx;padding: 30rpx;box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,.5);margin: 0 100rpx;">
				<view style="display: flex;">
					<image :src="appletImg" style="width: 96rpx;height: 96rpx;flex-shrink: 0;" mode=""></image>
					<view style="margin-left: 20rpx;">
						<view style="font-size: 30rpx;font-weight: bold;">恒美植发客服代表提醒您：</view>
						<view style="font-size: 28rpx;margin-top: 20rpx;color: #999999;">您当前是游客身份</view>
						<view style="font-size: 28rpx;margin-top: 20rpx;color: #999999;">是否选择授权登录</view>
					</view>
				</view>
				<view style="font-size: 28rpx;margin: 30rpx 0;border-bottom: 1rpx solid #F5F5F5;border-top: 1rpx solid #F5F5F5;padding: 20rpx 0;">申请 获取你的昵称、头像、地区及性别</view>
				<view style="display: flex;justify-content: center;align-items: center;font-size: 24rpx;">
					<view @tap="chooseBtn(0)" :class="isNo?'isNyin':'noyin'" style="color: #07ad60;background-color: #FFFFFF;padding: 12rpx 40rpx;border-radius: 4rpx;border: 1rpx solid #CCCCCC;">暂不授权</view>
					<view @tap="chooseBtn(1)" :class="isOk?'isOyin':'noyin'" style="background-color: #07ad60;padding: 12rpx 40rpx;color: #FFFFFF;margin-left: 20rpx;border: 1rpx solid #07ad60;position: relative;">
						<text>立即授权</text>
						<button open-type="getUserInfo" @tap="shouq" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;">立即授权</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"empower",
		props:{
			vision:{
				type:Boolean,
				default:false
			},
			appletImg:{//小程序头像
				type:String,
				default:'/static/public/like.png'
			},
			appletName:{//小程序名称
				type:String,
				default:''
			},
			url:{
				type:String,
				default:''
			},
			isWhere:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				isOk:false,
				isNo:false,
			};
		},
		methods:{
			moveHandle(){
				return false
			},
			tiaoZ(){//跳转方式
				if(this.isWhere==0) uni.navigateBack({delta:1}) //返回上一页
				if(this.isWhere==1) uni.navigateTo({url:this.url})//跳转到指定页面
				if(this.isWhere!=0 && this.isWhere!=1) return//不跳转
				this.isOk = false
			},
			chooseBtn(index){//暂不授权、立即授权
				this.$emit('cancleEv',index)//继承事件
				if(index==0){//暂不授权
					// this.tiaoZ()
					uni.navigateTo({
						url:'/pages/tabbar/pagehome/pagehome'
					})
					this.isOk = false
				} else {
					this.isOk = !this.isOk
					this.isNo = false
				}
			},
			shouq(){//立即授权事件
				let ya = this;
				this.$toolAll.tools.showToast('正在调起授权...')
				let code = ''//声明code
				uni.login({// 获取登录用户code
					provider: 'weixin',
					success: function(result) {
						uni.hideToast()
						code = result.code
					},
				});
				uni.getUserProfile({//调起微信授权弹框
					desc: '登录',
					lang: 'zh_CN',
					success: (res) => {
						ya.updateUserInfo(code,res.userInfo)
					},
					fail: (res) => {
						console.log('用户拒绝授权');
						this.tiaoZ()
						this.$emit('cancleEv',0)
						this.isOk = false
					}
				});
			},
			//调用登录接口
			updateUserInfo(code,userInfo) {
				let ya = this;
				uni.showToast({title: '授权中...',icon:'loading',})
				var params = {
					code:code,
					nickname: userInfo.nickName,//用户昵称
					headimgurl: userInfo.avatarUrl,//用户头像
					country: userInfo.country,//用户所在国家
					province: userInfo.province,//用户所在省份
					city: userInfo.city,//用户所在城市
					gender: userInfo.gender,//用户性别
					language:userInfo.language,//语言
					is_active:1
				}
				this.$requst.post('user/login',params).then(res => {
					if(res.data.token!=''){
						uni.setStorageSync('params',params)
						uni.setStorageSync('userId',res.data.account_id)
						uni.setStorageSync('token',res.data.token)//缓存token
						uni.setStorageSync('expire',res.data.expire)//缓存失效时间（时间戳格式）
						uni.setStorageSync('is_active',res.data.is_active)//是否第一次授权
						uni.setStorageSync('phone_active',res.data.phone_active)//是否第一次授权
						uni.setStorageSync('invite_code',res.data.invite_code)
						ya.successAfterEv(userInfo)
					}
				},error => {})
			},
			successAfterEv(userInfo){//缓存信息
				let ya = this
				uni.hideToast()
				// console.log(uni.getStorageSync('headImg'));
				ya.$toolAll.tools.showToast('授权成功','success')
				ya.$emit('cancleEv',0)
				ya.$emit('buttonH',true)
				if(ya.url!=''){
					setTimeout(()=>{uni.navigateTo({url:ya.url})},1000)
				}
			}
		}
	}
</script>

<style>
.isNyin{box-shadow: 0rpx 3rpx 6rpx rgba(0,0,0,.5);}
.isOyin{box-shadow: 0rpx 3rpx 6rpx rgba(0,0,0,1);}
</style>