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

@@ -113,3 +113,30 @@ export const APIshopUsercode = (data) => {
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"
}

252
pages/index/index.vue
View File

@@ -3,14 +3,13 @@
<Nav v-if="showindex == 'index'" />
<view class="content" v-if="showindex == 'index'">
<!-- 轮播图 -->
<swipers :carousel='hometoplist.bannerList'></swipers>
<swipers :carousel="hometoplist.bannerList"></swipers>
<!-- 广告 -->
<advertisement :bannervo='hometoplist.freeBannerList' :itemStyle='advertisementStyle' ref="refbannervo">
</advertisement>
<advertisement :bannervo="hometoplist.freeBannerList" :itemStyle="advertisementStyle" ref="refbannervo"></advertisement>
<!-- 金刚区 -->
<diamond :district='hometoplist.district'></diamond>
<diamond :district="hometoplist.district"></diamond>
<!-- 今日上线 -->
<todaylist :todayList='hometoplist.todayProInfo' :salesList="hometoplist.hotRanking"></todaylist>
<todaylist :todayList="hometoplist.todayProInfo" :salesList="hometoplist.hotRanking"></todaylist>
<!-- 类目 -->
<!-- <view :style="{'top':store.height+'px'}" class="fourcontent" id="fourcontent">
<view class="flex-between" style="flex-wrap: inherit;">
@@ -126,53 +125,27 @@
<up-loadmore :status="formhomelist.status" fontSize="14" color="#999" iconSize="14" />
</view> -->
</view>
<indexs v-if="showindex == 'shopIndex'" :shopExtend='orderVIP.shopExtendList'></indexs>
<indexs v-if="showindex == 'shopIndex'" :shopExtend="orderVIP.shopExtendList"></indexs>
</view>
</template>
<script setup>
import {
ref,
computed,
onMounted,
reactive,
onBeforeUnmount,
watch,
getCurrentInstance,
nextTick
} from "vue";
import {
onLoad,
onReady,
onShow,
onReachBottom,
onPageScroll
} from '@dcloudio/uni-app'
import { ref, computed, onMounted, reactive, onBeforeUnmount, watch, getCurrentInstance, nextTick } from 'vue';
import { onLoad, onReady, onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
// 获取全局属性
const {
proxy
} = getCurrentInstance();
import swipers from './components/swiper.vue' //引入轮播
import advertisement from './components/advertisement.vue' //广告
import diamond from './components/diamond.vue' //金刚区
import todaylist from './components/todaylist.vue' //今日上线
const { proxy } = getCurrentInstance();
import swipers from './components/swiper.vue'; //引入轮播
import advertisement from './components/advertisement.vue'; //广告
import diamond from './components/diamond.vue'; //金刚区
import todaylist from './components/todaylist.vue'; //今日上线
import indexs from './indexs.vue';
import AreaSelect from './components/AreaSelect.vue'; //城市联动
import grouping from './components/grouping.vue'; //其他
import Nav from '@/components/indexnav.vue'; //导航栏
import {
APIhomehomePageUp,
APIhome
} from "@/common/api/index/index.js"
import {
APIgeocodelocation
} from "@/common/api/api.js"
import {
useNavbarStore
} from '@/stores/navbarStore';
import {
productStore
} from '@/stores/user.js';
import { APIhomehomePageUp, APIhome } from '@/common/api/index/index.js';
import { APIgeocodelocation } from '@/common/api/api.js';
import { useNavbarStore } from '@/stores/navbarStore';
import { productStore } from '@/stores/user.js';
const store = useNavbarStore();
const storeuser = productStore();
store.updateNavbarConfig({
@@ -184,49 +157,50 @@
hasPlaceholder: false //是否要占位符
});
// 显示
const showindex = ref('index')
const showindex = ref('index');
//计算广告图片的重合尺寸是位移
const getStyle = (e) => {
if (e > hometoplist.freeBannerList.length / 2) {
var right = hometoplist.freeBannerList.length - e
var right = hometoplist.freeBannerList.length - e;
return {
transform: 'scale(' + (1) + ') translate(-' + (right * 20) + '%,0px)',
transform: 'scale(' + 1 + ') translate(-' + right * 20 + '%,0px)',
zIndex: 9999 - right,
opacity: 1
}
};
} else {
return {
transform: 'scale(' + (1) + ') translate(' + (e * 20) + '%,0px)',
transform: 'scale(' + 1 + ') translate(' + e * 20 + '%,0px)',
zIndex: 9999 - e,
opacity: 1
};
}
}
}
const advertisementStyle = ref([])
};
const advertisementStyle = ref([]);
const refbannervo = ref(null);
//数据
const hometoplist = reactive({
})
const hometoplist = reactive({});
// 首页上面数据
const hometop = async () => {
try {
let res = await APIhomehomePageUp()
Object.assign(hometoplist, res)
let res = await APIhomehomePageUp();
Object.assign(hometoplist, res);
hometoplist.freeBannerList.forEach((item, index) => {
advertisementStyle.value.push(getStyle(index))
})
advertisementStyle.value.push(getStyle(index));
});
// 数据加载完后获取dom 高度
setTimeout(() => {
const query = uni.createSelectorQuery().select('#fourcontent');
query.boundingClientRect((rect) => {
elementTop.value = rect.top - store.height
}).exec();
}, 500)
query
.boundingClientRect((rect) => {
elementTop.value = rect.top - store.height;
})
.exec();
}, 500);
} catch (e) {}
}
};
// 下面初始数据
const formhomelist = reactive({ //筛选
const formhomelist = reactive({
//筛选
address: '', //地址
categoryId: '1', //品类
orderType: '1', //1.理我最近 2.销量优先 3.价格优先
@@ -236,7 +210,7 @@
status: 'loadmore',
name: '1',
list: []
})
});
// 使用 reactive 创建响应式对象
const timeData = ref({});
@@ -246,37 +220,37 @@
};
const onLoadhome = async () => {
try {
let res = await APIhome(formhomelist)
let res = await APIhome(formhomelist);
var dates = new Date().getTime();
res.records.forEach((item, index) => {
var leftTime = item.endTime - dates; //计算两日期之间相差的毫秒数
if (leftTime >= 0) {
let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
let m = Math.floor(leftTime / 1000 / 60 % 60);
let s = Math.floor(leftTime / 1000 % 60);
let h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
let m = Math.floor((leftTime / 1000 / 60) % 60);
let s = Math.floor((leftTime / 1000) % 60);
item.end_times = {
d: d,
h: h,
m: m,
s: s
}
};
} else {
item.end_times = 0
item.end_times = 0;
}
})
});
if ((res.totalPage == 0 || res.totalPage == 1) && res.totalRow <= 10) {
console.log(res)
formhomelist.status = 'nomore'
formhomelist.list = res.records
console.log(res);
formhomelist.status = 'nomore';
formhomelist.list = res.records;
if (formhomelist.page == 1 && res.records.length == 0) {
formhomelist.list = []
formhomelist.list = [];
}
return false;
} else {
formhomelist.status = 'loading';
if (formhomelist.page == 1) {
formhomelist.list = res.records
formhomelist.list = res.records;
} else {
formhomelist.list = [...formhomelist.list, ...res.records];
}
@@ -287,12 +261,11 @@
formhomelist.status = 'loading';
}
}
} catch (e) {}
}
};
// /筛选数据处理
const init_fn = async () => {
formhomelist.list = []
formhomelist.list = [];
Object.assign(formhomelist, {
address: uni.cache.get('getLocationstorage').address, //地址
lng: uni.cache.get('getLocationstorage').lng,
@@ -303,28 +276,28 @@
page: 1, //页数
size: 10, //页容量
status: 'loadmore'
})
onLoadhome()
}
});
onLoadhome();
};
const orderVIP = ref({
shopExtendList: ''
})
});
// 弹出层处理
const showproductlist = ref(false);
// 定义方法
const openproductlist = (e) => {
hometoplist.menuList[viewHistoryindex.value].name = e //下标更改name
showproductlist.value = !showproductlist.value
}
hometoplist.menuList[viewHistoryindex.value].name = e; //下标更改name
showproductlist.value = !showproductlist.value;
};
// 存储每个元素距离顶部的距离
const elementTop = ref(0);
// 存储是否吸顶的状态
const isSticky = ref(true);
//下标
const viewHistoryindex = ref(null)
const viewHistoryindex = ref(null);
// 点击滑动元素
const viewHistory = async (item, index) => {
if (isSticky) {
@@ -335,15 +308,14 @@
}
// 是否有弹出层
if (item.isChild) {
showproductlist.value = showproductlist.value ? (viewHistoryindex.value == index ? false : true) : !
showproductlist.value
}
viewHistoryindex.value = index
showproductlist.value = showproductlist.value ? (viewHistoryindex.value == index ? false : true) : !showproductlist.value;
}
viewHistoryindex.value = index;
};
// 滑动
onPageScroll((res) => {
isSticky.value = res.scrollTop > elementTop.value ? true : false
uni.$u.debounce(store.scrollTop = res.scrollTop, 500)
isSticky.value = res.scrollTop > elementTop.value ? true : false;
uni.$u.debounce((store.scrollTop = res.scrollTop), 500);
});
onShow(async () => {
try {
@@ -352,68 +324,61 @@
success: async (res) => {
let successres = await APIgeocodelocation({
lng: res.longitude,
lat: res.latitude,
})
lat: res.latitude
});
if (successres) {
let datastorage = {
country: successres.addressComponent.country, // "中国"
province: successres.addressComponent
.province, //province: "陕西省"
province: successres.addressComponent.province, //province: "陕西省"
address: successres.addressComponent.city, //district: "西安市"
district: successres.addressComponent.district, //district: "未央区"
lng: res.longitude,
lat: res.latitude,
}
lat: res.latitude
};
uni.cache.set('getLocationstorage', datastorage);
// 登录
proxy.$isResolve()
proxy.$isResolve();
}
}
},
});
} catch (error) {
try {
let successres = await APIgeocodelocation({
lng: '',
lat: '',
})
lat: ''
});
if (successres) {
let datastorage = {
country: successres.addressComponent.country, // "中国"
province: successres.addressComponent
.province, //province: "陕西省"
province: successres.addressComponent.province, //province: "陕西省"
address: successres.addressComponent.city, //district: "西安市"
district: successres.addressComponent.district, //district: "未央区"
lng: res.longitude,
lat: res.latitude,
}
lat: res.latitude
};
uni.cache.set('getLocationstorage', datastorage);
proxy.$isResolve()
}
} catch (error) {
proxy.$isResolve();
}
} catch (error) {}
}
await proxy.$onLaunched;
if (uni.cache.get('shopId')) {
showindex.value = 'shopIndex'
await storeuser.actionsproductqueryProduct()
await nextTick()
orderVIP.value = uni.cache.get('orderVIP')
showindex.value = 'shopIndex';
await storeuser.actionsproductqueryProduct();
await nextTick();
orderVIP.value = uni.cache.get('orderVIP');
} else {
showindex.value = 'index'
hometop()
init_fn()
showindex.value = 'index';
hometop();
init_fn();
// 获取初始定位高度
}
})
onMounted(async () => {
});
onMounted(async () => {});
onReachBottom(() => {
onLoadhome()
})
onLoadhome();
});
// 页面离开时清除定时器
// onBeforeUnmount(() => {
@@ -425,7 +390,7 @@
<style lang="scss" scoped>
.content {
background: #F9F9F9;
background: #f9f9f9;
.fourcontent {
position: sticky;
@@ -456,7 +421,7 @@
flex-wrap: nowrap;
margin-left: 20rpx;
padding: 10rpx 24rpx;
background: #FFFFFF;
background: #ffffff;
border-radius: 8rpx 8rpx 8rpx 8rpx;
text {
@@ -473,8 +438,6 @@
// }
}
.fivecontent {
padding: 0 28rpx;
height: 100vh;
@@ -487,7 +450,7 @@
margin-top: 32rpx;
padding: 24rpx 32rpx;
width: 100%;
background: #FFFFFF;
background: #ffffff;
border-radius: 18rpx 18rpx 18rpx 18rpx;
.fivecontent_item_nav {
@@ -515,7 +478,7 @@
margin-left: 12rpx;
width: max-content;
padding: 4rpx 10rpx;
background: #FFF9E1;
background: #fff9e1;
border-radius: 4rpx 4rpx 4rpx 4rpx;
.fivecontent_item_nav_leftlangtext {
@@ -523,7 +486,7 @@
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 16rpx;
color: #F9A511;
color: #f9a511;
}
.fivecontent_item_nav_leftlangimage {
@@ -536,13 +499,12 @@
margin-left: 0;
}
}
}
}
.fivecontent_item_box {
margin-top: 20rpx;
border-top: 2rpx solid #E5E5E5;
border-top: 2rpx solid #e5e5e5;
padding-top: 14rpx;
.fivecontent_item_boxitem {
@@ -584,7 +546,7 @@
margin-top: 8rpx;
width: max-content;
padding: 4rpx 10rpx;
background: #FFF9E1;
background: #fff9e1;
border-radius: 4rpx 4rpx 4rpx 4rpx;
.fivecontent_item_boxitemlefttowtext {
@@ -592,7 +554,7 @@
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 16rpx;
color: #F9A511;
color: #f9a511;
}
.fivecontent_item_boxitemlefttowimage {
@@ -603,12 +565,11 @@
.fivecontent_item_boxitemlefttow:nth-child(1) {
margin-left: 0;
background: #FFD6D7;
background: #ffd6d7;
border-radius: 4rpx 4rpx 4rpx 4rpx;
}
}
.indexboxitemleftthere {
position: relative;
margin-top: 30rpx;
@@ -617,8 +578,6 @@
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
background-size: 100% 100%;
.indexboxitemleftthereabsolute {
position: absolute;
top: 14rpx;
@@ -626,7 +585,7 @@
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 24rpx;
color: #FFFFFF;
color: #ffffff;
}
.indexboxitemlefttheretext {
@@ -646,14 +605,14 @@
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 16rpx;
color: #FF7127;
color: #ff7127;
}
.flex_starttow {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 24rpx;
color: #FF7127;
color: #ff7127;
}
}
@@ -661,11 +620,11 @@
margin-left: 4rpx;
padding: 2rpx 10rpx;
border-radius: 4rpx 4rpx 4rpx 4rpx;
border: 2rpx solid #FF7127;
border: 2rpx solid #ff7127;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 16rpx;
color: #FF7127;
color: #ff7127;
}
.fivecontent_item_boxitemlefthere_there {
@@ -699,7 +658,7 @@
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 16rpx;
color: #FFFFFF;
color: #ffffff;
.time {
@include flex;
@@ -741,7 +700,6 @@
}
}
}
}
}
</style>

1046
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>

184
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('到底了');
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;
}
}
.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: