tangxinyue
/
alipay-emulator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pdd添加优惠卷和618活动券显示

This commit is contained in:
tangxinyue 2026-05-30 14:39:16 +08:00
parent e3e29f7f18
commit 033a3bd9ba
10 changed files with 187 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
pages/shopping/pdd/add-order/add-order.vue
View File

@ -138,6 +138,9 @@
<text style="font-size: 22rpx; color: #999;">旗舰店 </text>
<switch :checked="order.shop.hasFlagship" @change="(e) => order.shop.hasFlagship = e.detail.value"
color="#E02E24" style="transform: scale(0.6); margin-left: -10rpx; margin-right: -20rpx;" />
<text style="font-size: 22rpx; color: #999;">618 </text>
<switch :checked="order.shop.has618" @change="(e) => order.shop.has618 = e.detail.value" color="#E02E24"
style="transform: scale(0.6); margin-left: -10rpx; margin-right: -20rpx;" />
</view>
</view>
@ -155,6 +158,8 @@
</image>
<image v-if="order.shop.hasFlagship" class="flagship-tag"
src="/static/image/shopping/pdd/qijiandian.png" mode="heightFix"></image>
<image v-if="order.shop.has618" style="margin-left: 8rpx;height: 28rpx;" class="flagship-tag"
src="/static/image/shopping/pdd/618.png" mode="heightFix"></image>
</view>
<!-- 商品主要内容 -->
@ -166,8 +171,10 @@
</view>
<view class="info-box flex-1">
<view class="title-price flex">
<view class="title text-ellipsis-2 flex-1">
<auto-width-input type="textarea" v-model="product.title" show-edit />
<view class="title flex-1">
<!-- <auto-width-input type="textarea" v-model="product.title" show-edit /> -->
<auto-width-input class="flex-1" v-model="product.title" fontSize="28rpx" color="#1A1A1A"
type="textarea" show-edit />
</view>
<view class="price-box flex-column align-end">
<text class="price">¥<auto-width-input v-model="product.price" type="number"
@ -176,7 +183,7 @@
show-edit /></text>
</view>
</view>
<view class="spec text-ellipsis-2">
<view class="spec">
<auto-width-input type="textarea" v-model="product.spec" show-edit />
</view>
<view class="tags flex-align-center" style="flex-wrap: wrap; gap: 8rpx 0;">
@ -287,7 +294,7 @@
</view>
</view>
<uni-popup ref="timepopup" type="bottom">
<uni-popup ref="timepopup" type="bottom" :z-index="9999" style="z-index: 9999;">
<view class="timeBox">
<view class="titleBox">
<view class="title" @click="closeTimePicker">取消</view>

16
pages/shopping/pdd/components/list-card/list-card.vue
View File

