wx-starlock/pages/mine/mine.vue

<template>
	<view v-if="buttonInfo">
    <image src="/static/images/background_mine.png"
           class="background-image"></image>
    <view v-if="isLogin">
      <view class="view">
        <view class="view-button" @click="toUsereInfo">
          <view>个人信息</view>
          <image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
        </view>
        <view class="view-line"></view>
        <label for="contact">
          <view class="view-button">
            <view>客服</view>
            <image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
          </view>
        </label>
        <view class="view-line"></view>
        <view class="view-button" @click="toWebview()">
          <view>公司介绍</view>
          <image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
        </view>
        <view class="view-line"></view>
        <view class="view-button" @click="toWebview('userAgreement')">
          <view>用户协议</view>
          <image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
        </view>
        <view class="view-line"></view>
        <view class="view-button" @click="toWebview('privacy')">
          <view>隐私政策</view>
          <image class="icon-arrow" src="/static/images/icon_arrow.png" mode="aspectFill"></image>
        </view>
      </view>
      <label for="changePhone">
        <view class="switch-account">切换账号</view>
      </label>
      <view class="button-logout" @click="logout">退出</view>
    </view>
    <view v-else>
      <view class="tips">因智能门锁与账号绑定，登录为手机号登录</view>
      <label for="phone">
        <view class="button-login">登录</view>
      </label>
    </view>
	</view>
  <button open-type="contact" style="display:none" id="contact"></button>
  <button open-type="getPhoneNumber" style="display:none" id="phone" @getphonenumber="getphonenumber"></button>
  <button open-type="getPhoneNumber" style="display:none" id="changePhone" @getphonenumber="changePhone"></button>
</template>

<script>
  import { useBasicStore } from '@/stores/basic'
  import { useUserStore } from '@/stores/user'
  import { useLockStore } from '@/stores/lock'
  import { mapState, mapActions } from 'pinia'
  import { phoneLoginRequest } from '@/api/user'

	export default {
		data() {
			return {
        buttonInfo: null
			}
		},
    computed: {
      ...mapState(useUserStore, ['isLogin']),
      ...mapState(useLockStore, ['lockSearch'])
    },
    async onLoad() {
      this.buttonInfo = await this.getButtonInfo()
    },
		methods: {
      ...mapActions(useBasicStore, ['getButtonInfo', 'routeJump']),
      ...mapActions(useLockStore, ['getLockList', 'updateLockSearch']),
      ...mapActions(useUserStore, ['updateLoginStatus', 'phoneLogin', 'updateUserInfo', 'getUserInfo',
        'checkSession']),
      async changePhone(res) {
        if(res.detail.errMsg === 'getPhoneNumber:fail user deny') {
          return
        }
        const result = await this.checkSession()
        if(!result) {
          uni.showToast({
            title: '登录失败，请重试',
            icon: 'none'
          })
          return
        }
        const openid = uni.getStorageSync('openid')
        const { code, data, message } = await phoneLoginRequest({
          encryptedData: res.detail.encryptedData,
          iv: res.detail.iv,
          rebind: true,
          openid
        })
        if(code === 0) {
          uni.setStorageSync('token', data.accessToken)
          this.updateLockSearch({
            ...this.lockSearch,
            pageNo: 1
          })
          this.getUserInfo()
          this.getLockList(this.lockSearch)
          uni.showToast({
            title: '账号切换成功',
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: message,
            icon: 'none'
          })
        }
      },
      async getphonenumber(data) {
        if(data.detail.errMsg === 'getPhoneNumber:fail user deny') {
          return
        }
        const result = await this.phoneLogin({
          encryptedData: data.detail.encryptedData,
          iv: data.detail.iv
        })
        if(!result) {
          uni.showToast({
            title: '登录失败，请重试',
            icon: 'none'
          })
        }
      },
      toUsereInfo() {
        this.routeJump({
          name: 'userInfo'
        })
      },
      toWebview(type) {
        this.routeJump({
          name: 'webview',
          params: {
            type
          }
        })
      },
      logout() {
        const that = this
        uni.showModal({
          title: '提示',
          content: '确定退出登录吗？',
          success: (res) => {
            if (res.confirm) {
              uni.removeStorageSync('token')
              that.updateLoginStatus(false)
            }
          }
        })
      }
    },
	}
</script>

<style lang="scss">
page {
  background-color: $uni-bg-color-grey;
}
</style>


<style scoped lang="scss">
.background-image {
  margin-top: 32rpx;
  margin-left: 20rpx;
  width: 710rpx;
  height: 156rpx;
  border-radius: 32rpx;
}

.view {
  margin-top: 32rpx;
  border-radius: 32rpx;
  width: 710rpx;
  margin-left: 20rpx;
  background: #FFFFFF;
}

.view-button {
  padding: 0 20rpx 0 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #292826;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 80rpx;
}

.icon-arrow {
  width: 40rpx;
  height: 40rpx;
}

.view-line {
  width: 100%;
  height: 3rpx;
  background: #EBEBEB;
}

.button-logout {
  position: absolute;
  border-radius: 46rpx;
  bottom: 60rpx;
  width: 600rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  margin-left: 75rpx;
  background: #ec433c;
  color: #ffffff;
  font-size: 40rpx;
  font-weight: bold;
}

.switch-account {
  position: absolute;
  border-radius: 46rpx;
  bottom: 180rpx;
  width: 600rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  margin-left: 75rpx;
  background: #63b8af;
  color: #ffffff;
  font-size: 40rpx;
  font-weight: bold;
}

.button-login {
  border-radius: 46rpx;
  width: 650rpx;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  margin-left: 50rpx;
  background: #63b8af;
  color: #ffffff;
  font-size: 48rpx;
  font-weight: bold;
}

.tips {
  margin-top: 35vh;
  padding: 32rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: #999999;
}
</style>