xsl/meida_applet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

接入拼团

Browse Source
This commit is contained in:
owen
2024-01-10 22:57:06 +08:00
parent 08b6b38c05
commit 07601aec09
12 changed files with 388 additions and 605 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/goods/components/detail/detail-activity-tip.vue
+1 -2
View File
@@ -51,8 +51,7 @@
const typePath = type === 1 ? 'seckill' :
type === 2 ? 'TODO 拼团' : 'groupon';
sheep.$router.go(`/pages/goods/${typePath}`, {
id: activity.spuId,
activity_id: activity.id,
id: activity.id,
});
}
</script>
pages/goods/components/detail/detail-cell-sku.vue
+1 -1
View File
@@ -19,7 +19,7 @@
}
});
const value = computed(() => {
if (!props.sku.id) {
if (!props.sku?.id) {
return '请选择商品规格';
}
let str = '';
pages/goods/components/groupon/groupon-card-list.vue
+20 -17
View File
@@ -1,30 +1,32 @@
<!-- 拼团活动参团记录卡片 -->
<template>
<view v-if="state.list.length > 0" class="groupon-list detail-card ss-p-x-20">
<view class="join-activity ss-flex ss-row-between ss-m-t-30">
<view class="">已有{{ modelValue.sales }}人参与活动</view>
<!-- todo: 接口缺少总数 -->
<view class="">已有{{ state.list.length }}人参与活动</view>
<text class="cicon-forward"></text>
</view>
<view
v-for="(item, index) in state.list"
@tap="sheep.$router.go('/pages/activity/groupon/detail', { id: item.id })"
v-for="(record, index) in state.list"
@tap="sheep.$router.go('/pages/activity/groupon/detail', { id: record.id })"
:key="index"
class="ss-m-t-40 ss-flex ss-row-between border-bottom ss-p-b-30"
>
<view class="ss-flex ss-col-center">
<image :src="sheep.$url.cdn(item.leader.avatar)" class="user-avatar"></image>
<view class="user-nickname ss-m-l-20 ss-line-1">{{ item.leader.nickname }}</view>
<image :src="sheep.$url.cdn(record.avatar)" class="user-avatar"></image>
<view class="user-nickname ss-m-l-20 ss-line-1">{{ record.nickname }}</view>
</view>
<view class="ss-flex ss-col-center">
<view class="ss-flex-col ss-col-bottom ss-m-r-20">
<view class="title ss-flex ss-m-b-14">
还差
<view class="num">{{ item.num - item.current_num }}人</view>
<view class="num">{{ record.userSize - record.userCount }}人</view>
成团
</view>
<view class="end-time">{{ endTime(item.expire_time) }}</view>
<view class="end-time">{{ endTime(record.expireTime) }}</view>
</view>
<view class="">
<button class="ss-reset-button go-btn" @tap.stop="onJoinGroupon(item)"> 去参团 </button>
<button class="ss-reset-button go-btn" @tap.stop="onJoinGroupon(record)"> 去参团 </button>
</view>
</view>
</view>
@@ -35,6 +37,7 @@
import { onMounted, reactive } from 'vue';
import sheep from '@/sheep';
import { useDurationTime } from '@/sheep/hooks/useGoods';
import CombinationApi from "@/sheep/api/promotion/combination";
const props = defineProps({
modelValue: {
@@ -45,13 +48,14 @@
const state = reactive({
list: [],
});
const emits = defineEmits(['join']);
function onJoinGroupon(groupon) {
emits('join', groupon);
// 去参团
const emits = defineEmits(['join']);
function onJoinGroupon(record) {
emits('join', record);
}
// 倒计时
// 结束时间或状态
function endTime(time) {
const durationTime = useDurationTime(time);
@@ -66,12 +70,11 @@
return timeText;
}
// 初始化
onMounted(async () => {
const { data } = await sheep.$api.activity.getGrouponList({
goods_id: props.modelValue.id,
activity_id: props.modelValue.activity.id,
});
state.list = data.data;
// 查询参团记录
const { data } = await CombinationApi.getHeadCombinationRecordList(props.modelValue.id, 1 , 10);
state.list = data;
});
</script>
pages/goods/groupon.vue
+64 -123
View File
@@ -4,17 +4,14 @@
<detailNavbar />
<!-- 骨架屏 -->
<detailSkeleton v-if="state.skeletonLoading" />
<!-- 空置页 -->
<!-- 下架/售罄提醒 -->
<s-empty
v-else-if="
state.goodsInfo === null ||
!['groupon', 'groupon_ladder'].includes(state.goodsInfo.activity_type)
"
text="活动不存在或已结束"
icon="/static/soldout-empty.png"
showAction
actionText="返回上一页"
@clickAction="sheep.$router.back()"
v-else-if="state.goodsInfo === null || state.activity.status !== 0 || state.activity.endTime < new Date().getTime()"
text="活动不存在或已结束"
icon="/static/soldout-empty.png"
showAction
actionText="返回上一页"
@clickAction="sheep.$router.back()"
/>
<block v-else>
<view class="detail-swiper-selector">
@@ -35,7 +32,7 @@
<view>
<view class="price-box ss-flex ss-col-bottom ss-m-b-18">
<view class="price-text ss-m-r-16">
{{ goodsPrice }}
{{ fen2yuan(state.activity.price || state.goodsInfo.price) }}
</view>
<view class="tig ss-flex ss-col-center">
<view class="tig-icon ss-flex ss-col-center ss-row-center">
@@ -51,11 +48,11 @@
<view class="ss-flex ss-row-between">
<view
class="origin-price ss-flex ss-col-center"
v-if="state.goodsInfo.original_price"
v-if="state.goodsInfo.price"
>
单买价：
<view class="origin-price-text">
{{ state.goodsInfo.original_goods_price[0] || state.goodsInfo.original_price }}
{{ fen2yuan(state.goodsInfo.price) }}
</view>
</view>
</view>
@@ -74,38 +71,18 @@
<view class="countdown-title" v-else> 活动已结束 </view>
</view>
<view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.title }}</view>
<view class="subtitle-text ss-line-1">{{ state.goodsInfo.subtitle }}</view>
<view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.name }}</view>
<view class="subtitle-text ss-line-1">{{ state.goodsInfo.introduction }}</view>
</view>
<!-- 功能卡片 -->
<view class="detail-cell-card detail-card ss-flex-col">
<!-- 规格 -->
<detail-cell-sku
v-model="state.selectedSkuPrice.goods_sku_text"
:skus="state.goodsInfo.skus"
@tap="state.showSelectSku = true"
/>
<!-- 玩法 -->
<detail-cell
v-if="state.goodsInfo.activity.richtext_id > 0"
label="玩法"
:value="state.goodsInfo.activity.richtext_title"
@click="
sheep.$router.go('/pages/public/richtext', {
id: state.goodsInfo.activity.richtext_id,
title: state.goodsInfo.activity.richtext_title,
})
"
/>
<detail-cell-sku :sku="state.selectedSkuPrice" @tap="state.showSelectSku = true" />
</view>
<!-- 参团列表 -->
<groupon-card-list
v-if="state.goodsInfo.activity.rules.is_team_card === '1'"
v-model="state.goodsInfo"
@join="onJoinGroupon"
/>
<groupon-card-list v-model="state.activity" @join="onJoinGroupon" />
<!-- 规格与数量弹框 -->
<s-select-groupon-sku
@@ -114,7 +91,6 @@
:grouponAction="state.grouponAction"
:grouponNum="state.grouponNum"
@buy="onBuy"
@ladder="onLadder"
@change="onSkuChange"
@close="onSkuClose"
/>
@@ -123,43 +99,36 @@
<!-- 评价 -->
<detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" />
<!-- 详情 -->
<detail-content-card class="detail-content-selector" :content="state.goodsInfo.content" />
<detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
<!-- 商品tabbar -->
<!-- TODO: 已售罄、预热 判断 设计-->
<detail-tabbar v-model="state.goodsInfo">
<view class="buy-box ss-flex ss-col-center ss-p-r-20">
<button
v-if="state.goodsInfo.activity.rules.is_alone == 1"
class="ss-reset-button origin-price-btn ss-flex-col"
@tap="sheep.$router.go('/pages/goods/index', { id: state.goodsInfo.id })"
>
<view class="btn-price">{{
state.goodsInfo.original_goods_price[0] || state.goodsInfo.original_price
}}</view>
<view class="btn-price">{{ fen2yuan(state.goodsInfo.marketPrice) }}</view>
<view>原价购买</view>
</button>
<button v-else class="ss-reset-button origin-price-btn ss-flex-col">
<view class="btn-title">{{
state.grouponNum == 0 ? '阶梯团' : state.grouponNum + '人团'
}}</view>
</button>
<button
class="ss-reset-button btn-tox ss-flex-col"
@tap="onCreateGroupon"
:class="
state.goodsInfo.activity.status === 'ing' && state.goodsInfo.stock != 0
state.activity.status === 0 && state.goodsInfo.stock !== 0
? 'check-btn-box'
: 'disabled-btn-box'
"
:disabled="state.goodsInfo.stock === 0 || state.goodsInfo.activity.status != 'ing'"
:disabled="state.goodsInfo.stock === 0 || state.activity.status !== 0"
>
<view class="btn-price">{{ goodsPrice }}</view>
<view v-if="state.goodsInfo.activity.status === 'ing'">
<view class="btn-price">{{ fen2yuan(state.activity.price || state.goodsInfo.price) }}</view>
<view v-if="state.activity.startTime > new Date().getTime()">未开始</view>
<view v-else-if="state.activity.endTime <= new Date().getTime()">已结束</view>
<view v-else>
<view v-if="state.goodsInfo.stock === 0">已售罄</view>
<view v-else>立即开团</view>
</view>
<view v-else>{{ state.goodsInfo.activity.status_text }}</view>
</button>
</view>
</detail-tabbar>
@@ -169,19 +138,20 @@
</template>
<script setup>
import { reactive, computed, ref } from 'vue';
import { reactive, computed } from 'vue';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { isEmpty } from 'lodash';
import detailNavbar from './components/detail/detail-navbar.vue';
import detailCell from './components/detail/detail-cell.vue';
import detailCellSku from './components/detail/detail-cell-sku.vue';
import detailTabbar from './components/detail/detail-tabbar.vue';
import detailSkeleton from './components/detail/detail-skeleton.vue';
import detailCommentCard from './components/detail/detail-comment-card.vue';
import detailContentCard from './components/detail/detail-content-card.vue';
import grouponCardList from './components/groupon/groupon-card-list.vue';
import { useDurationTime, formatPrice, formatGoodsSwiper } from '@/sheep/hooks/useGoods';
import {useDurationTime, formatGoodsSwiper, fen2yuan} from '@/sheep/hooks/useGoods';
import CombinationApi from "@/sheep/api/promotion/combination";
import SpuApi from "@/sheep/api/product/spu";
const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-bg.png');
@@ -189,7 +159,6 @@
const disabledBtnBg = sheep.$url.css(
'/static/img/shop/goods/activity-btn-disabled.png',
);
const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png');
const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
onPageScroll(() => {});
@@ -200,32 +169,16 @@
goodsSwiper: [], // 商品轮播图
showSelectSku: false, // 显示规格弹框
selectedSkuPrice: {}, // 选中的规格价格
activity: {}, // 团购活动
grouponId: 0, // 团购ID
grouponType: '', // 团购类型
grouponNum: 0, // 团购人数
grouponAction: 'create', // 团购操作
});
// 商品主价格
const goodsPrice = computed(() => {
if (isEmpty(state.selectedSkuPrice)) {
return formatPrice(state.goodsInfo.price);
}
if(state.grouponNum === 0 && state.grouponType === 'groupon_ladder') {
return formatPrice(state.goodsInfo.price)
}
if (state.grouponType === 'groupon') {
return state.selectedSkuPrice.groupon_price;
}
if (state.grouponType === 'groupon_ladder') {
return state.selectedSkuPrice.ladder_price;
}
return '';
combinationHeadId: null, // 拼团团长编号
});
// 倒计时
const endTime = computed(() => {
return useDurationTime(state.goodsInfo.activity.end_time);
return useDurationTime(state.activity.endTime);
});
// 规格变更
@@ -233,15 +186,6 @@
state.selectedSkuPrice = e;
}
// 阶梯变更
function onLadder(e) {
state.showSelectSku = false;
state.grouponNum = e
setTimeout(() => {
state.showSelectSku = true;
}, 80);
}
function onSkuClose() {
state.showSelectSku = false;
}
@@ -253,51 +197,53 @@
state.showSelectSku = true;
}
// 点击参团
function onJoinGroupon(groupon) {
/**
* 去参团
* @param record 团长的团购记录
*/
function onJoinGroupon(record) {
state.grouponAction = 'join';
state.grouponId = groupon.id;
state.grouponNum = groupon.num;
state.grouponId = record.activityId;
state.combinationHeadId = record.id;
state.grouponNum = record.userSize;
state.showSelectSku = true;
}
// 立即购买
function onBuy(e) {
function onBuy(sku) {
sheep.$router.go('/pages/order/confirm', {
data: JSON.stringify({
order_type: 'goods',
buy_type: 'groupon',
activity_id: state.goodsInfo.activity.id,
groupon_id: state.grouponId,
groupon_num: state.grouponNum,
goods_list: [
combinationActivityId: state.activity.id,
combinationHeadId: state.combinationHeadId,
items: [
{
goods_id: e.goods_id,
goods_num: e.goods_num,
goods_sku_price_id: e.id,
skuId: sku.id,
count: sku.count,
},
],
}),
});
}
// 分享信息
const shareInfo = computed(() => {
if (isEmpty(state.goodsInfo?.activity)) return {};
if (isEmpty(state.activity)) return {};
return sheep.$platform.share.getShareInfo(
{
title: state.goodsInfo.title,
image: sheep.$url.cdn(state.goodsInfo.image),
title: state.activity.name,
image: sheep.$url.cdn(state.goodsInfo.picUrl),
params: {
page: '3',
query: state.goodsInfo.id + ',' + state.goodsInfo.activity.id,
query: state.activity.id,
},
},
{
type: 'goods', // 商品海报
title: state.goodsInfo.title, // 商品标题
image: sheep.$url.cdn(state.goodsInfo.image), // 商品主图
price: state.goodsInfo.price[0], // 商品价格
original_price: state.goodsInfo.original_price, // 商品原价
title: state.activity.name, // 商品标题
image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
price: fen2yuan(state.goodsInfo.price), // 商品价格
marketPrice: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
},
);
});
@@ -308,20 +254,22 @@
state.goodsInfo = null;
return;
}
state.goodsId = options.id;
state.grouponId = options.id;
// 加载活动信息
const { code, data: activity } = await CombinationApi.getCombinationActivity(state.grouponId);
state.activity = activity;
// 加载商品信息
const { error, data } = await sheep.$api.goods.detail(options.id, {
activity_id: options.activity_id,
const { data: spu } = await SpuApi.getSpuDetail(activity.spuId);
state.goodsId = spu.id;
activity.products.forEach(product => {
spu.price = Math.min(spu.price, product.combinationPrice); // 设置 SPU 的最低价格
});
// 关闭骨架屏
state.skeletonLoading = false;
if (error === 0) {
state.goodsInfo = data;
state.grouponType = state.goodsInfo.activity_type;
if (state.grouponType === 'groupon') {
state.grouponNum = state.goodsInfo.activity.rules.team_num;
}
state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.images);
if (code === 0) {
state.goodsInfo = spu;
state.grouponNum = activity.userSize;
state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.sliderPicUrls);
} else {
// 未找到商品
state.goodsInfo = null;
@@ -526,13 +474,6 @@
}
}
//秒杀卡片
.seckill-box {
background: v-bind(seckillBg)
no-repeat;
background-size: 100% 100%;
}
.groupon-box {
background: v-bind(grouponBg)
no-repeat;