@ -13,6 +13,8 @@
</image>
<image class="flag-img" v-if="item.shop?.hasFlagship" src="/static/image/shopping/pdd/qijiandian.png">
</image>
<image v-if="item.shop?.has618" style="margin-left: 8rpx;height: 28rpx;" class="flagship-tag"
src="/static/image/shopping/pdd/618.png" mode="heightFix"></image>
<uni-icons style="margin-top: 4rpx;" type="right" color="#999999" size="12"></uni-icons>
</view>
<view class="status-text" v-if="item.orderType === 'wait_pay'">待支付</view>
@ -27,7 +29,7 @@
</view>
<view class="product-content flex-1">
<view class="title-box">
<view class="brand-tag flex-center" v-if="item.shop?.hasBrandAuth">品牌</view>
<text class="brand-tag" v-if="item.shop?.hasBrandAuth">品牌</text>
<text class="title-text">{{ product.title }}</text>
</view>
<view class="spec-text text-ellipsis">{{ product.spec }}</view>
@ -245,6 +247,7 @@ const toDetail = (id) => {
width: 0;
.title-box {
width: 100%;
font-size: 26rpx;
color: #1A1A1A;
line-height: 36rpx;
@ -252,22 +255,21 @@ const toDetail = (id) => {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
.brand-tag {
display: inline-block;
background-color: #252525;
color: #fff;
font-size: 22rpx;
line-height: 22rpx;
padding: 4rpx 8rpx;
padding: 2rpx 8rpx;
border-radius: 4rpx;
margin-right: 8rpx;
margin-top: -4rpx;
position: relative;
top: -2rpx;
}
.title-text {
vertical-align: middle;
}
.title-text {}
}
.spec-text {

14
pages/shopping/pdd/json/order.json
View File

@ -10,7 +10,8 @@
"name": "",
"logo": "",
"hasBrandAuth": true,
"hasFlagship": true
"hasFlagship": true,
"has618": false
},
"products": [
{
@ -64,7 +65,8 @@
"name": "",
"logo": "",
"hasBrandAuth": true,
"hasFlagship": true
"hasFlagship": true,
"has618": false
},
"products": [
{
@ -144,7 +146,8 @@
"name": "",
"logo": "",
"hasBrandAuth": true,
"hasFlagship": true
"hasFlagship": true,
"has618": false
},
"products": [
{
@ -490,8 +493,9 @@
"shop": {
"name": "索尼（SONY）数码官方旗舰店",
"logo": "",
"hasBrandAuth": true,
"hasFlagship": true
"hasBrandAuth": false,
"hasFlagship": false,
"has618": true
},
"products": [
{

137
pages/shopping/pdd/list-index.vue
View File

@ -3,6 +3,17 @@
<view class="nav-bar">
<nav-bar v-if="!selectedImage" :buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton"
tipLayerType="pdd-shopping-list" isTipLayer tipLayerText="添加订单信息">
<!-- 使用作用域插槽自定义按钮渲染，特别是switch的checked绑定 -->
<template #button="{ button }">
<view class="button flex-align-center flex-justify-center">
{{ button.name }}
<view @tap.stop>
<switch v-if="button.isSwitch" :checked="couponInfo[button.key]" @change="button.click"
style="transform: scale(0.7);"></switch>
</view>
</view>
</template>
<template v-slot:left>
<image style="width: 48rpx;height: 48rpx;" src="/static/image/shopping/pdd/back.png"
@click="util.goBack()">
@ -43,6 +54,20 @@
</scroll-view>
<scroll-view class="flex-1" style="height: 100px;" scroll-y="true" :scroll-into-view="scrollIntoId"
scroll-with-animation>
<view v-if="couponInfo.show618Coupon" class="flex-align-center coupon-banner">
<image style="width: 32rpx;height: 28rpx;margin-right: 10rpx;"
src="/static/image/shopping/pdd/coupon-logo.png">
</image>
<view class="flex-align-center flex-1">
<text class="red">618</text>
<text>降价正式开始！再送</text>
<text class="red">{{ couponInfo.coupon618Amount || '188' }}元</text>
<text>优惠券</text>
</view>
<uni-icons type="right" size="14" color="#B7B7B7"></uni-icons>
</view>
<image v-if="couponInfo.hasCoupon" style="width: 100%;height: 300rpx;"
:src="couponInfo.couponPath || '/static/image/shopping/pdd/coupon1.png'" mode="widthFix"></image>
<list-card v-for="(item, index) in filteredOrderList" :key="index" :item="item"
@longpress="handleLongPress($event, item)"></list-card>
<view v-if="filteredOrderList.length == 0" class="null-data-box flex-align-center">
@ -95,6 +120,52 @@
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
</liu-drag-button>
</view>
<!-- 优惠券弹窗 -->
<uni-popup ref="couponPopup" type="center">
<view class="popup-content"
style="width: 620rpx; background-color: #fff; border-radius: 24rpx; padding: 40rpx 30rpx; box-sizing: border-box;">
<view class="flex-align-center flex-between" style="margin-bottom: 30rpx;">
<text style="font-size: 34rpx; font-weight: 500; color: #1A1A1A;">618活动券展示</text>
<switch :checked="tempCouponInfo.show618Coupon"
@change="(e) => tempCouponInfo.show618Coupon = e.detail.value" color="#E02E24"
style="transform: scale(0.8);" />
</view>
<view v-if="tempCouponInfo.show618Coupon" class="flex-align-center flex-between"
style="margin-bottom: 30rpx;">
<text style="font-size: 30rpx; color: #1A1A1A;">设置618优惠券额度</text>
<input type="text" v-model="tempCouponInfo.coupon618Amount" placeholder="如 188"
style="text-align: right; border: 1px solid #ddd; border-radius: 8rpx; padding: 4rpx 16rpx; width: 140rpx; font-size: 28rpx;" />
</view>
<view style="height: 1px; background-color: #f5f5f5; margin-bottom: 30rpx;"></view>
<view class="flex-align-center flex-between" style="margin-bottom: 30rpx;">
<text style="font-size: 34rpx; font-weight: 500; color: #1A1A1A;">普通优惠券展示</text>
<switch :checked="tempCouponInfo.hasCoupon"
@change="(e) => tempCouponInfo.hasCoupon = e.detail.value" color="#E02E24"
style="transform: scale(0.8);" />
</view>
<scroll-view scroll-y v-if="tempCouponInfo.hasCoupon" class="coupon-options flex-column"
style="max-height: 55vh;">
<view class="coupon-item"
v-for="(img, idx) in ['/static/image/shopping/pdd/coupon1.png', '/static/image/shopping/pdd/coupon2.png', '/static/image/shopping/pdd/coupon3.png']"
:key="idx" @click="tempCouponInfo.couponPath = img"
:style="{ border: tempCouponInfo.couponPath === img ? '4rpx solid #E02E24' : '4rpx solid transparent', marginBottom: '20rpx', borderRadius: '16rpx', overflow: 'hidden', padding: '4rpx' }">
<image :src="img" style="width: 100%; display: block; border-radius: 12rpx;" mode="widthFix">
</image>
</view>
</scroll-view>
<view class="flex-center" style="margin-top: 40rpx;">
<view class="btn primary flex-center"
style="width: 100%; border-radius: 40rpx; padding: 22rpx 0; text-align: center; background-color: #E02E24; color: #fff; font-size: 32rpx; font-weight: 500;"
@click="saveCouponInfo">确认保存</view>
</view>
</view>
</uni-popup>
</view>
</template>
@ -111,6 +182,33 @@ const { proxy } = getCurrentInstance();
const activeTab = ref(0);
const scrollIntoId = ref('');
// 优惠券配置
const couponInfo = ref({
show618Coupon: true,
coupon618Amount: '188',
hasCoupon: true,
couponPath: '/static/image/shopping/pdd/coupon1.png'
});
const tempCouponInfo = ref({
show618Coupon: true,
coupon618Amount: '188',
hasCoupon: true,
couponPath: '/static/image/shopping/pdd/coupon1.png'
});
const couponPopup = ref(null);
const openCouponPopup = () => {
tempCouponInfo.value = JSON.parse(JSON.stringify(couponInfo.value));
couponPopup.value.open();
};
const saveCouponInfo = () => {
couponInfo.value = JSON.parse(JSON.stringify(tempCouponInfo.value));
uni.setStorageSync('pddCouponInfo', couponInfo.value);
couponPopup.value.close();
uni.showToast({ title: '保存成功', icon: 'success' });
};
//导航栏菜单按钮
const buttonGroup = [
@ -133,26 +231,9 @@ const buttonGroup = [
}, 400);
}
}, {
name: "切换优惠券",
name: "设置优惠券",
click: () => {
scrollIntoId.value = '';
setTimeout(() => {
scrollIntoId.value = 'bottom-anchor';
}, 50);
setTimeout(() => {
chooseImage();
}, 400);
}
}, {
name: "显示618活动券",
click: () => {
scrollIntoId.value = '';
setTimeout(() => {
scrollIntoId.value = 'bottom-anchor';
}, 50);
setTimeout(() => {
chooseImage();
}, 400);
openCouponPopup();
}
}
]
@ -350,6 +431,11 @@ const filteredOrderList = computed(() => {
});
onShow(() => {
const pddCouponInfo = uni.getStorageSync('pddCouponInfo');
if (pddCouponInfo) {
couponInfo.value = pddCouponInfo;
}
const isInitialized = uni.getStorageSync('isPddOrderListInitialized');
if (!isInitialized) {
uni.setStorageSync('pddOrderList', defaultDataList);
@ -778,6 +864,19 @@ const closeImage = () => {
}
}
}
.coupon-banner {
background-color: #FEF5B2;
padding: 20rpx 22rpx;
font-weight: 400;
font-size: 26rpx;
color: #1A1A1A;
line-height: 26rpx;
.red {
color: #DF2E26;
}
}
</style>
<style>
@import '@/common/main.css';

55
pages/shopping/pdd/order-detail/order-detail.vue
View File

@ -30,15 +30,18 @@
<!-- 头部信息卡片：优惠券 + 物流 + 地址 -->
<view class="header-info-card">
<!-- 优惠券横幅 -->
<view v-if="order.orderType !== 'wait_pay' && order.couponInfo"
class="coupon-banner flex-align-center flex-justify-between">
<view class="flex-align-center">
<view class="coupon-icon flex-center">￥</view>
<text class="black-text">{{ order.couponInfo.title }}</text>
<text class="red-text">{{ order.couponInfo.priceText }}</text>
<text class="black-text">{{ order.couponInfo.timeText }}</text>
<view v-if="couponInfo.show618Coupon && order.orderType !== 'wait_pay'"
class="flex-align-center coupon-banner">
<image style="width: 32rpx;height: 28rpx;margin-right: 10rpx;"
src="/static/image/shopping/pdd/coupon-logo.png">
</image>
<view class="flex-align-center flex-1">
<text class="red">618</text>
<text>降价正式开始！再送</text>
<text class="red">{{ couponInfo.coupon618Amount || '188' }}元</text>
<text>优惠券</text>
</view>
<uni-icons type="right" size="14" color="#D3D3D3"></uni-icons>
<uni-icons type="right" size="14" color="#B7B7B7"></uni-icons>
</view>
<!-- 物流信息 -->
@ -74,12 +77,6 @@
<view v-if="order.orderType == 'wait_pay'" class="edit-btn">修改</view>
</view>
</view>
<view v-if="false" class="upload-shop-logo-box flex-justify-between flex-align-center">
<text>上传店铺头像</text>
<view>
</view>
</view>
<view class="product-card">
<!-- 店铺信息 -->
<view class="shop-header flex-align-center">
@ -92,6 +89,8 @@
</image>
<image v-if="order.shop.hasFlagship" class="flagship-tag"
src="/static/image/shopping/pdd/qijiandian.png" mode="heightFix"></image>
<image v-if="order.shop.has618" style="margin-left: 12rpx;height: 28rpx;" class="flagship-tag"
src="/static/image/shopping/pdd/618.png" mode="heightFix"></image>
</view>
<!-- 商品主要内容 -->
@ -210,7 +209,7 @@
<!-- 底部固定支付栏 -->
<view v-if="order.orderType == 'wait_pay'" class="fixed-bottom-bar flex-justify-between">
<!-- 样式 2：先用后付 (activePayIndex === 2) -->
<view class="left-info style-2 flex-column" v-if="activePayIndex === 2">
<view class="left-info style-2 flex-column" v-if="order.activePayIndex === 2">
<view class="line-top flex-align-end">
<text class="label">实付款: </text>
<text class="symbol">￥</text>
@ -365,9 +364,22 @@ onLoad((option) => {
})
})
// 优惠券配置
const couponInfo = ref({
show618Coupon: true,
coupon618Amount: '188',
hasCoupon: true,
couponPath: '/static/image/shopping/pdd/coupon1.png'
});
onShow(() => {
const cacheList = uni.getStorageSync('pddOrderList');
order.value = cacheList.find(item => item.id == id.value);
const pddCouponInfo = uni.getStorageSync('pddCouponInfo');
if (pddCouponInfo) {
couponInfo.value = pddCouponInfo;
}
})
@ -1043,6 +1055,19 @@ const selectPayMethod = (index) => {
}
}
}
.coupon-banner {
background-color: #FCF6D6;
padding: 20rpx 22rpx;
font-weight: 400;
font-size: 26rpx;
color: #1A1A1A;
line-height: 26rpx;
.red {
color: #DF2E26;
}
}
</style>
<style>
@import '@/common/main.css';

BIN
static/image/shopping/pdd/618.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/image/shopping/pdd/coupon-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 631 B

BIN
static/image/shopping/pdd/coupon1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
static/image/shopping/pdd/coupon2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
static/image/shopping/pdd/coupon3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB