wx-starlock/pages/mine/mine.vue

<template>
  <view v-if="buttonInfo">
    <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 { mapState, mapActions } from 'pinia'
  import { useBasicStore } from '@/stores/basic'
  import { useUserStore } from '@/stores/user'
  import { useLockStore } from '@/stores/lock'
  import { phoneLoginRequest } from '@/api/user'
  import env from '@/config/env'
  import { setStorage, getStorage, removeStorage } from '@/utils/storage'
  import { useNotificationStore } from '@/stores/notification'

  export default {
    data() {
      return {
        buttonInfo: null,
        env: null,
        envVersion: '',
        envList: [],
        show: false
      }
    },
    computed: {
      ...mapState(useUserStore, ['isLogin']),
      ...mapState(useLockStore, ['lockSearch']),
      ...mapState(useNotificationStore, ['notificationSearch'])
    },
    async onLoad() {
      this.buttonInfo = await this.getButtonInfo()
      this.env = await env[await getApp().globalData.getEnvConfig()]
      this.envVersion = getApp().globalData.envVersion
      // eslint-disable-next-line guard-for-in,no-restricted-syntax
      for (let key in env) {
        this.envList.push({
          ...env[key],
          key
        })
      }
      console.log(this.envList)
    },
    methods: {
      ...mapActions(useBasicStore, ['getButtonInfo', 'routeJump']),
      ...mapActions(useLockStore, ['getLockList', 'updateLockSearch']),
      ...mapActions(useNotificationStore, ['getNotificationList', 'updateNotificationSearch']),
      ...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)
          this.updateNotificationSearch({
            pageNo: 1
          })
          this.getNotificationList(this.notificationSearch)
          uni.showToast({
            title: '账号切换成功',
            icon: 'none'
          })
        } else if (code === 438) {
          /* empty */
        } 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: 0.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>