pet-front/pages/workbenchManage/components/modal.vue

<template>
	<up-modal :show="show" :showConfirmButton="false">
		<view class="slot-content box">
			<image class="w-100" :src="state.info.partnerBackground"></image>
			<view class="size-32 fw700 title text-c w-100">
				{{state.info.prompt}}
			</view>
			<view class="size-32 fw700 w-100 text-c" v-html="state.info.promptText">
			</view>
			<view class="btn color-fff size-30 flex-rowc" @tap="close">
				我知道了
			</view>
		</view>
	</up-modal>
</template>

<script setup>
	import {
		successList
	} from "@/api/home.js"
	import {
		watch,
		ref,
		watchEffect,
		onMounted,
		reactive
	} from "vue"
	const props = defineProps({
		open: false
	})
	const emit = defineEmits(['close'])
	const show = ref(false)

	watch(() => props.open, (val) => {
		show.value = val
	})
	onMounted(() => {
		init()
	})
	const state = reactive({
		info: {}
	})
	const init = () => {
		successList().then(res => {
			state.info = res.rows[0]
		})
	}
	const close = () => {
		emit("close", false)
	}
</script>

<style scoped lang="scss">
	@import "@/style/index.scss";

	.box {
		width: 632rpx;
		background-color: #fff;
		border-radius: 8rpx;

		image {
			height: 190rpx;
		}

		.title {
			margin-top: 100rpx;
			margin-bottom: 45rpx;
		}

		.btn {
			width: 594rpx;
			height: 94rpx;
			border-radius: 94rpx;
			background-color: $mainColor;
			margin-top: 168rpx;
		}
	}
</style>