charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: 新增拼团

Browse Source
This commit is contained in:
charles
2026-09-23 10:29:41 +08:00
parent f7b9e66172
commit 67f8b3f352
33 changed files with 7491 additions and 858 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/other_package/productInfo/components/product-contribution-dialog.vue
+151
View File
@@ -0,0 +1,151 @@
<template>
<!-- 贡献值说明弹窗 -->
<up-popup :show="show" mode="bottom" :round="16" :closeOnClickOverlay="true"
@close="$emit('update:show', false)">
<view class="contribution_popup_container">
<!-- 头部 -->
<view class="contribution_popup_header">
<text class="contribution_header_title">贡献值说明</text>
<view class="contribution_header_close" @click="$emit('update:show', false)">
<u-icon name="close" size="18" color="#71737c"></u-icon>
</view>
</view>
<!-- 内容主体 -->
<scroll-view scroll-y class="contribution_popup_body">
<view class="contribution_section">
<view class="contribution_section_title">我能获得多少贡献值？</view>
<view class="contribution_text">1.商品详情页中展示为预估获得贡献值。</view>
<view class="contribution_text">2.实际赠送的贡献值将根据订单实付金额及商品贡献系数综合计算，其中商品贡献系数由商品毛利等因素确定。</view>
<view class="contribution_text">3.使用优惠券、发生退款或售后时，贡献值可能相应调整，最终以订单完成后的实际到账为准。</view>
</view>
<view class="contribution_section">
<view class="contribution_section_title">生效条件</view>
<view class="contribution_text">1.收到商品后，在订单中点击【确认收货】时，立马到账。可在【我的-钱包】贡献值进行查看</view>
<view class="contribution_text">2.消费者权益次日到账，可在【我的-钱包】数字积分-消费者权益中进行查看</view>
</view>
<view class="contribution_section">
<view class="contribution_section_title">售后调整</view>
<view class="contribution_text">1.如发生退货/退款，所有的贡献值、消费者权益将会进行扣除。</view>
</view>
</scroll-view>
<!-- 底部按钮 -->
<view class="contribution_popup_footer">
<view class="contribution_btn_confirm" @click="$emit('update:show', false)">
我知道了
</view>
</view>
</view>
</up-popup>
</template>
<script>
export default {
name: "product-contribution-dialog",
props: {
show: {
type: Boolean,
default: false,
},
},
};
</script>
<style lang="scss" scoped>
.contribution_popup_container {
background: #ffffff;
border-radius: 32rpx 32rpx 0 0;
display: flex;
flex-direction: column;
max-height: 80vh;
box-sizing: border-box;
.contribution_popup_header {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 32rpx 32rpx 16rpx;
.contribution_header_title {
font-weight: 500;
font-size: 32rpx;
color: #71737c;
}
.contribution_header_close {
position: absolute;
right: 32rpx;
top: 28rpx;
width: 48rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
.contribution_popup_body {
max-height: 60vh;
padding: 10rpx 36rpx 20rpx;
box-sizing: border-box;
.contribution_section {
margin-bottom: 28rpx;
&:last-child {
margin-bottom: 10rpx;
}
.contribution_section_title {
font-size: 34rpx;
font-weight: bold;
color: #111111;
margin-bottom: 20rpx;
line-height: 1.4;
}
.contribution_text {
font-size: 28rpx;
line-height: 1.75;
color: #666666;
margin-bottom: 16rpx;
&:last-child {
margin-bottom: 0;
}
}
}
}
.contribution_popup_footer {
padding: 20rpx 36rpx;
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
background: #ffffff;
box-sizing: border-box;
.contribution_btn_confirm {
width: 100%;
height: 88rpx;
background: #7934f6;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: #ffffff;
font-weight: 500;
cursor: pointer;
transition: opacity 0.15s ease;
&:active {
opacity: 0.85;
}
}
}
}
</style>
pages/other_package/productInfo/components/product-coupon-popup.vue
+420
View File
@@ -0,0 +1,420 @@
<template>
<up-popup :show="show" mode="bottom" :round="16" :closeable="true" :safeAreaInsetBottom="true"
@close="$emit('update:show', false)">
<view class="goods_coupon_popup_container">
<view class="popup_header">
<text class="popup_title">优惠券</text>
</view>
<!-- 优惠券列表 (可滑动) -->
<scroll-view scroll-y class="popup_coupon_scroll">
<view class="popup_coupon_list">
<view v-for="(coupon, index) in list" :key="coupon.templateId || coupon.id || index"
class="coupon-card" :class="{ 'card-disabled': getCardDisabled(coupon) }">
<!-- 左侧：金额与门槛 -->
<view class="card-left">
<view class="price-box">
<text class="currency">¥</text>
<text class="amount">{{ getDiscountAmount(coupon) }}</text>
</view>
<text class="condition">{{ getThresholdText(coupon) }}</text>
</view>
<!-- 带有上下半圆凹槽的虚线分割线 -->
<view class="divider-wrapper">
<view class="notch top-notch"></view>
<view class="divider-line"></view>
<view class="notch bottom-notch"></view>
</view>
<!-- 右侧：详细内容与操作按钮 -->
<view class="card-right">
<view class="info-content">
<view class="coupon-title">{{ coupon.title }}</view>
<view class="tag-row">
<text class="coupon-tag" :class="{ 'tag-disabled': getCardDisabled(coupon) }">
{{ getTagText(coupon) }}
</text>
<text class="coupon-scope">{{ getScopeText(coupon) }}</text>
</view>
<view class="coupon-validity">{{ getValidityText(coupon) }}</view>
</view>
<!-- 操作按钮 -->
<view class="btn-box">
<view v-if="!getCardReceived(coupon) && getCouponCanReceive(coupon)" class="action-btn btn-claim"
@click="$emit('receive', { coupon, index })">
立即领取
</view>
<view v-else-if="getCardReceived(coupon)" class="action-btn btn-received">
已领取
</view>
<view v-else class="action-btn btn-disabled">
{{ coupon.receiveStatusText || '已达上限' }}
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 底部确定按钮 -->
<view class="popup_bottom_btn_wrap">
<view class="popup_btn_ok" @click="$emit('update:show', false)">
确定
</view>
</view>
</view>
</up-popup>
</template>
<script>
export default {
name: "product-coupon-popup",
props: {
show: {
type: Boolean,
default: false,
},
list: {
type: Array,
default: () => [],
},
},
methods: {
getDiscountAmount(coupon) {
return coupon.discountAmount !== undefined ? coupon.discountAmount : (coupon.amount || 0);
},
getThresholdText(coupon) {
const threshold = coupon.thresholdAmount !== undefined ? Number(coupon.thresholdAmount) : 0;
if (threshold === 0) {
return "无门槛";
}
return `满${threshold}元可用`;
},
getTagText(coupon) {
if (coupon.scopeType === 1) return "通用券";
if (coupon.scopeType === 2) return "商品券";
if (coupon.scopeType === 3 || coupon.scopeType === 4) return "品类券";
if (coupon.scopeText && coupon.scopeText.includes("通用")) return "通用券";
return "通用券";
},
getScopeText(coupon) {
if (coupon.scopeText) return coupon.scopeText;
if (coupon.scopeType === 1) return "所有商品可用";
if (coupon.scopeType === 2) return "指定商品可用";
if (coupon.scopeType === 3) return "指定类目可用";
if (coupon.scopeType === 4) return "指定专区商品可用";
return "所有商品可用";
},
getValidityText(coupon) {
if (coupon.validDays && coupon.validDays > 0) {
return `领取之日起${coupon.validDays}天内有效`;
}
if (coupon.useEndTime) {
return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
}
if (coupon.receiveEndTime) {
return `截止时间 ${this.formatTime(coupon.receiveEndTime)}`;
}
return "领取之日起30天内有效";
},
getCardReceived(coupon) {
return coupon.received || coupon.receiveStatus === 1;
},
getCouponCanReceive(coupon) {
return coupon.canReceive !== false && coupon.receiveStatus !== 2;
},
getCardDisabled(coupon) {
return coupon.receiveStatus === 2 || (coupon.canReceive === false && !coupon.received && coupon.receiveStatus !== 1);
},
formatTime(time) {
if (!time) return "";
if (typeof time === "string" && time.includes("-")) return time;
const date = new Date(Number(time));
if (isNaN(date.getTime())) return String(time);
const y = date.getFullYear();
const m = String(date.getMonth() + 1).padStart(2, "0");
const d = String(date.getDate()).padStart(2, "0");
const hh = String(date.getHours()).padStart(2, "0");
const mm = String(date.getMinutes()).padStart(2, "0");
const ss = String(date.getSeconds()).padStart(2, "0");
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
},
},
};
</script>
<style lang="scss" scoped>
.goods_coupon_popup_container {
width: 100%;
max-width: 100vw;
background-color: #ffffff;
border-radius: 32rpx 32rpx 0 0;
padding: 32rpx 24rpx 40rpx 24rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: hidden;
.popup_header {
position: relative;
text-align: center;
margin-bottom: 24rpx;
.popup_title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
}
.popup_coupon_scroll {
width: 100%;
max-width: 100%;
box-sizing: border-box;
max-height: 700rpx;
min-height: 300rpx;
.popup_coupon_list {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 8rpx 0;
}
}
.popup_bottom_btn_wrap {
margin-top: 24rpx;
padding: 0 16rpx;
.popup_btn_ok {
width: 100%;
height: 84rpx;
line-height: 84rpx;
text-align: center;
background: linear-gradient(135deg, #a855f7 0%, #7a35f6 100%);
color: #ffffff;
font-size: 30rpx;
font-weight: bold;
border-radius: 42rpx;
box-shadow: 0 8rpx 20rpx rgba(122, 53, 246, 0.25);
transition: transform 0.1s ease;
&:active {
transform: scale(0.98);
}
}
}
.coupon-card {
position: relative;
width: 100%;
max-width: 100%;
display: flex;
align-items: center;
background: rgba(253, 28, 36, 0.06);
border-radius: 16rpx;
margin-bottom: 20rpx;
box-sizing: border-box;
overflow: hidden;
&.card-disabled {
background: #f5f5f5 !important;
.card-left {
.price-box {
color: #a0a0a0 !important;
}
.condition {
color: #999999 !important;
}
}
.coupon-title {
color: #333333 !important;
}
}
.card-left {
width: 150rpx;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20rpx 0;
.price-box {
display: flex;
align-items: baseline;
color: #ff2442;
.currency {
font-size: 26rpx;
font-weight: bold;
margin-right: 2rpx;
}
.amount {
font-size: 52rpx;
font-weight: 700;
line-height: 1;
}
}
.condition {
font-size: 24rpx;
color: #ff2442;
margin-top: 10rpx;
font-weight: 500;
}
}
.divider-wrapper {
position: relative;
width: 2rpx;
align-self: stretch;
.divider-line {
height: 100%;
border-left: 2rpx dashed #fca5a5;
}
.notch {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 24rpx;
height: 24rpx;
background-color: #ffffff;
border-radius: 50%;
z-index: 10;
}
.top-notch {
top: -12rpx;
}
.bottom-notch {
bottom: -12rpx;
}
}
.card-disabled .divider-line {
border-left: 2rpx dashed #dddddd !important;
}
.card-right {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 16rpx;
box-sizing: border-box;
.info-content {
flex: 1;
min-width: 0;
margin-right: 10rpx;
overflow: hidden;
.coupon-title {
font-size: 30rpx;
font-weight: bold;
color: #1a1a1a;
margin-bottom: 10rpx;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tag-row {
display: flex;
align-items: center;
margin-bottom: 10rpx;
min-width: 0;
overflow: hidden;
.coupon-tag {
display: inline-block;
font-size: 20rpx;
color: #ff2442;
background: #ffe4e6;
border: 1px solid #ff99a4;
border-radius: 6rpx;
padding: 2rpx 10rpx;
margin-right: 10rpx;
line-height: 1.2;
font-weight: 500;
flex-shrink: 0;
white-space: nowrap;
&.tag-disabled {
color: #888888 !important;
background: #eeeeee !important;
border: 1px solid #cccccc !important;
}
}
.coupon-scope {
flex: 1;
min-width: 0;
font-size: 22rpx;
color: #666666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.coupon-validity {
font-size: 22rpx;
color: #999999;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.btn-box {
flex-shrink: 0;
.action-btn {
width: 124rpx;
height: 54rpx;
line-height: 54rpx;
text-align: center;
font-size: 24rpx;
font-weight: bold;
border-radius: 8rpx;
box-sizing: border-box;
flex-shrink: 0;
&.btn-claim {
background: #ff1e38;
color: #ffffff;
}
&.btn-received {
background: #ffe8eb;
color: #ff2442;
border: 1px solid #ff4d5e;
line-height: 52rpx;
font-weight: 500;
}
&.btn-disabled {
background: #eeeeee;
color: #bbbbbb;
}
}
}
}
}
}
</style>
pages/other_package/productInfo/components/product-group-rules.vue
+247
View File
@@ -0,0 +1,247 @@
<template>
<!-- 拼团玩法与可直接参与的拼团 (高保真还原) -->
<view class="group_rules_card" v-if="isGroupProduct">
<!-- 拼团玩法 -->
<view class="group_rules_section">
<view class="group_section_title">拼团玩法</view>
<view class="group_steps_row">
<!-- Step 1 -->
<view class="group_step_item">
<image class="step_icon_img" src="https://static.tbmall.xin/static/new/group_buying_1.png"
mode="aspectFit">
</image>
<text class="step_text">开团/参加</text>
</view>
<!-- Step 2 -->
<view class="group_step_item">
<image class="step_icon_img" src="https://static.tbmall.xin/static/new/group_buying_2.png"
mode="aspectFit">
</image>
<text class="step_text">邀请好友参团</text>
</view>
<!-- Step 3 -->
<view class="group_step_item">
<image class="step_icon_img" src="https://static.tbmall.xin/static/new/group_buying_3.png"
mode="aspectFit">
</image>
<text class="step_text">成团发货</text>
</view>
</view>
<view class="group_rules_notice">
购买须知：付款后等待成团，成团后 1-3 天发货。未成团且不支持自动成团时全额退款。
</view>
</view>
<!-- 可直接参与的拼团 (无数据时不展示) -->
<view v-if="displayGroupTeams && displayGroupTeams.length > 0">
<!-- 分割线 -->
<view class="group_section_divider"></view>
<!-- 可直接参与的拼团 -->
<view class="group_direct_section">
<view class="group_direct_header" @click="$emit('openJoinablePopup')">
<text class="group_direct_title">可直接参与的拼团</text>
<view class="group_direct_more">
<up-image src="/static/common/right.png" width="12" height="12" bgColor="#f1f6ff00"></up-image>
</view>
</view>
<view class="group_teams_list">
<view class="group_team_item" v-for="(team, tIdx) in displayGroupTeams.slice(0, 3)" :key="team.id || tIdx">
<view class="team_user_info">
<view class="team_avatar_wrap">
<image class="team_avatar avatar_1" :src="team.avatar1" mode="aspectFill"></image>
<image class="team_avatar avatar_2" :src="team.avatar2" mode="aspectFill"></image>
</view>
<text class="team_user_name">{{ team.nickname }}</text>
</view>
<view class="team_action_wrap">
<text class="team_countdown_text">{{ team.countdownText }}</text>
<view class="btn_join_team" @click="$emit('joinTeam', team)">
<text class="btn_join_text">去拼团</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "product-group-rules",
props: {
isGroupProduct: {
type: Boolean,
default: false,
},
displayGroupTeams: {
type: Array,
default: () => [],
},
},
};
</script>
<style lang="scss" scoped>
.group_rules_card {
background-color: #ffffff;
border-radius: 24rpx;
padding: 28rpx 24rpx;
margin-top: 20rpx;
.group_section_title {
font-size: 28rpx;
font-weight: bold;
color: #1a1a1a;
margin-bottom: 24rpx;
}
.group_steps_row {
display: flex;
align-items: flex-start;
justify-content: space-around;
padding: 10rpx 0;
.group_step_item {
display: flex;
flex-direction: column;
align-items: center;
width: 180rpx;
.step_icon_img {
width: 96rpx;
height: 96rpx;
}
.step_text {
font-size: 24rpx;
color: #333333;
margin-top: 14rpx;
font-weight: 500;
text-align: center;
}
}
}
.group_rules_notice {
font-size: 22rpx;
color: #999999;
line-height: 36rpx;
margin-top: 20rpx;
padding-top: 16rpx;
}
.group_section_divider {
height: 1rpx;
background-color: #f2f2f2;
margin: 24rpx 0;
}
.group_direct_section {
.group_direct_header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12rpx;
.group_direct_title {
font-size: 28rpx;
font-weight: bold;
color: #1a1a1a;
}
}
.group_teams_list {
.group_team_item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16rpx 0;
.team_user_info {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
.team_avatar_wrap {
display: flex;
align-items: center;
position: relative;
width: 80rpx;
height: 52rpx;
flex-shrink: 0;
.team_avatar {
width: 52rpx;
height: 52rpx;
border-radius: 50%;
border: 2rpx solid #ffffff;
background-color: #e6e6e6;
position: absolute;
top: 0;
&.avatar_1 {
left: 0;
z-index: 2;
}
&.avatar_2 {
left: 28rpx;
z-index: 1;
}
}
}
.team_user_name {
font-size: 26rpx;
color: #333333;
font-weight: 500;
margin-left: 12rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200rpx;
}
}
.team_action_wrap {
display: flex;
align-items: center;
flex-shrink: 0;
.team_countdown_text {
font-size: 22rpx;
color: #999999;
margin-right: 16rpx;
}
.btn_join_team {
background: linear-gradient(90deg, #8a3bf8 0%, #742af5 100%);
border-radius: 26rpx;
padding: 0 24rpx;
height: 52rpx;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s;
&:active {
opacity: 0.85;
}
.btn_join_text {
color: #ffffff;
font-size: 24rpx;
font-weight: bold;
}
}
}
}
}
}
}
</style>
pages/other_package/productInfo/components/product-joinable-popup.vue
+199
View File
@@ -0,0 +1,199 @@
<template>
<!-- 可直接参与的拼团弹窗 -->
<up-popup :show="show" mode="bottom" :round="16" :closeOnClickOverlay="true"
@close="$emit('update:show', false)">
<view class="joinable_popup_container">
<!-- 头部 -->
<view class="joinable_popup_header">
<text class="joinable_popup_title">可直接参与的拼团</text>
<view class="joinable_popup_close" @click="$emit('update:show', false)">
<u-icon name="close" size="18" color="#71737c"></u-icon>
</view>
</view>
<!-- 拼团列表 -->
<scroll-view scroll-y class="joinable_popup_body">
<view class="joinable_popup_list">
<view class="joinable_team_item" v-for="(team, idx) in list" :key="team.teamId || team.id || idx">
<!-- 头像区域（叠层） -->
<view class="joinable_avatar_wrap">
<image class="joinable_avatar avatar_main" :src="team.avatar1" mode="aspectFill"></image>
<image class="joinable_avatar avatar_sub" :src="team.avatar2" mode="aspectFill"></image>
</view>
<!-- 昵称 -->
<text class="joinable_name">{{ team.nickname }}</text>
<!-- 倒计时 -->
<text class="joinable_countdown">{{ team.countdownText }}</text>
<!-- 去拼团按钮 -->
<view class="joinable_btn" @click="$emit('join', team)">
<text class="joinable_btn_text">去拼团</text>
</view>
</view>
<!-- 列表为空 -->
<view v-if="!list || list.length === 0" class="joinable_empty">
<text class="joinable_empty_text">暂无可参与的拼团</text>
</view>
</view>
</scroll-view>
</view>
</up-popup>
</template>
<script>
export default {
name: "product-joinable-popup",
props: {
show: {
type: Boolean,
default: false,
},
list: {
type: Array,
default: () => [],
},
},
};
</script>
<style lang="scss" scoped>
.joinable_popup_container {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 32rpx 32rpx 0 0;
padding-bottom: env(safe-area-inset-bottom);
max-height: 80vh;
.joinable_popup_header {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 36rpx 40rpx 24rpx;
border-bottom: 1rpx solid #f2f2f2;
.joinable_popup_title {
font-size: 32rpx;
font-weight: bold;
color: #1a1a1a;
}
.joinable_popup_close {
position: absolute;
right: 40rpx;
top: 50%;
transform: translateY(-50%);
width: 48rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
.joinable_popup_body {
flex: 1;
max-height: calc(80vh - 120rpx);
.joinable_popup_list {
padding: 0 40rpx;
.joinable_team_item {
display: flex;
align-items: center;
padding: 24rpx 0;
border-bottom: 1rpx solid #f6f6f6;
&:last-child {
border-bottom: none;
}
// 头像叠层
.joinable_avatar_wrap {
position: relative;
width: 80rpx;
height: 56rpx;
flex-shrink: 0;
.joinable_avatar {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
border: 2rpx solid #ffffff;
background-color: #e6e6e6;
position: absolute;
top: 0;
&.avatar_main {
left: 0;
z-index: 2;
}
&.avatar_sub {
left: 24rpx;
z-index: 1;
}
}
}
// 昵称
.joinable_name {
flex: 1;
font-size: 28rpx;
color: #333333;
font-weight: 500;
margin-left: 12rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 倒计时
.joinable_countdown {
font-size: 22rpx;
color: #999999;
margin: 0 20rpx 0 12rpx;
white-space: nowrap;
flex-shrink: 0;
}
// 去拼团按钮
.joinable_btn {
background: linear-gradient(90deg, #8a3bf8 0%, #742af5 100%);
border-radius: 28rpx;
padding: 0 24rpx;
height: 56rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: opacity 0.2s;
&:active {
opacity: 0.82;
}
.joinable_btn_text {
color: #ffffff;
font-size: 26rpx;
font-weight: bold;
}
}
}
// 空列表占位
.joinable_empty {
padding: 80rpx 0;
display: flex;
align-items: center;
justify-content: center;
.joinable_empty_text {
font-size: 28rpx;
color: #cccccc;
}
}
}
}
}
</style>