Merge pull request 'rewrite tab swiper 8.7' (#129) from zhy into master

Reviewed-on: http://git.luyuan.tk/luyuan/deming/pulls/129
This commit is contained in:
hansu 2020-08-07 17:36:56 +08:00
commit 83e57ceea6
8 changed files with 153 additions and 92 deletions

View File

@ -9,7 +9,7 @@
@click="removeFavorite"
@open="open"
>
<view class="item u-border-bottom">
<view class="item u-border-bottom" @click="viewGoodsDetails(item)">
<image :src="item.goods_image"></image>
<!-- 此层wrap在此为必写的否则可能会出现标题定位错误 -->
<view class="title-wrap">
@ -45,6 +45,18 @@ export default {
this.getGoodsFavoritesList();
},
methods: {
viewGoodsDetails(item) {
const list = this.list.filter(item => {
return item.show;
})
if(list.length) return false;
this.$u.route({
url: 'pageB/sdetails/index',
params: {
id: item.fav_id,
}
})
},
getGoodsFavoritesList() {
this.$u.api.getFavoritesList().then(res => {
if(res.errCode == 0) {
@ -75,6 +87,7 @@ export default {
this.list.map((val, idx) => {
if(index != idx) this.list[idx].show = false;
})
this.$forceUpdate();
}
},
};

View File

@ -10,7 +10,7 @@
<view class="price"><span>{{ couponInfo.vouchertemplate_price }}</span></view>
<view class="condition">{{ couponInfo.vouchertemplate_limit }}使用</view>
</view>
<view class="info-store u-line-1">仅限{{ couponInfo.vouchertemplate_storename }}商品使用</view>
<view class="info-store u-line-1">仅限{{ couponInfo.type == 2 ? couponInfo.vouchertemplate_storename : '指定商品' }}使用</view>
<view class="info-integral">兑换积分{{ couponInfo.vouchertemplate_points }}积分</view>
<view class="info-date">有效期{{ couponInfo.vouchertemplate_startdate }}-{{ couponInfo.vouchertemplate_enddate }}</view>
</view>

View File

@ -60,8 +60,9 @@ export default {
this.$u.route({
url: 'pageB/sdetails/index',
params: {
id: this.recommendData.pintuan_id,
type: 2,
// id: this.recommendData.pintuan_id,
id: this.recommendData.groupbuy_id,
// type: 2,
}
})
}

View File

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

View File

@ -133,7 +133,7 @@
<guige @sel="self" ref="guige" v-for="(item,index) in goodsInfo.spec_value" :key="index" :title="goodsInfo.spec_name[index]" :item="item"></guige>
<view class="num">
<text>购买数量</text>
<u-number-box v-model="goodsNumber" @change="valChange"></u-number-box>
<u-number-box v-model="goodsNumber"></u-number-box>
</view>
<view style="height:100rpx"></view>
</view>
@ -230,7 +230,6 @@ export default {
// this.type = Number(option.type);
// this.type = 1;
this.id = option.id;
this.setTitle();
//
this.ordinaryDetails(this.id);
},
@ -299,9 +298,9 @@ export default {
},
getGoodsDetails(id) {
switch (this.type) {
// case 1:
// this.ordinaryDetails(id);
// break;
case 1:
this.ordinaryDetails(id);
break;
case 2:
this.pinTuanDetails(id);
break;
@ -322,7 +321,16 @@ export default {
this.setSwiperList(res.data.goods_image);
this.glist = res.data.spec_list;
this.type = res.data.view_type;
this.getGoodsDetails(this.type);
this.setTitle();
if(this.type == 1) {
this.id = res.data.goods.goods_id;
} else if(this.type == 2) {
this.id = res.data.goods.pintuan_id;
this.getGoodsDetails(this.id);
} else if(this.type == 3) {
this.id = res.data.goods.groupbuy_id;
this.getGoodsDetails(this.id);
}
}
})
},
@ -338,7 +346,7 @@ export default {
this.glist = res.data.data.spec_list;
this.user_suc = res.data.data.user_suc;
this.groupUser =res.data.data.user;
console.log(this.groupUser);
// console.log(this.groupUser);
}
})
},
@ -348,6 +356,7 @@ export default {
groupbuy_id: id
}).then(res => {
if(res.errCode == 0) {
this.id = res.data.groupbuy_id;
this.groupbuyInfo = res.data.groupbuyInfo;
this.evaluate = res.data.goodsInfo.goods_evaluate_info;
this.goodsInfo = res.data.goodsInfo.goods;
@ -361,7 +370,7 @@ export default {
this.$u.route({
url: '/pageB/triedDress/index',
params: {
id: this.id,
id: this.goodsInfo.goods_id,
}
})
},
@ -412,9 +421,6 @@ export default {
this.showInvolvementUser = true;
// console.log(this.involvemenGroupInfo);
},
valChange(e) {
// console.log(this.value)
},
self(){
// console.log(this.$refs.guige)
let index = 0;
@ -490,7 +496,7 @@ export default {
}
},
addFavoriteGoods() {
this.$u.api.addFavoriteGoods({ fid: this.id }).then(res => {
this.$u.api.addFavoriteGoods({ fid: this.goodsInfo.goods_id }).then(res => {
if(res.errCode == 0) {
this.getGoodsDetails(this.id);
} else {
@ -499,7 +505,7 @@ export default {
})
},
removeFavorite() {
this.$u.api.removeFavorite({ fid: this.id, type: 'goods' }).then(res => {
this.$u.api.removeFavorite({ fid: this.goodsInfo.goods_id, type: 'goods' }).then(res => {
if(res.errCode == 0) {
this.getGoodsDetails(this.id);
} else {

View File

@ -14,8 +14,8 @@
<view v-for="(goods, g_index) in store.goods" :key="g_index" class="goods-item">
<u-checkbox v-model="goods.checked" shape="circle" active-color="#FF780F" icon-size="35" :name="g_index"></u-checkbox>
<image :src="goods.goods_image" @click="viewGoodsDetails(goods.goods_id)"></image>
<view class="info" @click="viewGoodsDetails(goods.goods_id)">
<view class="name u-line-2">{{ goods.goods_name }}</view>
<view class="info">
<view class="name u-line-2" @click="viewGoodsDetails(goods.goods_id)">{{ goods.goods_name }}</view>
<view class="cart-info">
<view class="price">{{ goods.goods_price }}</view>
<u-number-box :input-width="38" :input-height="39" :size="22" bg-color="#FFFFFF" :disabled-input=true color="#FF780F" :index="goods.cart_id" @minus="reduce" @plus="plus" v-model="goods.goods_num"></u-number-box>
@ -238,7 +238,7 @@ export default {
// #ifdef APP-PLUS
let currentWebview = page.$getAppWebview();
let titleObj = currentWebview.getStyle().titleNView;
console.log(JSON.stringify(titleObj.buttons[0]));
// console.log(JSON.stringify(titleObj.buttons[0]));
if (!titleObj.buttons) {
return;
}

View File

@ -1,9 +1,11 @@
<template>
<view class="coupon-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="88" ></u-tabs-swiper>
<swiper :current="swiperCouponCurrent" @animationfinish="couponAnimationFinish" :style="{ height: swiperHeight }">
<scroll-view scroll-x="true" class="classify-coupon">
<view v-for="(classify, index) in couponGroupList" :key="index" class="classify-item" :class="{ 'active': couponCurrent == index }" @click="couponTabsChange(index)">{{ classify.gc_name }}</view>
</scroll-view>
<!-- <swiper :current="swiperCouponCurrent" @animationfinish="couponAnimationFinish" :style="{ height: swiperHeight }">
<swiper-item class="swiper-coupon-item" v-for="(_, i) in couponGroupList" :key="i">
<scroll-view scroll-y style="height: 100%;" @scrolltolower="onreachBottom">
<scroll-view scroll-y style="height: 100%;" @scrolltolower="onreachBottom" class="coupon-scroll">
<view v-for="(coupon, index) in couponList" :key="index" class="coupon-item">
<Coupon :couponInfo="coupon" :status='0' :type="0" @exchange="exchangeCoupon($event)"></Coupon>
</view>
@ -11,7 +13,14 @@
<u-empty text="暂无优惠券" mode="coupon" color="#000" v-if="!couponList.length"></u-empty>
</scroll-view>
</swiper-item>
</swiper>
</swiper> -->
<scroll-view scroll-y style="height: 100%;" @scrolltolower="onreachBottom" class="coupon-scroll" :style="{ height: swiperHeight }">
<view v-for="(coupon, index) in couponList" :key="index" class="coupon-item">
<Coupon :couponInfo="coupon" :status='0' :type="0" @exchange="exchangeCoupon($event)"></Coupon>
</view>
<u-loadmore :status="loadStatus" bgColor="#FFF" margin-top="20" margin-bottom="20" v-if="couponList.length>=pageSize" @loadmore="onreachBottom"></u-loadmore>
<u-empty text="暂无优惠券" mode="coupon" color="#000" v-if="!couponList.length"></u-empty>
</scroll-view>
</view>
</template>
<script>
@ -19,7 +28,7 @@ import Coupon from "@/components/mine/coupon/index";
export default {
data() {
return {
pageSize: 12,
pageSize: 5, //
swiperHeight: '',
couponCurrent: 0,
swiperCouponCurrent: 0,
@ -39,9 +48,10 @@ export default {
},
watch: {
couponCurrent(index) {
this.couponList = [];
const id = this.couponGroupList[index].gc_id;
this.getCouponList({ gc_id: id, load: 'reload' });
}
},
},
methods: {
onreachBottom() {
@ -89,6 +99,7 @@ export default {
},
couponTabsChange(index) {
this.couponCurrent = index;
this.swiperCouponCurrent = this.couponCurrent;
},
couponAnimationFinish(e) {
const current = e.detail.current;
@ -104,15 +115,34 @@ export default {
</script>
<style lang="scss" scoped>
.coupon-swiper {
.swiper-coupon-item {
box-sizing: border-box;
.classify-coupon {
white-space: nowrap;
width: 100%;
height: 88rpx;
background-color: #ffffff;
padding: 30rpx {
top: 0;
};
.coupon-item {
margin-bottom: 20rpx;
margin-bottom: 2rpx;
.classify-item {
display: inline-block;
line-height: 88rpx;
text-align: center;
font-size: 24rpx;
color: #333;
padding: 0 30rpx;
}
.active {
color: #FF780F;
font-weight: 700;
}
}
// .swiper-coupon-item {
// box-sizing: border-box;
// background-color: #ffffff;
// padding: 30rpx {
// top: 0;
// };
// .coupon-item {
// margin-bottom: 20rpx;
// }
// .coupon-item {
// padding: 30rpx;
// background-color: #ffffff;
@ -162,6 +192,15 @@ export default {
// text-align: center;
// }
// }
// }
.coupon-scroll {
background-color: #ffffff;
padding-top: 30rpx;
.coupon-item {
padding: 30rpx {
top: 0;
};
}
}
}
</style>

View File

@ -5,7 +5,7 @@
</view>
<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{ height: swiperHeight }">
<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
<scroll-view scroll-y style="height: 100%;" @scrolltolower="reachBottom">
<scroll-view scroll-y style="height: 100%;" @scrolltolower="reachBottom" class="order-scroll">
<view>
<view class="item-container" v-for="order in orderList" :key="order.order_id">
<OrderItem :order="order" @refreshOrderList="refreshOrderList" v-if="current != 4"></OrderItem>
@ -13,7 +13,7 @@
</view>
</view>
<u-empty text="暂无订单" mode="order" color="#000000" v-if="!orderList.length"></u-empty>
<u-loadmore :status="loadStatus[index]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
<u-loadmore :status="loadStatus[index]" bgColor="#ECECEC" margin-bottom="20" v-if="current != 4 && orderList.length>3" class="order-loadmore"></u-loadmore>
</scroll-view>
</swiper-item>
</swiper>
@ -162,8 +162,7 @@ export default {
return res.data.list.length;
},
reachBottom() {
// 15
if(this.orderList.length < 15) return false;
if(this.current == 4) return;
if(!this.timer) return false;
this.timer = false;
this.loadStatus.splice(this.current, 1, "loading");
@ -171,8 +170,8 @@ export default {
let promise;
// if(this.current == 6) promise = this.getAfterSaleList();
// else
if(this.current == 4) promise = this.goodsTryOrderList();
else promise = this.getOrderList();
// if(this.current == 4) promise = this.goodsTryOrderList();
promise = this.getOrderList();
promise.then(length => {
this.loadStatus.splice(this.current, 1, "nomore");
if(length == 0) this.page--;
@ -204,9 +203,11 @@ export default {
display: flex;
flex-direction: column;
.swiper-item {
.order-scroll {
.item-container {
padding: 20rpx 30rpx;
}
}
}
}
</style>