juliancheng/pages/mine/about.vue

<template>
	<view class="aboutUsBox">
		<view class="aboutUsContent">
			<view class="header text-center">
				<view class="">
					<image src="/static/index/logo.jpeg" mode="widthFix"></image>
				</view>
				<text style="font-size: 36rpx;margin-top: 15rpx;display: inline-block;">Version3.0</text>
			</view>
			<view class="">
				<view class="tab" @click="gotoinfo">
					<text>关于聚联诚集团</text>
					<text style="color: rgb(241,197,84);font-size: 40rpx;">></text>
				</view>
				<view v-if="user.id" class="tab" @click="modalName = 'WxHCModal' ">
					<text>退出登录</text>
					<text style="color: rgb(241,197,84);font-size: 40rpx;">></text>
				</view>
			</view>
		</view>
		<view class="aboutUsBottom">
			<view class="aboutUsNav">
				<navigator open-type="navigate" url="/pages/mine/aboutUsService" class="bottomNotice">服务协议</navigator>
				<text style="margin: 0 10rpx;">|</text>
				<navigator open-type="navigate" url="/pages/mine/aboutUsprivacy" class="bottomNotice">隐私政策</navigator>
			</view>
			<view class="aboutUsCopy">
				<view>Copyright @ 2011-2020 JULIANCHENG CREDIT</view>
				<view>ALL Rights Reserved</view>
			</view>
		</view>

        <!-- 清除微信缓存弹窗框 -->
        <view class="cu-modal" :class="modalName == 'WxHCModal' ? 'show' : ''">
            <view class="cu-dialog">
                <view class="cu-bar bg-white justify-end">
                    <view class="content">温馨提示</view>
                    <view class="action" @tap="modalName = ''">
                        <text class="cuIcon-close yellow" />
                    </view>
                </view>
                <view class="padding-xl">
                    <view class="top-title" style="border-bottom: 1px solid #d8d8d8;padding:2vw;">
                        <text class="margin-top-xs text-gray">退出登录后，您将无法第一时间查看聚联诚品牌中心为你提供的最新、最全的征信评估信息。</text>
                    </view>
                    <view class="flex justify-around" style="margin-top:5vw">
                        <button type="primary" @tap="modalName = ''" class="cu-btn round greyBg">暂不退出</button>
                        <button type="primary" @click="clearCache" class="cu-btn round yellowBg" hover-class="btn-hover">立刻退出</button>
                    </view>
                </view>
            </view>
        </view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
                modalName: null, //公告框状态
			}
		},
        computed: {
			...mapState(['user']),
		},
		onShow() {
			this.getUser(true);
		},
		methods: {
			...mapActions({
				getUser: 'getUser' // 将 `this.getUser()` 映射为 `this.$store.dispatch('getUser')`
			}),
			...mapMutations(['logout', 'setUser']),
			// 清除缓存
			clearCache: function() {
				let that = this
				uni.showLoading({
					title: '清除中...'
				});
				setTimeout(function() {
					that.logout()
					uni.clearStorage()
					uni.hideLoading()
					uni.switchTab({
						url: "./mine"
					})
				}, 2000);
			},
			gotoinfo() {
				uni.navigateTo({
					url: "./aboutUs"
				})
			},
		}
	}
</script>

<style>
	.tab {
		border-bottom: 1px solid #eee;
		height: 130rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, sans-serif;
		color: #555864;
		padding-left: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 60rpx;
	}

	/* 头部 logo */
	.header {
		margin-top: 200rpx;
		margin-bottom: 72rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.header image {
		width: 404rpx;
		height: 156rpx;
	}

	.aboutUsBox {
		padding: 10rpx 30rpx 0 30rpx;
		/* background-color: #f9f9f9; */
		width: 100vw;
		height: 100vh;
		color: #AAAAAA;
	}

	.aboutUsTitle {
		text-align: center;
		font-size: 30rpx;
		border-bottom: 1rpx solid #000;
	}

	.aboutUsContent {
		height: 90vh;
		overflow: auto;
	}

	.aboutUsBottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.aboutUsNav {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.aboutUsCopy {
		margin: 0 auto;
		padding-bottom: 30rpx;
		width: 500rpx;
		font-size: 20rpx;
		text-align: center;
	}

	.bottomNotice {
		color: #3180D5;
	}

    .yellowBg {
		background: #f5cc57 !important;
	}

	.greyBg {
		background: grey !important;
	}
</style>