93 lines
2.1 KiB
Vue
93 lines
2.1 KiB
Vue
<template>
|
||
<view>
|
||
<up-popup :show="show" mode="center" round="16rpx" close-on-click-overlay @close="close">
|
||
<view class="model-box">
|
||
<view class="u-flex u-flex-between">
|
||
<view class="">
|
||
<text class="color-333 font-16">查看优惠券</text>
|
||
<text class="color-666 font-14">({{couponList }})张</text>
|
||
</view>
|
||
<up-icon name="close-circle" color="#666" size="28rpx" @click="close"></up-icon>
|
||
</view>
|
||
<scroll-view scroll-y="true" class="u-m-t-42" style="max-height: 50vh;">
|
||
<view class="list">
|
||
<view v-for="(item,index) in list" :key="index">
|
||
<view class="item u-flex u-m-b-32 u-col-center" v-for="(item1,index1) in item.num">
|
||
<view class="left" style="min-width: 162rpx;">
|
||
<couponIcon :item="item.coupon" />
|
||
<!-- <view class="red font-16 font-700" style="width: 122rpx;">第二件半价券</view> -->
|
||
<view></view>
|
||
</view>
|
||
|
||
<view class="u-flex-1 u-p-l-26 ">
|
||
<view class="color-333 font-16">
|
||
{{item.coupon.title }}
|
||
</view>
|
||
<view class="color-999 font-12 u-m-t-8">
|
||
有效期至：{{item.coupon.validEndTime||''}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</scroll-view>
|
||
|
||
</view>
|
||
</up-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import dayjs from 'dayjs';
|
||
import couponIcon from './coupon-icon.vue'
|
||
import {
|
||
computed
|
||
} from 'vue';
|
||
const props = defineProps({
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
list: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
}
|
||
})
|
||
const show = defineModel(false)
|
||
const couponList = computed(() => {
|
||
return props.list.reduce((prve, cur) => {
|
||
return prve + cur.num
|
||
}, 0)
|
||
})
|
||
|
||
function close() {
|
||
show.value = false
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.model-box {
|
||
width: 660rpx;
|
||
padding: 28rpx 48rpx;
|
||
}
|
||
|
||
.list {
|
||
.item {
|
||
padding: 32rpx 32rpx 32rpx 16rpx;
|
||
border-radius: 36rpx;
|
||
background: #F8F8F8;
|
||
|
||
.left {
|
||
padding-right: 24rpx;
|
||
border-right: 1px solid #EDEDED;
|
||
}
|
||
}
|
||
}
|
||
|
||
.red {
|
||
color: #FF1C1C;
|
||
}
|
||
</style> |