优惠券更改
This commit is contained in:
@@ -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',
|
||||
|
||||
82
src/views/CouponManage.vue
Normal file
82
src/views/CouponManage.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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`)
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user