424 lines
11 KiB
Vue
424 lines
11 KiB
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>
|