优惠券更改

src/router/index.js

@@ -231,6 +231,12 @@ const routes = [
         meta: {title: '支付确认'},
         props: route => ({orderId: route.query.orderId})
     },
+    {
+        path: '/coupon',
+        name: 'Coupon',
+        component: () => import('@/views/CouponManage.vue'),
+        meta: {title: '优惠券', requiresAuth: true}
+    },
     {
         path: '/:pathMatch(.*)*',
         name: 'NotFound',

src/views/CouponManage.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="coupon-container">
+    <div class="header">
+      <div class="back-btn" @click="$router.go(-1)"><</div>
+      <div class="text">
+        优惠券包
+      </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 getCoupon = async () => {
+  try {
+    console.log(userStore)
+    const {data} = await api.get(`/coupon/${userStore.user.id}`,{
+      params: {
+        coupon_id: coupon_id
+      }
+    })
+    if (data.success) {
+      ElMessage.success('优惠券领取成功')
+    } else {
+      ElMessage.error(data.msg || '优惠券领取失败')
+    }
+  } catch (error) {
+    ElMessage.error('优惠券领取失败')
+    console.error('优惠券领取失败:', error)
+  }
+}
+
+onMounted(() => {
+  getCoupon()
+})
+</script>
+
+<style scoped>
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 20px;
+  position: relative;
+  margin-top: 25px;
+}
+
+.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;
+}
+
+.text {
+  width: 80px;
+  height: 28px;
+  angle: 0 deg;
+  opacity: 1;
+  font-family: SF Pro;
+  font-weight: 650;
+  font-style: Expanded Semibold;
+  font-size: 20px;
+  leading-trim: NONE;
+  line-height: 28px;
+  letter-spacing: 0%;
+  color: #2F4FB5;
+  text-align: center;
+}
+</style>

src/views/ProductCategory.vue

@@ -3,7 +3,7 @@
     <div class="header">
       <button @click="$router.go(-1)" class="back-btn"><</button>
       <span @click="$router.go(-1)" class="back-text">返回</span>
-      <el-input placeholder="请输入商品名称或种类" v-model="searchKeyword" clearable class="product-searcher">
+      <el-input placeholder="请输入商品名称" v-model="searchKeyword" clearable class="product-searcher">
         <template #prefix>
            <el-icon><Search /></el-icon>
         </template>
@@ -55,140 +55,11 @@ const categoryChoice = ref(0)
 
 const barItems = ref([
   {
-    name: '数码产品',
+    name: '',
     relative: [{
-      name: '华为',
+      name: '',
-      img: '/imgs/shop/shumachanping/1.png'
-    },{
-      name: '苹果',
-      img: '/imgs/shop/shumachanping/2.png'
-    },{
-      name: '小米',
-      img: '/imgs/shop/shumachanping/3.png'
-    },{
-      name: '荣耀',
-      img: '/imgs/shop/shumachanping/4.png'
-    },{
-      name: 'iqoo',
-      img: '/imgs/shop/shumachanping/5.png'
-    },{
-      name: 'realme',
-      img: '/imgs/shop/shumachanping/6.png'
-    },{
-      name: 'vivo',
-      img: '/imgs/shop/shumachanping/7.png'
-    },{
-      name: 'oppo',
-      img: '/imgs/shop/shumachanping/8.png'
-    },{
-      name: '三星',
-      img: '/imgs/shop/shumachanping/9.png'
-    }]
-  },{
-    name: '食品饮料',
-    relative: []
-  },{
-    name: '服装配饰',
-    relative: []
-  },{
-    name: '手机',
-    relative: [{
-      name: '华为',
-      img: '/imgs/shop/shumachanping/1.png'
-    },{
-      name: '苹果',
-      img: '/imgs/shop/shumachanping/2.png'
-    },{
-      name: '小米',
-      img: '/imgs/shop/shumachanping/3.png'
-    },{
-      name: '荣耀',
-      img: '/imgs/shop/shumachanping/4.png'
-    },{
-      name: 'iqoo',
-      img: '/imgs/shop/shumachanping/5.png'
-    },{
-      name: 'realme',
-      img: '/imgs/shop/shumachanping/6.png'
-    },{
-      name: 'vivo',
-      img: '/imgs/shop/shumachanping/7.png'
-    },{
-      name: 'oppo',
-      img: '/imgs/shop/shumachanping/8.png'
-    },{
-      name: '三星',
-      img: '/imgs/shop/shumachanping/9.png'
-    }]
-  },{
-    name: '家装',
-    relative: [{
-      name: '灵感美图',
       img: ''
     }]
-  },{
-    name: '箱包',
-    relative: []
-  },{
-    name: '内衣',
-    relative: []
-  },{
-    name: '洗护',
-    relative: []
-  },{
-    name: '鞋靴',
-    relative: []
-  },{
-    name: '美妆',
-    relative: []
-  },{
-    name: '保健',
-    relative: []
-  },{
-    name: '图书',
-    relative: []
-  },{
-    name: '车品',
-    relative: []
-  },{
-    name: '图书',
-    relative: []
-  },{
-    name: '车品',
-    relative: []
-  },{
-    name: '医药',
-    relative: []
-  },{
-    name: '奢品',
-    relative: []
-  },{
-    name: '饰品',
-    relative: []
-  },{
-    name: '百货',
-    relative: []
-  },{
-    name: '女装',
-    relative: []
-  },{
-    name: '母婴',
-    relative: []
-  },{
-    name: '男装',
-    relative: []
-  },{
-    name: '运动',
-    relative: []
-  },{
-    name: '电器',
-    relative: []
-  },{
-    name: '生鲜',
-    relative: []
-  },{
-    name: '数码',
-    relative: []
   }
 ])
 
