Feat(时令尝鲜):接口对接

This commit is contained in:
lifizer
2023-09-23 18:13:26 +08:00
parent c9ceac9f37
commit 2d73c2fe46
35 changed files with 2834 additions and 1547 deletions
+143 -31
View File
@@ -1,40 +1,57 @@
<template>
<view class="pkg-product-list">
<swiper class="swiper-box" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
autoplay circular v-if="bannerList.length>0">
<swiper-item v-for="(item,index) in bannerList" :key="index">
<image :src="item.pic" mode="scaleToFill" @click="$global.commonJump(item.uniappUrl)"/>
</swiper-item>
</swiper>
<view class="fixed-header">
<swiper class="swiper-box" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
autoplay circular v-if="bannerList.length>0">
<swiper-item v-for="(item,index) in bannerList" :key="index">
<image :src="item.pic" mode="scaleToFill" @click="$global.commonJump(item.uniappUrl)"/>
</swiper-item>
</swiper>
<view class="search-box flex jc-between ai-center">
<input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494" @confirm="search">
<image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
<view class="search-box flex jc-between ai-center">
<input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494" @confirm="search">
<image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
</view>
</view>
<view class="body-box">
<view class="aside-box flex-0">
<view class="item flex jc-center ai-center" :class="index === asideIndex ? 'active' : ''"
v-for="(item, index) in asideList" :key="index" @click="asideTap(index)">
<text class="one-t">{{ item.label }}</text>
</view>
<view class="fixed-aside flex-0">
<view class="item flex jc-center ai-center" :class="index === asideIndex ? 'active' : ''"
v-for="(item, index) in asideList" :key="index" @click="asideTap(index)">
<text class="one-t">{{ item.label }}</text>
</view>
</view>
<view class="article-box">
<mescroll-body ref="mescrollRef" top="16rpx" bottom="0" class='cotent-scroll' :up="upOption" :down="downOption"
@up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">
<view class="list flex flex-wrap">
<view v-for="(item, index) in dataList" :key="index">
<view class="item" @click="goGoods(item.id)">
<image class="cover" :src="item.image" mode="scaleToFill"/>
<view class="name more-t">{{ item.storeName }}</view>
<view class="price">{{ item.price }}</view>
</view>
<view class="conter">
<mescroll-body ref="mescrollRef" top="0" bottom="0" class='cotent-scroll' :up="upOption" :down="downOption"
@up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">
<view class="list flex flex-wrap">
<view v-for="(item, index) in dataList" :key="index">
<view class="item" @click="goGoods(item.id)">
<image class="cover" :src="item.image" mode="scaleToFill"/>
<view class="name more-t">{{ item.storeName }}</view>
<view class="price">{{ item.price }}</view>
</view>
</view>
</mescroll-body>
</view>
</view>
</mescroll-body>
</view>
<!-- <view class="article-box">-->
<!-- <mescroll-body ref="mescrollRef" top="16rpx" bottom="0" class='cotent-scroll' :up="upOption" :down="downOption"-->
<!-- @up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">-->
<!-- <view class="list flex flex-wrap">-->
<!-- <view v-for="(item, index) in dataList" :key="index">-->
<!-- <view class="item" @click="goGoods(item.id)">-->
<!-- <image class="cover" :src="item.image" mode="scaleToFill"/>-->
<!-- <view class="name more-t">{{ item.storeName }}</view>-->
<!-- <view class="price">{{ item.price }}</view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </mescroll-body>-->
<!-- </view>-->
<!-- </view>-->
</view>
</template>
@@ -77,8 +94,6 @@ export default {
let that = this;
// 此时mescroll会携带page的参数:
let pageNum = mescroll.num; // 页码, 默认从1开始
console.log(pageNum,"test")
let timer = setInterval(() => {
if (that.asideList.length > 0) {
@@ -107,7 +122,7 @@ export default {
});
});
}
},500)
}, 500)
}
})
],
@@ -140,9 +155,18 @@ export default {
.pkg-product-list {
min-height: 100vh;
box-sizing: border-box;
padding-top: 20rpx;
background: #fff;
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 18rpx 0;
background: #fff;
z-index: 9;
}
.search-box {
margin-top: 14rpx;
}
@@ -152,5 +176,93 @@ export default {
top: 472rpx;
height: calc(100vh - 472rpx);
}
.fixed-aside {
position: fixed;
width: 194rpx;
left: 0;
top: 472rpx;
bottom: 0 !important;
box-sizing: border-box;
border-top: 2rpx solid #D2D2D2;
border-right: 2rpx solid #DADCE0;
background-color: #fff;
overflow-y: auto;
overflow-x: hidden;
overflow-scrolling: touch;
.item {
height: 94rpx;
box-sizing: border-box;
border-bottom: 2rpx solid #D2D2D2;
color: #033333;
text {
font-size: 28rpx;
}
}
.active {
border-left: 6rpx solid #FD574B;
color: #FD574B;
font-weight: bold;
}
}
.conter {
margin-left: 194rpx;
margin-top: 472rpx;
border-top: 2rpx solid #D2D2D2;
.empty {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
image {
width: 280rpx;
height: 280rpx;
}
view {
color: gray;
font-size: 24rpx;
}
}
.item {
position: relative;
width: 242rpx;
height: 376rpx;
box-sizing: border-box;
margin: 20rpx 0 0 20rpx;
.cover {
width: 242rpx;
height: 242rpx;
margin-bottom: 8rpx;
border-radius: 8rpx;
}
.name {
color: #333;
font-size: 26rpx;
line-height: 36rpx;
}
.price {
position: absolute;
bottom: 4rpx;
color: #DA0000;
font-size: 28rpx;
line-height: 36rpx;
}
}
.item-store {
height: 336rpx;
}
}
}
</style>