snapshot-wx/pages/Index/Home.vue

<template>
	<view>
		<modeBaseHome v-if="modeType == 'base'" ref="modeBaseHome" class="modeBaseHome"></modeBaseHome>
		<modeCareHome v-if="modeType == 'care'" ref="modeCareHome" class="modeCareHome"></modeCareHome>
		
		<!-- 通知公告弹窗 -->
		<view class="popMask" v-if="isPopShow">
			<view class="popContent">
				<view class="popTips" :class="modeType == 'care' ? 'careFont44' : ''">公告</view>
				<view class="popBody">
					<rich-text :nodes="renewNoticeData.content" :class="modeType == 'care' ? 'careFont36' : ''"></rich-text>
				</view>
				<view class="popBtn" @tap="onCancelTo" :class="modeType == 'care' ? 'careFont36' : ''">知道了</view>
			</view>
		</view>
		
		<!-- 悬浮球 -->
		<DragButton exceedBorderLength=15>
			<view class="modeBtn" :class="modeType == 'care' ? 'careFont36' : ''" @tap="OnChangeMode">{{modeType == 'base' ? '关怀模式' : '标准模式'}}</view>
		</DragButton>
	</view>
</template>

<script>
	import modeBaseHome from '@/pages/BaseTabBar/Home.vue'
	import modeCareHome from '@/pages/CareTabBar/Home.vue'
	import DragButton from "@/components/dragon-dragButton/index.vue";
	
	var that;
	export default {
		data() {
			return {
				modeType: '', // base: 标准版 care: 关怀版
				isPopShow: false,
				renewNoticeTimeout: null,
				renewNoticeData: [],
			}
		},
		components:{
			modeBaseHome,
			modeCareHome,
			DragButton
		},
		onLoad(options) {
			that = this;
			that.modeType = uni.getStorageSync('modeType') || 'base';
			that.$nextTick(function() {
				if (that.modeType == 'base'){
					that.$refs.modeBaseHome.getData();
				}else if (that.modeType == 'care'){
					that.$refs.modeCareHome.getData();
				}
			})
			that.onGetRenewNotice(function() {
				// 弹出更新公告
				if (that.renewNoticeData && that.renewNoticeData.content) {
					that.isPopShow = true;
					let time = that.modeType == 'care' ? 30000 : 10000;
					that.renewNoticeTimeout = setTimeout(function() {
						that.isPopShow = false;
					}, time);
				}
			});
		},
		onShow(){
			that.$nextTick(function() {
				if (that.modeType == 'base'){
					that.$refs.modeBaseHome.updateData();
				}else if (that.modeType == 'care'){
					that.$refs.modeCareHome.updateData();
				}
			})
		},
		onShareAppMessage() {
		    return {
				title: '群众随时拍，部门马上办',
				path: '/pages/Index/Home',
				imageUrl: '/static/img/home/share.jpg'
		    }
		},
		onShareTimeline(){
			return {
				title: '群众随时拍，部门马上办',
				imageUrl: '/static/img/home/share.jpg'
			}
		},
		methods: {
			// 更新公告
			onGetRenewNotice(fun) {
				that.$admin.reqDirect({
					method: 'GET',
					url: '/api/v1/Snapshot/bulletions/popup'
				}).then(res => {
					that.renewNoticeData = res;
					typeof fun === 'function' && fun();
				})
			},
			onCancelTo() {
				that.isPopShow = false;
				that.renewNoticeTimeout = null;
			},
			// 切换体验版
			OnChangeMode(){
				if (that.modeType == 'base'){
					uni.setStorageSync('modeType', "care");
				}else if (that.modeType == 'care'){
					uni.setStorageSync('modeType', "base");
				}
				uni.reLaunch({
					url: "/pages/Index/Home"
				})
			}
		}
	}
</script>

<style lang="less">
	/* 自定提示弹窗 */
	.popMask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.2);
		line-height: 1 !important;
		z-index: 99;
	}
	
	.popContent {
		width: 80%;
		line-height: 1 !important;
	}
	
	.popTips {
		width: 100%;
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
		text-align: center;
		padding: 30rpx 0 10rpx;
		line-height: 1 !important;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
	}
	
	.popBody {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		font-size: 24rpx;
		color: #333;
		line-height: 1.5 !important;
		background-color: #fff;
		max-height: 600rpx;
		overflow-y: auto;
		word-break: break-all;
	}
	
	.popBtn {
		width: 100%;
		padding: 30rpx 0;
		text-align: center;
		font-size: 30rpx;
		letter-spacing: 2rpx;
		line-height: 1 !important;
		background-color: #fff;
		color: #3e6ffd;
		border-top: 2rpx #ebebeb solid;
		border-radius: 0 0 30rpx 30rpx;
	}
</style>