Skip to content

H
h5-front
Commit 02b7fce0 authored by verestrasz's avatar verestrasz
Browse files
Options

update

parent 60f123a3
Hide whitespace changes
Inline Side-by-side
Showing with 677 additions and 283 deletions
src/views/blind-box/blind-desc.vue
View file @ 02b7fce0
<template> <template>
<div class="goods-desc-con"> <div class="blind-box-goods-desc-con">
<!-- <div class="copy-right flex-default" @click="showDialog"> <!-- <div class="copy-right flex-default" @click="showDialog">
<div class="left flex-default"> <div class="left flex-default">
<m-icon icon="icon-copy-right" /> <m-icon icon="icon-copy-right" />
...@@ -170,7 +170,7 @@ export default { ...@@ -170,7 +170,7 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
.goods-desc-con { .blind-box-goods-desc-con {
// background: #F5F7FB; // background: #F5F7FB;
border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px;
margin: 10px 0; margin: 10px 0;
......
src/views/blind-box/blind-detail.vue
View file @ 02b7fce0
<template> <template>
<div class="goods-detail-con"> <div class="blind-box-goods-detail-con">
<div class="desc"> <div class="desc">
<div class="header flex-default"> <div class="header flex-default">
<m-icon icon="icon-double-arrow" :size="10" className="icon" /> <m-icon icon="icon-double-arrow" :size="10" className="icon" />
...@@ -68,7 +68,7 @@ export default { ...@@ -68,7 +68,7 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
.goods-detail-con { .blind-box-goods-detail-con {
border-radius: 10px; border-radius: 10px;
margin-top: 20px; margin-top: 20px;
// padding-bottom: 15px; // padding-bottom: 15px;
......
src/views/blind-box/blind-header.vue
View file @ 02b7fce0
<template> <template>
<div class="goods-header-con flex-default" ref="goodsHeader"> <div class="blind-box-goods-header-con flex-default" ref="goodsHeader">
<m-icon :size="18" icon="icon-back" className="back-logo" @click="goBack" /> <m-icon :size="18" icon="icon-back" className="back-logo" @click="goBack" />
<div class="tab-list flex-default"> <div class="tab-list flex-default">
<!-- <div <!-- <div
...@@ -64,7 +64,7 @@ export default { ...@@ -64,7 +64,7 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
.goods-header-con { .blind-box-goods-header-con {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
position: sticky; position: sticky;
......
src/views/blind-box/blind-img-swiper.vue
View file @ 02b7fce0
<template> <template>
<div> <div>
<van-swipe class="goods-img-swiper-con" :show-indicators="false" :loop="false"> <van-swipe class="blind-box-goods-img-swiper-con" :show-indicators="false" :loop="false">
<van-swipe-item <van-swipe-item
v-for="(item, index) of list" v-for="(item, index) of list"
:key="'swiper-item-' + index" :key="'swiper-item-' + index"
...@@ -45,11 +45,8 @@ export default { ...@@ -45,11 +45,8 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
.goods-img-swiper-con { .blind-box-goods-img-swiper-con {
height: 312px; height: 312px;
// background: #ffffff;
// background: url("~@/assets/img/blind-bg.png") no-repeat;
// background-size: 100% 100%;
.swiper-item { .swiper-item {
text-align: center; text-align: center;
padding-top: 15px; padding-top: 15px;
......
src/views/blind-box/index.vue
View file @ 02b7fce0
<template> <template>
<mescroll-vue <mescroll-vue
class="goods-con" class="blind-box-goods-con"
ref="mescrollRef" ref="mescrollRef"
@init="mescrollInit" @init="mescrollInit"
:down="downOption" :down="downOption"
...@@ -327,7 +327,7 @@ export default { ...@@ -327,7 +327,7 @@ export default {
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.goods-con { .blind-box-goods-con {
// background: #F6FAFF; // background: #F6FAFF;
// background-size: 100% ; // background-size: 100% ;
} }
......
src/views/tab-bar/home/goods-list/blind-goods.vue
View file @ 02b7fce0
<template> <template>
<div class="goods-list-template-con"> <div
<div class="blind-goods-item-con"> class="item-list-con"
<div class="header"> @click="goGoods(data.goodsId, data.type, data.salesType)"
<div class="title">盲盒</div> >
<div class="con-wrapper flex-default">
<div class="left-img">
<img class="thumb" :src="data.thumb" />
<div class="goods-stock" v-if="data.stockCount">
<m-icon icon="icon-hot-goods" :size="10" />
<span>热销中</span>
</div>
<div class="goods-stock" v-else>
<m-icon icon="icon-sell-out" :size="10" />
<span>已售罄</span>
</div>
</div> </div>
<div <div class="right-con flex-default">
class="item-list-con flex-default" <div class="title">
v-for="(item, index) of list" {{ data.name }}
:key="'goods-item-' + index"
@click="goGoods(item.goodsId, item.type,item.salesType)"
>
<div class="left-img">
<img class="thumb" :src="item.thumb" />
<div class="goods-stock" v-if="item.stockCount">
<m-icon icon="icon-hot-goods" :size="10" />
<span>热销中</span>
</div>
<div class="goods-stock" v-else>
<m-icon icon="icon-sell-out" :size="10" />
<span>已售罄</span>
</div>
</div> </div>
<div class="right-con flex-default"> <div class="circulationCount flex-default">
<div class="title"> <div class="label">限量</div>
{{ item.name }} <div class="num">{{ data.circulationCount }}份</div>
</div> </div>
<div class="circulationCount flex-default"> <div class="value">
<div class="label">限量</div> <span class="yen">￥</span>{{ data.defaultPrice || 0 }}
<div class="num">{{ item.circulationCount }}份</div>
</div>
<div class="value">
<span class="yen">￥</span>{{ item.defaultPrice || 0 }}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import GoodsItem from "./goods-item.vue";
export default { export default {
components: {
GoodsItem,
},
props: { props: {
title: { data: {
type: String, type: Object,
default: "电影专区", default: () => {
}, return {};
line: { },
type: Number,
default: 1,
},
floorId: String,
},
data() {
return {
loading: true,
list: [],
};
},
computed: {},
methods: {
requestData() {
this.loading = true;
let param = this.floorId;
this.$api({
apiName: "getFloorGoods",
postData: {
param,
page: 1,
size: this.line * 3,
},
success: (res) => {
this.list = res.list;
setTimeout(() => {
this.loading = false;
this.$emit("loadSuccess");
}, 500);
},
});
}, },
}, },
}; };
</script> </script>
<style lang="less" scoped>
<style lang="less"> .item-list-con {
.goods-list-template-con { padding: 25px 0 0 0;
padding: 18px 11px; .con-wrapper {
background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%); background: url(~@/assets/img/blind-card.png) no-repeat;
.blind-goods-item-con { background-size: 100% 100%;
.header { margin-bottom: 10px;
justify-content: space-between; padding: 28px;
align-items: center; height: 160px;
color: #140603; }
height: 50px; .left-img {
line-height: 20px; position: relative;
padding: 0 16px; width: 120px;
// margin-bottom: 20px; height: 146px;
.title { border-radius: 10px;
font-weight: bold; // overflow: hidden;
font-size: 16px; .thumb {
align-items: flex-start; width: 120px;
line-height: 20px; height: 146px;
height: 15px; border-radius: 10px;
object-fit: cover;
margin-top: -25px;
}
.goods-stock {
position: absolute;
background: rgba(0, 0, 0, 0.2);
border-radius: 0 0 10px 10px;
width: 120px;
height: 18px;
bottom: 25px;
left: 0;
line-height: 18px;
text-align: center;
span {
font-size: 11px;
color: #ffffff;
margin-left: 1px;
} }
} }
.item-list-con { }
background: url(~@/assets/img/blind-card.png) no-repeat; .right-con {
background-size: 100% 100%; flex-direction: column;
margin-bottom: 45px; align-items: flex-start;
padding: 28px; justify-content: space-around;
height: 160px; height: 130px;
.left-img { padding: 5px 10px 10px;
position: relative; .title {
width: 120px; width: 170px;
height: 146px; font-size: 15px;
border-radius: 10px; font-weight: 500;
// overflow: hidden; color: #030711;
.thumb { line-height: 21px;
width: 120px; overflow: hidden;
height: 146px; text-overflow: ellipsis;
border-radius: 10px; white-space: nowrap;
object-fit: cover; }
margin-top: -25px; .circulationCount {
} width: 86px;
.goods-stock { height: 16px;
position: absolute; line-height: 16px;
background: rgba(0, 0, 0, 0.2); font-size: 10px;
border-radius: 0 0 10px 10px; overflow: hidden;
width: 120px; border-radius: 2px;
height: 18px; margin-bottom: 22px;
bottom: 25px; .label {
left: 0; width: 35px;
line-height: 18px; height: 16px;
text-align: center; text-align: center;
span { background: #f3e0bc;
font-size: 11px; color: #030711;
color: #ffffff; }
margin-left: 1px; .num {
} // width: 51px;
} padding:0 8px;
min-width: 51px;
height: 16px;
background: #4b4b4c;
color: #f3e0bc;
text-align: center;
} }
.right-con { }
flex-direction: column; .value {
align-items: flex-start; font-size: 22px;
justify-content: space-around; color: #f78706;
height: 130px; .yen {
padding:5px 10px 10px; display: inline-block;
.title { font-size: 14px;
width: 170px; transform: scale(0.8);
font-size: 15px; font-weight: normal;
font-weight: 500; width: 14px;
color: #030711;
line-height: 21px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.circulationCount {
width: 86px;
height: 16px;
line-height: 16px;
font-size: 10px;
overflow: hidden;
border-radius: 2px;
margin-bottom: 22px;
.label {
width: 35px;
height: 16px;
text-align: center;
background: #f3e0bc;
color: #030711;
}
.num {
width: 51px;
height: 16px;
background: #4b4b4c;
color: #f3e0bc;
text-align: center;
}
}
.value {
font-size: 22px;
color: #f78706;
.yen {
display: inline-block;
font-size: 14px;
transform: scale(0.8);
font-weight: normal;
width: 14px;
}
}
} }
} }
} }
......
src/views/tab-bar/home/goods-list/blind-goods11.vue 0 → 100644
View file @ 02b7fce0
<template>
<div class="goods-list-template-con">
<div class="blind-goods-item-con">
<div class="header">
<div class="title">盲盒</div>
</div>
<div
class="item-list-con flex-default"
v-for="(item, index) of list"
:key="'goods-item-' + index"
@click="goGoods(item.goodsId, item.type,item.salesType)"
>
<div class="left-img">
<img class="thumb" :src="item.thumb" />
<div class="goods-stock" v-if="item.stockCount">
<m-icon icon="icon-hot-goods" :size="10" />
<span>热销中</span>
</div>
<div class="goods-stock" v-else>
<m-icon icon="icon-sell-out" :size="10" />
<span>已售罄</span>
</div>
</div>
<div class="right-con flex-default">
<div class="title">
{{ item.name }}
</div>
<div class="circulationCount flex-default">
<div class="label">限量</div>
<div class="num">{{ item.circulationCount }}份</div>
</div>
<div class="value">
<span class="yen">￥</span>{{ item.defaultPrice || 0 }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import GoodsItem from "./goods-item.vue";
export default {
components: {
GoodsItem,
},
props: {
title: {
type: String,
default: "电影专区",
},
line: {
type: Number,
default: 1,
},
floorId: String,
},
data() {
return {
loading: true,
list: [],
};
},
computed: {},
methods: {
requestData() {
this.loading = true;
let param = this.floorId;
this.$api({
apiName: "getFloorGoods",
postData: {
param,
page: 1,
size: this.line * 3,
},
success: (res) => {
this.list = res.list;
setTimeout(() => {
this.loading = false;
this.$emit("loadSuccess");
}, 500);
},
});
},
},
};
</script>
<style lang="less">
.goods-list-template-con {
padding: 18px 11px;
background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
.blind-goods-item-con {
.header {
justify-content: space-between;
align-items: center;
color: #140603;
height: 50px;
line-height: 20px;
padding: 0 16px;
// margin-bottom: 20px;
.title {
font-weight: bold;
font-size: 16px;
align-items: flex-start;
line-height: 20px;
height: 15px;
}
}
.item-list-con {
background: url(~@/assets/img/blind-card.png) no-repeat;
background-size: 100% 100%;
margin-bottom: 45px;
padding: 28px;
height: 160px;
.left-img {
position: relative;
width: 120px;
height: 146px;
border-radius: 10px;
// overflow: hidden;
.thumb {
width: 120px;
height: 146px;
border-radius: 10px;
object-fit: cover;
margin-top: -25px;
}
.goods-stock {
position: absolute;
background: rgba(0, 0, 0, 0.2);
border-radius: 0 0 10px 10px;
width: 120px;
height: 18px;
bottom: 25px;
left: 0;
line-height: 18px;
text-align: center;
span {
font-size: 11px;
color: #ffffff;
margin-left: 1px;
}
}
}
.right-con {
flex-direction: column;
align-items: flex-start;
justify-content: space-around;
height: 130px;
padding:5px 10px 10px;
.title {
width: 170px;
font-size: 15px;
font-weight: 500;
color: #030711;
line-height: 21px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.circulationCount {
width: 86px;
height: 16px;
line-height: 16px;
font-size: 10px;
overflow: hidden;
border-radius: 2px;
margin-bottom: 22px;
.label {
width: 35px;
height: 16px;
text-align: center;
background: #f3e0bc;
color: #030711;
}
.num {
width: 51px;
height: 16px;
background: #4b4b4c;
color: #f3e0bc;
text-align: center;
}
}
.value {
font-size: 22px;
color: #f78706;
.yen {
display: inline-block;
font-size: 14px;
transform: scale(0.8);
font-weight: normal;
width: 14px;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/tab-bar/home/goods-list/digital-collection-goods.vue 0 → 100644
View file @ 02b7fce0
<template>
<div
class="item-list-con"
@click="goGoods(data.goodsId, data.type, data.salesType)"
>
<div class="img-box">
<img class="thumb" :src="data.thumb" />
<div class="goods-stock" v-if="data.stockCount">
<m-icon icon="icon-hot-goods" :size="10" />
<span>热销中</span>
</div>
<div class="goods-stock" v-else>
<m-icon icon="icon-sell-out" :size="10" />
<span>已售罄</span>
</div>
</div>
<div class="goods-desc">
<div class="name">{{ data.name }}</div>
<div class="desc flex-between">
<div class="circulationCount flex-default">
<div class="label">限量</div>
<div class="num">{{ data.circulationCount }}份</div>
</div>
<div class="value">
<m-price class="price" :amt="data.defaultPrice" :rmbSize="14" :intSize="22" :floatSize="22"/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
default: () => {
return {};
},
},
},
};
</script>
<style lang="less" scoped>
.item-list-con{
margin: 0 5px;
background: #ffffff;
border-radius: 8px;
margin-bottom: 18px;
.img-box{
position: relative;
width: 343px;
height: 270px;
.thumb{
width: 100%;
height: 100%;
border-radius: 10px;
object-fit: cover;
}
.goods-stock{
position: absolute;
top: 14px;
left: 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: 0 0 2px 2px;
// width: 120px;
height: 18px;
line-height: 18px;
text-align: center;
padding: 0 4px;
span {
font-size: 11px;
color: #ffffff;
margin-left: 1px;
margin-right: 1px;
}
}
}
.goods-desc{
padding: 10px 15px 16px;
border-radius: 0 0 8px 8px;
.name{
font-size: 18px;
font-weight: 500;
font-family: PingFangSC-Medium, PingFang SC;
color: #030711;
line-height: 25px;
margin-bottom: 8px;
}
.desc{
.circulationCount {
// width: 86px;
height: 16px;
line-height: 16px;
font-size: 10px;
overflow: hidden;
border-radius: 2px;
.label {
width: 35px;
height: 16px;
text-align: center;
background: #f3e0bc;
color: #030711;
}
.num {
// width: 51px;
padding:0 8px;
min-width: 51px;
height: 16px;
background: #4b4b4c;
color: #f3e0bc;
text-align: center;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/tab-bar/home/home-header.vue
View file @ 02b7fce0
...@@ -21,6 +21,7 @@ export default { ...@@ -21,6 +21,7 @@ export default {
props: { props: {
downHight: Number, downHight: Number,
upHight: Number, upHight: Number,
isShowSticky:Boolean
}, },
data() { data() {
return {}; return {};
......
src/views/tab-bar/home/index.vue
View file @ 02b7fce0
...@@ -11,20 +11,22 @@ ...@@ -11,20 +11,22 @@
<banner-list ref="bannerList" @loadSuccess="loadSuccess" /> <banner-list ref="bannerList" @loadSuccess="loadSuccess" />
<!-- 菜单列表 --> <!-- 菜单列表 -->
<menu-list ref="menuList" @loadSuccess="loadSuccess" /> <menu-list ref="menuList" @loadSuccess="loadSuccess" />
<!-- 商品推荐 --> <!-- 商品推荐 -->
<component <div class="swipe-con">
:is="item.isType" <div :class="{isFixed:isShowSticky&&showTabs}">
v-for="(item, index) of floorList" <m-tabs
:key="`floor-item-${index}`" v-model="tabIndex"
:ref="`floor-${item.operationFloorId}`" :tabs="tabList"
:title="item.name" class="tab-list"
:floorId="item.operationFloorId"
@loadSuccess="loadSuccess" @change="tabChange"
/> :fixed="true"
/>
<!-- 店铺商品推荐 --> </div>
<!-- <shop-recommend ref="shopList" @loadSuccess="loadSuccess" :size="10" /> --> </div>
<div class="goods-list" v-if="tabList&&tabList.length>0&&tabList[tabIndex].goods">
<component :is="isType" v-for="(item, index) of goods" :data="item" :key="`floor-item-${index}`"/>
</div>
</home-scroll> </home-scroll>
</div> </div>
</template> </template>
...@@ -35,14 +37,8 @@ import HomeScroll from "./home-scroll.vue"; ...@@ -35,14 +37,8 @@ import HomeScroll from "./home-scroll.vue";
import BannerList from "./banner-list.vue"; import BannerList from "./banner-list.vue";
import MenuList from "./menu-list.vue"; import MenuList from "./menu-list.vue";
import ShopRecommend from "./shop-recommend"; import BlindGoods from "./goods-list/blind-goods.vue";
import DigitalCollectionGoods from "./goods-list/digital-collection-goods"
import HotGoods from "./goods-list/hot-goods.vue";
import HotRecommend from "./goods-list/hot-recommend.vue";
import TailGoods from "./goods-list/tail-goods.vue";
import CustomizedGoods from "./goods-list/customized-goods.vue";
import BlindGoods from "./goods-list/blind-goods.vue"
export default { export default {
components: { components: {
HomeHeader, HomeHeader,
...@@ -50,121 +46,261 @@ export default { ...@@ -50,121 +46,261 @@ export default {
BannerList, BannerList,
MenuList, MenuList,
ShopRecommend, BlindGoods,
DigitalCollectionGoods
HotGoods,
HotRecommend,
TailGoods,
CustomizedGoods,
BlindGoods
}, },
data() { data() {
return { return {
loading: true, loading: true,
loadFlag: 0, loadFlag: 0,
floorList: [ tabList: [
{
isType: HotGoods,
},
{
isType: HotRecommend,
},
{
isType: TailGoods,
},
{
isType: CustomizedGoods,
},
], ],
downHight: 0, downHight: 0,
upHight: 0, upHight: 0,
mescroll: {}, mescroll: {},
tabIndex: 0,
shopPage: { preIndex: 0, // 前一个菜单下标
page: 1, navTop: 470, // nav距离到顶部的距离 (如计算不准确,可直接写死某个值)
size: 0, tabsLoading: false,
total: 0, isChangeTab:false
},
}; };
}, },
methods: { computed: {
requestData() { // 列表数据
if (this.shopPage.page == 1) { goods() {
this.loadFlag = 0; if (this.tabList[this.tabIndex]) {
this.$refs.bannerList.requestData(); return this.tabList[this.tabIndex].goods;
this.$refs.menuList.requestData();
// this.$refs.seckilllist.requestData();
this.requestFloor();
// this.$refs.shopList.requestData(this.shopPage.page);
} else { } else {
// this.$refs.shopList.requestData(this.shopPage.page); return [];
} }
}, },
isType(){
requestFloor() { if (this.tabList[this.tabIndex]) {
return this.tabList[this.tabIndex].isType;
} else {
return BlindGoods;
}
},
showTabs() {
return this.tabList && this.tabList.length > 0;
},
isShowSticky(){
if (this.upHight <= 200) {
return false;
}
return true
},
},
mounted() {
// this.requestData();
},
methods: {
requestData() {
this.$refs.bannerList.requestData();
this.$refs.menuList.requestData();
// if (page.num == 1) {
// this.loadFlag = 0;
// this.$refs.bannerList.requestData();
// this.$refs.menuList.requestData();
// this.requestFloor(page);
// }else{
// this.getNavigationGoods(page)
// }
},
requestFloor(page) {
this.$api({ this.$api({
apiName: "getFloor", apiName: "getFloor",
success: (res) => { success: (res) => {
let arr = res; let arr = res;
for (let item of arr) { for (let item of arr) {
switch (item.name) { switch (item.name) {
case "爆款抢购": case "盲盒":
item.isType = HotGoods;
break;
case "推荐NFT":
item.isType = BlindGoods; item.isType = BlindGoods;
break; break;
case "潜力NFT": case "推荐NFT":
item.isType = TailGoods; item.isType = DigitalCollectionGoods;
break;
case "电影专区":
item.isType = CustomizedGoods;
break; break;
default: default:
item.isType = CustomizedGoods; item.isType = BlindGoods;
} }
} }
this.floorList = arr; arr.forEach(x=>{
this.$nextTick(() => { x.goods=null
this.floorList.forEach((item) => { x.hasNext= true
this.$refs[`floor-${item.operationFloorId}`][0].requestData(); x.num= 1
}); x.y= 0
}); x.curPageLen= 0
})
this.tabList = arr
this.tabsLoading = true;
// this.upCallback(this.mescroll,page);
this.getNavigationGoods(page)
// this.$nextTick(() => {
// this.floorList.forEach((item) => {
// this.$refs[`floor-${item.operationFloorId}`][0].requestData();
// });
// });
},
});
},
getNavigationGoods(page) {
this.$api({
apiName:"getFloorGoods",
postData: {
page: page.num,
size: page.size,
param: this.tabList[this.tabIndex].operationFloorId,
},
success: (res) => {
let curTab = this.tabList[this.tabIndex];
curTab.hasNext = true;
let arr = res.list;
if (page.num == 1) {
curTab.goods = arr;
} else {
curTab.goods = curTab.goods.concat(arr);
}
this.mescroll.endBySize(res.list.length, 1000);
setTimeout(() => {
// 需先隐藏加载状态
this.mescroll.endSuccess(res.list.length);
// 再记录当前页的数据
curTab.num = page.num; // 页码
curTab.curPageLen = res.list.length; // 当前页长
curTab.hasNext = this.mescroll.optUp.hasNext; // 是否还有下一页
// 设置nav到顶部的距离 (需根据自身的情况获取navTop的值, 这里放到列表数据渲染完毕之后)
// 也可以放到onReady里面,或者菜单顶部的数据(轮播等)加载完毕之后..
if (!this.navTop) this.setNavTop();
// 保持tab悬浮,列表数据显示第一条
if (this.isChangeTab) {
this.isChangeTab = false;
// this.$hideLoading();
if (this.isShowSticky) this.mescroll.scrollTo(this.navTop, 0);
}
}, 20);
},
fail: () => {
this.mescroll.endErr();
},
complete: () => {
this.$hideLoading();
}, },
}); });
}, },
loadSuccess(size, total) { loadSuccess(size, total) {
this.loadFlag++; // this.mescroll.endBySize();
size && (this.shopPage.size = size); // this.loadFlag++;
total && (this.shopPage.total = total); // size && (this.shopPage.size = size);
if (this.shopPage.page == 1) { // total && (this.shopPage.total = total);
if (this.loadFlag % (this.floorList.length + 2) == 0) { // if (this.shopPage.page == 1) {
this.mescroll.endBySize(this.shopPage.size, this.shopPage.total); // if (this.loadFlag % (this.floorList.length + 2) == 0) {
} // this.mescroll.endBySize(this.shopPage.size, this.shopPage.total);
} else { // }
this.mescroll.endBySize(size, total); // } else {
} // this.mescroll.endBySize(size, total);
// }
}, },
onMoving(downHight) { onMoving(downHight) {
this.downHight = downHight; this.downHight = downHight;
}, },
onScroll(upHight) { onScroll(upHight) {
this.upHight = upHight; this.upHight = upHight;
}, },
downCallback() {}, downCallback() {
upCallback(mescroll, page) { // loadSwiper();
this.tabsLoading = false;
// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
this.mescroll.resetUpScroll();
},
upCallback(mescroll,page) {
this.mescroll = mescroll; this.mescroll = mescroll;
this.shopPage.page = page.num; if (this.tabsLoading) {
this.requestData(); if (this.isChangeTab) {
this.getNavigationGoods(page)
this.mescroll.hideUpScroll(); // 切换菜单,不显示mescroll进度, 显示系统进度条
}else{
this.getNavigationGoods(page)
}
} else {
this.requestData();
this.requestFloor(page);
}
}, },
}, tabChange(index) {
mounted() {}, this.tabIndex = index;
// 记录前一个菜单的数据
let preTab = this.tabList[this.preIndex];
preTab.y = this.mescroll.getScrollTop(); // 滚动条位置
this.preIndex = index;
// 当前菜单的数据
let curTab = this.tabList[index];
if (!curTab.goods) {
// 没有初始化,则初始化
this.isChangeTab = true;
this.mescroll.resetUpScroll();
} else {
// 初始化过,则恢复之前的列表数据
this.mescroll.setPageNum(curTab.num + 1); // 恢复当前页码
this.mescroll.endSuccess(curTab.curPageLen, curTab.hasNext); // 恢复是否有下一页或显示空布局
this.$nextTick(() => {
this.mescroll.scrollTo(curTab.y, 0); // 恢复滚动条的位置
});
}
},
}
}; };
</script> </script>
<style lang="less"> <style lang="less">
.home-con { .home-con {
background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FB 100%);
.swipe-con {
.m-tabs {
border: 0;
padding: 5px 16px;
height: 32px;
.van-tabs__wrap {
height: 22px;
}
.van-tab {
flex-basis:auto;
flex-grow: 0;
line-height: 22px;
margin-right: 22px;
.van-tab__text {
font-size: 16px;
color: rgba(3, 7, 17, 0.3);
font-weight: bold;
}
&.van-tab--active {
color: rgba(3, 7, 17, 1);
.van-tab__text {
color: rgba(3, 7, 17, 1);
}
}
}
.van-tabs__line {
display: none;
}
}
.isFixed{
position: fixed;
left: 0;
top: 44px;
width: 100%;
background-color: #ffffff;
z-index: 10;
}
}
.goods-list{
padding: 10px 11px;
background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
}
} }
</style> </style>
\ No newline at end of file
vue.config.js
View file @ 02b7fce0
...@@ -65,7 +65,7 @@ module.exports = { ...@@ -65,7 +65,7 @@ module.exports = {
// target: 'http://172.22.17.176:12008' // target: 'http://172.22.17.176:12008'
// target: 'http://172.22.17.108:12008' // target: 'http://172.22.17.108:12008'
// target: 'https://mall.inmvo.com/root' // target: 'https://mall.inmvo.com/root'
target: 'http://172.22.20.54:9089' target: 'https://testym.8n.cn/root'
}, },
'/chat': { '/chat': {
pathRewrite: { pathRewrite: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment