You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
4.0 KiB
156 lines
4.0 KiB
<template>
|
|
<su-popup
|
|
:show="show"
|
|
type="center"
|
|
round="15"
|
|
@close="emits('close')"
|
|
backgroundColor="#fff"
|
|
>
|
|
<view class="model-box">
|
|
<view class="model-box-header">
|
|
<image class="model-box-header-image" src="/static/counpon-header.png" />
|
|
<view class="model-box-header-title">恭喜升级</view>
|
|
<view class="model-box-header-des">恭喜您升级为<text>{{ level }} </text>，</view>
|
|
<view class="model-box-header-des">平台赠送商品券<text>请选择</text>。</view>
|
|
</view>
|
|
<view class="model-box-content">
|
|
<view class="model-box-content-item" v-for="(item, idx) in dataList" :key="item.type">
|
|
<view class="model-box-content-item-title ss-flex ss-col-center ss-row-between">
|
|
<view>{{ item.type }}</view>
|
|
<radio
|
|
:checked="state.current_type.includes(item.key)"
|
|
color="var(--ui-BG-Main)"
|
|
style="transform: scale(0.6)"
|
|
@tap.stop="onChange(item.key)"
|
|
/>
|
|
</view>
|
|
<view class="model-box-content-item-cont" v-for="unit in item.typeList" :key="unit.name">
|
|
<view class="model-box-content-item-cont-name">{{ unit.name }}</view>
|
|
<view class="model-box-content-item-cont-time">有效期：{{ unit.time }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="modal-footer ss-flex ss-row-center ss-col-center ss-m-t-80 ss-m-b-40">
|
|
<button
|
|
class="ss-reset-button save-btn"
|
|
@tap="onConfirm"
|
|
>
|
|
确定
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</su-popup>
|
|
</template>
|
|
<script setup>
|
|
import { computed, reactive } from 'vue';
|
|
const props = defineProps({
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
dataList: {
|
|
type: Array,
|
|
default: () => [{
|
|
type: '方案一',
|
|
key: 'programme_1',
|
|
typeList: []
|
|
}, {
|
|
type: '方案二',
|
|
key: 'programme_2',
|
|
typeList: []
|
|
}],
|
|
},
|
|
level: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
const emits = defineEmits(['get', 'close']);
|
|
const state = reactive({
|
|
current_type: '',
|
|
});
|
|
function onChange(key) {
|
|
state.current_type = key;
|
|
}
|
|
function onConfirm() {
|
|
emits('get', state.current_type);
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.model-box {
|
|
width: 554rpx;
|
|
height: 957rpx;
|
|
&-header {
|
|
text-align: center;
|
|
position: relative;
|
|
&-image {
|
|
width: 298rpx;
|
|
height: 64rpx;
|
|
}
|
|
&-title {
|
|
width: 100%;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
margin-top: -60rpx;
|
|
margin-bottom: 44rpx;
|
|
}
|
|
&-des {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
margin-bottom: 10rpx;
|
|
text {
|
|
color: var(--ui-BG-Main);
|
|
}
|
|
&:last-child {
|
|
margin-bottom: 43rpx;
|
|
}
|
|
}
|
|
}
|
|
&-content {
|
|
padding: 0 34rpx;
|
|
&-item {
|
|
margin-bottom: 45rpx;
|
|
&-title {
|
|
height: 24rpx;
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #010101;
|
|
border-left: 7rpx solid var(--ui-BG-Main);
|
|
padding-left: 10rpx;
|
|
margin-left: 10rpx;
|
|
margin-bottom: 19rpx;
|
|
}
|
|
&-cont {
|
|
background: #FFFFFF;
|
|
border-radius: 15rpx 15rpx 15rpx 15rpx;
|
|
border: 2rpx solid #ccc;
|
|
padding: 26rpx 63rpx;
|
|
&:last-child {
|
|
margin-top: 10rpx;
|
|
}
|
|
&-name {
|
|
font-weight: 500;
|
|
font-size: 22rpx;
|
|
color: #000000;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
&-time {
|
|
font-weight: 400;
|
|
font-size: 17rpx;
|
|
color: #898989;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.save-btn {
|
|
width: 513rpx;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main));
|
|
color: $white;
|
|
}
|
|
</style>
|
|
|