完善优惠券管理页面

src/views/CouponManage.vue

@@ -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-item" v-for="coupon in couponList" :key="coupon.id">
-        <div class="coupon-details">
+        <div class="coupon-info">
-          {{ getCouponName(coupon.couponInfo.type) }}-{{ coupon.use_time === null ? '未使用' : '已使用' }}-{{ coupon.couponInfo.products_id }}
+          <div class="coupon-name">{{ getCouponName(coupon.couponInfo.type) }}</div>
-          <div v-for="(product,index) in coupon.couponInfo.products" :key="product" @click="$router.push(`/productsummary/${coupon.couponInfo.products_id[index]}`)">
+          <div class="right">
-            {{ product.name }}
+            <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>
-          <br>
+        </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>
+      <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: '满减券',
+    'discount_for_a_amount': '满减券',
-    deduction: '抵扣券',
+    'deduction': '抵扣券',
-    discount: '折扣券',
+    '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>