new-zx-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">{{ t('pop.congratulations') }}</view>
				<view class="model-title ss-flex ss-col-center ss-m-y-15 ">
					{{ t('pop.order_success') }}
				</view>
			</view>
			<view class="model-bg ss-flex-col ss-col-center ss-row-right">
				<view class="ss-m-b-40 ss-flex ss-row-center " style="gap: 10rpx;">
					<button class="ss-reset-button confirm-btn"
						@tap="colseWalletModal(); sheep.$router.redirect('/pages/index/index')">返回首页</button>
					<button class="ss-reset-button confirm-btn "
						@tap="colseWalletModal(); sheep.$router.redirect('/pages/order/list', { type: 2 })">查看订单</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';
import { t } from '@/locale'
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;
		}


		.confirm-btn {
			width: 200rpx;
			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>