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

27
common/api/member.js
View File

@@ -112,4 +112,31 @@ export const APIshopUsercode = (data) => {
method: 'get',
data: data
})
}
// 获取当前店铺会员信息
export const getCouponShops = (data) => {
return request({
url: urlMarket + '/user/coupon/shops',
method: 'get',
data: data
})
}
// 优惠券弹窗
export const getCouponPopup = (data) => {
return request({
url: urlMarket + '/user/coupon/popUp',
method: 'get',
data: data
})
}
// 优惠券弹窗领取
export const receivePopUp = (data) => {
return request({
url: urlMarket + '/user/coupon/receivePopUp',
method: 'get',
data: data
})
}

318
components/coupon-modal.vue Normal file
View File

@@ -0,0 +1,318 @@
<!-- 首页优惠券弹窗 -->
<template>
<up-popup :show="show" bgColor="transparent">
<view class="container">
<view class="content">
<image class="bg" src="https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/6520f3cfae594480aa2e612ff4ad121c.png" mode="widthFix"></image>
<view class="swiper-wrap">
<swiper class="swiper" @change="swiperChange">
<swiper-item class="swiper-item" v-for="(item, index) in couponList" :key="index">
<view class="item" v-for="val in item" :key="val.id">
<image
class="item-bg"
src="https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/105b29907c274f9e84e14b9ddb867356.png"
mode="aspectFill"
></image>
<view class="info-wrap">
<view class="info">
<view class="name name1" v-if="val.couponType == 1">
<text class="t1">￥{{ val.discountAmount }}</text>
<text class="t2">满{{ val.fullAmount }}可用</text>
</view>
<view class="name name2" v-if="val.couponType == 2">
<text class="t1">商品兑换{{ val.discountNum }}件</text>
<text class="t2">满{{ val.fullAmount }}可用</text>
</view>
<view class="name name2" v-if="val.couponType == 3">
<text class="t1">{{ val.discountRate }}折券</text>
<text class="t2">满{{ val.fullAmount }}可用</text>
</view>
<view class="name name2" v-if="val.couponType == 4">
<text class="t1">第二件半价券</text>
<text class="t2">满{{ val.fullAmount }}可用</text>
</view>
<view class="name name2" v-if="val.couponType == 6">
<text class="t1">买一送一券</text>
<text class="t2">满{{ val.fullAmount }}可用</text>
</view>
<view class="title">
{{ val.title }}
</view>
<view class="time">
<view class="row">
<text class="t">
有效期至：{{ dayjs(item.validStartTime || new Date()).format('YYYY.M.D') }} -
{{ dayjs(item.validEndTime || new Date()).format('YYYY.M.D') }}
</text>
</view>
</view>
</view>
<view class="lq-btn">
<view class="lb" @click="getHandle">
<text class="t">立即</text>
<text class="t">领取</text>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
<view class="dot-wrap">
<view class="page-btn">
<up-icon name="arrow-left" :color="swiperIndex == 0 ? '#fa746a' : '#f6171b'" size="16"></up-icon>
</view>
<view class="page-wrap">
<text class="t" :class="{ active: swiperIndex == index }" v-for="(item, index) in couponList.length" :key="index">{{ item }}</text>
</view>
<view class="page-btn">
<up-icon name="arrow-right" :color="swiperIndex == couponList.length - 1 ? '#fa746a' : '#f6171b'" size="16"></up-icon>
</view>
</view>
</view>
<view class="btn-wrap" @click="getHandle">
<image class="btn-img" src="https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/a7ea3211baf84cc8b77171d4f88c7f9e.png" mode="widthFix"></image>
<text class="t">全部领取（{{ couponCount }}张）</text>
</view>
<view class="close" @click="getHandle">
<up-icon name="close-circle" size="34" color="#fff"></up-icon>
</view>
</view>
</view>
</up-popup>
</template>
<script setup>
import _ from 'lodash';
import dayjs from 'dayjs';
import { onMounted, ref } from 'vue';
import { getCouponPopup, receivePopUp } from '@/common/api/member.js';
const couponCount = ref(0);
const swiperIndex = ref(0);
const couponList = ref([]);
const show = ref(false);
const props = defineProps({
getMode: {
type: String,
default: 'eat'
}
});
// 轮播图滑动
function swiperChange(e) {
swiperIndex.value = e.detail.current;
}
// 优惠券弹窗
async function getCouponPopupAjax() {
try {
const res = await getCouponPopup({ getMode: props.getMode });
if (res.length) {
show.value = true;
couponCount.value = res.length;
couponList.value = _.chunk(res, 3);
}
} catch (error) {
console.log(error);
}
}
// 领取
async function getHandle() {
try {
uni.showLoading({
title: '领取中...',
mask: true
});
const res = await receivePopUp({
getMode: props.getMode
});
show.value = false;
uni.showToast({
title: '已领取，请在我的优惠券中查看',
icon: 'none'
});
} catch (err) {
console.log(err);
}
uni.hideLoading();
}
onMounted(() => {
getCouponPopupAjax();
});
</script>
<style scoped lang="scss">
.container {
width: 100vw;
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding-top: 10vh;
.content {
width: 94vw;
position: relative;
padding-left: 24upx;
.close {
position: absolute;
left: 50%;
bottom: -100upx;
transform: translateX(-50%);
}
.bg {
width: 100%;
height: 100%;
}
.swiper-wrap {
width: 64%;
height: 70%;
position: absolute;
left: 18%;
top: 96upx;
.swiper {
width: 100%;
height: 90%;
background-color: #fff;
.swiper-item {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0;
grid-row-gap: 12upx;
.item {
background-color: #e20410;
border-radius: 12upx;
padding: 12upx;
position: relative;
.item-bg {
width: 100%;
height: 100%;
}
.info-wrap {
width: 100%;
height: 100%;
padding: 20upx;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
.info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8upx;
.name {
font-size: 32upx;
font-weight: bold;
color: #fff;
.t1 {
font-size: 32upx;
font-weight: bold;
color: #fff;
margin-right: 8upx;
}
.t2 {
font-size: 20upx;
color: #fff;
}
}
.title {
font-size: 28upx;
color: #fff;
font-weight: bold;
}
.time {
display: flex;
.row {
height: 30upx;
padding: 0 8upx;
background-color: #fff;
border-radius: 8upx;
display: flex;
align-items: center;
.t {
font-size: 10px;
color: #c50914;
}
}
}
}
.lq-btn {
.lb {
$size: 80upx;
width: $size;
height: $size;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #fe413d;
.t {
color: #fff;
font-size: 20upx;
font-weight: bold;
}
}
}
}
}
}
}
.dot-wrap {
width: 100%;
height: 10%;
display: flex;
align-items: center;
justify-content: center;
gap: 20upx;
.page-wrap {
display: flex;
align-items: center;
gap: 20upx;
&.disabled {
.t {
color: #fa746a;
}
}
.t {
font-size: 28upx;
color: #fa746a;
&.active {
color: #f6171b;
font-weight: bold;
}
}
}
}
}
.btn-wrap {
width: 60%;
position: absolute;
left: 20%;
bottom: 38upx;
.btn-img {
width: 100%;
}
.t {
font-size: 42upx;
font-weight: bold;
color: #b43a14;
position: absolute;
top: 44%;
left: 54%;
white-space: nowrap;
transform: translate(-50%, -50%);
}
}
}
}
</style>

