会员，充值，明细，下单问题修复
This commit is contained in:
128
components/coupon/coupon-icon.vue
Normal file
128
components/coupon/coupon-icon.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<!-- 优惠券图标 -->
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="icon icon1" v-if="props.item.couponType == 1">
|
||||
<view class="top">
|
||||
<text class="i">￥</text>
|
||||
<text class="num">{{ props.item.discountAmount }}</text>
|
||||
</view>
|
||||
<view class="intro">
|
||||
<text class="t">满{{ props.item.fullAmount }}可用</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="icon icon2" v-if="props.item.couponType == 2">
|
||||
<view class="top">
|
||||
<text class="i">{{ props.item.discountNum }}件</text>
|
||||
<text class="num">商品兑换</text>
|
||||
</view>
|
||||
<view class="intro">
|
||||
<text class="t">满{{ props.item.fullAmount }}可用</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="icon icon3" v-if="props.item.couponType == 3">
|
||||
<view class="top">
|
||||
<text class="num">{{ props.item.discountRate }}折</text>
|
||||
</view>
|
||||
<view class="intro">
|
||||
<text class="t">满{{ props.item.fullAmount }}可用</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="icon icon2" v-if="props.item.couponType == 4">
|
||||
<view class="top">
|
||||
<text class="i">第二件</text>
|
||||
<text class="num">半价券</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="icon icon2" v-if="props.item.couponType == 6">
|
||||
<view class="top">
|
||||
<text class="i">买一送</text>
|
||||
<text class="num">一券</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$color: #ff1c1c;
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&.icon1 {
|
||||
.top {
|
||||
.i {
|
||||
color: $color;
|
||||
font-size: 24upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.num {
|
||||
color: $color;
|
||||
font-size: 72upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.icon2 {
|
||||
.top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.i {
|
||||
color: $color;
|
||||
font-size: 34upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.num {
|
||||
color: $color;
|
||||
font-size: 34upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.icon3 {
|
||||
.top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.i {
|
||||
color: $color;
|
||||
font-size: 34upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.num {
|
||||
color: $color;
|
||||
font-size: 52upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.t {
|
||||
font-size: 22upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
82
components/coupon/list.vue
Normal file
82
components/coupon/list.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<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">({{list.length}})张</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 class="item u-flex u-m-b-32 u-col-center" v-for="(item,index) in list" :key="index">
|
||||
<view class="left">
|
||||
<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>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from 'dayjs';
|
||||
import couponIcon from './coupon-icon.vue'
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
})
|
||||
const show = defineModel(false)
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user