wx-starlock/pages/main/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="https://oss-lock.xhjcn.ltd/mp/icon_arrow.png"
            mode="aspectFill"
          ></image>
        </view>
        <view class="view-line"></view>
        <!-- #ifdef MP-WEIXIN -->
        <label for="contact">
          <view class="view-button">
            <view>客服</view>
            <image
              class="icon-arrow"
              src="https://oss-lock.xhjcn.ltd/mp/icon_arrow.png"
              mode="aspectFill"
            ></image>
          </view>
        </label>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <view @click="toContact">
          <view class="view-button">
            <view>客服</view>
            <image
              class="icon-arrow"
              src="https://oss-lock.xhjcn.ltd/mp/icon_arrow.png"
              mode="aspectFill"
            ></image>
          </view>
        </view>
        <!-- #endif -->
        <view class="view-line"></view>
        <view class="view-button" @click="toWebview()">
          <view>公司介绍</view>
          <image
            class="icon-arrow"
            src="https://oss-lock.xhjcn.ltd/mp/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="https://oss-lock.xhjcn.ltd/mp/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="https://oss-lock.xhjcn.ltd/mp/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>
      <!-- #ifdef MP-WEIXIN -->
      <label for="changePhone">
        <view class="switch-account">切换账号</view>
      </label>
      <!-- #endif -->
      <!-- #ifdef APP-PLUS -->
      <view class="switch-account !bg-red-500" @click="logout">退出</view>
      <!-- #endif -->
    </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' || nodeEnv === 'development') && 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, logoutRequest } from '@/api/user'
  import env from '@/config/env'
  import { setStorage, getStorage, removeStorage } from '@/utils/storage'
  import { useNotificationStore } from '@/stores/notification'
  import { getAppInfoRequest } from '@/api/system'

  export default {
    data() {
      return {
        buttonInfo: null,
        env: null,
        envVersion: '',
        envList: [],
        show: false,
        nodeEnv: ''
      }
    },
    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
      this.nodeEnv = process.env.NODE_ENV

      // eslint-disable-next-line guard-for-in,no-restricted-syntax
      for (let key in env) {
        this.envList.push({
          ...env[key],
          key
        })
      }
    },
    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/main/home'
        })
      },
      toContact() {
        getAppInfoRequest().then(res => {
          if (res.code === 0) {
            plus.runtime.openURL(res.data.wechat_service_url)
          }
        })
      },
      async changePhone(res) {
        if (res.detail.errMsg === 'getPhoneNumber:fail user deny') {
          return
        }

        const that = this
        uni.showLoading({
          title: '登录中'
        })
        uni.login({
          provider: 'weixin',
          async success(loginRes) {
            const openid = getStorage('openid')
            const { code, data, message } = await phoneLoginRequest({
              encryptedData: res.detail.encryptedData,
              iv: res.detail.iv,
              rebind: true,
              openid,
              js_code: loginRes.code
            })
            uni.hideLoading()
            if (code === 0) {
              removeStorage('userInfo')
              removeStorage('lockList')
              setStorage('token', data.accessToken)
              that.updateLockSearch({
                ...that.lockSearch,
                pageNo: 1
              })
              that.getUserInfo()
              that.getLockList(that.lockSearch)
              that.updateNotificationSearch({
                pageNo: 1
              })
              that.getNotificationList(that.notificationSearch)
              uni.showToast({
                title: '账号切换成功',
                icon: 'none'
              })
            } else if (code === 438) {
              /* empty */
            } else {
              uni.showToast({
                title: message,
                icon: 'none'
              })
            }
          },
          fail() {
            uni.hideLoading()
            uni.showToast({
              title: '登录失败，请重试'
            })
          }
        })
      },
      async getphonenumber(data) {
        if (data.detail.errMsg === 'getPhoneNumber:fail user deny') {
          return
        }

        const that = this
        uni.showLoading({
          title: '登录中'
        })
        uni.login({
          provider: 'weixin',
          async success(loginRes) {
            const result = await that.phoneLogin({
              encryptedData: data.detail.encryptedData,
              iv: data.detail.iv,
              code: loginRes.code
            })
            uni.hideLoading()
            if (!result) {
              uni.showToast({
                title: result.message,
                icon: 'none'
              })
            }
          },
          fail() {
            uni.hideLoading()
            uni.showToast({
              title: '登录失败，请重试'
            })
          }
        })
      },
      toUsereInfo() {
        this.routeJump({
          name: 'userInfo'
        })
      },
      toWebview(type) {
        this.routeJump({
          name: 'webview',
          params: {
            type
          }
        })
      },
      logout() {
        uni.showModal({
          title: '提示',
          content: '确定退出登录吗？',
          success: async res => {
            if (res.confirm) {
              await logoutRequest()
              removeStorage('token')
              removeStorage('openid')
              removeStorage('userInfo')
              removeStorage('lockList')
              this.routeJump({
                name: 'login',
                type: 'reLaunch'
              })
            }
          }
        })
      }
    }
  }
</script>

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

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

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

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

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

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

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

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

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

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

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

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