czg_team/cashier_wx
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

对接优惠券弹窗

Browse Source
This commit is contained in:
gyq
2025-09-26 10:55:45 +08:00
parent 84f782afa1
commit c6dbd6d62b
9 changed files with 3263 additions and 2771 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
pages/user/components/coupon-icon.vue Normal file
View File

@@ -0,0 +1,127 @@
<!-- 优惠券图标 -->
<template>
<view class="container">
<view class="icon icon1" v-if="props.item.type == 1">
<view class="top">
<text class="i">￥</text>
<text class="num">{{ props.item.discountAmount }}</text>
</view>
<view class="intro">
<text class="t">满{{ props.item.fullAmount }}可用</text>
</view>
</view>
<view class="icon icon2" v-if="props.item.type == 2">
<view class="top">
<text class="i">{{ props.item.discountNum }}件</text>
<text class="num">商品兑换</text>
</view>
<view class="intro">
<text class="t">满{{ props.item.fullAmount }}可用</text>
</view>
</view>
<view class="icon icon3" v-if="props.item.type == 3">
<view class="top">
<text class="num">{{ props.item.discountRate }}折</text>
</view>
<view class="intro">
<text class="t">满{{ props.item.fullAmount }}可用</text>
</view>
</view>
<view class="icon icon2" v-if="props.item.type == 4">
<view class="top">
<text class="i">第二件</text>
<text class="num">半价券</text>
</view>
</view>
<view class="icon icon2" v-if="props.item.type == 6">
<view class="top">
<text class="i">买一送</text>
<text class="num">一券</text>
</view>
</view>
</view>
</template>
<script setup>
const props = defineProps({
item: {
type: Object,
default: {}
}
});
</script>
<style scoped lang="scss">
$color: #ff1c1c;
.container {
width: 100%;
height: 100%;
.icon {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&.icon1 {
.top {
.i {
color: $color;
font-size: 24upx;
font-weight: bold;
}
.num {
color: $color;
font-size: 72upx;
font-weight: bold;
}
}
}
&.icon2 {
.top {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.i {
color: $color;
font-size: 34upx;
font-weight: bold;
}
.num {
color: $color;
font-size: 34upx;
font-weight: bold;
}
}
}
&.icon3 {
.top {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.i {
color: $color;
font-size: 34upx;
font-weight: bold;
}
.num {
color: $color;
font-size: 52upx;
font-weight: bold;
}
}
}
.intro {
display: flex;
justify-content: center;
.t {
font-size: 22upx;
color: #999;
}
}
}
}
</style>

192
pages/user/coupon.vue
View File

