143 lines
3.0 KiB
Vue
143 lines
3.0 KiB
Vue
<!-- 优惠券item -->
|
|
<template>
|
|
<view class="item">
|
|
<view class="header">
|
|
<text class="title" v-if="item.couponType == 5">消费赠券</text>
|
|
<text v-else>{{ item.title }}</text>
|
|
<text class="id">ID:83713</text>
|
|
</view>
|
|
<view class="content">
|
|
<slot></slot>
|
|
</view>
|
|
<view class="total-info">
|
|
<view class="item">
|
|
<text class="info">
|
|
<template v-if="item.giveNum == -10086">无限</template>
|
|
<template v-else>{{ item.giveNum }}</template>
|
|
</text>
|
|
<text class="title">总发放</text>
|
|
</view>
|
|
<view class="item" v-if="item.couponType == 5">
|
|
<text class="info">{{ item.giftNum }}</text>
|
|
<view class="title">
|
|
<text class="t">已赠送</text>
|
|
<text class="l" @click="toDetail(item)">详情</text>
|
|
</view>
|
|
</view>
|
|
<template v-else>
|
|
<view class="item">
|
|
<text class="info">{{ item.giftNum }}</text>
|
|
<text class="title">已领取</text>
|
|
</view>
|
|
<view class="item">
|
|
<text class="info">{{ item.useNum }}</text>
|
|
<text class="title">已使用</text>
|
|
</view>
|
|
</template>
|
|
<view class="item">
|
|
<text class="info">
|
|
<template v-if="item.giveNum == -10086">无限</template>
|
|
<template v-else>{{ item.leftNum }}</template>
|
|
</text>
|
|
<text class="title">剩余</text>
|
|
</view>
|
|
</view>
|
|
<view class="footer-wrap">
|
|
<view class="btn">
|
|
<u-button shape="circle" @click="emits('delete', item)">删除</u-button>
|
|
</view>
|
|
<view class="btn">
|
|
<u-button shape="circle" type="primary" @click="emits('editor', item)">编辑</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import go from '@/commons/utils/go.js';
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
default: {}
|
|
}
|
|
});
|
|
|
|
const emits = defineEmits(['delete', 'editor']);
|
|
|
|
// 去领取详情
|
|
function toDetail(item) {
|
|
go.to('PAGES_COUPON_GET_DETAIL', { couponId: item.couponGiftList[0].couponId });
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.item {
|
|
background-color: #fff;
|
|
border-radius: 20upx;
|
|
padding: 28upx;
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.title {
|
|
font-size: 32upx;
|
|
color: #333;
|
|
}
|
|
.id {
|
|
font-size: 24upx;
|
|
color: #999;
|
|
background-color: #f8f8f8;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 8upx;
|
|
border-radius: 4upx;
|
|
}
|
|
}
|
|
.content {
|
|
margin-top: 28upx;
|
|
padding: 20upx;
|
|
background-color: #f8f8f8;
|
|
border-radius: 12upx;
|
|
}
|
|
.total-info {
|
|
display: flex;
|
|
.item {
|
|
flex: 1;
|
|
display: flex;
|
|
gap: 12upx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
.info {
|
|
font-weight: bold;
|
|
font-size: 28upx;
|
|
color: #333;
|
|
}
|
|
.title {
|
|
font-size: 24upx;
|
|
color: #999;
|
|
display: flex;
|
|
gap: 28upx;
|
|
.t {
|
|
font-size: 24upx;
|
|
color: #999;
|
|
}
|
|
.l {
|
|
font-size: 24upx;
|
|
color: #318afe;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.footer-wrap {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 28upx;
|
|
.btn {
|
|
width: 200upx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|