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>

10
components/coupon-modal.vue
View File

@@ -1,6 +1,6 @@
<!-- 首页优惠券弹窗 -->
<template>
<up-popup :show="show" bgColor="transparent">
<up-popup :show="show" bgColor="transparent" @close="close">
<view class="container">
<view class="content" :class="`content${currentNum}`">
<image class="bg" :src="bgUrl" mode="widthFix"></image>
@@ -141,6 +141,8 @@ async function getCouponPopupAjax() {
bgUrl.value = bgUrlList.value[1];
currentNum.value = 1;
}
}else{
close()
}
} catch (error) {
console.log(error);
@@ -167,6 +169,12 @@ async function getHandle() {
}
uni.hideLoading();
}
const emit=defineEmits(['close'])
function close() {
show.value = false;
emit('close');
}
onMounted(() => {
getCouponPopupAjax();

101
components/drainage.vue Normal file
View File

@@ -0,0 +1,101 @@
<template>
<view>
<!-- 私域引流 -->
<up-popup
:show="showPreview"
mode="center"
round="16rpx"
closeOnClickOverlay
@close="close"
:safeAreaInsetBottom="false"
>
<view class="preview-box">
<view class="u-flex" style="align-items: stretch">
<view
class="u-flex-1 u-p-r-24 u-flex u-flex-col"
style="align-items: start; justify-content: space-between"
>
<view>
<view class="font-14 font-bold color-333">{{
drainageConfig.title
}}</view>
<view class="u-m-t-16 font-12 color-666">{{
drainageConfig.content
}}</view>
</view>
<view class="color-999 font-12 u-m-t-16">{{
drainageConfig.note
}}</view>
</view>
<image
:show-menu-by-longpress="true"
:src="drainageConfig.qrCode"
style="width: 240rpx; height: 240rpx"
mode="aspectFit"
></image>
</view>
<view class="close" @click="close">
<up-icon name="close-circle" size="34" color="#fff"></up-icon>
</view>
</view>
</up-popup>
</view>
</template>
<script setup>
import * as drainageConfigApi from "@/common/api/market/drainageConfig.js";
import { ref, reactive, computed, watch, onMounted } from "vue";
const showPreview = defineModel({
type: Boolean,
default: false,
});
const emit = defineEmits(["close"]);
function close() {
showPreview.value = false;
emit("close");
}
const drainageConfig = ref({});
onMounted(async () => {
const shopId = uni.cache.get("shopId");
const drainageConfigRes = await drainageConfigApi.config({
shopId: shopId,
});
drainageConfig.value = drainageConfigRes;
if (drainageConfig.value.isEnable) {
showPreview.value = true;
} else {
close();
}
});
</script>
<style scoped lang="scss">
.u-flex-col {
flex-direction: column;
}
.preview {
padding: 8rpx 32rpx;
border-radius: 12rpx;
background: $my-main-color;
color: #ffffff;
font-size: 28rpx;
font-weight: 400;
line-height: 40rpx;
}
.preview-box {
width: 700rpx;
padding: 32rpx 28rpx;
position: relative;
.close {
position: absolute;
left: 50%;
bottom: -100rpx;
transform: translateX(-50%);
}
}
</style>

41
components/modal-list.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<view>
<officialAccount
v-if="showOfficialAccount"
@close="modelClose($event, 'officialAccount')"
/>
<couponModal
v-if="showCoupon"
getMode="eat"
@close="modelClose($event, 'coupon')"
/>
<birthdayGift v-if="showBirthdayGift" @close="modelClose($event, 'birthdayGift')" />
</view>
</template>
<script setup>
import { ref, watch, computed, reactive, toRaw } from "vue";
import couponModal from "@/components/coupon-modal.vue";
import birthdayGift from "@/components/birthday-modal.vue";
import officialAccount from "@/components/official-account.vue";
//弹窗列表
const list = ref([]);
const showBirthdayGift = ref(true);
const showCoupon = ref(false);
const showOfficialAccount = ref(false);
function modelClose(e, type) {
console.log("modelClose", type);
if (type == "birthdayGift") {
showCoupon.value = true;
return;
}
if (type == "coupon") {
showOfficialAccount.value = true;
return;
}
if (type == "officialAccount") {
return;
}
}
</script>

116
components/official-account.vue Normal file
View File

@@ -0,0 +1,116 @@
<!-- 首页优惠券弹窗 -->
<template>
<up-popup :show="show" bgColor="transparent" mode="center" @close="close">
<view class="container">
<view class="content">
<image class="bg" :src="bgUrl" mode="widthFix"></image>
<view class="info">
<view class="u-flex u-row-center">
<image
:show-menu-by-longpress="true"
:src="code"
style="height: 240rpx"
mode="heightFix"
></image>
</view>
<view
class="color-999 font-12 text-center u-m-t-10"
style="line-height: 36rpx"
>长按识别关注，更多优惠不能错过</view
>
</view>
<view class="close" @click="close">
<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";
const bgUrl = ref(
"https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/41239c8852874aa39d1f106e45456e10.png"
);
const show = ref(false);
const code = ref(
"https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240408/4d6e818a01f145a898d8c2368f4b5ad1.jpg"
);
const emit=defineEmits(['close'])
function close() {
show.value = false;
emit('close');
}
onMounted(() => {
show.value = true;
});
</script>
<style scoped lang="scss">
.u-row-center {
justify-content: center;
}
.container {
width: 100vw;
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 54rpx;
.content {
width: 100%;
position: relative;
.close {
position: absolute;
left: 50%;
bottom: -100rpx;
transform: translateX(-50%);
}
.bg {
width: 100%;
height: 100%;
}
.info {
position: absolute;
bottom: 86rpx;
left: 60rpx;
right: 60rpx;
}
.btn-wrap {
width: 60%;
position: absolute;
left: 20%;
&.btn-wrap1 {
bottom: 74upx;
}
&.btn-wrap2 {
bottom: 74upx;
}
&.btn-wrap3 {
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>

26
components/order-finish-modal.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<view>
<officialAccount
v-if="showOfficialAccount"
@close="modelClose($event, 'officialAccount')"
/>
<Drainage v-model="showDrainage" @close="modelClose($event, 'drainage')" />
</view>
</template>
<script setup>
import { ref, watch, computed, reactive, toRaw } from "vue";
import officialAccount from "@/components/official-account.vue";
import Drainage from "@/components/drainage.vue";
const showDrainage = ref(true);
const showOfficialAccount = ref(false);
function modelClose(e, type) {
console.log("modelClose", type);
if(type=='drainage'){
showOfficialAccount.value = true;
return
}
}
</script>

260
components/paymentMethod copy.vue Normal file
View File

@@ -0,0 +1,260 @@
<template>
<!-- 支付方式 -->
<view class="paymentMethod">
<view class="paymentMethod_content">
<view class="paymentMethod_title">支付方式</view>
<up-radio-group v-model="radiovalue" iconPlacement="right" @change="groupChanges" :size="28"
placement="column">
<block v-for="(item,index) in paymentMethodList" :key="index">
<view class="method_list" @click="groupChanges(item.type)" :class="{disabled:returnDisabled(item)}"
v-if="(index+1) == radiovalue?!changeFreeenable:true">
<view class="method_list_top">
<view class="method_list_top_left">
<image class="icon" :src="item.url" mode="aspectFill" />
<view class="method_list_top_cen">
<view class="name"> {{ item.name }} </view>
<view class="method_list_bom" v-if="item.type == 1">
<text class="balance">
当前余额￥{{orderVIP?(orderVIP.amount||0):0}}</text>
<text class="topUpNow" @click="goRecharge">去充值</text>
</view>
</view>
</view>
<up-radio :disabled="returnDisabled(item)" activeColor="#E8AD7B" icon-size="18" size="18" :name="item.type">
</up-radio>
</view>
</view>
</block>
</up-radio-group>
</view>
</view>
</template>
<script setup>
import {
ref,
reactive,
defineProps,
computed,
defineEmits,
watch,
watchEffect,
defineExpose
} from 'vue'
const props = defineProps({
rechargeFreeChecked: {
type: Boolean,
default: false
},
payAmount: {
type: Number,
default: 0
},
freeCheck: {
type: Boolean,
default: false
},
changeFreeenable: {
type: Boolean,
default: false
},
disablePayType: {
type: Array,
default: () => {
return []
}
}
});
function returnDisabled(item) {
if (props.disablePayType.includes(item.name)) {
return true
}else{
return false
}
}
const orderVIP = ref(null)
const emits = defineEmits(['customevent', 'groupChange']);
watchEffect(() => {
orderVIP.value = uni.cache.get('orderVIP')
})
const orderVIPfun = (data) => {
orderVIP.value = data
}
const paymentMethodList = ref([
// #ifdef MP-WEIXIN
{
name: "微信支付",
type: 2,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
payType: 'wechatPay'
},
// #endif
// #ifdef MP-ALIPAY
{
name: "支付宝支付",
type: 3,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png",
payType: 'aliPay'
},
// #endif
{
name: "余额支付",
type: 1,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png",
payType: 'accountPay'
}
])
const paymentMethodName = ref([{
name: "余额支付",
type: 1,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png",
payType: 'accountPay'
},
{
name: "微信支付",
type: 2,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
payType: 'wechatPay'
},
{
name: "支付宝支付",
type: 3,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png",
payType: 'aliPay'
},
])
const radiovalue = ref(2) // 支付方式
const ispws = ref(false) // 输入支付密码
const storeInfo = ref({})
// * 监听支付方式切换
const groupChanges = (type) => {
if (props.freeCheck && type == 1) {
return;
}
const item=paymentMethodList.value.find(v=>v.type==type)
if(item&&returnDisabled(item)){
uni.showToast({
title:"当前支付方式不可用",
icon:'none'
})
return
}
// if (props.payAmount <= 0 && type != 1) {
// return;
// }
radiovalue.value = type;
let name = paymentMethodName.value[type - 1].name;
emits("groupChange", paymentMethodName.value[type - 1])
}
// 去充值
const goRecharge = () => {
if (orderVIP.value.isVip) {
uni.navigateTo({
url: '/pages/user/member/czzx?shopId=' + orderVIP.value.shopId
})
return
}
uni.navigateTo({
url: '/user/vip/buy-vip?shopId=' + orderVIP.value.shopId
})
// uni.pro.navigateTo('user/member/index', {
// shopId: orderVIP.value.shopId
// })
}
// 将方法暴露给父组件
defineExpose({
groupChanges,
orderVIPfun
});
</script>
<style lang="scss">
.paymentMethod {
box-sizing: border-box;
margin-top: 30rpx;
border-radius: 18rpx;
.paymentMethod_content {
background-color: #fff;
border-radius: 22rpx;
padding: 30rpx 30rpx 0 30rpx;
box-sizing: border-box;
.paymentMethod_title {
font-weight: 500;
font-size: 32rpx;
color: #333333;
box-sizing: border-box;
}
.method_list {
padding: 40rpx 0;
box-sizing: border-box;
&.disabled{
opacity: .6;
}
.method_list_top {
display: flex;
justify-content: space-between;
.method_list_top_left {
display: flex;
align-items: center;
.icon {
width: 54.67rpx !important;
height: 48rpx !important;
margin-right: 22rpx;
}
.name {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
.method_list_top_cen {
display: flex;
flex-direction: column;
}
}
}
.method_list_bom {
display: flex;
align-items: center;
.balance {
margin-right: 20rpx;
font-size: 24rpx;
}
.topUpNow {
color: #FF803D;
font-size: 28rpx;
}
}
}
.method_list:nth-child(odd) {
border-bottom: 2rpx solid #e5e5e5;
}
}
}
</style>

472
components/paymentMethod.vue
View File

@@ -1,260 +1,276 @@
<template>
<!-- 支付方式 -->
<view class="paymentMethod">
<view class="paymentMethod_content">
<view class="paymentMethod_title">支付方式</view>
<up-radio-group v-model="radiovalue" iconPlacement="right" @change="groupChanges" :size="28"
placement="column">
<block v-for="(item,index) in paymentMethodList" :key="index">
<view class="method_list" @click="groupChanges(item.type)" :class="{disabled:returnDisabled(item)}"
v-if="(index+1) == radiovalue?!changeFreeenable:true">
<view class="method_list_top">
<view class="method_list_top_left">
<image class="icon" :src="item.url" mode="aspectFill" />
<view class="method_list_top_cen">
<view class="name"> {{ item.name }} </view>
<view class="method_list_bom" v-if="item.type == 1">
<text class="balance">
当前余额￥{{orderVIP?(orderVIP.amount||0):0}}</text>
<text class="topUpNow" @click="goRecharge">去充值</text>
</view>
</view>
</view>
<up-radio :disabled="returnDisabled(item)" activeColor="#E8AD7B" icon-size="18" size="18" :name="item.type">
</up-radio>
</view>
</view>
</block>
</up-radio-group>
</view>
</view>
<!-- 支付方式 -->
<view class="paymentMethod">
<view class="paymentMethod_content">
<view class="paymentMethod_title">支付方式</view>
<up-radio-group
v-model="radiovalue"
iconPlacement="right"
@change="groupChanges"
:size="28"
placement="column"
>
<block v-for="(item, index) in paymentMethodList" :key="index">
<view
class="method_list"
@click="groupChanges(item.type)"
:class="{ disabled: returnDisabled(item) }"
>
<view class="method_list_top">
<view class="method_list_top_left">
<image class="icon" :src="item.url" mode="aspectFill" />
<view class="method_list_top_cen">
<view class="name"> {{ item.name }} </view>
<view class="method_list_bom" v-if="item.type == 1">
<text class="balance">
当前余额￥{{ orderVIP ? orderVIP.amount || 0 : 0 }}</text
>
<text class="topUpNow" @click="goRecharge">去充值</text>
</view>
</view>
</view>
<up-radio
:disabled="returnDisabled(item)"
activeColor="#E8AD7B"
icon-size="18"
size="18"
:name="item.type"
>
</up-radio>
</view>
</view>
</block>
</up-radio-group>
</view>
</view>
</template>
<script setup>
import {
ref,
reactive,
defineProps,
computed,
defineEmits,
watch,
watchEffect,
defineExpose
} from 'vue'
import {
ref,
reactive,
defineProps,
computed,
defineEmits,
watch,
watchEffect,
defineExpose,
} from "vue";
const props = defineProps({
rechargeFreeChecked: {
type: Boolean,
default: false
},
payAmount: {
type: Number,
default: 0
},
freeCheck: {
type: Boolean,
default: false
},
changeFreeenable: {
type: Boolean,
default: false
},
disablePayType: {
type: Array,
default: () => {
return []
}
}
const props = defineProps({
rechargeFreeChecked: {
type: Boolean,
default: false,
},
payAmount: {
type: Number,
default: 0,
},
freeCheck: {
type: Boolean,
default: false,
},
changeFreeenable: {
type: Boolean,
default: false,
},
disablePayType: {
type: Array,
default: () => {
return [];
},
},
});
});
function returnDisabled(item) {
if (props.disablePayType.includes(item.name)) {
return true;
} else {
return false;
}
}
function returnDisabled(item) {
if (props.disablePayType.includes(item.name)) {
return true
}else{
return false
}
}
const orderVIP = ref(null);
const emits = defineEmits(["customevent", "groupChange"]);
watchEffect(() => {
orderVIP.value = uni.cache.get("orderVIP");
});
const orderVIP = ref(null)
const emits = defineEmits(['customevent', 'groupChange']);
watchEffect(() => {
orderVIP.value = uni.cache.get('orderVIP')
})
const orderVIPfun = (data) => {
orderVIP.value = data;
};
const orderVIPfun = (data) => {
orderVIP.value = data
}
const paymentMethodList = ref([
// #ifdef MP-WEIXIN
{
name: "微信支付",
type: 2,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
payType: "wechatPay",
},
// #endif
// #ifdef MP-ALIPAY
{
name: "支付宝支付",
type: 3,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png",
payType: "aliPay",
},
// #endif
{
name: "余额支付",
type: 1,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png",
payType: "accountPay",
},
]);
const paymentMethodList = ref([
// #ifdef MP-WEIXIN
{
name: "微信支付",
type: 2,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
payType: 'wechatPay'
},
// #endif
// #ifdef MP-ALIPAY
{
name: "支付宝支付",
type: 3,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png",
payType: 'aliPay'
},
// #endif
{
name: "余额支付",
type: 1,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png",
payType: 'accountPay'
}
])
const paymentMethodName = ref([
{
name: "余额支付",
type: 1,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png",
payType: "accountPay",
},
{
name: "微信支付",
type: 2,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
payType: "wechatPay",
},
{
name: "支付宝支付",
type: 3,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png",
payType: "aliPay",
},
]);
const radiovalue = ref(2); // 支付方式
const paymentMethodName = ref([{
name: "余额支付",
type: 1,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png",
payType: 'accountPay'
},
{
name: "微信支付",
type: 2,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
payType: 'wechatPay'
},
{
name: "支付宝支付",
type: 3,
url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png",
payType: 'aliPay'
},
])
const ispws = ref(false); // 输入支付密码
const radiovalue = ref(2) // 支付方式
const storeInfo = ref({});
const ispws = ref(false) // 输入支付密码
// * 监听支付方式切换
const groupChanges = (type) => {
if (props.freeCheck && type == 1) {
return;
}
const item = paymentMethodList.value.find((v) => v.type == type);
if (item && returnDisabled(item)) {
uni.showToast({
title: "当前支付方式不可用",
icon: "none",
});
return;
}
// if (props.payAmount <= 0 && type != 1) {
// return;
// }
radiovalue.value = type;
let name = paymentMethodName.value[type - 1].name;
const storeInfo = ref({})
emits("groupChange", paymentMethodName.value[type - 1]);
};
// * 监听支付方式切换
const groupChanges = (type) => {
if (props.freeCheck && type == 1) {
return;
}
const item=paymentMethodList.value.find(v=>v.type==type)
if(item&&returnDisabled(item)){
uni.showToast({
title:"当前支付方式不可用",
icon:'none'
})
return
}
// if (props.payAmount <= 0 && type != 1) {
// return;
// }
radiovalue.value = type;
let name = paymentMethodName.value[type - 1].name;
// 去充值
const goRecharge = () => {
if (props.disablePayType.includes("余额支付")) {
return;
}
if (orderVIP.value.isVip) {
uni.navigateTo({
url: "/pages/user/member/czzx?shopId=" + orderVIP.value.shopId,
});
return;
}
uni.navigateTo({
url: "/user/vip/buy-vip?shopId=" + orderVIP.value.shopId,
});
emits("groupChange", paymentMethodName.value[type - 1])
}
// 去充值
const goRecharge = () => {
if (orderVIP.value.isVip) {
uni.navigateTo({
url: '/pages/user/member/czzx?shopId=' + orderVIP.value.shopId
})
return
}
uni.navigateTo({
url: '/user/vip/buy-vip?shopId=' + orderVIP.value.shopId
})
// uni.pro.navigateTo('user/member/index', {
// shopId: orderVIP.value.shopId
// })
}
// 将方法暴露给父组件
defineExpose({
groupChanges,
orderVIPfun
});
// uni.pro.navigateTo('user/member/index', {
// shopId: orderVIP.value.shopId
// })
};
// 将方法暴露给父组件
defineExpose({
groupChanges,
orderVIPfun,
});
</script>
<style lang="scss">
.paymentMethod {
box-sizing: border-box;
margin-top: 30rpx;
border-radius: 18rpx;
.paymentMethod {
box-sizing: border-box;
margin-top: 30rpx;
border-radius: 18rpx;
.paymentMethod_content {
background-color: #fff;
border-radius: 22rpx;
padding: 30rpx 30rpx 0 30rpx;
box-sizing: border-box;
.paymentMethod_content {
background-color: #fff;
border-radius: 22rpx;
padding: 30rpx 30rpx 0 30rpx;
box-sizing: border-box;
.paymentMethod_title {
font-weight: 500;
font-size: 32rpx;
color: #333333;
box-sizing: border-box;
}
.paymentMethod_title {
font-weight: 500;
font-size: 32rpx;
color: #333333;
box-sizing: border-box;
}
.method_list {
padding: 40rpx 0;
box-sizing: border-box;
&.disabled{
opacity: .6;
}
.method_list_top {
display: flex;
justify-content: space-between;
.method_list {
padding: 40rpx 0;
box-sizing: border-box;
&.disabled {
opacity: 0.6;
}
.method_list_top {
display: flex;
justify-content: space-between;
.method_list_top_left {
display: flex;
align-items: center;
.method_list_top_left {
display: flex;
align-items: center;
.icon {
width: 54.67rpx !important;
height: 48rpx !important;
margin-right: 22rpx;
}
.icon {
width: 54.67rpx !important;
height: 48rpx !important;
margin-right: 22rpx;
}
.name {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
.name {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
.method_list_top_cen {
display: flex;
flex-direction: column;
}
}
.method_list_top_cen {
display: flex;
flex-direction: column;
}
}
}
}
.method_list_bom {
display: flex;
align-items: center;
.method_list_bom {
display: flex;
align-items: center;
.balance {
margin-right: 20rpx;
font-size: 24rpx;
}
.balance {
margin-right: 20rpx;
font-size: 24rpx;
}
.topUpNow {
color: #ff803d;
font-size: 28rpx;
}
}
}
.topUpNow {
color: #FF803D;
font-size: 28rpx;
}
}
}
.method_list:nth-child(odd) {
border-bottom: 2rpx solid #e5e5e5;
}
}
}
.method_list:nth-child(odd) {
border-bottom: 2rpx solid #e5e5e5;
}
}
}
</style>