wx-starlock/pages/main/mine.vue

<template>
	<view v-if="buttonInfo">
		<view v-if="isLogin">
			<view class="account-info" @click="toUsereInfo">
				<image class="avatar" :src="userInfo.headUrl" mode="aspectFill"></image>
				<view class="account-nickname">
					<text class="nickname">{{ userInfo.nickname }}</text>
					<text class="account">{{ userInfo.mobile }}</text>
				</view>
			</view>
			<view class="follow-official-account">
				<text>关注公众号，接收更多消息提醒</text>
				<!-- #ifdef MP-WEIXIN -->
				<official-account><view class="follow-btn">关注公众号</view></official-account>
				<!-- #endif -->
				<view class="follow-btn" @click="jumpToWeChatfficialAccount">关注公众号</view>
			</view>
			<label for="contact">
				<view class="option-item">
					<view class="icon-label">
						<image class="left-icon" src="https://cos-lock.skychip.top/mp/icon_customer_service.png">
						</image>
						<text>人工客服</text>
					</view>
					<image class="icon-arrow" src="https://cos-lock.skychip.top/mp/icon_arrow.png" mode="aspectFill">
					</image>
				</view>
			</label>
			<view class="view">
				<!-- #ifdef APP-PLUS -->
				<view @click="toContact">
					<view class="view-button">
						<view>客服</view>
						<image class="icon-arrow" src="https://cos-lock.skychip.top/mp/icon_arrow.png"
							mode="aspectFill">
						</image>
					</view>
				</view>
				<!-- #endif -->
				<view class="view-button">
					<view>邮箱 / 商务合作</view>
					<text class="right-text">{{env.officialEmail}}</text>
				</view>
				<view class="view-line"></view>
				<view class="view-button">
					<view>官网</view>
					<text class="right-text">{{env.officialWebsite}}</text>
				</view>
				<view class="view-line"></view>
				<view class="view-button" @click="toWebview()">
					<view>公司介绍</view>
					<image class="icon-arrow" src="https://cos-lock.skychip.top/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://cos-lock.skychip.top/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://cos-lock.skychip.top/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' || nodeEnv === 'production') && 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>
			<view class="delete-account" @click="deleteAccount">删除账号</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 === 'production') && 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'
	import {
		loginRequest
	} from '@/api/user'
	export default {
		data() {
			return {
				buttonInfo: null,
				env: null,
				envVersion: '',
				envList: [],
				show: false,
				nodeEnv: ''
			}
		},
		computed: {
			...mapState(useUserStore, ['isLogin', 'userInfo']),
			...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'
			]),
			deleteAccount() {
				uni.showModal({
					title: '提示',
					content: '删除账号后，你的所有信息及相关记录都会从平台彻底删除，且不可恢复，是否删除？',
					success: res => {
						if (res.confirm) {
							this.routeJump({
								name: 'deleteAccount'
							})
						}
					}
				})
			},
			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
					}
				})
			},
			jumpToWeChatfficialAccount(){
				
			},
			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 {
		background: #ffffff;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 20rpx 20rpx;
		padding: 20rpx 20rpx;
		gap: 20rpx;
	}

	.follow-official-account {
		margin: 20rpx 20rpx;
		background-image: url('https://cos-lock.skychip.top/mp/follow_official_account_bg.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 88rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: white;
		font-weight: 400;
		font-size: 28rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;

		.follow-btn {
			display: flex;
			align-items: center;
			padding: 12rpx 20rpx;
			background-color: white;
			border-radius: 16rpx;
			color: #4777ee;
		}
	}

	.account-info {
		margin: 20rpx 20rpx;
		padding-left: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
		display: flex;
		gap: 18rpx;
		align-items: center;
		border-radius: 16rpx;
		background-color: white;

		.avatar {
			width: 120rpx;
			height: 120rpx;
		}

		.account-nickname {
			display: flex;
			flex-direction: column;
			gap: 12rpx;

			.nickname {
				font-size: 32rpx;
				font-weight: 600;
			}

			.account {
				font-size: 24rpx;
				color: gray;
				font-weight: 500;
			}
		}
	}

	.view-button {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 16rpx;
		font-size: 28rpx;

		.right-text {
			font-size: 28rpx;
			color: gray;
		}
	}

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

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

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

	.delete-account {
		position: absolute;
		right: 75rpx;
		bottom: 60rpx;
		font-size: 28rpx;
		color: #666;
	}

	.env {
		position: absolute;
		bottom: 240rpx;
		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: #4777ee;
		border-radius: 46rpx;
	}

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

	.option-item {
		background-color: white;
		display: flex;
		padding: 20rpx 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 16rpx;
		align-items: center;
		justify-content: space-between;

		.left-icon {
			width: 52rpx;
			height: 52rpx;
		}

		.icon-label {
			display: flex;
			align-items: center;
			gap: 12rpx;
		}
	}
</style>