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-28 19:27:18 +08:00
parent 7895455b97
commit 3243f16cff
5 changed files with 639 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
components/coupon-modal.vue
View File

@@ -2,11 +2,11 @@
<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="content" :class="`content${currentNum}`">
<image class="bg" :src="bgUrl" mode="widthFix"></image>
<view class="swiper-wrap" :class="`swiper-wrap${currentNum}`">
<swiper class="swiper" :class="[`swiper${currentNum}`]" @change="swiperChange">
<swiper-item class="swiper-item" :class="[`swiper-item${currentNum}`]" v-for="(item, index) in couponList" :key="index">
<view class="item" v-for="val in item" :key="val.id">
<image
class="item-bg"
@@ -54,7 +54,7 @@
</view>
</swiper-item>
</swiper>
<view class="dot-wrap">
<view class="dot-wrap" v-if="couponList.length > 1">
<view class="page-btn">
<up-icon name="arrow-left" :color="swiperIndex == 0 ? '#fa746a' : '#f6171b'" size="16"></up-icon>
</view>
@@ -66,7 +66,7 @@
</view>
</view>
</view>
<view class="btn-wrap" @click="getHandle">
<view class="btn-wrap" :class="[`btn-wrap${currentNum}`]" @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>
@@ -84,6 +84,15 @@ import dayjs from 'dayjs';
import { onMounted, ref } from 'vue';
import { getCouponPopup, receivePopUp } from '@/common/api/member.js';
const currentNum = ref(1);
const swiperCheck = ref(3);
const bgUrlList = ref({
1: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/0/20c159a4cd664d8a843d82eb9b5a5e0e.png',
2: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/0/d6b11e76f03b495d84f07791b3ce1c3e.png',
3: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/0/f41a5bffdc1c474eb5bb41ed0035c91b.png'
});
const bgUrl = ref('');
const couponCount = ref(0);
const swiperIndex = ref(0);
const couponList = ref([]);
@@ -114,12 +123,24 @@ async function getCouponPopupAjax() {
.format('YYYY-MM-DD HH:mm:ss');
}
});
console.log('res===', res);
show.value = true;
couponCount.value = res.length;
couponList.value = _.chunk(res, 3);
console.log('couponList.value===', couponList.value);
couponList.value = _.chunk(res, swiperCheck.value);
console.log('couponList.value[0].length===', couponList.value[0].length);
if (couponList.value[0].length >= swiperCheck.value) {
bgUrl.value = bgUrlList.value[3];
currentNum.value = 3;
}
if (couponList.value[0].length == 2) {
bgUrl.value = bgUrlList.value[2];
currentNum.value = 2;
}
if (couponList.value[0].length <= 1) {
bgUrl.value = bgUrlList.value[1];
currentNum.value = 1;
}
}
} catch (error) {
console.log(error);
@@ -163,7 +184,9 @@ onMounted(() => {
.content {
width: 94vw;
position: relative;
padding-left: 24upx;
&.content3 {
padding-left: 24upx;
}
.close {
position: absolute;
left: 50%;
@@ -179,19 +202,43 @@ onMounted(() => {
height: 70%;
position: absolute;
left: 18%;
top: 96upx;
&.swiper-wrap1 {
top: 162upx;
}
&.swiper-wrap2 {
top: 140upx;
}
&.swiper-wrap3 {
top: 96upx;
}
.swiper {
width: 100%;
height: 90%;
background-color: #fff;
&.swiper1 {
height: 44%;
}
&.swiper2 {
height: 70%;
}
&.swiper3 {
height: 90%;
}
.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;
&.swiper-item1 {
grid-template-rows: repeat(1, 1fr);
}
&.swiper-item2 {
grid-template-rows: repeat(2, 1fr);
}
&.swiper-item3 {
grid-template-rows: repeat(3, 1fr);
}
.item {
background-color: #e20410;
border-radius: 12upx;
@@ -315,7 +362,15 @@ onMounted(() => {
width: 60%;
position: absolute;
left: 20%;
bottom: 38upx;
&.btn-wrap1 {
bottom: 74upx;
}
&.btn-wrap2 {
bottom: 74upx;
}
&.btn-wrap3 {
bottom: 38upx;
}
.btn-img {
width: 100%;
}