@@ -197,11 +68,24 @@ const loading = ref(false)
 const loadingMore = ref(false)
 const page = ref(1)
 const hasMore = ref(true)
-const selectedCategory = ref(barItems.value[0].name)
+// const selectedCategory = ref(barItems.value[0].name)
+const selectedCategory = ref('')
 
 const searchKeyword = ref('')
 const sortBy = ref('')
 
+const getCategory = async () => {
+  try {
+    const {data} = await api.get('/category')
+    barItems.value = data.data
+    selectedCategory.value = barItems.value[0].name
+    getProducts(false)
+  } catch (error) {
+    ElMessage.error('获取分类失败')
+    console.error('获取分类失败:', error)
+  }
+}
+
 const selectCategory = (index) => {
   searchKeyword.value = ''
   categoryChoice.value = index
@@ -222,7 +106,7 @@ const getProducts = async (isLoadMore = false) => {
       params: {
         page: page.value,
         limit: 20,
-        category: selectedCategory.value === 'all' ? '' : selectedCategory.value,
+        category: selectedCategory.value,
         search: searchKeyword.value,
         sort: sortBy.value
       }
@@ -269,7 +153,7 @@ watch(searchKeyword, (newVal, oldVal) => {
 })
 
 onMounted(() => {
-  getProducts()
+  getCategory()
 })
 </script>
 

src/views/ProductCategoryFinal.vue

@@ -23,7 +23,7 @@
         </div>
       </div>
 
-      <div class="coupon-announcer" @click="getCoupon" v-if="couponExist">
+      <div class="coupon-announcer" @click="$router.push('/coupon')" v-if="couponExist">
         你有优惠券待领取
       </div>
 
@@ -57,11 +57,13 @@ import api from '@/utils/api'
 import { getImageUrl } from '@/config'
 import { useUserStore } from '@/stores/user';
 
-const userStore = useUserStore();
 
+const userStore = useUserStore();
 const route = useRoute()
 
-const searchKeyword = ref(route.params.name)
+// const secondCategory = ref(route.params.name)
+
+const searchKeyword = ref('')
 const sortBy = ref('')
 
 const products = ref([])
@@ -70,7 +72,7 @@ const loading = ref(false)
 const loadingMore = ref(false)
 const page = ref(1)
 const hasMore = ref(true)
-const selectedCategory = ref('all')
+const selectedCategory = ref(route.params.name)
 
 const couponExist = ref(false)
 
@@ -173,22 +175,6 @@ const getProducts = async (isLoadMore = false) => {
   }
 }
 
-const getCoupon = async () => {
-  try {
-    console.log(userStore)
-    const {data} = await api.get(`/coupon/${userStore.user.id}`)
-    if (data.success) {
-      ElMessage.success('优惠券领取成功')
-      isCouponExist()
-    } else {
-      ElMessage.error(data.msg || '优惠券领取失败')
-    }
-  } catch (error) {
-    ElMessage.error('优惠券领取失败')
-    console.error('优惠券领取失败:', error)
-  }
-}
-
 const isCouponExist = async () => {
   try {
     const {data} = await api.get(`/coupon`)

src/views/Shop.vue

@@ -16,7 +16,7 @@
       </div>
     </div>
 
-    <div class="shop-tips">
+    <div class="shop-tips" @click="$router.push('/coupon')">
       <img src="/imgs/shop/tips.png" alt="提示" class="tips-imgs">
     </div>
 
@@ -202,10 +202,10 @@ onMounted(() => {
 
 .shop-tips {
   align-self: center;
-  margin-top: 28px;
+  margin-top: 15px;
   border-radius: 5px;
   height: 30px;
-  width: 330px;
+  width: auto;
 }
 
 .tips-imgs {