新增优惠卷管理相关

src/router/index.js

@@ -234,9 +234,15 @@ const routes = [
     {
         path: '/coupon',
         name: 'Coupon',
-        component: () => import('@/views/CouponManage.vue'),
+        component: () => import('@/views/CouponGet.vue'),
         meta: {title: '优惠券', requiresAuth: true}
     },
+    {
+        path: '/couponmanage',
+        name: 'CouponManage',
+        component: () => import('@/views/CouponManage.vue'),
+        meta: {title: '优惠券管理', requiresAuth: true}
+    },
     {
         path: '/:pathMatch(.*)*',
         name: 'NotFound',

src/views/CouponGet.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="coupon-container">
+    <div class="header">
+      <div class="back-btn" @click="$router.go(-1)"><</div>
+      <div class="header-text">
+        优惠券包
+      </div>
+    </div>
+
+    <div class="coupon-content">
+      <div class="discount_for_a_amount_container">
+        <div class="container-title">
+          满减券限量
+        </div>
+        <div class="coupons-content">
+          <div class="coupon-item" v-for="coupon in coupons" :key="coupon.id">
+            <div class="coupon-filtered-item" v-if="coupon.type === 'discount_for_a_amount'" 
+            :style="{
+              backgroundImage: coupon.got
+                ? 'url(/imgs/shop/coupon/bg_useless1.png)' 
+                : 'url(/imgs/shop/coupon/bg_useful1.png)'
+            }">
+              <div class="text-left">￥{{ coupon.discount }}</div>
+              <div class="text-mid-w">满{{ coupon.for_a_amount }}可用</div>
+              <div class="text-right" @click="getCoupon('discount_for_a_amount',coupon.id)" v-if="!coupon.got">立即领取</div>
+              <div class="text-right" v-else>已领取</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="discount_container">
+        <div class="container-title" style="margin-bottom: 10px;">
+          抵扣券限量
+        </div>
+        <div class="coupons-content grid-container">
+          <div class="coupon-item" v-for="coupon in coupons" :key="coupon.id">
+            <div class="coupon-filtered-item2" v-if="coupon.type === 'deduction'"
+            :style="{
+              backgroundImage: coupon.got
+                ? 'url(/imgs/shop/coupon/bg_useless2.png)' 
+                : 'url(/imgs/shop/coupon/bg_useful2.png)'
+            }">
+              <div class="text-top">￥{{ coupon.price }}</div>
+              <div class="text-mid-h">无门槛</div>
+              <div class="text-bottom" @click="getCoupon('deduction',coupon.id)" v-if="!coupon.got">立即领取</div>
+              <div class="text-bottom" v-else>已领取</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="deduction_container">
+        <div class="container-title">
+          折扣券限量
+        </div>
+        <div class="coupons-content">
+          <div class="coupon-item" v-for="coupon in coupons" :key="coupon.id">
+            <div class="coupon-filtered-item" v-if="coupon.type === 'discount'"
+            :style="{
+              backgroundImage: coupon.got
+                ? 'url(/imgs/shop/coupon/bg_useless1.png)' 
+                : 'url(/imgs/shop/coupon/bg_useful1.png)'
+            }">
+              <div class="text-left">{{ coupon.precent/10 }}折</div>
+              <div class="text-right" @click="getCoupon('discount',coupon.id)" v-if="!coupon.got">立即领取</div>
+              <div class="text-right" v-else>已领取</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useUserStore } from '@/stores/user'
+import api from '@/utils/api'
+import { ElMessage } from 'element-plus'
+
+const userStore = useUserStore()
+
+const coupons = ref([])
+
+const getAllCoupons = async () => {
+  const {data} = await api.get('/coupon',{
+    params: {
+      user_id: userStore.user.id
+    }
+  })
+  if (data.success) {
+    coupons.value = data.coupon
+    console.log(123,coupons.value)
+  } else {
+    ElMessage.error(data.message || '优惠券领取失败')
+  }
+}
+
+const getCoupon = async (coupon_type,coupon_id) => {
+  try {
+    const {data} = await api.get(`/coupon/${userStore.user.id}`,{
+      params: {
+        coupon_type: coupon_type,
+        coupon_id: coupon_id
+      }
+    })
+    if (data.success) {
+      ElMessage.success('优惠券领取成功')
+      getAllCoupons()
+    } else {
+      ElMessage.error(data.msg || '优惠券领取失败')
+    }
+  } catch (error) {
+    ElMessage.error('优惠券领取失败')
+    console.error('优惠券领取失败:', error)
+  }
+}
+
+onMounted(() => {
+  getAllCoupons()
+})
+</script>
+
+<style scoped>
+.coupon-container {
+  width: 100%;
+  height: 100vh;
+  background-image: url(/imgs/shop/coupon/background.png);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 20px;
+  position: relative;
+}
+
+.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%;
+  color: #2F4FB5;
+  text-align: center;
+}
+
+.coupon-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+  padding: 20px;
+  height: 100vh;
+}
+
+.discount_for_a_amount_container,
+.discount_container,
+.deduction_container {
+  background: white;
+  width: 348px;
+  padding: 10px;
+  top: 32px;
+  opacity: 1;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.container-title {
+  width: 96;
+  height: 20;
+  top: 324px;
+  left: 105px;
+  opacity: 1;
+  font-family: SF Pro;
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0%;
+  color: #2F4FB5;
+  text-align: center;
+}
+
+.coupon-filtered-item {
+  width: 324px;
+  height: 66px;
+  top: 58px;
+  left: 12px;
+  opacity: 1;
+  background-size: 100% 100%;
+  margin-top: 10px;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+}
+
+.text-left {
+  font-size: 25px;
+  font-weight: bold;
+  color: #305DEF;
+}
+
+.text-mid-w {
+  font-size: 14px;
+  color: #305DEF;
+  flex: 1;
+  text-align: center;
+  font-family: SF Pro;
+  font-weight: 590;
+  font-style: Semibold;
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: 0%;
+}
+
+.text-right {
+  font-size: 14px;
+  color: #ffffff;
+  cursor: pointer;
+  padding: 5px 10px;
+  border-radius: 100px;
+  background: #305DEF;
+  transition: background-color 0.3s;
+  margin-right: -10px;
+}
+
+.text-right:hover {
+  background-color: #305DEF;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  justify-items: center;
+}
+
+.coupon-item {
+  display: contents;
+}
+
+.coupon-filtered-item2 {
+  width: 83px;
+  height: 94px;
+  opacity: 1;
+  border-radius: 4px;
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+}
+
+.text-top {
+  font-family: SF Pro;
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 18px;
+  line-height: 20px;
+  letter-spacing: 0%;
+  color: #305DEF;
+}
+
+.text-mid-h {
+  font-family: SF Pro;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 15px;
+  line-height: 20px;
+  letter-spacing: 0%;
+  color: #305DEF;
+  margin-top: 10px;
+}
+
+.text-bottom {
+  font-size: 10px;
+  color: #305DEF;
+  cursor: pointer;
+  padding: 5px 10px;
+  border-radius: 100px;
+  transition: background-color 0.3s;
+  margin-top: 8px;
+}
+</style>

src/views/CouponManage.vue

@@ -1,305 +1,49 @@
 <template>
   <div class="coupon-container">
-    <div class="header">
+    <div class="header"><h1 class="title">优惠券管理</h1></div>
-      <div class="back-btn" @click="$router.go(-1)"><</div>
+    <div class="coupon-list">
-      <div class="header-text">
+      <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]}`)">
+            {{ product.name }}
           </div>
-    </div>
+          <br>
-
-    <div class="coupon-content">
-      <div class="discount_for_a_amount_container">
-        <div class="container-title">
-          满减券限量
-        </div>
-        <div class="coupons-content">
-          <div class="coupon-item" v-for="coupon in coupons" :key="coupon.id">
-            <div class="coupon-filtered-item" v-if="coupon.type === 'discount_for_a_amount'" 
-            :style="{
-              backgroundImage: coupon.got
-                ? 'url(/imgs/shop/coupon/bg_useless1.png)' 
-                : 'url(/imgs/shop/coupon/bg_useful1.png)'
-            }">
-              <div class="text-left">￥{{ coupon.discount }}</div>
-              <div class="text-mid-w">满{{ coupon.for_a_amount }}可用</div>
-              <div class="text-right" @click="getCoupon('discount_for_a_amount',coupon.id)" v-if="!coupon.got">立即领取</div>
-              <div class="text-right" v-else>已领取</div>
         </div>
       </div>
     </div>
   </div>
-      <div class="discount_container">
-        <div class="container-title" style="margin-bottom: 10px;">
-          抵扣券限量
-        </div>
-        <div class="coupons-content grid-container">
-          <div class="coupon-item" v-for="coupon in coupons" :key="coupon.id">
-            <div class="coupon-filtered-item2" v-if="coupon.type === 'deduction'"
-            :style="{
-              backgroundImage: coupon.got
-                ? 'url(/imgs/shop/coupon/bg_useless2.png)' 
-                : 'url(/imgs/shop/coupon/bg_useful2.png)'
-            }">
-              <div class="text-top">￥{{ coupon.price }}</div>
-              <div class="text-mid-h">无门槛</div>
-              <div class="text-bottom" @click="getCoupon('deduction',coupon.id)" v-if="!coupon.got">立即领取</div>
-              <div class="text-bottom" v-else>已领取</div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="deduction_container">
-        <div class="container-title">
-          折扣券限量
-        </div>
-        <div class="coupons-content">
-          <div class="coupon-item" v-for="coupon in coupons" :key="coupon.id">
-            <div class="coupon-filtered-item" v-if="coupon.type === 'discount'"
-            :style="{
-              backgroundImage: coupon.got
-                ? 'url(/imgs/shop/coupon/bg_useless1.png)' 
-                : 'url(/imgs/shop/coupon/bg_useful1.png)'
-            }">
-              <div class="text-left">{{ coupon.precent/10 }}折</div>
-              <div class="text-right" @click="getCoupon('discount',coupon.id)" v-if="!coupon.got">立即领取</div>
-              <div class="text-right" v-else>已领取</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { ref, onMounted } from 'vue'
-import { useUserStore } from '@/stores/user'
 import api from '@/utils/api'
-import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/stores/user'
 
-const userStore = useUserStore()
+const user = useUserStore().user
 
-const coupons = ref([])
+const couponList = ref([])
 
-const getAllCoupons = async () => {
+const getCouponList = async () => {
-  const {data} = await api.get('/coupon',{
+  const response = await api.get(`/coupon/user/${user.id}`)
-    params: {
+  couponList.value = response.data.coupon
-      user_id: userStore.user.id
+  console.log(123,couponList.value)
-    }
-  })
-  if (data.success) {
-    coupons.value = data.coupon
-    console.log(123,coupons.value)
-  } else {
-    ElMessage.error(data.message || '优惠券领取失败')
-  }
 }
 
-const getCoupon = async (coupon_type,coupon_id) => {
+const getCouponName = (couponType) => {
-  try {
+  const couponName = {
-    const {data} = await api.get(`/coupon/${userStore.user.id}`,{
+    discount_for_a_amount: '满减券',
-      params: {
+    deduction: '抵扣券',
-        coupon_type: coupon_type,
+    discount: '折扣券',
-        coupon_id: coupon_id
-      }
-    })
-    if (data.success) {
-      ElMessage.success('优惠券领取成功')
-    } else {
-      ElMessage.error(data.msg || '优惠券领取失败')
-    }
-  } catch (error) {
-    ElMessage.error('优惠券领取失败')
-    console.error('优惠券领取失败:', error)
   }
+  return couponName[couponType] || couponType
 }
 
 onMounted(() => {
-  getAllCoupons()
+  getCouponList()
 })
 </script>
 
 <style scoped>
-.coupon-container {
-  width: 100%;
-  height: 100vh;
-  background-image: url(/imgs/shop/coupon/background.png);
-}
 
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-left: 20px;
-  position: relative;
-}
-
-.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%;
-  color: #2F4FB5;
-  text-align: center;
-}
-
-.coupon-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 20px;
-  padding: 20px;
-  height: 100vh;
-}
-
-.discount_for_a_amount_container,
-.discount_container,
-.deduction_container {
-  background: white;
-  width: 348px;
-  padding: 10px;
-  top: 32px;
-  opacity: 1;
-  border-radius: 8px;
-  margin-bottom: 20px;
-}
-
-.container-title {
-  width: 96;
-  height: 20;
-  top: 324px;
-  left: 105px;
-  opacity: 1;
-  font-family: SF Pro;
-  font-weight: 700;
-  font-style: Bold;
-  font-size: 16px;
-  line-height: 20px;
-  letter-spacing: 0%;
-  color: #2F4FB5;
-  text-align: center;
-}
-
-.coupon-filtered-item {
-  width: 324px;
-  height: 66px;
-  top: 58px;
-  left: 12px;
-  opacity: 1;
-  background-size: 100% 100%;
-  margin-top: 10px;
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 20px;
-}
-
-.text-left {
-  font-size: 25px;
-  font-weight: bold;
-  color: #305DEF;
-}
-
-.text-mid-w {
-  font-size: 14px;
-  color: #305DEF;
-  flex: 1;
-  text-align: center;
-  font-family: SF Pro;
-  font-weight: 590;
-  font-style: Semibold;
-  font-size: 16px;
-  line-height: 20px;
-  letter-spacing: 0%;
-}
-
-.text-right {
-  font-size: 14px;
-  color: #ffffff;
-  cursor: pointer;
-  padding: 5px 10px;
-  border-radius: 100px;
-  background: #305DEF;
-  transition: background-color 0.3s;
-  margin-right: -10px;
-}
-
-.text-right:hover {
-  background-color: #305DEF;
-}
-
-.grid-container {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
-  justify-items: center;
-}
-
-.coupon-item {
-  display: contents;
-}
-
-.coupon-filtered-item2 {
-  width: 83px;
-  height: 94px;
-  opacity: 1;
-  border-radius: 4px;
-  background-size: 100% 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 0;
-}
-
-.text-top {
-  font-family: SF Pro;
-  font-weight: 700;
-  font-style: Bold;
-  font-size: 18px;
-  line-height: 20px;
-  letter-spacing: 0%;
-  color: #305DEF;
-}
-
-.text-mid-h {
-  font-family: SF Pro;
-  font-weight: 400;
-  font-style: Regular;
-  font-size: 15px;
-  line-height: 20px;
-  letter-spacing: 0%;
-  color: #305DEF;
-  margin-top: 10px;
-}
-
-.text-bottom {
-  font-size: 10px;
-  color: #305DEF;
-  cursor: pointer;
-  padding: 5px 10px;
-  border-radius: 100px;
-  transition: background-color 0.3s;
-  margin-top: 8px;
-}
 </style>

src/views/ProductCategory.vue

@@ -18,8 +18,7 @@
     </div>
     <div class="relative-bar">
       <div v-for="(item, index) in barItems[categoryChoice].relative" :key="index" class="relative-item" @click="$router.push(`/productCategoryFinal/${item.name}`)">
-        <img :src="item.img" :alt="item.name" class="relative-img">
+        <img :src="getImageUrl(item.img)" :alt="item.name" class="relative-img">
-        <!-- <img src="/imgs/shop/1.png" alt="item.name" class="relative-img"> -->
         <span class="relative-name">{{ item.name }}</span>
       </div>
     </div>
@@ -28,7 +27,7 @@
       <div class="shop-content-title">商品</div>
       <div class="shop-content">
         <div class="product-content" v-for="item in products" :key="item.id" @click="$router.push(`/productsummary/${item.id}`)">
-          <img :src="item.img" :alt="item.name" class="product-content-img">
+          <img :src="getImageUrl(item.img)" :alt="item.name" class="product-content-img">
           <span class="product-content-name">{{ item.name }}</span>
           <div class="price-info">
             <el-icon><Coin /></el-icon>
@@ -271,7 +270,7 @@ onMounted(() => {
 
 .relative-img {
   width: 40px;
-  height: 45px;
+  height: 40px;
   margin-bottom: 8px;
 }
 

src/views/Shop.vue

@@ -64,7 +64,7 @@ const selectedCategory = ref('all')
 const shopBarItems = [
   {name: '商品分类',img: '/imgs/shop/1.png',path: '/productCategory'},
   {name: '观看直播',img: '/imgs/shop/2.png',path: ''},
-  {name: '违规通告',img: '/imgs/shop/3.png',path: ''},
+  {name: '卡包管理',img: '/imgs/shop/3.png',path: '/couponmanage'},
   {name: '百亿补贴',img: '/imgs/shop/4.png',path: ''},
   {name: '现时秒杀',img: '/imgs/shop/5.png',path: ''},
   {name: '会员专区',img: '/imgs/shop/6.png',path: ''},