mrr.sj.front/pages/settings/index.vue

<template>
	<view class="settings-page">
		<upload-app-vue :isHome="false" ref="uploadApp"></upload-app-vue>
		<!-- 顶部导航栏 -->
		<custom-navbar title="设置" :showBack="true"></custom-navbar>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 账户安全 -->
			<view class="section-list">
				<view class="list-item" @click="navigateTo('/pages/settings/password')">
					<text class="item-text">修改密码</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view>

				<view class="list-item" @click="navigateTo('/pages/agreement/agreement?type=26')">
					<text class="item-text">隐私政策</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view>

				<view class="list-item" @click="navigateTo('/pages/agreement/agreement?type=28')">
					<text class="item-text">用户协议</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="section-list">		
				<view class="list-item" @click="deleteAccount">
					<text class="item-text">注销账号</text>
					<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
				</view>
			
				<view class="list-item" @click="clearStorage">
					<text class="item-text">清除缓存</text>
					<view class="item-right">
						<text class="cache-size">{{ cacheSize }}</text>
						<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
					</view>
				</view>
			
				<view class="list-item" @click="uploadApp">
					<text class="item-text">检查更新</text>
					<view class="item-right">
						<text class="version">{{version_number}}</text>
						<image src="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<!-- 退出登录按钮 -->
			<view class="logout-btn" @click="logout">
				<view class="logout-text flex-row-center-center">退出登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request'
	import uploadApp from '../../utils/uploadApp'
	export default {
		data() {
			return {
				statusBarHeight: 0,
				account: '',
				version_number: '',
				cacheSize: '0 MB',
				systemInfo: {}
			}
		},
		async onLoad() {
			this.systemInfo = await uni.getSystemInfoSync();
			this.getCache()
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
			// 获取用户信息
			this.getUserInfo();
			this.getVersionNum();
		},
		methods: {
			async getCache() {
				if (this.systemInfo.platform == 'h5') {
					return
				}
				let that = this
				// 计算缓存大小
				plus.cache.calculate(function(size) {
					// 格式化缓存大小
					let formattedSize;
					if (size < 1024) {
						formattedSize = size + " B";
					} else if (size < 1024 * 1024) {
						formattedSize = (size / 1024).toFixed(2) + " KB";
					} else if (size < 1024 * 1024 * 1024) {
						formattedSize = (size / (1024 * 1024)).toFixed(2) + " MB";
					} else {
						formattedSize = (size / (1024 * 1024 * 1024)).toFixed(2) + " GB";
					}
					that.cacheSize = formattedSize
					console.log("当前缓存大小为: " + formattedSize);
				}, function(error) {
					console.error("计算缓存大小失败: ", error);
				});
			},
			getUserInfo() {
				request.post('/sj/user/getUser').then(result => {
					console.log('result', result)
					this.account = this.formatPhone(result.data.account);

				})
			},
			getVersionNum() {
				// 获取当前app的版本
				const systemInfo = uni.getSystemInfoSync();
				// 应用程序版本号
				// 条件编译，只在APP渲染
				// #ifdef APP
				this.version_number = systemInfo.appWgtVersion;
				// #endif
				// #ifdef H5
				this.version_number = systemInfo.appVersion;
				console.log(systemInfo.appVersion, '版本号');
				// #endif
				// #ifdef MP-WEIXIN
				const accountInfo = uni.getAccountInfoSync();
				this.version_number = accountInfo.miniProgram.version // 小程序 版本号
				console.log(accountInfo.miniProgram.version, '小程序版本号')
				// #endif
			},
			// 检查版本自动更新
			// getUpdateInfo() {
			//   return new Promise(async (resolve, reject) => {
			//     const systemInfo = await uni.getSystemInfoSync();
			//     // 获取手机型号
			//     const deviceBrand = systemInfo.deviceBrand;
			//     console.log('deviceBrand',deviceBrand)
			//     let type = deviceBrand == 'apple' ? '1' : deviceBrand == 'huawei' ? '2' : deviceBrand == 'honor' ? '3' : deviceBrand == 'xiaomi' ? '4' : deviceBrand == 'oppo' ? '5' : deviceBrand == 'vivo' ? '6' : '';
			//     const response = await request.post('/user/getappversion',{type});
			//     console.log(response)
			// 	resolve({
			// 	  version: response.data.version,
			// 	  downloadUrl: response.data.url // APK下载地址
			// 	})
			//   })
			// },
			// installApp(downloadUrl) {
			//   console.log(downloadUrl)
			//   // 下载APK
			//   const downloadTask = uni.downloadFile({
			//     url: 'https://app.mrrweb.com.cn/mrrapp.com.1.1.4.apk',
			//     success: (downloadResult) => {
			// 		console.log('downloadResult',downloadResult)
			//       if (downloadResult.statusCode === 200) {
			//         // 安装APK
			//         plus.runtime.install(downloadResult.tempFilePath, {
			//           force: false
			//         }, () => {
			//           console.log('安装成功')
			// 		  // plus.runtime.restart();
			//         }, (err) => {
			// 			console.log('err',err)
			//           uni.showToast({ title: '安装失败', icon: 'none' })
			//         })
			//       }
			//     },
			// 	fail(err) {
			//     	console.log('err',err)
			//     }
			//   })

			//   // 监听下载进度
			//   downloadTask.onProgressUpdate((res) => {
			//     console.log('下载进度:', res.progress)

			//   })
			// },
			// showUpdateDialog(updateInfo) {
			//   uni.showModal({
			//     title: `发现新版本`,
			//     content: '是否更新最新版本？',
			//     confirmText: '立即更新',
			//     cancelText: '稍后再说',
			//     success: (res) => {
			//       if (res.confirm) {
			//         // #ifdef APP-PLUS
			//         if (plus.os.name === 'iOS') {
			//           plus.runtime.openURL(updateInfo.downloadUrl)
			//         } else {
			//           this.installApp(updateInfo.downloadUrl)
			//         }
			//         // #endif
			//       }
			//     }
			//   })
			// },
			async uploadApp() {

				try {
					this.$refs.uploadApp.uploadApp('setting')
				} catch (error) {
					console.error('检查更新失败:', error)
					uni.showToast({
						title: '检查更新失败',
						icon: 'none'
					})
				}
			},

			formatPhone(phone) {
				if (typeof phone == 'number') {
					phone = phone.toString();
				}
				return phone.substr(0, 3) + '****' + phone.substr(7, 11)
			},
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},

			// 页面导航
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			//清除所有本地存储数据，但「保留指定 key」
			async clearAllExceptSpecified(keysToKeep = ['setVersion', 'searchCity', 'userAdrees', 'startLocate','isLocation']) {
				let keepData = {};

				try {
					// 第一步：取出并保存要保留的本地存储数据
					for (let key of keysToKeep) {
						try {
							let data = await uni.getStorageSync(key);
							keepData[key] = data; // 暂存值
						} catch (err) {
							keepData[key] = null; // 若key不存在，暂存为null
						}
					}

					// 第二步：全量清除所有本地存储数据
					await uni.clearStorage();

					// 第三步：重新存入保留的本地存储数据
					for (let key of keysToKeep) {
						if (keepData[key] !== null) {
							await uni.setStorageSync(key, keepData[key]);
						}
					}

					console.log('已清除所有缓存，保留指定key');
				} catch (err) {
					console.error('操作失败：', err);
				}
			},
			async clearStorage() {
				let that = this
				await uni.showModal({
					title: '提示',
					content: '确定要清除缓存吗？',
					success: async (res) => {
						if (res.confirm) {

							// TODO: 实现清楚缓存逻辑
							plus.cache.clear(function() {
								uni.showToast({
									title: "清除成功",
									icon: "none"
								});
								this.cacheSize = "0 MB"; // 清理后重置缓存显示
							}.bind(this)); // 绑定this指向页面实例
						}
					}
				})
			},
			async deleteAccount() {
				let that = this
				await uni.showModal({
					title: '提示',
					content: '本次注销将要停止使用美融融所有权力，请确认您没有未完成的订单，检查账户余额，是否注销？',
					success: async (res) => {
						if (res.confirm) {
							
							// TODO: 实现注销账号逻辑
							request.post('/sj/cancellation').then(res => {
								if (res.state == 1 || res.code==200) {
									that.clearAllExceptSpecified();
									uni.reLaunch({
										url: '/pages/home/home'
									})
								}
							})
						}
					}
				})
			},
			// 退出登录
			async logout() {
				let that = this
				await uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: async (res) => {
						if (res.confirm) {
							// uni.removeStorageSync('access_token');
							// uni.removeStorageSync('refresh_token');
							// uni.clearStorageSync();
							await that.clearAllExceptSpecified();
							// TODO: 实现退出登录逻辑
							uni.reLaunch({
								url: '/pages/my/my'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.section-list {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx 30rpx;
		.list-item {
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #F1F1F1;
			background: transparent;
			padding: 30rpx 0;
			margin: 0 24rpx;
			.item-text {
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
			}
		}
	}

	

	.list-item:last-child {
		border-bottom: none;
	}

	

	.item-right {
		display: flex;
		align-items: center;
	}

	.phone-number {
		font-size: 28rpx;
		color: #666666;
		margin-left: 8rpx;
		margin-right: 12rpx;
	}

	.verified-icon {
		color: #00C853;
		margin-right: 8rpx;
	}

	.cache-size,
	.version {
		font-size: 28rpx;
		color: #999999;
		margin-right: 8rpx;
	}

	.arrow {
		font-size: 28rpx;
		color: #999999;
	}

	.logout-btn {
		position: fixed;
		bottom: 0;
		left:0;
		right: 0;
		height: 165rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.logout-text {
		width: 690rpx;
		height: 90rpx;
		background: #F5F5F5;
		border-radius: 47rpx;
		font-weight: 400;
		font-size: 34rpx;
		color: #333333;
		line-height: 48rpx;
	}

	.sign-icon {
		width: 30rpx;
		height: 30rpx;
	}

	/* 平台适配 */
	/* #ifdef H5 */
	.nav-bar {
		padding-top: 0 !important;
	}

	/* #endif */

	/* #ifdef MP-WEIXIN */
	.nav-bar {
		padding-top: calc(var(--status-bar-height) + constant(safe-area-inset-top)) !important;
		padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top)) !important;
	}

	/* #endif */
</style>