我的优惠券:数据的对接和去使用的功能实现

This commit is contained in:
wangzimeng 2025-07-29 18:15:32 +08:00
parent 39ececc902
commit 378a31782b
4 changed files with 155 additions and 28 deletions

View File

@ -645,11 +645,11 @@
"pages": [{
"path": "list",
"style": {
"navigationBarTitleText": "领券中心"
"navigationBarTitleText": "我的优惠券"
},
"meta": {
"sync": true,
"title": "领券中心",
"title": "我的优惠券",
"group": "优惠券"
}
},

View File

@ -205,10 +205,13 @@
});
if (res.code === 1) {
uni.showToast({
title: res.msg,
title: '兑换成功',
icon: 'success'
})
showCouponPro.value = false;
listQuery.value.page = 1;
couponList.value = []
getCouponList();
} else {
uni.showToast({
title: res.msg,

View File

@ -1,6 +1,6 @@
<!-- 优惠券中心 -->
<template>
<s-layout title="优惠券" :bgStyle="{ color: '#f2f2f2' }">
<s-layout title="我的优惠券" :bgStyle="{ color: '#f2f2f2' }">
<view class="container">
<!-- tabs页签 -->
<view class="tabs-box">
@ -13,28 +13,31 @@
style="height: 700rpx auto;box-sizing: border-box;margin-top: 30rpx;">
<!-- 满减券 -->
<view class="exChangeBox" v-if="currentTab == 0">
<view class="couponsList">
<view class="list-item" v-for="(item, index) in couponFullList" :key="index">
<view class="itemLeft">
<view class="fslh60 c3 bold">{{item.amount}}</view>
<view class="fslh28 c3 regular" style="margin-top: 15rpx;">{{item.type_text}}</view>
</view>
<view class="itemRight">
<view class="item-RightLeft">
<view class="fs32 c3D bold" style="line-height: 36rpx;">{{item.name}}</view>
<view class="fs24 c9 regular" style="margin-top: 20rpx;line-height: 30rpx;">仅限原料商城可用
<view class="couponsListFull">
<view class="fullItem" v-for="(item, index) in couponFullList" :key="index">
<view class="itemFir">
<view class="itemFirLeft">
<view class="fslh42 c3 bold" style="line-height: 36rpx;">{{item.amount}}</view>
<view class="fs28 c3D regular"
style="margin-top: 20rpx;line-height: 39rpx;width: 440rpx;">{{item.name}}
</view>
</view>
<view class="item-btn" @click="toUseFull(item)">去使用</view>
</view>
<view class="line"></view>
<view class="itemSec">
<image style="width: 109rpx;height: 46rpx;"
src="https://jiangxiaoxian.0rui.cn/couponFull.png"></image>
<view class="fs24lh30 c9 regular" style="margin-left: 18rpx;">仅限原料商城可用</view>
</view>
</view>
</view>
</view>
<!-- 次数券 -->
<view class="exChangeBox" v-if="currentTab == 1">
<view class="couponsList">
<view class="list-item" v-for="(e, i) in couponTimesList" :key="i">
<view class="couponsList" v-for="(e, i) in couponTimesList" :key="i">
<view class="list-item">
<view class="itemLeft">
<view class="fslh60 c3 bold" style="text-align: center;">{{e.mobile_number}}</view>
<view class="fslh28 c3 regular" style="margin-top: 15rpx;">次数券</view>
@ -141,7 +144,7 @@
if (res.code === 1) {
couponFullList.value = [...couponFullList.value, ...res.data.data];
couponFullCount.value = res.data.total;
console.log('满减券',couponFullList.value,couponFullList.value[0]);
console.log('满减券', couponFullList.value, couponFullList.value[0]);
} else {
uni.showToast({
title: res.msg,
@ -162,6 +165,7 @@
if (res.code === 1) {
couponTimesList.value = [...couponTimesList.value, ...res.data.list];
couponTimesCount.value = res.data.count;
console.log('couponTimesList', couponTimesList.value);
// score.value = res.data.score
} else {
uni.showToast({
@ -173,18 +177,54 @@
/* 使用券 */
function toUseFull(item) {
console.log('使用满减券', item);
uni.navigateTo({
url: '/pages/index/category'
})
}
async function toUseTimes(e) {
console.log('使用次数券', e);
const data = {
id: e.id
}
const res = await sheep.$api.coupon.useTimes(data)
console.log('使用次数券_res:', res);
if (res.code == 1) {
uni.showToast({
title: '已增加您的拨打号码次数',
icon: 'success',
duration: 2000,
})
setTimeout(() => {
couponTimesList.value = [];
getCouponTimesList();
},1500)
} else {
uni.showToast({
title: res.msg,
icon: 'error'
})
}
function toUseTimes(e) {
}
//
function onScrolltolower() {
if (couponList.value.length < couponCount.value) {
if (currentTab.value == 0) {
//
if (couponFullList.value.length < couponFullCount.value) {
listQuery.value.page += 1;
getCouponList();
getCouponFullList();
}
} else {
//
if (couponTimesList.value.length < couponTimesCount.value) {
listQuery.value.page += 1;
getCouponTimesList();
}
}
}
//
function onS() {
@ -203,8 +243,13 @@
//
function resetLists() {
listQuery.value.page = 1;
couponList.value = [];
getCouponList();
couponFullList.value = [];
// couponFullCount.value = 0;
// couponTimesCount.value = 0
couponTimesList.value = [];
getCouponFullList();
getCouponTimesList();
// getCouponList();
}
onLoad(() => {
@ -219,15 +264,29 @@
line-height: 60rpx;
}
.fslh42 {
font-size: 42rpx;
line-height: 42rpx;
}
.fslh28 {
font-size: 28rpx;
line-height: 28rpx;
}
.fs24lh30 {
font-size: 24rpx;
line-height: 30rpx;
}
.fs32 {
font-size: 32rpx;
}
.fs28 {
font-size: 28rpx;
}
.justify-center {
justify-content: center;
}
@ -277,11 +336,69 @@
height: 100vh;
.exChangeBox {
// height: 80vh;
// background-color: #f7f7f7;
// width: 690rpx;
.couponsListFull {
// width: 690rpx;
display: grid;
justify-content: center;
align-items: center;
min-height: 80vh;
.fullItem {
width: 690rpx;
background-color: #ffffff;
border-radius: 20rpx;
display: grid;
justify-content: flex-start;
align-items: center;
// padding: 30rpx;
margin-bottom: 30rpx;
.itemFir {
display: flex;
justify-content: space-between;
align-items: center;
margin: 30rpx;
.item-btn {
width: 160rpx;
height: 70rpx;
background: linear-gradient(to right, #FCCA58, #FFBD25);
border-radius: 106rpx;
align-items: center;
justify-content: center;
display: flex;
font-size: 28rpx;
line-height: 36rpx;
font-weight: bold;
color: #333333;
}
}
.line {
width: 690rpx;
height: 1rpx;
background-color: #eeeeee;
// margin-top: 30rpx;
// margin-bottom: 20rpx;
}
.itemSec {
margin: 30rpx;
display: flex;
justify-content: flex-start;
align-items: center;
}
}
}
.couponsList {
width: 100%;
// min-height: 50vh;
padding: 0 30rpx;
display: grid;
grid-template-columns: repeat(2, 1fr);
@ -297,6 +414,7 @@
background-image: url('https://jiangxiaoxian.0rui.cn/couponItemBack.png');
background-size: 100%;
display: flex;
margin-bottom: 30rpx;
justify-content: space-between;
.itemLeft {

View File

@ -48,4 +48,10 @@ export default {
goods_id: id,
},
}),
useTimes: (data) =>
request({
url: 'meal.score/mobile_use',
method: 'POST',
data,
})
};