首页 分类列表
This commit is contained in:
@@ -15,7 +15,7 @@
|
||||
<view class="therecontent_box_itembox">
|
||||
<view class="therecontent_box_itembox_item flex-between" v-for="(item,index) in todayList.todayList"
|
||||
:key="item">
|
||||
<image src="@/static/avatar.png" mode="aspectFill"></image>
|
||||
<image :src="item.image" mode="aspectFill"></image>
|
||||
<view class="therecontent_box_itembox_itemview">
|
||||
<view class="therecontent_box_itembox_itemviewone">
|
||||
{{item.productName}}
|
||||
@@ -50,7 +50,7 @@
|
||||
</view>
|
||||
<view class="therecontent_box_itembox">
|
||||
<view class="therecontent_box_itembox_item flex-between" v-for="(item,index) in salesList.hotList" :key="item">
|
||||
<image src="@/static/avatar.png" mode="aspectFill"></image>
|
||||
<image :src="item.image" mode="aspectFill"></image>
|
||||
<view class="therecontent_box_itembox_itemview">
|
||||
<view class="therecontent_box_itembox_itemviewone flex-start">
|
||||
<view class="therecontent_box_itembox_itemviewoneafter">
|
||||
|
||||
@@ -49,10 +49,12 @@
|
||||
<!-- 今日上线 -->
|
||||
<todaylist :todayList='hometoplist.todayList' :salesList='hometoplist.salesList'></todaylist>
|
||||
<!-- 类目 -->
|
||||
<view class="fourcontent flex-between" @click="viewHistory">
|
||||
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu" :key="index">
|
||||
<view class="fourcontent flex-between">
|
||||
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu" :key="index"
|
||||
@click="viewHistory(item)">
|
||||
<text>{{item.name}}</text>
|
||||
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333" size="16"></u-icon>
|
||||
<u-icon v-if="item.isChild" style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
|
||||
size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -172,10 +174,35 @@
|
||||
<!-- 吸顶 -->
|
||||
<view class="fourcontent flex-between" style="padding: 28rpx 0 28rpx 28rpx">
|
||||
<view class="fourcontent_item flex-start" v-for="(item,index) in hometoplist.menu"
|
||||
:key="index">
|
||||
:key="index" @click="viewHistory(item)">
|
||||
<text>{{item.name}}</text>
|
||||
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
|
||||
size="16"></u-icon>
|
||||
<u-icon v-if="item.isChild" style="margin-left: 8rpx;" name="arrow-down-fill"
|
||||
color="#333333" size="16"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 显示下拉字段 -->
|
||||
<view class="sixcontent" v-if="clickhometoplistmenulist.detail">
|
||||
<view class="sixcontentitemP flex-colum-start">
|
||||
<view class="sixcontentitemP_item"
|
||||
:class="index == clickdetailindex ?'sixcontentitemP_itemactive':''"
|
||||
v-for="(item,index) in clickhometoplistmenulist.detail" :key="index"
|
||||
@click="clickdetail(item,index)">
|
||||
{{item.label}}
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="sixcontent" v-if="clickhometoplistmenulist.districts">
|
||||
<view class="sixcontentitemP flex-start">
|
||||
<view class="sixcontentitemP_itembox flex-colum-start">
|
||||
<view class="sixcontentitemP_itemone"
|
||||
:class="index == clickdetailindex ?'sixcontentitemP_itemactive':''"
|
||||
v-for="(item,index) in clickhometoplistmenulist.districts" :key="index"
|
||||
@click="clickdetail(item,index)">
|
||||
{{item.name}}
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -205,12 +232,14 @@
|
||||
keyword: '',
|
||||
current: 0,
|
||||
opacity: false,
|
||||
showproductlist: false, //弹成
|
||||
showproductlist: true, //弹成
|
||||
clickdetailindex: 0, //默认下拉选项第一个
|
||||
hometoplist: { //上面数据
|
||||
carousel: [],
|
||||
district: []
|
||||
},
|
||||
homelist: [], //下面数据
|
||||
clickhometoplistmenulist: {}, //下拉点击的数据
|
||||
form: {
|
||||
address: '', //地址
|
||||
type: '', //品类
|
||||
@@ -219,7 +248,6 @@
|
||||
page: 1, //页数
|
||||
size: 10, //页容量
|
||||
status: 'loadmore'
|
||||
|
||||
}
|
||||
};
|
||||
},
|
||||
@@ -242,10 +270,14 @@
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
async onLoad() {
|
||||
setTimeout(() => {
|
||||
this.GetTop()
|
||||
}, 1000)
|
||||
let res = await this.apix.locationdistrict({
|
||||
keywords: '西安市'
|
||||
})
|
||||
this.clickhometoplistmenulist = res.data[0].districts
|
||||
},
|
||||
onReachBottom() {
|
||||
this.onLoadhome()
|
||||
@@ -315,12 +347,30 @@
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
async viewHistory() {
|
||||
this.showproductlist = true
|
||||
// 点击元素到指定位置
|
||||
async viewHistory(item) {
|
||||
if (item.dictName == 'allCity') {
|
||||
let res = await this.apix.locationdistrict({
|
||||
keywords: '西安市'
|
||||
})
|
||||
this.clickhometoplistmenulist = res.data[0]
|
||||
} else {
|
||||
this.clickhometoplistmenulist = item
|
||||
}
|
||||
uni.pageScrollTo({
|
||||
scrollTop: this.Topdistance + 1,
|
||||
duration: 300
|
||||
});
|
||||
if (item.isChild) {
|
||||
this.showproductlist = true
|
||||
} else {
|
||||
|
||||
}
|
||||
},
|
||||
// 选择元素的指定选项
|
||||
clickdetail(item, index) {
|
||||
this.clickdetailindex = index
|
||||
this.showproductlist = false
|
||||
},
|
||||
}
|
||||
|
||||
@@ -466,6 +516,48 @@
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontent {
|
||||
.sixcontentitemP {
|
||||
padding: 0 32rpx 28rpx 32rpx;
|
||||
max-height: 600rpx;
|
||||
overflow: auto;
|
||||
|
||||
.sixcontentitemP_itembox {
|
||||
.sixcontentitemP_itemone {
|
||||
flex: 1;
|
||||
margin-top: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.sixcontentitemP_itemone:nth-child(1) {
|
||||
margin-top: 0rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sixcontentitemP_item:nth-child(1) {
|
||||
margin-top: 0rpx;
|
||||
}
|
||||
|
||||
.sixcontentitemP_item {
|
||||
margin-top: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.sixcontentitemP_itemactive {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fivecontent {
|
||||
padding: 0 28rpx;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user