hainan_2024/h5/pages/premarital/readme/readme.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		ref
	} from 'vue'
	import {
		$api,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()
	import TitleComponent from '../src/title.vue'

	const tip_content = ref('')
	const getTipContent = async () => {
		uni.showLoading();
		const response = await $api("GetReadme", {
			type: '2'
		});
		uni.hideLoading();
		$response(response, () => {
			tip_content.value = response.data.content;
		});
	};

	const mountedAction = () => {
		getTipContent()
	}

	const config_ref = ref(null)
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e
			mountedAction()
		}
	}

	const toFormClick = () => {
		uni.navigateTo({
			url: '/pages/premarital/form/form'
		})
	}

	onShow(() => {
		if (!!config_ref.value) {
			mountedAction()
		}
	})
</script>
<template>
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<view class="page_wrapper">
			<TitleComponent title="预约须知"></TitleComponent>
			<view class="readme_wrapper">
				<view v-html="tip_content" class="text-28rpx" style="line-height: 50rpx;background-color: #fff;padding: 30rpx;"></view>
			</view>
			<view @click="toFormClick()" class="button_wrapper">立即预约</view>
			<view style="height: 100rpx;"></view>
		</view>
	</view>
</template>
<style scoped>
	.button_wrapper {
		background: #279EA3;
		color: #ffffff;
		font-size: 28rpx;
		text-align: center;
		line-height: 90rpx;
		height: 90rpx;
		width: 600rpx;
		border-radius: 10rpx;
		margin: 50rpx auto 0;
	}

	.page_wrapper {
		padding-top: 20rpx;
		width: calc(100% - 50rpx);
		margin: 0 auto;
	}

	.readme_wrapper {
		margin-top: 20rpx;
	}
</style>