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

<template>
	<!-- 规格弹窗 -->
	<!-- showClose -->
	<su-popup :show="show" @close="colseWalletModal" 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>
				<template v-if="state.points && state.points  !== 'null' && points2point(state.points) > 0 || state.socialStatus && state.socialStatus  !== 'null'">
					<view class="model-title ss-flex ss-col-center ss-m-t-15 ss-font-35" v-if="state.points && points2point(state.points) > 0"> 
						获得佣金：{{ points2point(state.points) }}
					</view>
					<view class="model-title ss-flex ss-col-center ss-m-t-15 ss-font-35" v-if="state.socialStatus">
						获得身价：{{state.socialStatus}}
					</view>
				</template>
				<template v-else>
					<view class="model-title ss-flex ss-col-center ss-m-y-15 " >
						下单成功
					</view>
				</template>

			</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="colseWalletModal();">确认</button>
				</view>
			</view>
		</view>
	</su-popup>
</template>

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

	import {
		showWalletModal,
		colseWalletModal
	} from '@/sheep/hooks/useModal';
	import {
		points2point
	} from '@/sheep/hooks/useGoods';
	const headerBg = sheep.$url.css('/static/images/sign.png');
	const show = computed(() => sheep.$store('modal').getWallet);
	const state = computed(() => sheep.$store('modal').getWalletInfo)
	// 监听签到成功 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>