mall-front-app/sheep/components/s-signup-modal/s-signup-modal.vue

<template>
	<!-- 规格弹窗 -->
	<!-- showClose -->
	<su-popup :show="show" @close="colseSignUpModal" type="center"  round="10">
		<view class="model-box ss-flex-col">
			<view class="ss-m-t-56 ss-flex-col ss-col-center">
				<text class="cicon-check-round"></text>
				<view class="score-title">恭喜！自动签到成功！</view>
				<view class="model-title ss-flex ss-col-center ss-m-t-22 ss-m-b-30">
					获得每日签到{{state?.social}}点身价
				</view>
				<view class="model-title ss-flex ss-col-center ss-m-b-30" v-if="state?.upgradeOrNot ">
					您已升级等级为{{ state?.socialStatusName }}
				</view>
			</view>
			<view class="model-bg ss-flex-col ss-col-center ss-row-right">
				<view class="ss-m-b-40">
					<button class="ss-reset-button confirm-btn" @tap="colseSignUpModal();">确认</button>
				</view>
			</view>
		</view>
	</su-popup>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		watch
	} from 'vue';
	import sheep from '@/sheep';

	import {
		colseSignUpModal,
		showSignUpModal
	} from '@/sheep/hooks/useModal';
	const headerBg = sheep.$url.css('/static/images/sign.png');
	const show = computed(() => sheep.$store('modal').signUp);
	const state = computed(() => sheep.$store('modal').signUpInfo)
	// 监听签到成功 3s之后自动关闭
	watch(() => show.value, (newValue) => {
		if(newValue){
			setTimeout(colseSignUpModal,3000)
		}
	})
</script>

<style lang="scss" scoped>
	.model-box {
		width: 520rpx;
		// height: 590rpx;
		background: linear-gradient(177deg, #ff6000 0%, #fe832a 100%);
		// background: linear-gradient(177deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		border-radius: 10rpx;

		.cicon-check-round {
			font-size: 70rpx;
			color: #fff;
		}

		.score-title {
			font-size: 34rpx;
			font-family: OPPOSANS;
			font-weight: 500;
			color: #fcff00;
		}

		.model-title {
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.model-bg {
			width: 520rpx;
			height: 6.75rem;
			background-size: 100% 100%;
			background-image: v-bind(headerBg);
			background-repeat: no-repeat;
			border-radius: 0 0 10rpx 10rpx;

			.title {
				font-size: 34rpx;
				font-weight: bold;
				// color: var(--ui-BG-Main);
				color: #ff6000;
			}

			.subtitle {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
			}

			.cancel-btn {
				width: 220rpx;
				height: 70rpx;
				border: 2rpx solid #ff6000;
				border-radius: 35rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #ff6000;
				line-height: normal;
				margin-right: 10rpx;
			}

			.confirm-btn {
				width: 300rpx;
				height: 70rpx;
				background: linear-gradient(90deg, #ff6000, #fe832a);
				box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
				border-radius: 35rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: normal;
			}
		}
	}
</style>