121 lines
2.1 KiB
Vue
121 lines
2.1 KiB
Vue
<template>
|
|
<uni-popup type='bottom' ref='popupRef' :mask-click='false'>
|
|
<view class='popup-content c-flex-column'>
|
|
<view class='c-flex-row'>
|
|
<text>优惠券</text>
|
|
<text @click.stop='close'>确定</text>
|
|
</view>
|
|
|
|
<scroll-view>
|
|
<coupon-item v-for='item in coupons' :item='item' />
|
|
</scroll-view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script lang='ts' setup>
|
|
import CouponItem from '../components/coupon-item.vue';
|
|
|
|
const popupRef = ref();
|
|
const coupons = [{
|
|
id: 1,
|
|
title: '优惠券',
|
|
desc: '满100减10',
|
|
price: 100,
|
|
threshold: 10,
|
|
priceDesc: '满100减10',
|
|
useTime: '2021-12-31',
|
|
status: 1,
|
|
useStatus: '未使用'
|
|
}, {
|
|
id: 1,
|
|
title: '优惠券',
|
|
desc: '满100减10',
|
|
price: 200,
|
|
threshold: 80,
|
|
priceDesc: '满100减10',
|
|
useTime: '2021-01-01',
|
|
status: 1,
|
|
useStatus: '未使用'
|
|
}, {
|
|
id: 1,
|
|
title: '优惠券',
|
|
desc: '满100减10',
|
|
price: 300,
|
|
threshold: 60,
|
|
priceDesc: '满100减10',
|
|
useTime: '2023-12-31',
|
|
status: '0',
|
|
useStatus: '未使用'
|
|
}, {
|
|
id: 1,
|
|
title: '优惠券',
|
|
desc: '满100减10',
|
|
price: 50,
|
|
threshold: 50,
|
|
priceDesc: '满100减10',
|
|
useTime: '2021-10-31',
|
|
status: 0,
|
|
useStatus: '未使用'
|
|
}, {
|
|
id: 1,
|
|
title: '优惠券',
|
|
desc: '满1000减30',
|
|
price: 200,
|
|
threshold: 30,
|
|
priceDesc: '满100减10',
|
|
useTime: '2024-12-31',
|
|
status: 0,
|
|
useStatus: '未使用'
|
|
}];
|
|
|
|
const show = () => {
|
|
popupRef.value.open();
|
|
};
|
|
|
|
const close = () => {
|
|
popupRef.value.close();
|
|
};
|
|
|
|
defineExpose({
|
|
show
|
|
});
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.popup-content {
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
padding: 38rpx 45rpx 0 45rpx;
|
|
|
|
view:nth-of-type(1) {
|
|
display: flex;
|
|
margin-bottom: 70rpx;
|
|
position: relative;
|
|
|
|
text:nth-of-type(1) {
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
text:nth-of-type(2) {
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
color: #F32B2B;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
scroll-view {
|
|
max-height: 600rpx;
|
|
}
|
|
|
|
}
|
|
</style>
|