111 lines
2.1 KiB
Vue
111 lines
2.1 KiB
Vue
<!-- 优惠券item -->
|
|
<template>
|
|
<view class="item">
|
|
<view class="header">
|
|
<text class="title">{{ 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">{{ item.giveNum }}</text>
|
|
<text class="title">总发放</text>
|
|
</view>
|
|
<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>
|
|
<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">删除</u-button>
|
|
</view>
|
|
<view class="btn">
|
|
<u-button shape="circle" type="primary">编辑</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
default: {}
|
|
}
|
|
});
|
|
</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;
|
|
}
|
|
}
|
|
}
|
|
.footer-wrap {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 28upx;
|
|
.btn {
|
|
width: 200upx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|