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

下单页面增加生日有礼弹窗，关注公众号弹窗，订单结算增加满减活动，修改霸王餐，增加结算成功私域引流和公众号弹窗

Browse Source
This commit is contained in:
YeMingfei666
2025-10-17 11:24:59 +08:00
parent b44c1c468b
commit d858a34698
23 changed files with 9193 additions and 5939 deletions
Download Patch File Download Diff File Expand all files Collapse all files

545
components/birthday-modal.vue Normal file
View File

@@ -0,0 +1,545 @@
<template>
<view>
<up-popup
:show="show"
bgColor="transparent"
:safeAreaInsetBottom="false"
@close="close"
mode="center"
>
<view class="container">
<view
class="content"
:style="contentStyle"
:class="`content${currentPage}`"
>
<!-- 顶部标题图 -->
<view class="top">
<image class="image" :src="imageList.gift" mode="widthFix"></image>
</view>
<!-- 优惠券列表 -->
<view class="list">
<view
class="item"
:style="kuangStyle"
v-for="(item, index) in couponList"
:key="index"
>
<!-- <view class="kuang">
<image
class="kuang-img"
:src="imageList.kuang"
mode="aspectFit"
></image>
</view> -->
<!-- 优惠券金额 -->
<view>
<template
v-if="
item.couponInfo.couponType == 3 ||
item.couponInfo.couponType == 1
"
>
<text class="big-title">{{
returnTitle(item.couponInfo)
}}</text>
<text class="u-m-l-12 small-title">
{{ returnSmallTitle(item.couponInfo) }}
</text>
</template>
<template v-else>
<text class="big-title" style="font-size: 48rpx">{{
returnTitle(item.couponInfo)
}}</text>
</template>
</view>
<!-- 优惠券名称与领取按钮 -->
<view class="u-flex u-row-between u-m-t-16">
<view>
<text class="title">{{ item.couponInfo.title }}</text>
<text class="num">x{{ item.num }}</text>
</view>
<button class="lingqu" @click="handleReceive(item)">
立即领取
</button>
</view>
<!-- 有效期（替换硬编码，用接口返回数据） -->
<view class="u-m-t-10 time">
有效期至：{{ formatDate(item.couponInfo.validStartTime) }}-{{
formatDate(item.couponInfo.validEndTime)
}}
</view>
</view>
</view>
<!-- 分页控制（左右箭头+页码） -->
<view
class="u-flex u-row-center u-m-t-16"
v-if="allCoupons.length > 3"
>
<!-- 左箭头：当前页>1可点击 -->
<view
@click="handlePrevPage"
class="page-arrow"
:class="{ disabled: currentPage === 1 }"
>
<up-icon
name="arrow-left"
size="12"
:color="currentPage === 1 ? '#999' : '#000'"
></up-icon>
</view>
<!-- 页码列表：点击切换+当前页高亮 -->
<view class="u-flex page-nums">
<view
v-for="(num, index) in pageNums"
:key="index"
class="item"
:class="{ active: currentPage === num }"
@click="handleClickPage(num)"
>
{{ num }}
</view>
</view>
<!-- 右箭头：当前页<总页数可点击 -->
<view
@click="handleNextPage"
class="page-arrow"
:class="{ disabled: currentPage === totalPages }"
>
<up-icon
name="arrow-right"
size="12"
:color="currentPage === totalPages ? '#999' : '#000'"
></up-icon>
</view>
</view>
<!-- 底部一键领取按钮 -->
<view class="btn-wrap" :class="{ 'u-m-t-18': allCoupons.length > 3 }">
<image
@click="handleReceiveAll"
class="btn-img"
:src="imageList.btn"
mode="widthFix"
></image>
</view>
</view>
</view>
</up-popup>
</view>
</template>
<script setup>
import _ from "lodash";
import dayjs from "dayjs";
import { onMounted, ref, reactive, computed } from "vue";
import * as birthdayGiftApi from "@/common/api/market/birthdayGift.js";
// 1. 分页核心配置
const currentPage = ref(1); // 当前页码
const pageSize = ref(3); // 每页显示条数
const allCoupons = ref([]); // 存储全部优惠券（用于分页截取）
const couponList = ref([]); // 当前页优惠券列表
const pageNums = ref([]); // 页码数组（如[1,2,3]）
const totalPages = computed(() => {
// 计算总页数：向上取整（如5条数据→2页）
return Math.ceil(allCoupons.value.length / pageSize.value);
});
// 2. 图片资源（修复bg2地址缺失的"g"）
const imageList = reactive({
btn: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/493b459f8c944057be72750c12c4cd1a.png",
gift: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/112d2433378349b4a26ab311b8d3bac4.png",
kuang:
"https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/bb5e2d5ed73c455d9b6e9b4ac0e86192.png",
bg1: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/847f9aea44d64b15b35caf8967f3d63f.png",
bg2: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/2f704eef2e3d484d8862673131ae3989.png", // 修复：.pn→.png
bg3: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/7ab43d1ef2fc490d80165d18795a93f3.png",
});
// 3. 背景图（随当前页切换）
const bgUrl = ref(imageList.bg1);
const contentStyle = computed(() => ({
backgroundImage: `url(${bgUrl.value})`,
backgroundSize: "100% 100%", // 确保背景图铺满容器
}));
const kuangStyle = computed(() => ({
backgroundImage: `url(${imageList.kuang})`,
}));
// 4. 弹窗状态与props
const show = ref(false);
const props = defineProps({
getMode: {
type: String,
default: "eat",
},
});
// ---------------------- 分页核心逻辑 ----------------------
/**
* 1. 生成页码数组（如总数据5条→[1,2]）
*/
const generatePageNums = () => {
pageNums.value = Array.from({ length: totalPages.value }, (_, i) => i + 1);
};
/**
* 2. 更新当前页优惠券列表（根据当前页截取数据）
*/
const updateCouponList = () => {
const startIdx = (currentPage.value - 1) * pageSize.value;
const endIdx = startIdx + pageSize.value;
couponList.value = allCoupons.value.slice(startIdx, endIdx);
// 同步切换背景图（当前页对应bg1/bg2/bg3）
bgUrl.value = imageList[`bg${currentPage.value}`] || imageList.bg1;
};
/**
* 3. 上一页切换
*/
const handlePrevPage = () => {
if (currentPage.value > 1) {
currentPage.value--;
updateCouponList();
}
};
/**
* 4. 下一页切换
*/
const handleNextPage = () => {
if (currentPage.value < totalPages.value) {
currentPage.value++;
updateCouponList();
}
};
/**
* 5. 点击页码切换
*/
const handleClickPage = (num) => {
currentPage.value = num;
updateCouponList();
};
// ---------------------- 数据与交互逻辑 ----------------------
/**
* 1. 格式化日期（YYYY.MM.DD）
*/
const formatDate = (dateStr) => {
return dateStr ? dayjs(dateStr).format("YYYY.MM.DD") : ""; // 默认兜底日期
};
/**
* 2. 单个优惠券领取
*/
const handleReceive = async (item) => {
close();
uni.showToast({ title: "领取成功！去「我的优惠券」查看", icon: "none" });
};
/**
* 3. 底部一键领取（领取当前页所有优惠券）
*/
const handleReceiveAll = async () => {
if (couponList.value.length === 0) {
uni.showToast({ title: "当前页无优惠券可领", icon: "none" });
return;
}
close();
uni.showToast({ title: "领取成功！去「我的优惠券」查看", icon: "none" });
};
/**
* 4. 初始化获取优惠券数据
*/
const getCouponPopupAjax = async () => {
try {
const shopId = uni.cache.get("shopId");
const res = await birthdayGiftApi.config({ shopId });
if (res.length) {
// 处理有效期格式（固定有效期规则）
allCoupons.value = res.map((item) => {
if (item.validType === "fixed") {
item.validStartTime = dayjs()
.add(item.daysToTakeEffect, "day")
.format("YYYY-MM-DD HH:mm:ss");
item.validEndTime = dayjs()
.add(+item.daysToTakeEffect + +item.validDays, "day")
.format("YYYY-MM-DD HH:mm:ss");
}
return item;
});
// 初始化分页：生成页码→更新列表→显示弹窗
generatePageNums();
updateCouponList();
show.value = true;
}else{
close();
}
} catch (error) {
console.error("获取优惠券失败：", error);
}
};
// 页面挂载时初始化
onMounted(() => {
getCouponPopupAjax();
});
function returnTitle(coupon) {
if (coupon.couponType == 1) {
return `￥${coupon.discountAmount}`;
}
if (coupon.couponType == 2) {
return `商品兑换券`;
}
if (coupon.couponType == 3) {
const discountRate = coupon.discountRate / 10;
return `${discountRate}折券`;
}
if (coupon.couponType == 4) {
return `第二件半价券`;
}
if (coupon.couponType == 6) {
return `买一送一券`;
}
}
function returnSmallTitle(coupon) {
if (coupon.couponType == 1) {
return `满${coupon.fullAmount || 0}可用`;
}
if (coupon.couponType == 3) {
return `满${coupon.fullAmount || 0}可用`;
}
}
const emit = defineEmits(["close"]);
function close() {
show.value = false;
emit("close");
}
</script>
<style scoped lang="scss">
// 基础容器样式
.container {
width: 100vw;
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 52rpx;
.content {
width: 100%;
position: relative;
margin: auto;
min-height: 836rpx;
padding: 0 28rpx 62rpx;
border-radius: 16rpx;
overflow: hidden;
// 分页箭头样式（添加禁用态）
.page-arrow {
cursor: pointer;
width: 64rpx;
height: 64rpx;
box-sizing: border-box;
color: #000;
background-color: #fff;
border: 1px solid #d9d9d9;
font-size: 14px;
line-height: 60rpx;
padding: 0 14rpx;
border-radius: 4rpx;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
margin: 0 16rpx;
display: flex;
justify-content: center;
align-content: center;
&.disabled {
cursor: not-allowed;
}
}
// 页码样式（当前页高亮）
.page-nums {
display: flex;
gap: 16rpx;
.item {
width: 64rpx;
height: 64rpx;
box-sizing: border-box;
color: #000;
background-color: #fff;
border: 1px solid #d9d9d9;
font-size: 14px;
line-height: 64rpx;
padding: 0 4rpx;
border-radius: 4rpx;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
text-align: center;
&.active {
border-color: #1890ff;
color: #1890ff;
font-weight: 500;
}
&:active:not(.active) {
background-color: #f5f5f5;
}
}
}
// 底部按钮容器
.btn-wrap {
margin: 28rpx 0 0;
margin-top: 30rpx;
.btn-img {
width: 100%;
height: 100%;
cursor: pointer;
&:active {
opacity: 0.9;
}
}
}
}
}
// 顶部标题图
.top {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 1;
.image {
width: 100%;
}
}
// 优惠券列表样式
.list {
margin-top: 332rpx;
position: relative;
z-index: 2;
.item {
position: relative;
padding: 32rpx 12rpx 36rpx 36rpx;
background-size: 100% 100%;
background-position: center;
overflow: hidden;
margin-top: 36rpx;
box-sizing: border-box;
// 优惠券边框图
.kuang {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
.kuang-img {
width: 100%;
height: 100%;
}
}
// 金额样式
.big-title {
color: #f05a82;
font-size: 36px;
font-weight: 600;
}
.small-title {
color: #f05a82;
font-size: 16px;
font-weight: 600;
}
// 名称与数量
.title {
color: #333;
font-size: 16px;
font-weight: 400;
padding-bottom: 10rpx;
border-bottom: 4rpx dashed #fd8293;
}
.num {
color: #f05a82;
font-size: 20px;
font-weight: 400;
line-height: 22px;
margin-left: 16rpx;
}
// 有效期
.time {
color: #666; // 调整颜色更柔和
font-size: 14px;
font-weight: 400;
}
}
}
// 领取按钮样式
.lingqu {
padding: 12rpx 20rpx; // 加宽内边距，点击区域更大
border-radius: 14rpx;
background: #fd8293;
color: #fff;
font-size: 28rpx;
font-weight: 400;
line-height: 1;
border: none;
outline: none;
margin: 0;
cursor: pointer;
&:active {
background: #f07080; // 点击深色反馈
}
}
// 工具类样式（补充缺失的flex基础样式）
.u-flex {
display: flex;
}
.u-row-center {
align-items: center;
justify-content: center;
}
.u-row-between {
justify-content: space-between;
}
.u-m-t-10 {
margin-top: 10rpx;
}
.u-m-t-16 {
margin-top: 16rpx;
}
.u-m-t-20 {
margin-top: 20rpx;
}
.u-m-t-30 {
margin-top: 30rpx;
}
.u-m-x-16 {
margin-left: 16rpx;
margin-right: 16rpx;
}
.u-m-l-12 {
margin-left: 12rpx;
}
</style>