完善优惠券管理页面
This commit is contained in:
BIN
public/imgs/line.png
Normal file
BIN
public/imgs/line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 B |
@@ -1,17 +1,52 @@
|
||||
<template>
|
||||
<div class="coupon-container">
|
||||
<div class="header"><h1 class="title">优惠券管理</h1></div>
|
||||
<div class="header">
|
||||
<div class="back-btn" @click="$router.go(-1)"><</div>
|
||||
<div class="header-text">
|
||||
优惠券包
|
||||
</div>
|
||||
<div class="link-btn" @click="$router.push('/coupon')">领券中心</div>
|
||||
</div>
|
||||
|
||||
<div class="coupon-list">
|
||||
<div v-for="coupon in couponList" :key="coupon.id" class="coupon-item">
|
||||
<div class="coupon-details">
|
||||
{{ getCouponName(coupon.couponInfo.type) }}-{{ coupon.use_time === null ? '未使用' : '已使用' }}-{{ coupon.couponInfo.products_id }}
|
||||
<div v-for="(product,index) in coupon.couponInfo.products" :key="product" @click="$router.push(`/productsummary/${coupon.couponInfo.products_id[index]}`)">
|
||||
<div class="coupon-item" v-for="coupon in couponList" :key="coupon.id">
|
||||
<div class="coupon-info">
|
||||
<div class="coupon-name">{{ getCouponName(coupon.couponInfo.type) }}</div>
|
||||
<div class="right">
|
||||
<div class="coupon-title">
|
||||
{{ getCouponTitle(coupon.couponInfo.type)[0] }}
|
||||
<span class="value">
|
||||
{{ coupon.couponInfo.discount === "0.00" ? coupon.couponInfo.price === "0.00" ? coupon.couponInfo.precent/10 : coupon.couponInfo.price : coupon.couponInfo.discount }}
|
||||
</span>
|
||||
{{ getCouponTitle(coupon.couponInfo.type)[1] }}
|
||||
</div>
|
||||
<div class="coupon-describe">{{ getCouponDescribe(coupon.couponInfo.type, coupon.couponInfo.for_a_amount === "0.00" ? coupon.couponInfo.price === "0.00" ? coupon.couponInfo.precent : coupon.couponInfo.price : coupon.couponInfo.for_a_amount) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/imgs/line.png" alt="虚线" class="line-image">
|
||||
<div class="coupon-bottom">
|
||||
{{ coupon.use_time === null ? '未使用' : '已使用' }}
|
||||
<span class="text" @click="showCouponDetail(coupon)">适用商品</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-drawer
|
||||
title="优惠券详情"
|
||||
v-model="dialogVisible"
|
||||
width="50%"
|
||||
direction="btt"
|
||||
size="90%"
|
||||
show_close
|
||||
>
|
||||
<div class="product-item" v-for="(product, index) in couponDetail.products" :key="product.id" @click="$router.push(`/productsummary/${couponDetail.products_id[index]}`)">
|
||||
{{ product.name }}
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="dialogVisible = false">确定</el-button>
|
||||
</template>
|
||||
</el-drawer>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -24,6 +59,9 @@ const user = useUserStore().user
|
||||
|
||||
const couponList = ref([])
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const couponDetail = ref([])
|
||||
|
||||
const getCouponList = async () => {
|
||||
const response = await api.get(`/coupon/user/${user.id}`)
|
||||
couponList.value = response.data.coupon
|
||||
@@ -31,18 +69,199 @@ const getCouponList = async () => {
|
||||
|
||||
const getCouponName = (couponType) => {
|
||||
const couponName = {
|
||||
discount_for_a_amount: '满减券',
|
||||
deduction: '抵扣券',
|
||||
discount: '折扣券',
|
||||
'discount_for_a_amount': '满减券',
|
||||
'deduction': '抵扣券',
|
||||
'discount': '折扣券',
|
||||
}
|
||||
return couponName[couponType] || couponType
|
||||
}
|
||||
|
||||
const getCouponTitle = (couponType) => {
|
||||
const couponTitle = {
|
||||
'discount_for_a_amount': ['￥',''],
|
||||
'deduction': ['￥',''],
|
||||
'discount': ['商品','折券'],
|
||||
}
|
||||
return couponTitle[couponType] || couponType
|
||||
}
|
||||
|
||||
const getCouponDescribe = (couponType, value) => {
|
||||
const couponDescribe = {
|
||||
'discount_for_a_amount': '满'+value+'可用',
|
||||
'deduction': '指定商品可用',
|
||||
'discount': '指定商品可用',
|
||||
}
|
||||
return couponDescribe[couponType] || couponType
|
||||
}
|
||||
|
||||
const showCouponDetail = (coupon) => {
|
||||
couponDetail.value = coupon.couponInfo
|
||||
dialogVisible.value = true
|
||||
console.log(coupon)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getCouponList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.coupon-container {
|
||||
background: linear-gradient(180deg, #E3E8FF 0%, #ffffff00 100%);
|
||||
background-blend-mode: lighten;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
height: 46px;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
font-size: 15px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
color: #000000;
|
||||
background: transparent;
|
||||
border: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-left: 30px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
opacity: 1;
|
||||
font-family: SF Pro;
|
||||
font-weight: 650;
|
||||
font-style: Expanded Semibold;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
background: #CADBFF;
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
padding-right: 16px;
|
||||
padding-left: 16px;
|
||||
gap: 10px;
|
||||
opacity: 1;
|
||||
border-radius: 99px;
|
||||
border: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 10px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.coupon-item {
|
||||
background: #F5F7FF;
|
||||
width: 334px;
|
||||
height: 116px;
|
||||
padding-top: 8px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 8px;
|
||||
padding-left: 10px;
|
||||
gap: 10px;
|
||||
opacity: 1;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 2px 4px 4px 0px #00000040;
|
||||
}
|
||||
|
||||
.coupon-info {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.coupon-name {
|
||||
background: #D4E2FF;
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
padding-right: 16px;
|
||||
padding-left: 16px;
|
||||
gap: 10px;
|
||||
opacity: 1;
|
||||
border-radius: 99px;
|
||||
font-size: 15px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
color: #2F4FB5;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.coupon-title,
|
||||
.coupon-describe {
|
||||
width: 300px;
|
||||
height: 28px;
|
||||
opacity: 1;
|
||||
font-family: SF Pro;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
vertical-align: middle;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.coupon-title {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
color: #2F4FB5;
|
||||
}
|
||||
|
||||
.line-image {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.coupon-bottom {
|
||||
margin-top: 5px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
margin-left: 170px;
|
||||
margin-top: 5px;
|
||||
background: #2954E0;
|
||||
color: #ffffff;
|
||||
height: 28px;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
gap: 10px;;
|
||||
opacity: 1;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user