8
framework/0-conf.js
View File

@@ -5,16 +5,16 @@ const proxyApi = "/api"
// #endif
// #ifdef MP-WEIXIN || APP || MP-ALIPAY
const proxyApi = 'http://192.168.0.71' // 调试地址
const proxyApiwws = 'ws://192.168.0.71:2348' // 调试地址
const proxyApi = 'http://192.168.1.42' // 调试地址
const proxyApiwws = 'ws://192.168.1.42:2348' // 调试地址
// 测试
// const proxyApi = "https://fv901fw8033.vicp.fun"
// const proxyApiwws = 'wss://sockets.sxczgkj.com/wss'
// #endif
// #ifdef H5
const baseUrl = debug ? proxyApi : "http://192.168.0.71"
const baseUrlwws = 'ws://192.168.0.71:2348'
const baseUrl = debug ? proxyApi : "http://192.168.1.42"
const baseUrlwws = 'ws://192.168.1.42:2348'
// #endif
// #ifdef APP || MP-WEIXIN || MP-ALIPAY

1
package.json
View File

@@ -3,6 +3,7 @@
"@dcloudio/uni-app": "^2.0.2-4040520250103001",
"dayjs": "^1.11.13",
"jsbarcode": "^3.11.6",
"lodash": "^4.17.21",
"pinia": "^2.3.1",
"pinia-plugin-unistorage": "^0.1.2"
}

1010
pages/index/index.vue
View File

File diff suppressed because it is too large Load Diff

4344
pages/product/index.vue
View File

File diff suppressed because it is too large Load Diff

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 {

7
pnpm-lock.yaml generated
View File

@@ -14,6 +14,9 @@ dependencies:
jsbarcode:
specifier: ^3.11.6
version: 3.12.1
lodash:
specifier: ^4.17.21
version: 4.17.21
pinia:
specifier: ^2.3.1
version: 2.3.1(@vue/composition-api@1.7.2)(vue@3.5.21)
@@ -174,6 +177,10 @@ packages:
resolution: {integrity: sha512-QZQSqIknC2Rr/YOUyOkCBqsoiBAOTYK+7yNN3JsqfoUtJtkazxNw1dmPpxuv7VVvqW13kA3/mKiLq+s/e3o9hQ==}
dev: false
/lodash@4.17.21:
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
dev: false
/magic-string@0.30.19:
resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
dependencies: