group buy 8.8

This commit is contained in:
2020-08-08 12:07:50 +08:00
parent 1ee0dd4b25
commit 02702bc447
16 changed files with 110 additions and 93 deletions

View File

@@ -105,6 +105,7 @@ export default {
flex-shrink: 0;
}
.title-wrap {
flex: 1;
.item-top {
font-size: 30rpx;
color: rgba(51,51,51,1);

View File

@@ -1,5 +1,5 @@
<template>
<view class="order-item">
<view class="order-item" v-if="order.extend_store">
<view class="order-title">
<view class="store-info">
<image :src="order.extend_store.store_avatar"></image>
@@ -24,13 +24,14 @@
</view>
</view>
</view>
<view class="order-btn" v-if="[1, 2, 3, 4, 8].indexOf(order.view_type) >= 0">
<view class="order-btn" v-if="[1, 2, 3, 4, 8, 9].indexOf(order.view_type) >= 0">
<view class="cancel" v-if="(order.view_type == 3 || order.view_type == 2) && order.is_refund == 1" @click="toOtherPage('RefundOrder')">申请退款</view>
<view class="cancel" v-if="order.view_type == 3" @click="toOtherPage('Logistics')">查看物流</view>
<view class="logistics" v-if="order.view_type == 3" @click="confirmReceive">确认收货</view>
<view class="comment" v-if="order.view_type == 4" @click="toOtherPage('Comment')">立即评价</view>
<view class="cancel" v-if="order.view_type == 1" @click="cancelOrder">取消支付</view>
<view class="payment" v-if="order.view_type == 1" @click="payNow(order.pay_sn, order.order_amount,order.order_id)">立即支付</view>
<view class="cancel" v-if="order.view_type == 9" @click="cancelOrder">取消订单</view>
<view class="payment" v-if="order.view_type == 1 || order.view_type == 9" @click="payNow(order.pay_sn, order.order_amount,order.order_id)">立即支付</view>
<view class="service" v-if="order.view_type == 8">联系官方客服</view>
<view class="submit" v-if="order.view_type == 8">提交官方审核</view>
</view>

View File

@@ -8,13 +8,16 @@
</view>
</view>
<view class="label">
<u-tabs-swiper ref="group" :list="classifyList" name="gc_name" :is-scroll="true" active-color="#FF780F" :current="current" font-size="24" :show-bar="false" @change="tabsChange" height="60"></u-tabs-swiper>
<!-- <u-tabs-swiper ref="group" :list="classifyList" name="gc_name" :is-scroll="true" active-color="#FF780F" :current="current" font-size="24" :show-bar="false" @change="tabsChange" height="60"></u-tabs-swiper> -->
<u-tabs :list="classifyList" name="gc_name" :is-scroll="true" :current="current" @change="tabsChange" active-color="#FF780F" :show-bar="false" height="60" font-size="24" inactive-color="#333333"></u-tabs>
</view>
<swiper :current="swiperCurrent" @animationfinish="animationfinish" style="height: 340rpx;">
<swiper-item class="swiper-item list" v-for="(_, i) in classifyList" :key="i">
<!-- 最多显示3个 -->
<sitem :info="info" v-for="(info, index) in groupList.slice(0, 3)" :key="index"></sitem>
<u-empty text="暂无拼团商品" mode="list" color="#000" v-if="!groupList.length" style="margin: 0 auto;"></u-empty>
<view v-if="groupList[i]">
<sitem :info="info" v-for="(info, index) in groupList[i].slice(0, 3)" :key="index"></sitem>
</view>
<u-empty text="暂无拼团商品" mode="list" color="#000" v-if="!groupList[i] || !groupList[i].length" style="margin: 0 auto;"></u-empty>
</swiper-item>
</swiper>
</view>
@@ -58,7 +61,9 @@ export default {
page: 0,
gc_id: id,
}).then(res => {
this.groupList = res.data;
this.groupList[this.current] = res.data;
// console.log(this.groupList);
this.$forceUpdate();
})
},
tabsChange(index) {

View File

@@ -2,14 +2,15 @@
<view class="list">
<view class="top">商品推荐</view>
<view>
<u-tabs-swiper ref="uTabs" :list="classifyList" name="gc_name" :is-scroll="true" active-color="#FF780F" :current="current" font-size="26" :show-bar="false" @change="tabsChange" height="60"></u-tabs-swiper>
<!-- <u-tabs-swiper ref="uTabs" :list="classifyList" name="gc_name" :is-scroll="true" active-color="#FF780F" :current="current" font-size="26" :show-bar="false" @change="tabsChange" height="60"></u-tabs-swiper> -->
<u-tabs :list="classifyList" name="gc_name" :is-scroll="true" :current="current" @change="tabsChange" active-color="#FF780F" :show-bar="false" height="60" font-size="24" inactive-color="#333333"></u-tabs>
</view>
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="{height: swiperHeight}">
<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish" :style="{height: swiperHeight}">
<swiper-item class="swiper-item" v-for="(_, index) in classifyList" :key="index">
<view class="goods-item" v-if="goodsList.length">
<item v-for="item in goodsList" :key="item.goods_id" :info="item"></item>
<view class="goods-item">
<item v-for="item in goodsList[index]" :key="item.goods_id" :info="item"></item>
</view>
<u-empty text="暂无商品" mode="list" color="#000" margin-top="20" v-else></u-empty>
<u-empty text="暂无商品" mode="list" color="#000" margin-top="20" v-if="!goodsList[index] || !goodsList[index].length"></u-empty>
</swiper-item>
</swiper>
<!-- 加载更多 -->
@@ -39,7 +40,7 @@ export default {
watch: {
current(index) {
this.page = 1;
this.goodsList = [];
// this.goodsList = [];
const id = this.classifyList[index].gc_id;
this.getGoodsRecommend({gc_id: id});
}
@@ -86,34 +87,30 @@ export default {
// this.swiperCurrent = this.current;
if (res.errCode == 0) {
this.timer = true;
if(reload) this.goodsList = res.data.goodsList;
else this.goodsList.push(...res.data.goodsList);
if(reload) this.goodsList[this.current] = res.data.goodsList;
else this.goodsList[this.current].push(...res.data.goodsList);
// console.log(this.goodsList);
this.setSwiperHeight();
}
this.$forceUpdate();
return res.data.goodsList.length;
},
setSwiperHeight() {
// height: 230px, margin-bottom: 13
const height = Math.ceil(this.goodsList.length / 2) * (500 + 26);
// height: 480rpx, margin-bottom: 26rpx
const height = Math.ceil(this.goodsList[this.current].length / 2) * (480 + 26);
this.swiperHeight = height == 0 ? '230rpx' : height + 'rpx';
// this.swiperHeight = Math.ceil(this.goodsList.length / 2) * (270 + 13) + 'px';
// console.log(this.swiperHeight);
},
// tabs通知swiper切换
tabsChange(index) {
this.current = index;
this.swiperCurrent = this.current;
// this.getGoodsRecommend({ gc_id: this.classifyList[this.current].gc_id });
},
// swiper-item左右移动通知tabs的滑块跟随移动
transition(e) {
let dx = e.detail.dx;
this.$refs.uTabs.setDx(dx);
},
// 由于swiper的内部机制问题快速切换swiper不会触发dx的连续变化需要在结束时重置状态
// swiper滑动结束分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current;
this.$refs.uTabs.setFinishCurrent(current);
this.current = current;
this.swiperCurrent = current;
// this.getGoodsRecommend({ gc_id: this.classifyList[this.current].gc_id });
@@ -136,8 +133,7 @@ export default {
}
.swiper-box {
height: 100%;
padding: 20rpx 0;
margin-bottom: 10rpx;
padding-top: 20rpx;
.swiper-item {
// height: 100%;
.goods-item {

View File

@@ -65,6 +65,7 @@ export default {
margin-bottom: 16rpx;
font-size: 26rpx;
font-weight: 600;
height: 60rpx;
line-height: 30rpx;
color: #333;
}

View File

@@ -7,7 +7,7 @@
<u-icon name="arrow-right" color="#999" size="22"></u-icon>
</view>
</view>
<view class="connect">
<view class="connect" @click="toOthersPage">
<view class="time" v-if="type == 'spike'">
<image src="/static/image/common/15.png"></image>
<text>{{ info.groupbuy_starttime_histime }}</text>
@@ -42,8 +42,8 @@ export default {
this.$u.route({
url: 'pageB/sdetails/index',
params: {
id: this.recommendData.groupbuy_id,
type: 3,
id: this.recommendData.goods_id,
// type: 3,
}
})
}

View File

@@ -61,8 +61,8 @@ export default {
this.$u.route({
url: 'pageB/sdetails/index',
params: {
id: this.item.groupbuy_id,
type: 3,
id: this.item.goods_id,
// type: 3,
}
})
},
@@ -85,8 +85,8 @@ export default {
this.$u.route({
url: 'pageB/sdetails/index',
params: {
id: this.item.pintuan_id,
type: 2,
id: this.item.goods_id,
// type: 2,
}
})
}

View File

@@ -4,15 +4,18 @@
<view class="title">全部优惠券</view>
<view class="view-more" @click="toCouponPage">查看更多></view>
</view>
<u-tabs-swiper ref="coupon" :list="couponGroupList" name="gc_name" :is-scroll="true" active-color="#FF780F" :current="couponCurrent" font-size="24" :show-bar="false" @change="couponTabsChange" height="60" ></u-tabs-swiper>
<!-- <u-tabs-swiper ref="coupon" :list="couponGroupList" name="gc_name" :is-scroll="true" active-color="#FF780F" :current="couponCurrent" font-size="24" :show-bar="false" @change="couponTabsChange" height="60" ></u-tabs-swiper> -->
<u-tabs :list="couponGroupList" name="gc_name" :is-scroll="true" :current="couponCurrent" @change="couponTabsChange" active-color="#FF780F" :show-bar="false" height="60" font-size="24" inactive-color="#333333"></u-tabs>
<!-- :style="{ height: swiperHeight }" -->
<swiper class="box" :current="swiperCouponCurrent" @animationfinish="couponAnimationFinish" :style="{height: swiperHeight}">
<swiper-item class="swiper-coupon-item" v-for="(_, i) in couponGroupList" :key="i">
<!-- 最多显示四个 -->
<view v-for="(coupon, index) in couponList.slice(0, 4)" :key="index" class="coupon-item">
<Coupon :couponInfo="coupon" :status='0' :type="0"></Coupon>
<view v-if="couponList[i]">
<view v-for="(coupon, index) in couponList[i].slice(0, 4)" :key="index" class="coupon-item">
<Coupon :couponInfo="coupon" :status='0' :type="0"></Coupon>
</view>
</view>
<u-empty text="暂无优惠券" mode="coupon" color="#000" v-if="!couponList.length"></u-empty>
<u-empty text="暂无优惠券" mode="coupon" color="#000" v-if="!couponList[i] || !couponList[i].length"></u-empty>
</swiper-item>
</swiper>
</view>
@@ -56,16 +59,18 @@ export default {
gc_id: gc_id,
}).then(res => {
if(res.errCode == 0) {
this.couponList = res.data;
this.couponList[this.couponCurrent] = res.data;
} else {
this.couponList = [];
this.couponList[this.couponCurrent] = [];
}
// 设置 swiper 高度
this.setViewHeight();
this.$forceUpdate();
})
},
couponTabsChange(index) {
this.couponCurrent = index;
this.swiperCouponCurrent = this.couponCurrent;
},
couponAnimationFinish(e) {
const current = e.detail.current;
@@ -75,8 +80,8 @@ export default {
setViewHeight() {
// 一个优惠券的高度 97px, 下距离 10px
let num = 0;
num = this.couponList.length
? this.couponList.length > 4 ? 4 : this.couponList.length
num = this.couponList[this.couponCurrent].length
? this.couponList[this.couponCurrent].length > 4 ? 4 : this.couponList[this.couponCurrent].length
: 1
this.swiperHeight = (200 + 20) * num + 'rpx';
},