优惠券更改

2025-10-11 17:32:43 +08:00
parent 7146a0330e
commit 64868b47b3
5 changed files with 116 additions and 158 deletions
--- a/src/router/index.js
+++ b/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',
--- a/src/views/CouponManage.vue
+++ b/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>
--- a/src/views/ProductCategory.vue
+++ b/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: '华为',
-      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: '灵感美图',
+      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>

--- a/src/views/ProductCategoryFinal.vue
+++ b/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`)
--- a/src/views/Shop.vue
+++ b/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 {