yicangzongtai_app_240321/pages/government/set.vue

<template>
	<view class="Body">
		<navbar :config="config" backColor="#999999"></navbar>
		<view class="useBox" @click="goPersonalData()">
			<view class="useBox_l">
				<image v-if="user.headPhoto" :src="$getImgPath(user.headPhoto)" mode=""></image>
				<image v-else src="/static/default-avatar.png" mode=""></image>
				<view class="useBox_l_txt">
					<view class="useBox_l_txt_t">{{ $onDesensitization('name', user.realName || user.nickname  || '')}}</view>
					<view class="useBox_l_txt_b">{{$onDesensitization('tel', user.mobile || '')}}</view>
				</view>
			</view>
			<view class="useBox_r">
				<text class="iconfont_yige">&#xe65f;</text>
			</view>
		</view>
		<view class="list">
			<view class="item" @click="goRealAttestation()">
				<view class="item_l">实名认证</view>
				<view class="item_r">
					<view class="item_r_text">{{user.certification?'已认证':'未认证'}}</view>
					<text class="iconfont_yige">&#xe65f;</text>
				</view>
			</view>
			<view class="item" @click="goAccountSecurity()">
				<view class="item_l">账号安全</view>
				<view class="item_r">
					<text class="iconfont_yige">&#xe65f;</text>
				</view>
			</view>
			<view class="item" @click="goPrivacyProtection()">
				<view class="item_l">隐私保护</view>
				<view class="item_r">
					<text class="iconfont_yige">&#xe65f;</text>
				</view>
			</view>
			<view class="item" @click="goPrivacyRecommend()">
				<view class="item_l">推荐设置</view>
				<view class="item_r">
					<text class="iconfont_yige">&#xe65f;</text>
				</view>
			</view>
			<view class="item" @click="clearStorage()">
				<view class="item_l">清除缓存</view>
				<view class="item_r">
					<text class="iconfont_yige">&#xe65f;</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item" @click="goAgreement('about_us')">
				<view class="item_l">关于我们</view>
				<view class="item_r">
					<text class="iconfont_yige">&#xe65f;</text>
				</view>
			</view>
			<view class="item" @click="getVersionNewest(1)">
				<view class="item_l">版本更新</view>
				<view class="item_r">
					<view class="item_r_text " v-if="version_number<newest.version">新版本号 {{newest.version}}</view>
					<view class="item_r_text " v-else>版本号 {{version_number}}</view>
					<text class="iconfont_yige">&#xe65f;</text>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<u-button type="primary" hover-class="hoverClass" @click="logOut">退出登录</u-button>
		</view>
		<appUpdatePop ref="appUpdatePop" />
	</view>
</template>

<script>
	import {
		versionNewest,
		getUserInfo,
		userLogout
	} from "@/api/government.js"
	import appUpdatePop from "@/components/appUpdatePop.vue"
	export default {
		components: {
			appUpdatePop
		},
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '设置',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					// backgroundColor: "#F8F8F8",
					rightSlot: true,
				},
				user: {},
				newest: {},
				version_number: null,
				type: 0
			}
		},
		onShow() {
			const systemInfo = uni.getSystemInfoSync();
			this.version_number = systemInfo.appVersion;
			let platform = uni.getSystemInfoSync().platform;
			if (platform == 'ios') {
				this.type = 1
			} else if (platform == 'android') {
				this.type = 0
			}
			this.getVersionNewest();
			this.getUserData()
		},
		methods: {
			goPersonalData() {
				uni.navigateTo({
					url: "/pages/government/personalData"
				})
			},
			goPrivacyRecommend(){
				uni.navigateTo({
					url: "/pages/government/recommend"
				})
			},
			goPrivacyProtection() {
				uni.navigateTo({
					url: "/pages/government/privacyProtection"
				})
			},
			goAccountSecurity() {
				uni.navigateTo({
					url: "/pages/government/accountSecurity"
				})
			},
			// 清除缓存
			clearStorage() {
				uni.showLoading({
					title: '清除缓存中',
					mask: true
				});
				setTimeout(() => {
					uni.showToast({
						title: '清除成功！',
						icon: 'success',
						duration: 1000
					})
				}, 2000)
			},
			logOut() {
				uni.showModal({
					title: '提示',
					content: '确定退出？',
					success: (res) => {
						if (res.confirm) {
							userLogout().then(res => {
								uni.removeStorageSync('apiToken');
								uni.showToast({
									title: '退出成功！',
									duration: 1500
								});
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/home'
									});
								}, 1500)
							})
						}
					}
				});
			},
			goRealAttestation() {
				uni.navigateTo({
					url: `/pages/government/realAttestation?type=${this.user.certification?'2':'1'}`
				})
			},
			getUserData() {
				getUserInfo().then(res => {
					this.user = res.data;
				})
			},
			goAgreement(val) {
				uni.navigateTo({
					url: "/pages/user/agreement?type=" + val
				})
			},
			// 获取更新包
			getVersionNewest(e) {
				versionNewest({
					type: this.type
				}).then(res => {
					this.newest = res.data || {};
					if (this.version_number < this.newest.version && e) {
						this.$refs.appUpdatePop.appInfo = this.newest
						this.$refs.appUpdatePop.show = true
					}else if(this.version_number >= this.newest.version && e){
						this.$u.toast('已经是最新版本！');
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss">
	.useBox {
		margin: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 30rpx;
		background: #fff;
		border-radius: 20rpx;

		.useBox_l {
			display: flex;

			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.useBox_l_txt {
				.useBox_l_txt_t {
					font-size: 32rpx;
					font-weight: 700;
				}

				.useBox_l_txt_b {
					font-size: 28rpx;
					color: #999;
					margin-top: 8rpx;
				}
			}
		}

		.useBox_r {
			text {
				color: #333333;
				opacity: 0.5;
				font-weight: 700;
			}
		}
	}

	.list {
		padding: 20rpx 30rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx;

		.item {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 30rpx;
			border-bottom: 1rpx solid rgba(239, 239, 239, .6);

			.item_l {
				font-size: 30rpx;
				color: #333333;
				font-weight: 700;
			}

			.item_r {
				display: flex;
				align-items: center;

				.item_r_text {
					margin-right: 30rpx;
					color: #3EBCD0;
				}

				.iconfont_yige {
					color: #333333;
					opacity: 0.5;
					font-weight: 700;
				}
			}

			&:last-child {
				border-bottom: none;
			}
		}
	}

	.btnBox {
		width: 100%;
		// display: flex;
		// justify-content: center;
		margin-top: 60rpx;
	}

	.u-btn {
		width: 534rpx;
		border-radius: 10rpx;
		background: rgb(64, 149, 229);
		font-size: 30rpx;
		font-weight: 700;
		margin: auto;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		background: linear-gradient(6deg, #56d9ee 0%, #3ebcd0 100%) #3c66d9;
	}

	.hoverClass {
		background: linear-gradient(6deg, #56d9ee 0%, #3ebcd0 100%) #3c66d9;
	}
</style>