系统升级前端展示修仙图或升级公告

本文链接：https://blog.csdn.net/little_shallot/article/details/129616703

highlight: docco
theme: juejin

有时候线上项目会出现BUG需要紧急维护升级需要一定时间，期间用户操作就会报错，所以我们可以在前端加一个校验，可以让用户知道系统正在升级，减少客诉同时也方便开发调试

这里我用的是腾讯云的cos存储桶（也可以使用后台配置），新建一个update-config.json文件，相关配置如下：

isUpdate 是否开启修仙图
isDebug 是否开启调试模式
debugData 调试命令
content 公告内容
update0 、 update1 自定义页面图片（这个根据自己的需求来定义）

{
  "isUpdate": false,
  "isDebug": false,
  "debugData": 250,
  "isUpdateImage": {
    "content": "<p>尊敬的用户您好！</p><p>XXX平台，于2022-9月29日 晚上11:30:00  至  2022-9月30日 03:00:00 进行系统维护~ 敬请期待！</p>",
    "update0": "http2.png", 
    "update1": "http1.png"
  }
}

开启调试模式可以让开发人员绕过校验，如www.baidu.com，正常进入会被拦截，我们只需要加上在链接后面加上debug=250 如：www.baidu.com?debug=250 就可正常进入进行调试

写完配置我们开始写页面代码，首先在全局入口这个判断一下，我用的是uniapp

在App.vue里面获取传参，调用vuex里面的方法并传参

// #endif
	async onLaunch(opt) {
		// #ifdef H5
		// 修仙图开启调试模式
		this.$store.dispatch('app/getDebugCongif', opt.query?.debug || '')
                }

获取升级配置


//vuex
const state = {
	isUpdate: false, //是否展示升级公告
	isUpdateCongifData: {}, //升级公告配置
	debugData: '',
	isDebug: false,
	debugCongif: '',
}
const mutations = {
	SET_DEBUG_DATA: (state, data) => {
		state.debugData = data.debugData
		state.isDebug = data.isDebug
	},
        SET_DEBUG_CONGIF: (state, data) => {
		state.debugCongif = data
	},
	SET_IS_UPDATE: (state, data) => {
		state.isUpdate = data
	},
	SET_IS_UPDATE_CONFIG_DATA: (state, data) => {
		state.isUpdateCongifData = data
	},
}

const actions = {
        //获取链接参数
	getDebugCongif({ commit ,dispatch}, data) {
		let item = data
                dispatch('getUpdateCongif')
		if (item) {
			commit('SET_DEBUG_CONGIF', item)
		}
	},
        
        //获取配置
        getUpdateCongif({ commit, state }) {
                //接口获取配置
		fetchUpdateConfig().then(res => {
			if (res?.data?.isUpdate + '') {
				if (res?.data.isUpdate + '' === state.isUpdate + '') return
				commit('SET_IS_UPDATE', res?.data.isUpdate)
				commit('SET_IS_UPDATE_CONFIG_DATA', res?.data.isUpdateImage)
				commit('SET_DEBUG_DATA', res.data)
			}
		})
	},
        }
        
  export default {
	namespaced: true,
	state,
	mutations,
	actions,
	getters
}

拿到配置就可以去写组件了，挂载在全局（代码仅供参考）

<template>
	<view class="update" v-if="isUpdate">
		<view class="box">
			<view class="box1">
				<view
					class="content"
					:style="{ backgroundImage: `url(${$ui.getCdnImage(updateData.update1)})` }"
				>
					<view class="head">
						<image
							mode="heightFix"
							:src="$ui.getCdnImage(updateData.update0)"
							class="img"
						/>
					</view>
					<view class="text">
						<scroll-view class="scrollBox" scroll-y="true" height="100%">
							<!-- <view style="height: 100%; line-height: 53rpx">
								{{ updateData.content }}
							</view> -->
							<mp-html
								@imgtap="richTextClick"
								@linktap="richTextClick"
								:content="updateData.content"
							></mp-html>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { checkHtmlClickAction } from '@/libs/utils/rich-text'
export default {
	name: 'biz-update-page',
	data() {
		return {}
	},
	computed: {
		updateData() {
			return this.$store.state.app.isUpdateCongifData
		},
		isUpdate() {
			if (
				this.$store.state.app.isUpdate &&
				this.isDebug &&
				this.debugData + '' === this.debugCongif + ''
			) {
				return false
			} else {
				return this.$store.state.app.isUpdate || false
			}
		},
		debugCongif() {
			return this.$store.state.app.debugCongif || ''
		},
		debugData() {
			return this.$store.state.app.debugData || ''
		},
		isDebug() {
			return this.$store.state.app.isDebug || false
		}
	},
	methods: {
		richTextClick(evt) {
			checkHtmlClickAction(evt)
		}
	}
}
</script>

<style lang="scss" scoped>
.update {
	position: fixed;
	z-index: 2147483647 !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		180deg,
		rgba(255, 252, 249, 1) 0%,
		rgba(255, 234, 215, 1) 52%,
		rgba(255, 240, 223, 1) 100%
	);
}
.box {
	position: absolute;
	top: 10vh;
	left: 0;
	right: 0;
	bottom: 10vh;
	.box1 {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.content {
		margin: 0 44rpx;
		width: 664rpx;
		height: 80vh;
		margin-top: 100rpx;
		background: #fff;
		border-radius: 37rpx;

		background-size: 664rpx 620rpx;
		background-repeat: no-repeat;
		background-position: 0 0;
		position: relative;
	}
	.head {
		height: 488rpx;
		.img {
			width: 332rpx;
			height: 457rpx;
			position: absolute;
			top: -98rpx;
			left: 174rpx;
		}
	}

	.text {
		color: #666666;
		font-size: 29rpx;
		font-weight: 400;
		position: absolute;
		top: 488rpx;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 6rpx 28rpx 6rpx 35rpx;
	}
	.scrollBox {
		display: inline-block;
		height: 100%;
	}
	.bottom {
		display: flex;
		justify-content: center;
		margin-top: 58rpx;
		.left {
			width: 325rpx;
			height: 87rpx;
			border: 2rpx solid #fd8902;
			color: #fd8902;
			font-size: 29rpx;
			font-weight: 400;
			line-height: 87rpx;
			text-align: center;
			margin-right: 15rpx;
		}
		.right {
			width: 325rpx;
			height: 87rpx;
			color: #fff;
			font-size: 29rpx;
			font-weight: 400;
			line-height: 87rpx;
			text-align: center;
			background: linear-gradient(
				225deg,
				rgba(253, 137, 2, 1) 0%,
				rgba(255, 190, 115, 1) 100%
			);
		}
	}
}
</style>