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>
      <view class="env" v-if="env">
        <view class="env-text">{{env.name}} {{env.version}}+{{env.buildNumber}}</view>
        <view>{{ env.baseUrl.split('/').slice(0, 3).join('/') }}</view>
        <view v-if="envVersion !== 'release' && env" class="env-button" @click="show=true">切换环境</view>
      </view>
      <label for="changePhone">
        <view class="switch-account">切换账号</view>
      </label>
    </view>
    <view v-else>
      <view class="tips">因智能门锁与账号绑定，登录为手机号登录</view>
      <label for="phone">
        <view class="button-login">登录</view>
      </label>
      <view class="env" v-if="env">
        <view class="env-text">{{env.name}} {{env.version}}+{{env.buildNumber}}</view>
        <view>{{ env.baseUrl.split('/').slice(0, 3).join('/') }}</view>
        <view v-if="envVersion !== 'release' && env" class="env-button" @click="show=true">切换环境</view>
      </view>
    </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>
  <up-action-sheet :actions="envList" :closeOnClickOverlay="true" title="切换环境" cancelText="取消" :closeOnClickAction="true"
                   :show="show" :safeAreaInsetBottom="true" @close="show=false" @select="selectEnv"></up-action-sheet>
</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'
  import env from '@/config/env'
  import { setStorage, getStorage, removeStorage } from '@/utils/storage'

	export default {
		data() {
			return {
        buttonInfo: null,
        env: null,
        envVersion: '',
        envList: [],
        show: false
			}
		},
    computed: {
      ...mapState(useUserStore, ['isLogin']),
      ...mapState(useLockStore, ['lockSearch'])
    },
    async onLoad() {
      this.buttonInfo = await this.getButtonInfo()
      this.env = await env[await getApp().globalData.getEnvConfig()]
      this.envVersion = getApp().globalData.envVersion
      for (let key in env) {
        this.envList.push({
          ...env[key],
          key: key
        })
      }
      console.log(this.envList)
    },
		methods: {
      ...mapActions(useBasicStore, ['getButtonInfo', 'routeJump']),
      ...mapActions(useLockStore, ['getLockList', 'updateLockSearch']),
      ...mapActions(useUserStore, ['updateLoginStatus', 'phoneLogin', 'updateUserInfo', 'getUserInfo',
        'checkSession']),
      selectEnv(env) {
        setStorage('envVersion', env.key)
        removeStorage('token')
        removeStorage('openid')
        removeStorage('userInfo')
        removeStorage('lockList')
        uni.reLaunch({
          url: '/pages/home/home'
        })
      },
      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 = getStorage('openid')
        const { code, data, message } = await phoneLoginRequest({
          encryptedData: res.detail.encryptedData,
          iv: res.detail.iv,
          rebind: true,
          openid
        })
        if(code === 0) {
          removeStorage('userInfo')
          removeStorage('lockList')
          setStorage('token', data.accessToken)
          this.updateLockSearch({
            ...this.lockSearch,
            pageNo: 1
          })
          this.getUserInfo()
          this.getLockList(this.lockSearch)
          uni.showToast({
            title: '账号切换成功',
            icon: 'none'
          })
        } else if(code === 438) {

        } 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
          }
        })
      }
    }
	}
</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;
}

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

.env {
  position: absolute;
  bottom: 180rpx;
  width: 600rpx;
  line-height: 80rpx;
  text-align: center;
  margin-left: 75rpx;

  .env-text {
    font-weight: bold;
    color: #999999;
    font-size: 30rpx;
  }

  .env-button {
    background: inherit;
    color: #022b7c;
    font-size: .8rem;
    text-align: right;
    text-decoration: underline;
  }
}

.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: 25vh;
  padding: 32rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: #999999;
}
</style>