yicangzongtai_app_240321/pages/government/accountSecurity.vue

<template>
	<view>
		<navbar :config="config" backColor="#999999"></navbar>
		<view class="list">
			<view class="item" @click="goChangeAccount(1)">
				<view class="item_l">注销账户</view>
				<view class="item_r">
					<view class="tig">请谨慎操作</view>
					<text class="iconfont_yige">&#xe65f;</text>
				</view>
			</view>
			<view class="item" @click="goChangeAccount(2)">
				<view class="item_l">更换手机号</view>
				<view class="item_r">
					<view>{{user.mobile}}</view>
					<text class="iconfont_yige">&#xe65f;</text>
				</view>
			</view>
			</view>
			<!-- <view class="title">
				第三方绑定
			</view> -->
			<view class="list">
				<view class="item">
					<view class="item_l">第三方绑定</view>
					<view class="item_r">
						<!-- <text class="iconfont_yige">&#xe65f;</text> -->
					</view>
				</view>
				<view class="item" @click="isOpenUnbindShow(0)" v-if="isInstallWx||platform!='ios'">
					<view class="item_l">微信</view>
					<view class="item_r">
						<view>{{thirdBindingInfo.bindingWechat?'已绑定':'去授权'}}</view>
						<text class="iconfont_yige">&#xe65f;</text>
					</view>
				</view>
				<view class="item" @click="isOpenUnbindShow(1)" v-if="isInstallZfb||platform!='ios'">
					<view class="item_l">支付宝</view>
					<view class="item_r">
						<view>{{thirdBindingInfo.bindingAlipay?'已绑定':'去授权'}}</view>
						<text class="iconfont_yige">&#xe65f;</text>
					</view>
				</view>
				<view class="item" v-if="osVersion >= 13 && platform=='ios'" @click="isOpenUnbindShow(3)">
					<view class="item_l">苹果</view>
					<view class="item_r">
						<view>{{thirdBindingInfo.bindingApple?'已绑定':'去授权'}}</view>
						<text class="iconfont_yige">&#xe65f;</text>
					</view>
				</view>
			</view>
			<u-modal v-model="unbindShow" :content="'确认解绑'+showThirdLab(thirdType)+'？'" show-cancel-button @confirm="unbind()" @cancel="unbindShow=false" confirm-color="#3EBCD0"></u-modal>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from "@/api/government.js"
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '账号安全',
					color: '#000',
					rightSlot: true,
				},
				user: {},
				unbindShow:false,
				thirdType:0,//0 微信 1支付宝
				thirdBindingInfo:{},
				osVersion:"",
				platform:"",
				thirdList:[
					{label:"微信",value:0},
					{label:"支付宝",value:1},
					{label:"苹果",value:3}
				],
				isInstallWx:true,//是否安装微信
				isInstallZfb:true,//是否安装支付宝
			}
		},
		onLoad() {
			// 先判断 系统版本
			uni.getSystemInfo({
				success: (res) => {
					this.osVersion = res.osVersion
					this.platform = res.platform
				}
			})
			this.isInstallWx=plus.runtime.isApplicationExist({pname:'com.tencent.mm',action:'weixin://'});
			this.isInstallZfb=plus.runtime.isApplicationExist({pname:'com.eg.android.AlipayGphone',action:'alipay://'});
		},
		onShow() {
			this.getUserData();
			this.getThirdBindingInfo()
		},
		methods: {
			showThirdLab(e){
				for(let i=0;i<this.thirdList.length;i++){
					if(this.thirdList[i].value==e){
						return this.thirdList[i].label
					}
				}
			},
			goChangeAccount(val) {
				uni.navigateTo({
					url: "/pages/government/changeAccount?type=" + val + "&mobile=" + this.user.mobile
				})
			},
			getUserData() {
				getUserInfo().then(res => {
					this.user = res.data
				})
			},
			isOpenUnbindShow(e){
				this.thirdType=e;
				if(this.thirdBindingInfo.bindingWechat&&e===0||this.thirdBindingInfo.bindingAlipay&&e===1||this.thirdBindingInfo.bindingApple&&e===3){
					this.unbindShow=true
				}else if(e===0){
					this.WXBind()
				}else if(e===1){
					this.alipayBind()
				}else if(e===3){
					this.appleBind()
				}
			},
			appleBind() {
				// 判断是 iOS13版本
				uni.login({
					provider: 'apple',
					success: (loginRes) => {
						uni.getUserInfo({
							provider: 'apple',
							success: (userInfoRes) => {
								let param = {
									code: userInfoRes.userInfo.identityToken,
									thirdType: 3
								}
								this.$yghttp.post('/user/binding',param).then(res=>{
									this.getThirdBindingInfo()
									uni.showToast({
										title: '绑定成功！',
										icon: 'success',
										duration: 1500
									})
								})
							},
							fail: (err) => {
								console.log(err)
							}
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			WXBind(){
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: (event)=>{
						const {code} = event
						// console.log(event)
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						let param={
							thirdType:this.thirdType,
							code:code
						}
						this.$yghttp.post('/user/binding',param).then(res=>{
							this.getThirdBindingInfo()
							uni.showToast({
								title: '绑定成功！',
								icon: 'success',
								duration: 1500
							})
						})
						
					},
					fail:(err)=>{
						console.log(err)
				        // 登录授权失败
				        // err.code是错误码
						this.$u.toast('当前环境不支持微信操作!');
				    }
				})
				
			},
			alipayBind(){
				const AlipayAuth = uni.requireNativePlugin("DHQ-AlipayAuth");
				 AlipayAuth.login({
				          appId: '2021004128667996',  //你在支付宝平台申请的App ID
				          scheme: 'ygfwUrlSchemes',  // 需要传到支付宝SDK的scheme,注意需要在manifest.json-->App其他常用配置-->UrlSchemes中配置Android和iOS的
						  scope: 'auth_user', //默认为auth_user
						  init: 'init' //默认传入init
				        },
				        (res) => {
				            //客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
				            let code = res.auth_code;
							if(code){
								let param={
									code:code,
									thirdType:this.thirdType
								}
								this.$yghttp.post('/user/binding',param).then(res=>{
									this.getThirdBindingInfo()
									uni.showToast({
										title: '绑定成功！',
										icon: 'success',
										duration: 1500
									})
								})
							}
				    },(e)=>{
						this.$u.toast('当前环境不支持支付宝操作!');
					})
			},
			unbind(){
				let param={
					thirdType:this.thirdType,
				}
				this.$yghttp.post('/user/unbind',param).then(res=>{
					this.unbindShow=false;
					this.getThirdBindingInfo()
					uni.showToast({
						title: '解绑成功！',
						icon: 'success',
						duration: 1500
					})
				})
			},
			// 第三方身份绑定信息
			getThirdBindingInfo(){
				this.$yghttp.get('/user/thirdBindingInfo').then(res=>{
					this.thirdBindingInfo=res.data
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.list {
		padding: 0rpx 40rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx;
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 0rpx;
			border-bottom: 1rpx solid rgba(239, 239, 239, .6);
			&:last-child{
				border-bottom:none;
			}
			.item_l {
				font-size: 30rpx;
				font-weight: 700;
			}

			.item_r {
				display: flex;
				align-items: center;

				.item_r_text {
					margin-right: 30rpx;
				}

				.tig {
					font-weight: 400;
					color: #3EBCD0;
					font-size: 24rpx;
				}
			}
		}
		.title {
			padding: 20rpx 30rpx;
			border-bottom: 1rpx solid rgba(239, 239, 239, .6);
			border-top: 30rpx solid rgba(239, 239, 239, .6);
		}
	}
	.iconfont_yige {
		color: #333333;
		opacity: 0.5;
		font-weight: 700;
		margin-left: 40rpx;
	}
</style>