theluyuan/deming
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

rewrite tab swiper 8.7

Browse Source
This commit is contained in:
ghusermoon 2020-08-07 17:34:59 +08:00
parent f4ba942870
commit 9d3f8da629
8 changed files with 153 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/mine/collection-item/index.vue
View File

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

2
components/mine/coupon/index.vue
View File

@ -10,7 +10,7 @@
<view class="price">￥<span>{{ couponInfo.vouchertemplate_price }}</span></view> <view class="price">￥<span>{{ couponInfo.vouchertemplate_price }}</span></view>
<view class="condition">满{{ couponInfo.vouchertemplate_limit }}使用</view> <view class="condition">满{{ couponInfo.vouchertemplate_limit }}使用</view>
</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-integral">兑换积分：{{ couponInfo.vouchertemplate_points }}积分</view>
<view class="info-date">有效期{{ couponInfo.vouchertemplate_startdate }}-{{ couponInfo.vouchertemplate_enddate }}</view> <view class="info-date">有效期{{ couponInfo.vouchertemplate_startdate }}-{{ couponInfo.vouchertemplate_enddate }}</view>
</view> </view>

5
components/shop/recommend/pintuan.vue
View File

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

5
components/shop/seckill/item.vue
View File

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

32
pageB/sdetails/index.vue
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> <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"> <view class="num">
<text>购买数量</text> <text>购买数量</text>
<u-number-box v-model="goodsNumber" @change="valChange"></u-number-box> <u-number-box v-model="goodsNumber"></u-number-box>
</view> </view>
<view style="height:100rpx"></view> <view style="height:100rpx"></view>
</view> </view>
@ -230,7 +230,6 @@ export default {
// this.type = Number(option.type); // this.type = Number(option.type);
// this.type = 1; // this.type = 1;
this.id = option.id; this.id = option.id;
this.setTitle();
// 先请求普通商品详情获取商品类型再渲染页面 // 先请求普通商品详情获取商品类型再渲染页面
this.ordinaryDetails(this.id); this.ordinaryDetails(this.id);
}, },
@ -299,9 +298,9 @@ export default {
}, },
getGoodsDetails(id) { getGoodsDetails(id) {
switch (this.type) { switch (this.type) {
// case 1: case 1:
// this.ordinaryDetails(id); this.ordinaryDetails(id);
// break; break;
case 2: case 2:
this.pinTuanDetails(id); this.pinTuanDetails(id);
break; break;
@ -322,7 +321,16 @@ export default {
this.setSwiperList(res.data.goods_image); this.setSwiperList(res.data.goods_image);
this.glist = res.data.spec_list; this.glist = res.data.spec_list;
this.type = res.data.view_type; 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.glist = res.data.data.spec_list;
this.user_suc = res.data.data.user_suc; this.user_suc = res.data.data.user_suc;
this.groupUser =res.data.data.user; this.groupUser =res.data.data.user;
console.log(this.groupUser); // console.log(this.groupUser);
} }
}) })
}, },
@ -348,6 +356,7 @@ export default {
groupbuy_id: id groupbuy_id: id
}).then(res => { }).then(res => {
if(res.errCode == 0) { if(res.errCode == 0) {
this.id = res.data.groupbuy_id;
this.groupbuyInfo = res.data.groupbuyInfo; this.groupbuyInfo = res.data.groupbuyInfo;
this.evaluate = res.data.goodsInfo.goods_evaluate_info; this.evaluate = res.data.goodsInfo.goods_evaluate_info;
this.goodsInfo = res.data.goodsInfo.goods; this.goodsInfo = res.data.goodsInfo.goods;
@ -361,7 +370,7 @@ export default {
this.$u.route({ this.$u.route({
url: '/pageB/triedDress/index', url: '/pageB/triedDress/index',
params: { params: {
id: this.id, id: this.goodsInfo.goods_id,
} }
}) })
}, },
@ -412,9 +421,6 @@ export default {
this.showInvolvementUser = true; this.showInvolvementUser = true;
// console.log(this.involvemenGroupInfo); // console.log(this.involvemenGroupInfo);
}, },
valChange(e) {
// console.log(this.value)
},
self(){ self(){
// console.log(this.$refs.guige) // console.log(this.$refs.guige)
let index = 0; let index = 0;
@ -490,7 +496,7 @@ export default {
} }
}, },
addFavoriteGoods() { 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) { if(res.errCode == 0) {
this.getGoodsDetails(this.id); this.getGoodsDetails(this.id);
} else { } else {
@ -499,7 +505,7 @@ export default {
}) })
}, },
removeFavorite() { 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) { if(res.errCode == 0) {
this.getGoodsDetails(this.id); this.getGoodsDetails(this.id);
} else { } else {

6
pageC/cart/index.vue
View File

@ -14,8 +14,8 @@
<view v-for="(goods, g_index) in store.goods" :key="g_index" class="goods-item"> <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> <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> <image :src="goods.goods_image" @click="viewGoodsDetails(goods.goods_id)"></image>
<view class="info" @click="viewGoodsDetails(goods.goods_id)"> <view class="info">
<view class="name u-line-2">{{ goods.goods_name }}</view> <view class="name u-line-2" @click="viewGoodsDetails(goods.goods_id)">{{ goods.goods_name }}</view>
<view class="cart-info"> <view class="cart-info">
<view class="price">￥{{ goods.goods_price }}</view> <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> <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 // #ifdef APP-PLUS
let currentWebview = page.$getAppWebview(); let currentWebview = page.$getAppWebview();
let titleObj = currentWebview.getStyle().titleNView; let titleObj = currentWebview.getStyle().titleNView;
console.log(JSON.stringify(titleObj.buttons[0])); // console.log(JSON.stringify(titleObj.buttons[0]));
if (!titleObj.buttons) { if (!titleObj.buttons) {
return; return;
} }

65
pageE/mine/MemberServeCoupon.vue
View File

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

13
pageE/order/Index.vue
View File

@ -5,7 +5,7 @@
</view> </view>
<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{ height: swiperHeight }"> <swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{ height: swiperHeight }">
<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index"> <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>
<view class="item-container" v-for="order in orderList" :key="order.order_id"> <view class="item-container" v-for="order in orderList" :key="order.order_id">
<OrderItem :order="order" @refreshOrderList="refreshOrderList" v-if="current != 4"></OrderItem> <OrderItem :order="order" @refreshOrderList="refreshOrderList" v-if="current != 4"></OrderItem>
@ -13,7 +13,7 @@
</view> </view>
</view> </view>
<u-empty text="暂无订单" mode="order" color="#000000" v-if="!orderList.length"></u-empty> <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> </scroll-view>
</swiper-item> </swiper-item>
</swiper> </swiper>
@ -162,8 +162,7 @@ export default {
return res.data.list.length; return res.data.list.length;
}, },
reachBottom() { reachBottom() {
// 大于15条才会加载更多 if(this.current == 4) return;
if(this.orderList.length < 15) return false;
if(!this.timer) return false; if(!this.timer) return false;
this.timer = false; this.timer = false;
this.loadStatus.splice(this.current, 1, "loading"); this.loadStatus.splice(this.current, 1, "loading");
@ -171,8 +170,8 @@ export default {
let promise; let promise;
// if(this.current == 6) promise = this.getAfterSaleList(); // if(this.current == 6) promise = this.getAfterSaleList();
// else // else
if(this.current == 4) promise = this.goodsTryOrderList(); // if(this.current == 4) promise = this.goodsTryOrderList();
else promise = this.getOrderList(); promise = this.getOrderList();
promise.then(length => { promise.then(length => {
this.loadStatus.splice(this.current, 1, "nomore"); this.loadStatus.splice(this.current, 1, "nomore");
if(length == 0) this.page--; if(length == 0) this.page--;
@ -204,9 +203,11 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.swiper-item { .swiper-item {
.order-scroll {
.item-container { .item-container {
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
} }
} }
} }
}
</style> </style>