@@ -12,7 +12,7 @@
<view class="icon right">
<u-icon name="arrow-right" size="16"></u-icon>
</view>
<input v-model="querForm.shopId" class="ipt right" type="text" placeholder="请选择" disabled />
<input v-model="querForm.shopName" class="ipt right" type="text" placeholder="请选择" disabled />
</view>
</view>
<view class="status-wrap">
@@ -30,23 +30,26 @@
<view class="list-wrap">
<view class="item" v-for="item in list.data" :key="item.id">
<view class="top">
<view class="icon"></view>
<view class="icon">
<couponIcon :item="item" />
</view>
<view class="info">
<view class="view name">
<text class="t">{{ item.name }}</text>
</view>
<view class="view time">
<text class="t">{{ dayjs(item.effectStartTime).format('YYYY.MM.DD') }} - {{ dayjs(item.effectEndTime).format('YYYY.MM.DD') }}</text>
<text class="t">{{ dayjs(item.effectStartTime).format('YYYY.M.D') }} - {{ dayjs(item.effectEndTime).format('YYYY.M.D') }}</text>
</view>
</view>
<view class="btn">
<view class="btn" v-if="item.status == 0" @click="toUseHandle(item)">
<text class="t">去使用</text>
</view>
<view class="btn disabled" v-else>
<text class="t">{{ statusList.find((val) => val.value == item.status).label }}</text>
</view>
</view>
<view class="btm">
<view class="left">
<text class="t">1、可适用门店：{{ item.useShops }} 2、可适用商品：{{ item.foods }}3、可使用类型：{{ convertValuesToLabels(item.useType) }}</text>
</view>
<view class="left">1、可适用门店：{{ item.useShops }} 2、可适用商品：{{ item.foods }}3、可使用类型：{{ convertValuesToLabels(item.useType) }}</view>
<view class="right" @click="showDetailHandle(item)">
<text class="t">查看详情</text>
</view>
@@ -59,18 +62,10 @@
<view class="title">
<text class="t">店铺列表</text>
</view>
<scroll-view class="popup-list" direction="vertical">
<view class="item">
<text class="t">我是店铺1111</text>
</view>
<view class="item">
<text class="t">我是店铺2222</text>
</view>
<view class="item">
<text class="t">我是店铺3333</text>
</view>
<view class="item">
<text class="t">我是店铺4444</text>
<scroll-view class="popup-list" direction="vertical" @scrollend="scrollBottom">
<view class="item" v-for="item in shopList" :key="item.shopId" @click="selectShopHandle(item)">
<text class="t">{{ item.shopName }}</text>
<text class="intro">地址：{{ item.shopAddress }}</text>
</view>
<u-loadmore status="nomore"></u-loadmore>
</scroll-view>
@@ -83,19 +78,7 @@
</view>
<scroll-view class="popup-list" direction="vertical">
<view class="ul">
<view class="li">1、可适用门店：{{ selectListItem.useShops }}</view>
<view class="li">2、可适用商品：{{ selectListItem.foods }}</view>
<view class="li" v-if="selectListItem.useType">3、可使用类型：{{ convertValuesToLabels(selectListItem.useType) }}</view>
<view class="li">
4、可用时间段：
<text class="t" v-if="selectListItem.useTimeType == 'all'">全段时间可用</text>
<text class="t" v-else>
{{ selectListItem.useStartTime - selectListItem.useEndTime }}
</text>
</view>
<view class="li">5、限量规则：{{ selectListItem.getLimit == -10086 ? '无限' : `${selectListItem.getLimit}张` }}</view>
<view class="li">6、同享规则：{{ selectListItem.vipPriceShare ? '与限时折扣同享、与会员价同享' : '不与限时折扣同享、与会员价同享' }}</view>
<view class="li">7、其它说明：{{ selectListItem.ruleDetails || '无' }}</view>
<view class="li" v-for="(item, index) in selectListItemDetails" :key="index">{{ index + 1 }}、{{ item }}</view>
</view>
</scroll-view>
</view>
@@ -107,13 +90,15 @@
import dayjs from 'dayjs';
import { ref, reactive, onMounted } from 'vue';
import { onLoad, onReady, onShow, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import { APIcouponfindByUserId, APIfindCoupon } from '@/common/api/member.js';
import { APIcouponfindByUserId, APIfindCoupon, getCouponShops } from '@/common/api/member.js';
import couponIcon from './components/coupon-icon.vue';
const show = ref(false);
const querForm = ref({
searchValue: '',
shopId: '',
shopName: '',
statusActiveIndex: 0
});
@@ -142,26 +127,41 @@ const statusList = ref([
const list = reactive({
page: 1,
size: 10,
status: 'nomore',
status: 'loading',
data: []
});
onReachBottom(() => {
console.log('到底了');
list.page++;
getCouponList();
if (list.status != 'nomore') {
list.page++;
getCouponList();
}
});
const showDetail = ref(false);
const selectListItem = ref('');
const selectListItemDetails = ref([]);
function showDetailHandle(item) {
showDetail.value = true;
selectListItem.value = item;
selectListItemDetails.value = [
`可适用门店：${item.useShops}`,
`可适用商品：${item.foods}`,
`可使用类型：${convertValuesToLabels(item.useType)}`,
`可用时间段：${item.useTimeType == 'all' ? '全段时间可用' : `${item.useStartTime} - ${item.useEndTime}`}`,
`限量规则：${item.getLimit == -10086 ? '无限' : `${item.getLimit}张`}`,
`同享规则：${item.vipPriceShare ? '与限时折扣同享、与会员价同享' : '不与限时折扣同享、与会员价同享'}`,
`其它说明：${item.ruleDetails || '无'}`
];
if (item.type == 3) {
selectListItemDetails.value.unshift(`最高抵扣${item.discountAmount}元`);
}
}
// 搜索
function searchHandle() {
list.page = 1;
list.status = 'loading';
getCouponList();
}
@@ -169,9 +169,19 @@ function searchHandle() {
function tabChange(index) {
querForm.value.statusActiveIndex = index;
list.page = 1;
list.status = 'loading';
getCouponList();
}
// 去使用
function toUseHandle(item) {
console.log(item);
uni.cache.set('shopId', item.shopId);
uni.switchTab({
url: '/pages/index/index'
});
}
// 获取优惠券列表
async function getCouponList() {
try {
@@ -192,12 +202,21 @@ async function getCouponList() {
} else {
list.data.push(...res.records);
}
if (res.pageNumber == res.totalPage || res.records.length == 0) {
list.status = 'nomore';
}
} catch (error) {
console.log(error);
}
uni.hideLoading();
}
// 店铺列表滚动到底部了
function scrollBottom() {
console.log('店铺列表滚动到底部了');
}
/**
* 将value数组字符串转换为对应的label拼接字符串
* @param {Array} options - 包含value和label的选项数组，格式如[{value: 'xxx', label: 'xxx'}, ...]
@@ -258,9 +277,32 @@ function convertValuesToLabels(valueStr, options, separator = '、') {
}
}
// 选择店铺
function selectShopHandle(item) {
querForm.value.shopId = item.shopId;
querForm.value.shopName = item.shopName;
list.page = 1;
show.value = false;
getCouponList();
}
// 获取当前店铺会员信息
const shopList = ref([]);
async function getCouponShopsAjax() {
try {
const res = await getCouponShops();
shopList.value = res;
} catch (error) {
console.log(error);
}
}
onShow(() => {
getCouponList();
});
onLoad(() => {
getCouponShopsAjax();
});
</script>
<style>
@@ -367,18 +409,29 @@ page {
align-items: center;
padding-bottom: 28upx;
.icon {
$size: 120upx;
$size: 140upx;
width: $size;
height: $size;
background-color: #f7f7f7;
border-radius: 12upx;
margin-right: 28upx;
}
.info {
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
gap: 8upx;
padding-left: 28upx;
position: relative;
&::after {
$height: 100upx;
content: '';
height: $height;
border-left: 1upx solid #f7f7f7;
position: absolute;
top: 50%;
margin-top: $height * 0.5 * -1;
left: 0;
}
.view {
flex: 1;
&.name {
@@ -405,6 +458,12 @@ page {
font-size: 24upx;
color: #fff;
}
&.disabled {
background-color: #f8f8f8;
.t {
color: #999999;
}
}
}
}
.btm {
@@ -418,15 +477,15 @@ page {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.t {
font-size: 24upx;
color: #999;
}
font-size: 24upx;
color: #999;
}
.right {
flex: 1;
display: flex;
align-items: center;
padding-left: 28upx;
justify-content: flex-end;
.t {
font-size: 24upx;
color: #333;
@@ -451,16 +510,53 @@ page {
.popup-list {
max-height: 50vh;
.item {
height: 100upx;
padding: 28upx;
border-radius: 12upx;
background-color: #f7f7f7;
margin-bottom: 28upx;
display: flex;
align-items: center;
flex-direction: column;
padding: 28upx;
.t {
font-size: 28upx;
color: #555;
font-weight: bold;
color: #333;
/* 必须设置宽度 */
width: 600upx; /* 或具体像素值 */
/* 关键属性 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* 显示2行 */
overflow: hidden;
/* 文本溢出省略号 */
text-overflow: ellipsis;
/* 可选：防止行高度，确保计算准确 */
line-height: 1.5;
word-break: break-all; /* 允许在单词内换行 */
word-wrap: break-word; /* 允许长单词或URL换行 */
}
.intro {
font-size: 28upx;
color: #999;
/* 必须设置宽度 */
width: 600upx; /* 或具体像素值 */
/* 关键属性 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示2行 */
overflow: hidden;
/* 文本溢出省略号 */
text-overflow: ellipsis;
/* 可选：防止行高度，确保计算准确 */
line-height: 1.5;
word-break: break-all; /* 允许在单词内换行 */
word-wrap: break-word; /* 允许长单词或URL换行 */
}
}
.ul {