Feat(时令尝鲜):接口对接
This commit is contained in:
+143
-31
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user