userinfo.vue

<!-- 用户资料页 -->
<template>
	<view class="uni-content">
		<view class="avatar">
			<uni-id-pages-avatar width="260rpx" height="260rpx"></uni-id-pages-avatar>
		</view>
		<uni-list>
			<uni-list-item class="item" @click="setNickname('')" title="昵称" :rightText="userInfo.nickname||'未设置'" link>
			</uni-list-item>
			<uni-list-item class="item" @click="bindMobile" title="手机号" :rightText="userInfo.mobile||'未绑定'" link>
			</uni-list-item>
			<uni-list-item v-if="userInfo.email" class="item" title="电子邮箱" :rightText="userInfo.email">
			</uni-list-item>
			<uni-list-item v-if="hasPwd" class="item" @click="changePassword" title="修改密码" link>
			</uni-list-item>
		</uni-list>
		<uni-list class="mt10">
			<uni-list-item @click="bindThirdAccount('Weixin')" title="微信" link
				:rightText="userInfo.wx_openid ? '已绑定': '未绑定' "></uni-list-item>
			<uni-list-item @click="bindThirdAccount('QQ')" title="QQ" link
				:rightText="userInfo.qq_openid ? '已绑定': '未绑定' "></uni-list-item>
			<uni-list-item @click="bindThirdAccount('Alipay')" title="支付宝" link
				:rightText="userInfo.ali_openid ? '已绑定': '未绑定' "></uni-list-item>
			<uni-list-item @click="bindThirdAccount('Apple')" title="Apple" link
				:rightText="userInfo.apple_openid ? '已绑定': '未绑定' "></uni-list-item>
		</uni-list>
		<uni-list class="mt10">
			<uni-list-item @click="deactivate" title="注销账号" link="navigateTo"></uni-list-item>
		</uni-list>
		<uni-popup ref="dialog" type="dialog">
			<uni-popup-dialog mode="input" :value="userInfo.nickname" @confirm="setNickname" title="设置昵称"
				placeholder="请输入要设置的昵称">
			</uni-popup-dialog>
		</uni-popup>
		<uni-id-pages-bind-mobile ref="bind-mobile-by-sms" @success="bindMobileSuccess"></uni-id-pages-bind-mobile>
		<template v-if="showLoginManage">
			<button v-if="userInfo._id" @click="logout">退出登录</button>
			<button v-else @click="login">去登录</button>
		</template>
	</view>
</template>
<script>
	const db = uniCloud.database();
	const usersTable = db.collection('uni-id-users')
	const uniIdCo = uniCloud.importObject("uni-id-co")
  import {
    store,
    mutations
  } from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
    computed: {
      userInfo() {
        return store.userInfo
      }
    },
		data() {
			return {
				univerifyStyle: {
					authButton: {
						"title": "本机号码一键绑定", // 授权按钮文案
					},
					otherLoginButton: {
						"title": "其他号码绑定",
					}
				},
				// userInfo: {
				// 	mobile:'',
				// 	nickname:''
				// },
				hasPwd:false,
				showLoginManage:false//通过页面传参隐藏登录&退出登录按钮
			}
		},
		async onShow() {
			this.univerifyStyle.authButton.title = "本机号码一键绑定"
			this.univerifyStyle.otherLoginButton.title = "其他号码绑定"
		},
		async onLoad(e) {
			if(e.showLoginManage){
				this.showLoginManage = true//通过页面传参隐藏登录&退出登录按钮
			}
			//判断当前用户是否有密码，否则就不显示密码修改功能
			let res = await uniIdCo.getAccountInfo()
			this.hasPwd = res.isPasswordSet
		},
		methods: {
			login() {
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd',
					complete: (e) => {
						console.log(e);
					}
				})
			},
      logout(){
        mutations.logout()
      },
      bindMobileSuccess(){
        mutations.updateUserInfo()
      },
			changePassword(){
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/userinfo/change_pwd/change_pwd',
					complete: (e) => {
						console.log(e);
					}
				})
			},
			bindMobile() {
				// #ifdef APP-PLUS
				uni.preLogin({
					provider: 'univerify',
					success: this.univerify(), //预登录成功
					fail: (res) => { // 预登录失败
						// 不显示一键登录选项（或置灰）
						console.log(res)
						this.bindMobileBySmsCode()
					}
				})
				// #endif

				// #ifdef MP-WEIXIN
				this.$refs['bind-mobile-by-sms'].open()
				// #endif

				// #ifdef H5
				//...去用验证码绑定
				this.bindMobileBySmsCode()
				// #endif
			},
			univerify() {
				uni.login({
					"provider": 'univerify',
					"univerifyStyle": this.univerifyStyle,
					success: async e => {
						console.log(e.authResult);
						uniIdCo.bindMobileByUniverify(e.authResult).then(res => {
							console.log(res);
              mutations.updateUserInfo()
						}).catch(e => {
							console.log(e);
						}).finally(e=>{
							console.log(e);
							uni.closeAuthView()
						})
					},
					fail: (err) => {
						console.log(err);
						if (err.code == '30002' || err.code == '30001') {
							this.bindMobileBySmsCode()
						}
					}
				})
			},
			bindMobileBySmsCode() {
        uni.navigateTo({
          url: './bind-mobile/bind-mobile'
        })
			},
			setNickname(nickname) {
				console.log(nickname);
        if (nickname) {
          mutations.updateUserInfo({nickname})
          this.$refs.dialog.close()
        } else {
          this.$refs.dialog.open()
        }
			},
			deactivate(){
				uni.navigateTo({
					url:"/uni_modules/uni-id-pages/pages/userinfo/deactivate/deactivate"
				})
			},
      async bindThirdAccount(provider) {
        const uniIdCo = uniCloud.importObject("uni-id-co")
        const bindField = {
          weixin: 'wx_openid',
          alipay: 'ali_openid',
          apple: 'apple_openid',
          qq: 'qq_openid'
        }[provider.toLowerCase()]

        if (this.userInfo[bindField]) {
          await uniIdCo['unbind' + provider]()
          await mutations.updateUserInfo()
        } else {
          uni.login({
            provider: provider.toLowerCase(),
            onlyAuthorize: true,
            success: async e => {
              const res = await uniIdCo['bind' + provider]({
                code: e.code
              })
              if (res.errCode) {
                uni.showToast({
                  title: res.errMsg || '绑定失败'
                })
              }
              await mutations.updateUserInfo()
            },
            fail: async (err) => {
              console.log(err);
              uni.hideLoading()
            }
          })
        }

      }
		}
	}
</script>
<style lang="scss" scoped>

	@import "@/uni_modules/uni-id-pages/common/login-page.scss";

	.uni-content {
		padding: 0;
	}

	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
	@media screen and (min-width: 690px) {
		.uni-content {
			padding: 0;
			max-width: 690px;
			margin-left: calc(50% - 345px);
			border: none;
			max-height: none;
			border-radius: 0;
			box-shadow: none;
		}
	}
	/* #endif */
	.avatar {
		align-items: center;
		justify-content: center;
		margin: 22px 0;
		width: 100%;
	}

	.item {
		flex: 1;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	button {
		margin: 10%;
		margin-top: 40px;
		border-radius: 0;
		background-color: #FFFFFF;
		width: 80%;
	}

	.mt10{
		margin-top: 10px;
	}
</style>