rewrite tab swiper 8.7
This commit is contained in:
parent
f4ba942870
commit
9d3f8da629
@ -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();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -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,
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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,64 +115,92 @@ 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;
|
||||
// display: flex;
|
||||
// align-items: flex-end;
|
||||
// // margin-bottom: 2rpx;
|
||||
// > img {
|
||||
// width: 180rpx;
|
||||
// height: 160rpx;
|
||||
// border-radius: 10rpx;
|
||||
// margin-right: 30rpx;
|
||||
// }
|
||||
// .coupon-main {
|
||||
// .coupon-title {
|
||||
// font-size: 30rpx;
|
||||
// color: rgba(51,51,51,1);
|
||||
// }
|
||||
// .coupon-date {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// margin: 29rpx 0 20rpx;
|
||||
// > img {
|
||||
// width: 24rpx;
|
||||
// height: 24rpx;
|
||||
// margin-right: 15rpx;
|
||||
// }
|
||||
// > view {
|
||||
// font-size: 24rpx;
|
||||
// color: rgba(153,153,153,1);
|
||||
// }
|
||||
// }
|
||||
// .coupon-integral {
|
||||
// font-size: 30rpx;
|
||||
// font-weight: 500;
|
||||
// color: rgba(255,120,15,1);
|
||||
// }
|
||||
// }
|
||||
// .coupon-btn {
|
||||
// margin-left: auto;
|
||||
// width: 85rpx;
|
||||
// // height: 42rpx;
|
||||
// border: 2rpx solid rgba(255,120,15,1);
|
||||
// border-radius: 10rpx;
|
||||
// font-size: 26rpx;
|
||||
// color: rgba(255,120,15,1);
|
||||
// line-height: 42rpx;
|
||||
// text-align: center;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
.coupon-scroll {
|
||||
background-color: #ffffff;
|
||||
padding-top: 30rpx;
|
||||
.coupon-item {
|
||||
padding: 30rpx {
|
||||
top: 0;
|
||||
};
|
||||
}
|
||||
// .coupon-item {
|
||||
// padding: 30rpx;
|
||||
// background-color: #ffffff;
|
||||
// display: flex;
|
||||
// align-items: flex-end;
|
||||
// // margin-bottom: 2rpx;
|
||||
// > img {
|
||||
// width: 180rpx;
|
||||
// height: 160rpx;
|
||||
// border-radius: 10rpx;
|
||||
// margin-right: 30rpx;
|
||||
// }
|
||||
// .coupon-main {
|
||||
// .coupon-title {
|
||||
// font-size: 30rpx;
|
||||
// color: rgba(51,51,51,1);
|
||||
// }
|
||||
// .coupon-date {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// margin: 29rpx 0 20rpx;
|
||||
// > img {
|
||||
// width: 24rpx;
|
||||
// height: 24rpx;
|
||||
// margin-right: 15rpx;
|
||||
// }
|
||||
// > view {
|
||||
// font-size: 24rpx;
|
||||
// color: rgba(153,153,153,1);
|
||||
// }
|
||||
// }
|
||||
// .coupon-integral {
|
||||
// font-size: 30rpx;
|
||||
// font-weight: 500;
|
||||
// color: rgba(255,120,15,1);
|
||||
// }
|
||||
// }
|
||||
// .coupon-btn {
|
||||
// margin-left: auto;
|
||||
// width: 85rpx;
|
||||
// // height: 42rpx;
|
||||
// border: 2rpx solid rgba(255,120,15,1);
|
||||
// border-radius: 10rpx;
|
||||
// font-size: 26rpx;
|
||||
// color: rgba(255,120,15,1);
|
||||
// line-height: 42rpx;
|
||||
// text-align: center;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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,8 +203,10 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.swiper-item {
|
||||
.item-container {
|
||||
padding: 20rpx 30rpx;
|
||||
.order-scroll {
|
||||
.item-container {
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user