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/activity/groupon/detail.vue
+64 -76
View File
@@ -4,7 +4,7 @@
<view v-if="state.data && !state.loading">
<view
class="recharge-box"
v-if="state.data.goods"
v-if="state.data.headRecord"
:style="[
{
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
@@ -14,29 +14,28 @@
>
<s-goods-item
class="goods-box"
:img="state.data.goods.image"
:title="state.data.goods.title"
:price="state.data.goods.price[0]"
:img="state.data.headRecord.picUrl"
:title="state.data.headRecord.spuName"
:price="state.data.headRecord.combinationPrice"
priceColor="#E1212B"
@tap="
sheep.$router.go('/pages/goods/groupon', {
id: state.data.goods.id,
activity_id: state.data.goods.activity.id,
id: state.data.headRecord.activityId
})
"
:style="[{ top: Number(statusBarHeight + 108) + 'rpx' }]"
>
<template #groupon>
<view class="ss-flex">
<view class="sales-title">{{ state.data.num }}人团</view>
<view class="num-title ss-m-l-20">已拼{{ state.data.goods.sales }}件</view>
<view class="sales-title">{{ state.data.headRecord.userSize }}人团</view>
<view class="num-title ss-m-l-20">已拼{{ state.data.headRecord.userCount }}件</view>
</view>
</template>
</s-goods-item>
</view>
<view class="countdown-box detail-card ss-p-t-44 ss-flex-col ss-col-center">
<view v-if="state.data.status === 'finish' || state.data.status === 'finish_fictitious'">
<view v-if="state.data.my">
<view v-if="state.activity.status === 1">
<view v-if="state.data.orderId">
<view class="countdown-title ss-flex">
<text class="cicon-check-round"></text>
恭喜您~拼团成功
@@ -49,24 +48,23 @@
</view>
</view>
</view>
<view v-if="state.data.status === 'invalid'">
<view v-if="state.activity.status === 2">
<view class="countdown-title ss-flex">
<text class="cicon-info"></text>
{{ state.data.my ? '拼团超时,已自动退款' : '该团已解散' }}
{{ state.data.orderId ? '拼团超时,已自动退款' : '该团已解散' }}
</view>
</view>
<view v-if="state.data.status === 'ing'">
<!-- TODO: 拼团进行中+活动结束-->
<view v-if="state.data.activity_status === 'ended'">
<view v-if="state.activity.status === 0">
<view v-if="state.data.headRecord.expireTime <= new Date().getTime()">
<view class="countdown-title ss-flex">
<text class="cicon-info"></text>
拼团已结束,请关注下次活动
</view>
</view>
<view class="countdown-title ss-flex" v-if="state.data.activity_status === 'ing'">
<view class="countdown-title ss-flex" v-else>
还差
<view class="num">{{ state.data.num - state.data.current_num }}人</view>
<view class="num">{{ state.data.headRecord.userSize - state.data.headRecord.userCount }}人</view>
拼团成功
<view class="ss-flex countdown-time">
<view class="countdown-h ss-flex ss-row-center">{{ endTime.h }}</view>
@@ -83,9 +81,15 @@
</view>
<view class="ss-m-t-60 ss-flex ss-flex-wrap ss-row-center">
<!-- 团长 -->
<view class="header-avatar ss-m-r-24 ss-m-b-20">
<image :src="sheep.$url.cdn(state.data.headRecord.avatar)" class="avatar-img"></image>
<view class="header-tag ss-flex ss-col-center ss-row-center">团长</view>
</view>
<!-- 团员 -->
<view
class="header-avatar ss-m-r-24 ss-m-b-20"
v-for="item in state.data.groupon_logs"
v-for="item in state.data.memberRecords"
:key="item.id"
>
<image :src="sheep.$url.cdn(item.avatar)" class="avatar-img"></image>
@@ -96,74 +100,53 @@
团长
</view>
</view>
<view class="default-avatar ss-m-r-24 ss-m-b-20" v-for="item in state.number" :key="item">
<!-- 还有几个坑位 -->
<view class="default-avatar ss-m-r-24 ss-m-b-20" v-for="item in state.remainNumber" :key="item">
<image
:src="sheep.$url.static('/static/img/shop/avatar/unknown.png')"
class="avatar-img"
></image>
</view>
</view>
<view
class="detail-cell-wrap ss-flex ss-col-center ss-row-between"
v-if="state.data.activity?.richtext_id > 0"
@tap="
sheep.$router.go('/pages/public/richtext', {
id: state.data.activity.richtext_id,
title: state.data.activity.richtext_title,
})
"
>
<view class="label-text">玩法</view>
<view class="ss-flex">
<view class="cell-content ss-line-1 ss-flex-1">
{{ state.data.activity?.richtext_title }}
</view>
<button class="ss-reset-button">
<text class="_icon-forward right-forwrad-icon"></text>
</button>
</view>
</view>
</view>
<view
v-if="
state.data.status == 'finish' ||
state.data.status == 'finish_fictitious' ||
state.data.status == 'invalid'
"
v-if="state.activity.status === 1 || state.activity.status === 2"
class="ss-m-t-40 ss-flex ss-row-center"
>
<button
class="ss-reset-button order-btn"
v-if="state.data.my"
@tap="onDetail(state.data.my.order_id)"
v-if="state.data.orderId"
@tap="onDetail(state.data.orderId)"
>
查看订单
</button>
<button class="ss-reset-button join-btn" v-else @tap="onCreateGroupon"> 我要开团 </button>
</view>
<view v-if="state.data.status === 'ing'" class="ss-m-t-40 ss-flex ss-row-center">
<view v-if="state.data.activity_status === 'ended'">
<!-- 处于进入中时，查看订单或参加或邀请好友或参加 -->
<view v-if="state.activity.status === 0" class="ss-m-t-40 ss-flex ss-row-center">
<view v-if="state.data.headRecord.expireTime <= new Date().getTime()">
<button
class="ss-reset-button join-btn"
v-if="state.data.my"
@tap="onDetail(state.data.my.order_id)"
v-if="state.data.orderId"
@tap="onDetail(state.data.orderId)"
>
查看订单
</button>
<!-- 待确认 -->
<button
class="ss-reset-button disabled-btn"
v-else
disabled
@tap="onDetail(state.data.my.order_id)"
@tap="onDetail(state.data.orderId)"
>
去参团
</button>
</view>
<view v-else class="ss-flex ss-row-center">
<view v-if="state.data.my">
<view v-if="state.data.orderId">
<button
class="ss-reset-button join-btn"
:disabled="state.data.activity_status === 'ing' && endTime.ms <= 0"
:disabled="endTime.ms <= 0"
@tap="onShare"
>
邀请好友来拼团
@@ -172,7 +155,7 @@
<view v-else>
<button
class="ss-reset-button join-btn"
:disabled="state.data.activity_status === 'ing' && endTime.ms <= 0"
:disabled="endTime.ms <= 0"
@tap="onJoinGroupon()"
>
立即参团
@@ -204,6 +187,7 @@
import { useDurationTime } from '@/sheep/hooks/useGoods';
import { showShareModal } from '@/sheep/hooks/useModal';
import { isEmpty } from 'lodash';
import CombinationApi from "@/sheep/api/promotion/combination";
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
@@ -214,15 +198,17 @@
showSelectSku: false,
grouponNum: 0,
number: 0,
activity: {},
combinationHeadId: null, // 拼团团长编号
});
const shareInfo = computed(() => {
if (isEmpty(state.data)) return {};
return sheep.$platform.share.getShareInfo(
{
title: state.data.goods.title,
image: sheep.$url.cdn(state.data.goods.image),
desc: state.data.goods.subtitle,
title: state.data.headRecord.spuName,
image: sheep.$url.cdn(state.data.headRecord.picUrl),
desc: state.data.goods?.subtitle,
params: {
page: '5',
query: state.data.id,
@@ -230,10 +216,10 @@
},
{
type: 'groupon', // 邀请拼团海报
title: state.data.goods.title, // 商品标题
image: sheep.$url.cdn(state.data.goods.image), // 商品主图
price: state.data.goods.price[0], // 商品价格
original_price: state.data.goods.original_price, // 商品原价
title: state.data.headRecord.spuName, // 商品标题
image: sheep.$url.cdn(state.data.headRecord.picUrl), // 商品主图
price: state.data.goods?.price, // 商品价格
original_price: state.data.goods?.original_price, // 商品原价
},
);
});
@@ -260,25 +246,23 @@
// 立即参团
function onJoinGroupon() {
state.grouponAction = 'join';
state.grouponId = state.data.id;
state.grouponId = state.data.activityId;
state.combinationHeadId = state.data.id;
state.grouponNum = state.data.num;
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.data.activity.id,
groupon_id: state.grouponId,
groupon_num: state.grouponNum,
goods_list: [
combinationActivityId: state.data.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,
},
],
}),
@@ -286,16 +270,20 @@
}
const endTime = computed(() => {
return useDurationTime(state.data.expire_time);
return useDurationTime(state.data.headRecord.expireTime);
});
// 获取拼团团队详情
async function getGrouponDetail(id) {
const { error, data } = await sheep.$api.activity.grouponDetail(id);
if (error === 0) {
const { code, data } = await CombinationApi.getCombinationRecordDetail(id);
if (code === 0) {
state.data = data;
let number = Number(state.data.num - state.data.current_num);
state.number = number > 0 ? number : 0;
const remainNumber = Number(state.data.headRecord.userSize - state.data.headRecord.userCount);
state.remainNumber = remainNumber > 0 ? remainNumber : 0;
// 获取活动信息
const { data: activity } = await CombinationApi.getCombinationActivity(data.headRecord.activityId);
state.activity = activity;
} else {
state.data = null;
}
pages/activity/groupon/list.vue
+93 -129
View File
@@ -5,23 +5,17 @@
:style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"
></view>
<view class="list-content">
<!-- 参团会员统计 -->
<view class="content-header ss-flex-col ss-col-center ss-row-center">
<view class="content-header-title ss-m-b-22 ss-flex ss-row-center">
<view>{{ state.activityInfo.title }}</view>
<!-- <view class="more">更多</view> -->
</view>
<view class="content-header-box ss-flex ss-row-center">
<view class="countdown-box ss-flex" v-if="endTime?.ms > 0 && state.activityInfo">
<view class="countdown-title ss-m-r-12">距结束</view>
<view class="ss-flex countdown-time">
<view class="ss-flex countdown-h">{{ endTime.h }}</view>
<view class="ss-m-x-4">:</view>
<view class="countdown-num ss-flex ss-row-center">{{ endTime.m }}</view>
<view class="ss-m-x-4">:</view>
<view class="countdown-num ss-flex ss-row-center">{{ endTime.s }}</view>
</view>
<view class="content-header-title ss-flex ss-row-center">
<view v-for="(item, index) in state.summaryData.avatars" :key="index" class="picture"
:style='index === 6 ? "position: relative" : "position: static"'>
<span class="avatar" :style='`background-image: url(${item})`'></span>
<span v-if="index === 6 && state.summaryData.avatars.length > 3" class="mengceng">
<i>···</i>
</span>
</view>
<view class="" v-if="endTime?.ms < 0 && state.activityInfo"> 活动已结束 </view>
<text class="pic_count">{{ state.summaryData.userCount || 0 }}人参与</text>
</view>
</view>
<scroll-view
@@ -37,12 +31,7 @@
size="lg"
:data="item"
:grouponTag="true"
@click="
sheep.$router.go('/pages/goods/groupon', {
id: item.id,
activity_id: state.activityId,
})
"
@click="sheep.$router.go('/pages/goods/groupon', { id: item.id })"
>
<template v-slot:cart>
<button class="ss-reset-button cart-btn">去拼团</button>
@@ -55,92 +44,67 @@
:content-text="{
contentdown: '上拉加载更多',
}"
@tap="loadmore"
@tap="loadMore"
/>
</scroll-view>
</view>
</s-layout>
</template>
<script setup>
import { reactive, computed } from 'vue';
import { reactive } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import _ from 'lodash';
import { useDurationTime } from '@/sheep/hooks/useGoods';
import CombinationApi from "@/sheep/api/promotion/combination";
const { screenHeight, safeAreaInsets, screenWidth, safeArea } = sheep.$platform.device;
const sys_navBar = sheep.$platform.navbar;
const { safeAreaInsets, safeArea } = sheep.$platform.device;
const sysNavBar = sheep.$platform.navbar;
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const pageHeight =
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sys_navBar - 350;
const pageHeight = (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sysNavBar - 350;
const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-header.png');
const state = reactive({
activityId: 0,
pagination: {
data: [],
current_page: 1,
pageNo: 1,
total: 1,
last_page: 1,
},
loadStatus: '',
activityInfo: {},
});
// 倒计时
const endTime = computed(() => {
if (state.activityInfo.end_time) {
return useDurationTime(state.activityInfo.end_time);
}
summaryData: {}
});
async function getList(activityId, page = 1, list_rows = 4) {
state.loadStatus = 'loading';
const res = await sheep.$api.goods.activityList({
list_rows,
activity_id: activityId,
page,
});
if (res.error === 0) {
if (page >= 2) {
let couponList = _.concat(state.pagination.data, res.data.data);
state.pagination = {
...res.data,
data: couponList,
};
} else {
state.pagination = res.data;
}
if (state.pagination.current_page < state.pagination.last_page) {
state.loadStatus = 'more';
} else {
state.loadStatus = 'noMore';
}
}
// 加载统计数据
const getSummary = async () => {
const { data } = await CombinationApi.getCombinationRecordSummary()
state.summaryData = data
}
async function getActivity(id) {}
// 加载活动列表
async function getList(pageNo = 1, pageSize = 10) {
state.loadStatus = 'loading';
const { data } = await CombinationApi.getCombinationActivityPage({
pageNo,
pageSize,
});
data.list.forEach(activity => {
state.pagination.data.push({...activity, price: activity.combinationPrice})
})
state.pagination.total = data.total;
state.pagination.pageNo = pageNo;
state.loadStatus = state.pagination.data.length < state.pagination.total ? 'more' : 'noMore';
}
// 加载更多
function loadmore() {
function loadMore() {
if (state.loadStatus !== 'noMore') {
getList(state.activityId, state.pagination.current_page + 1);
getList(state.pagination.pageNo + 1);
}
}
// 上拉加载更多
onReachBottom(() => {
loadmore();
});
onLoad(async (options) => {
if (!options.id) {
state.activityInfo = null;
return;
}
state.activityId = options.id;
getList(state.activityId);
const { error, data } = await sheep.$api.activity.activity(options.id);
if (error === 0) {
state.activityInfo = data;
} else {
state.activityInfo = null;
}
onReachBottom(() => loadMore());
// 页面初始化
onLoad( () => {
getSummary();
getList();
});
</script>
<style lang="scss" scoped>
@@ -160,7 +124,7 @@
.content-header {
width: 100%;
border-radius: 20rpx 20rpx 0 0;
height: 150rpx;
height: 100rpx;
background: linear-gradient(180deg, #fff4f7, #ffe4d1);
.content-header-title {
width: 100%;
@@ -178,55 +142,55 @@
color: #999999;
line-height: 30rpx;
}
}
.content-header-box {
width: 678rpx;
height: 64rpx;
background: rgba($color: #fff, $alpha: 0.66);
border-radius: 32px;
.num {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #f51c11;
line-height: 30rpx;
}
.title {
font-size: 24rpx;
font-weight: 400;
font-family: OPPOSANS;
color: #333;
line-height: 30rpx;
}
.countdown-title {
font-size: 28rpx;
font-weight: 500;
color: #333333;
line-height: 28rpx;
.picture {
display: inline-table;
}
.countdown-time {
font-size: 28rpx;
color: rgba(#ed3c30, 0.23);
.countdown-h {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
padding: 0 4rpx;
height: 40rpx;
background: rgba(#ed3c30, 0.23);
border-radius: 6rpx;
}
.countdown-num {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
width: 40rpx;
height: 40rpx;
background: rgba(#ed3c30, 0.23);
border-radius: 6rpx;
.avatar {
width: 38rpx;
height: 38rpx;
display: inline-table;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 50%;
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
margin-right: -10rpx;
box-shadow: 0 0 0 1px #fe832a;
}
.pic_count {
margin-left: 30rpx;
font-size: 22rpx;
font-weight: 500;
width: auto;
height: auto;
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
color: #FFFFFF;
border-radius: 19rpx;
padding: 4rpx 14rpx;
}
.mengceng {
width: 40rpx;
height: 40rpx;
line-height: 36rpx;
background: rgba(51, 51, 51, 0.6);
text-align: center;
border-radius: 50%;
opacity: 1;
position: absolute;
left: -2rpx;
color: #FFF;
top: 2rpx;
i{
font-style: normal;
font-size: 20rpx;
}
}
}
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;