H5_QiCaiYao/pages_tool/config/config.vue

<template>
	<page-meta :page-style="themeColor"></page-meta>
	<div class="view">
		<div class="card">
			<div class="row">
				<div class="left">
					留言反馈
				</div>
				<div class="right" @click="toMsgSlip">
					<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
				</div>
			</div>
			<u-line></u-line>

			<div class="row">
				<div class="left">
					关于我们
				</div>
				<div class="right" @click="toAboutUs">
					<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
				</div>
			</div>
			<u-line></u-line>

			<div class="row">
				<div class="left">
					版本检测
				</div>
				<div class="right" @click="onAPPUpdate">
					<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
				</div>
			</div>
			<u-line></u-line>

			<div class="row">
				<div class="left">
					我的主题
				</div>
				<div class="right" @click="toTheme">
					<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
				</div>
			</div>
		</div>
		<div class="btnBox" v-if="token">
			<!-- <div class="btn" @click="logoffUser">注销用户</div> -->
			<!-- <div class="btn" @click="signOut">退出登录</div> -->
		</div>
		<div class="modal">
			<u-modal :show="modalShow" :cancelText="newVersion ? '取消' : '关闭'" @cancel="modalShow = false" showCancelButton
				confirmColor="var(--base-color)" :showConfirmButton="newVersion">
				<div v-if="newVersion">
					<div class="wrap">
						<div class="img"></div>
						<div class="text">发现新版本</div>
						<u-line></u-line>
						<div class="leftText">
							<div>输入文本：v1.01.02</div>
							<div>新版本内容：</div>
							<div>1.新增</div>
							<div>1.新增</div>
						</div>
					</div>
				</div>
				<div v-else>
					<div class="wrap">
						<div class="title">当前版本1.0.1</div>
						<div class="desc">
							已为最新版本
						</div>
					</div>
				</div>
			</u-modal>
		</div>
	</div>
</template>

<script>

import APPUpdate from '@/config/appUpdate.js';

export default {
	data() {
		return {
			modalShow: false,
			newVersion: true,
			token: null,
			version: "" // 版本号
		}
	},
	onLoad(e) {
		// #ifdef APP-PLUS
		getCurrentNo(res => {
			// 进页面获取当前APP版本号（用于页面显示）

			this.version = res.version;


		});
		// #endif
	},
	onLoad() {
		this.token = uni.getStorageSync('token');
	},

	methods: {
		// 检查APP是否有新版本
		onAPPUpdate() {
			// #ifdef APP-PLUS
			// true 没有新版本的时候有提示，默认：false
			APPUpdate(true);
			// #endif
		},
		signOut() {

			uni.removeStorage({
				key: 'token',
				success: res => {
					uni.setStorageSync('loginLock', 1);
					//购物车数量
					uni.removeStorageSync('DIY_VIEW_INDEX_popwindow_count')
					uni.removeStorageSync('userInfo')
					this.$store.dispatch('clearCartNumber');
					// this.$store.dispatch('getCartNumber').then((e) => {
						// this.$util.redirectTo('/pages_tool/login/login');
						// uni.reLaunch({
						// 	url: "/pages_tool/login/login"
						// })
					// })

					uni.reLaunch({
						url: "/pages_tool/login/login"
					})
				},
			});
		},
		toAboutUs() {
			uni.navigateTo({
				url: '/pages_tool/config/about_us'
			})
		},
		toMsgSlip() {
			uni.navigateTo({
				url: '/pages_tool/config/msg_slip'
			})
		},


		toTheme() {
			uni.navigateTo({
				url: '/pages_tool/config/myTheme'
			})
		},
		logoffUser() {
			uni.showModal({
				title: '提示',
				content: '是否注销',
				success: (res) => {
					if (res.confirm) {
						this.$api.sendRequest({
							url: '/api/member/logout',
							data: {},
							success: res => {
								this.signOut()
							}
						});
					}
				}
			});
		},
	}
}
</script>

<style scoped lang="scss">
.view {
	padding: 30rpx;
	min-height: 100vh;
	box-sizing: border-box;

	.card {
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 10rpx 30rpx;

		.row {
			padding: 30rpx 0 30rpx 0;
			display: flex;

			.left {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				color: #333333;
			}

			.right {
				flex: 1;
				text-align: right;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

		}
	}

	.btnBox {
		position: fixed;
		bottom: 76rpx;
		// height: 92rpx;
		width: calc(100% - 60rpx);

		.btn+.btn {
			margin-top: 40rpx;
		}
		.btn {
			width: 100%;
			height: 92rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;

		}
	}

	.modal {
		.wrap {
			.img {
				height: 112rpx;
				width: 112rpx;
				background: #D8D8D8;
				opacity: 0.5;
				position: relative;
				left: 50%;
				transform: translate(-50%);

			}

			.text {
				margin: 16rpx 0 32rpx 0;
				text-align: center;

				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
			}

			.leftText {
				margin-top: 32rpx;

				div {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #222222;
				}
			}

			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #222222;
				text-align: center;
				line-height: 44rpx;
			}

			.desc {
				margin-top: 24rpx;
				text-align: center;

				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				color: #222222;
				line-height: 40rpx;
			}
		}

		::v-deep {
			.u-modal__content {
				display: unset;
			}
		}
	}
}
</style>