团购下单
This commit is contained in:
810
pnpm-lock.yaml
generated
810
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
120
src/pages/common/groupbuy/components/coupon-item.vue
Normal file
120
src/pages/common/groupbuy/components/coupon-item.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<view class='coupon-content'>
|
||||
<image :src='assetsUrl("bg_coupon.png")' />
|
||||
<view class='left-content accent-text-color' :class='{"left-content-disabled": item.status==1}'>
|
||||
<text>{{ item.reduce }}</text>
|
||||
<text>满{{ item.threshold }}元可用</text>
|
||||
</view>
|
||||
|
||||
<view class='right-content accent-text-color' :class='{"right-content-disabled": item.status==1}'>
|
||||
<text>{{ item?.name }}</text>
|
||||
<text>有效期至{{ dayjs(item.startTime).format('YYYY-MM-DD') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
defineProps({
|
||||
item: Object
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.coupon-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
margin: 10rpx 30rpx 20rpx 30rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.left-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 50rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-size: 55rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
text:nth-of-type(1):after {
|
||||
content: '元';
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.left-content-disabled {
|
||||
@extend .left-content;
|
||||
color: #C2C2C2;
|
||||
}
|
||||
|
||||
.right-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
margin-left: 60rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-size: 26rpx;
|
||||
margin-top: 20rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
display: flex;
|
||||
width: 146rpx;
|
||||
height: 55rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 28rpx;
|
||||
border: #F32B2B solid 2rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #F32B2B;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
}
|
||||
|
||||
.btn-text-disabled {
|
||||
@extend .btn-text;
|
||||
color: #C2C2C2;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.right-content-disabled {
|
||||
@extend .right-content;
|
||||
color: #C2C2C2;
|
||||
|
||||
text:nth-of-type(2) {
|
||||
color: #C2C2C2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -16,16 +16,16 @@
|
||||
超级\n秒杀
|
||||
</view>
|
||||
<view class='price c-flex-column' style='flex: 1'>
|
||||
<text>{{ detailBean?.payPrice }}</text>
|
||||
<text>{{ detailBean?.payPrice || 0 }}</text>
|
||||
<text>￥{{ detailBean?.goodsPrice || 0 }}</text>
|
||||
</view>
|
||||
<view class='countdown-time c-flex-column'>
|
||||
<view class='c-flex-row'>{{ countdownTime?.days }}天
|
||||
<text class='time'>{{ countdownTime?.hours }}</text>
|
||||
<view class='c-flex-row'>{{ countdownTime?.days || 0 }}天
|
||||
<text class='time'>{{ countdownTime?.hours || '00' }}</text>
|
||||
:
|
||||
<text class='time'>{{ countdownTime?.minutes }}</text>
|
||||
<text class='time'>{{ countdownTime?.minutes || '00' }}</text>
|
||||
:
|
||||
<text class='time'>{{ countdownTime?.seconds }}</text>
|
||||
<text class='time'>{{ countdownTime?.seconds || '00' }}</text>
|
||||
</view>
|
||||
<text>距离活动结束仅剩</text>
|
||||
</view>
|
||||
@@ -34,7 +34,7 @@
|
||||
<view class='goods-info-view c-flex-column'>
|
||||
<view class='c-flex-row'>
|
||||
<text class='goods-price accent-text-color'>39.89</text>
|
||||
<text>销量{{ detailBean?.totalNum }}</text>
|
||||
<text>销量{{ detailBean?.totalNum || 0 }}</text>
|
||||
</view>
|
||||
|
||||
<view class='c-flex-row'>
|
||||
@@ -69,17 +69,45 @@
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class='goods-detail c-flex-column'>
|
||||
<text>商品详情</text>
|
||||
<!-- 商品详情图片 -->
|
||||
<view class='card-view image-container' v-if='detailBean?.content'>
|
||||
<text class='card-view-title'>商品详情</text>
|
||||
<image
|
||||
v-for='(item,index) in JSON.parse(detailBean?.content).filter((a: any) => a.type === 2).map((b: any) => b.images)'
|
||||
:src='item' mode='aspectFill' :key='index' />
|
||||
</view>
|
||||
|
||||
<view class='goods-detail record-view c-flex-column'>
|
||||
<text class='record-view-title'>跟团记录</text>
|
||||
<scroll-view>
|
||||
<view class='c-flex-column' v-for='(item,index) in recordList' :key='index'>
|
||||
<!-- 商品详情 -->
|
||||
<view class='card-view goods-container'>
|
||||
<view class='c-flex-row'>
|
||||
<image :src='detailBean?.goods?.images' />
|
||||
<view class='c-flex-column'>
|
||||
<text class='goods-name'>{{ detailBean?.goods?.name }}</text>
|
||||
<text style='color: #a6a6a6'>精选</text>
|
||||
<view class='tag-view c-flex-row'>
|
||||
<text>团长推荐</text>
|
||||
<text>今日必买</text>
|
||||
</view>
|
||||
<text style='color: #a6a6a6'>不参与会员折扣</text>
|
||||
<text style='color: #F32B2B'>¥{{ detailBean?.goods?.payPrice }}</text>
|
||||
<text class='bought_count'>已团{{detailBean?.sendNum}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品详情优惠券 -->
|
||||
<view class='card-view coupon-container'>
|
||||
<text class='card-view-title'>赠送优惠券</text>
|
||||
<view class='c-flex-column'>
|
||||
<coupon-item v-for='(item,index) in detailBean?.couponsList' :key='index' :item='item' />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品详情跟团记录 -->
|
||||
<view class='card-view record-container'>
|
||||
<text class='card-view-title'>跟团记录</text>
|
||||
<u-list :list='recordList' :border='false' @scrolltolower='loadMore'>
|
||||
<u-list-item v-for='(item,index) in recordList' :key='index'>
|
||||
<view class='item-view c-flex-row'>
|
||||
<image :src='item.memberImage' />
|
||||
<view class='c-flex-column' style='flex: 1'>
|
||||
@@ -88,28 +116,32 @@
|
||||
</view>
|
||||
<text>+{{ item.goodsNum }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
</u-list-item>
|
||||
<u-loadmore status='loading' />
|
||||
</u-list>
|
||||
</view>
|
||||
|
||||
<view class='bottom-view c-flex-row'>
|
||||
<view class='primary-button-view c-flex-row'>
|
||||
<view class='place-order-button' @click.stop='placeOrder'>跟团购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<sku-dialog ref='skuDialogRef' :bean='detailBean?.goods' @confirm='confirmGoodsSku' />
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
import dayjs from 'dayjs';
|
||||
import { goPath } from '@/utils';
|
||||
import SkuDialog from '@/components/sku-dialog.vue';
|
||||
import { getGroupBuyDetail, getGroupBuyRecordList } from '@/api/groupbuy';
|
||||
import dayjs from 'dayjs';
|
||||
import CouponItem from './components/coupon-item.vue';
|
||||
|
||||
import { getGroupBuyDetail, getGroupBuyRecordList, preOrder } from '@/api/groupbuy';
|
||||
import { getGoodsList } from '@/api/goods';
|
||||
import { GoodsBean } from '@/api/goods/types';
|
||||
import { useUserStore } from '@/store';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { userInfo } = storeToRefs(userStore);
|
||||
|
||||
const skuDialogRef = ref();
|
||||
const detailBean = ref();
|
||||
@@ -120,7 +152,6 @@ const bannerList = ref([]);
|
||||
const swiperIndex = ref(0);
|
||||
|
||||
let interval: number;
|
||||
|
||||
const countdownTime = ref<{
|
||||
days: number,
|
||||
hours: number,
|
||||
@@ -129,6 +160,7 @@ const countdownTime = ref<{
|
||||
}>();
|
||||
|
||||
const recordList = ref([]);
|
||||
const currentPageNum = ref(1);
|
||||
|
||||
onLoad(async (e: any) => {
|
||||
detailBean.value = await getGroupBuyDetail(e.id);
|
||||
@@ -158,21 +190,22 @@ const fetchRecommendList = async () => {
|
||||
recommendList.value = rows;
|
||||
};
|
||||
|
||||
const fetchBuyRecordList = async () => {
|
||||
const { list } = await getGroupBuyRecordList(detailBean.value.id, 1, 10);
|
||||
recordList.value = list;
|
||||
const fetchBuyRecordList = async (refresh: boolean = true) => {
|
||||
if(!refresh) {
|
||||
currentPageNum.value += 1;
|
||||
}
|
||||
const { list } = await getGroupBuyRecordList(detailBean.value.id, currentPageNum.value, 20);
|
||||
recordList.value = recordList.value.concat(list);
|
||||
};
|
||||
|
||||
const loadMore = () => {
|
||||
fetchBuyRecordList(false);
|
||||
};
|
||||
|
||||
const swiperChange = (e: any) => {
|
||||
swiperIndex.value = e.detail.current;
|
||||
};
|
||||
|
||||
const getRemainingDays = computed(() => {
|
||||
let now = new Date();
|
||||
let end = dayjs(detailBean.value?.endDate).toDate().getTime();
|
||||
return Math.floor((end - now.getTime()) / 1000 / 60 / 60 / 24);
|
||||
});
|
||||
|
||||
const countdown = () => {
|
||||
interval = setInterval(() => {
|
||||
if(detailBean.value?.endDate) {
|
||||
@@ -201,8 +234,19 @@ const confirmGoodsSku = (e: any) => {
|
||||
skuBean.value = e;
|
||||
};
|
||||
|
||||
const placeOrder = () => {
|
||||
const placeOrder = async () => {
|
||||
goPath('/pages/common/groupbuy/order');
|
||||
|
||||
const params = {
|
||||
'colorId': '1725029269178814466',
|
||||
'sizeId': '0',
|
||||
'goodsId': detailBean.value.goods.goodsId,
|
||||
'groupId': detailBean.value.id,
|
||||
'memberId': userInfo.value.id,
|
||||
'shareId': '123456'
|
||||
};
|
||||
|
||||
const result = await preOrder(params);
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -252,7 +296,7 @@ const placeOrder = () => {
|
||||
position: relative;
|
||||
padding: 15rpx 30rpx;
|
||||
background: #F32B2B;
|
||||
background-image: url('../../../static/images/bg_groupbuy_countdown.png');
|
||||
//background-image: url('../../../static/images/bg_groupbuy_countdown.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
.super-second-kill {
|
||||
@@ -482,74 +526,12 @@ const placeOrder = () => {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.small-button-view {
|
||||
.place-order-button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
margin-right: 35rpx;
|
||||
|
||||
.small-button-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.shoppingcart-count {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: -15rpx;
|
||||
right: -20rpx;
|
||||
min-width: 35rpx;
|
||||
min-height: 30rpx;
|
||||
background: #F32B2B;
|
||||
color: #FFFFFF;
|
||||
padding: 2rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.primary-button-view {
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
font-size: 30rpx;
|
||||
|
||||
.add-shoppingcart-button {
|
||||
display: flex;
|
||||
width: 224rpx;
|
||||
height: 80rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #FFE2E2;
|
||||
color: #F32B2B;
|
||||
border-radius: 40rpx 0 0 40rpx;
|
||||
}
|
||||
|
||||
.place-order-button {
|
||||
display: flex;
|
||||
//width: 198rpx;
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -558,38 +540,76 @@ const placeOrder = () => {
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-detail {
|
||||
.card-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #FFFFFF;
|
||||
margin-top: 20rpx;
|
||||
|
||||
text {
|
||||
.card-view-title {
|
||||
margin: 20rpx 30rpx;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.image-container {
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.record-view {
|
||||
.record-view-title {
|
||||
margin: 20rpx 30rpx;
|
||||
font-weight: bold;
|
||||
.goods-container {
|
||||
padding: 30rpx;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-right: 15rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.c-flex-column {
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
text {
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.tag-view {
|
||||
text {
|
||||
margin: 0;
|
||||
background: #fff0ee;
|
||||
margin-right: 10rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
color: #fc6e51;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bought_count {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
color: #fc6e51;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.record-container {
|
||||
|
||||
.item-view {
|
||||
margin: 10rpx 20rpx;
|
||||
margin: 10rpx 30rpx;
|
||||
|
||||
image {
|
||||
width: 80rpx;
|
||||
|
||||
@@ -1,11 +1,108 @@
|
||||
<template>
|
||||
<view class='content'>
|
||||
|
||||
<view class='card-view'>
|
||||
<image class='goods-image' :src='assetsUrl("test_bg.png")' />
|
||||
<view class='c-flex-column' style='flex: 1'>
|
||||
<text class='goods-name'>商品名称</text>
|
||||
<text class='goods-sku'>颜色、尺码</text>
|
||||
</view>
|
||||
|
||||
<view class='c-flex-column'>
|
||||
<text class='goods-num'>x1</text>
|
||||
<text class='goods-price'>¥100</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='card-view'>
|
||||
<text style='flex: 1'>实付</text>
|
||||
<text style='color: #F32B2B'>¥100</text>
|
||||
</view>
|
||||
|
||||
<view class='bottom-view c-flex-row'>
|
||||
<view class='confirm-button' @click.stop='payment'>支付</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
|
||||
const payment = () => {
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
.content {
|
||||
.card-view:nth-of-type(1) {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 10rpx 30rpx;
|
||||
background: #FFFFFF;
|
||||
font-size: 35rpx;
|
||||
padding: 30rpx;
|
||||
|
||||
.goods-image {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
margin-right: 15rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.goods-sku {
|
||||
font-size: 30rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.c-flex-column {
|
||||
justify-content: space-between;
|
||||
|
||||
.goods-num {
|
||||
display: flex;
|
||||
font-size: 30rpx;
|
||||
justify-content: flex-end;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
@extend .goods-num;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-view {
|
||||
background: #FFFFFF;
|
||||
padding: 20rpx 30rpx 78rpx 33rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.confirm-button {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
font-size: 30rpx;
|
||||
height: 80rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #F32B2B;
|
||||
color: #FFFFFF;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user