<template> <view class="content"> <view class="header"> <!-- 搜索--> <view class="searchBar"> <icon class="searchIcon" type="search" size="14"></icon> <input class="searchIpt" placeholder="老花镜" confirm-type="search"/> </view> <!-- 筛选栏--> <view class="screenBar"> <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown"> {{ item.text }}<icon type="info" size="14"></icon> </view> <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')"> {{ item.text }}<icon type="info" size="14"></icon> </view> <view v-if="item.current !== 2&&item.current!==4"> <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> </view> </view> </view> </view> <Uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')"> <view class="close"> <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view> </view> </Uni-drawer> <!-- 筛选菜单--> <view class="content-wrap"> <view> <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown> <!-- 商品列表 --> <view class="goods-list"> <view class="product-list"> <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" > <Card :goods = "goods"></Card> </view> </view> <view class="loading-text">{{loadingText}}</view> </view> </view> </view> </view> </template> <script> import UniDrawer from "@/components/uni-drawer/uni-drawer.vue"; import Card from "../../components/Card/Card.vue" import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue"; import data from '@/common/data.js';//筛选菜单数据 export default { components: { 'UniDrawer':UniDrawer, 'HMfilterDropdown':HMfilterDropdown, 'Card':Card }, data() { return { screenItems: [ {current:0,text:'全部',hasIcon:false}, {current:1,text:'销量',hasIcon:false}, {current:2,text:'价格',hasIcon:true}, {current:3,text:'折扣',hasIcon:false}, {current:4,text:'筛选',hasIcon:true}, ], current: 0, showRight: false, indexArr:'', valueArr:'', //商品数据 goodsList:[ { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' } ], loadingText:"正在加载...", filterDropdownValue:[], filterData:[] } }, filters: { outData(value) { return JSON.stringify(value); } }, onLoad: function () { //定时器模拟ajax异步请求数据 // setTimeout(()=>{ // //传入defaultSelected的结构不能错,错了就报错运行异常。 不选中的项目传入null // this.filterDropdownValue = [ // [1,1,0], //第0个菜单选中 一级菜单的第1项,二级菜单的第1项,三级菜单的第3项 // [null,null], //第1个菜单选中 都不选中 // [1], //第2个菜单选中 一级菜单的第1项 // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项,第二个筛选的第1,2,7项,第三个筛选的第1,0项 // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项,第二个筛选的第1项,第三个筛选的第1项 // ]; this.filterData = data; // },100); // 模拟ajax请求子菜单数据。 // setTimeout(()=>{ // this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}]; // },5000) }, methods: { showDrawer(e) { this.$refs[e].open() }, closeDrawer(e) { this.$refs[e].close() }, change(e, type) { this[type] = e }, onClickItem(e) { if (this.current !== e) { this.current = e; } }, dropDown(){ console.log('下拉') }, //接收菜单结果 confirm(e){ this.indexArr = e.index; this.valueArr = e.value; return; console.log('修改菜单'); this.filterData[4].submenu[1] = { "name": "项目2", "submenu": [ ] } } }, onNavigationBarButtonTap(e) { this.showRight = !this.showRight }, //上拉加载, onReachBottom(){ console.log('到底加载') let len = this.goodsList.length; if(len>=30){ this.loadingText="~~到底了~~"; return false; }else{ this.loadingText="正在加载..."; } let end_goods_id = this.goodsList[len-1].goods_id; for(let i=1;i<=10;i++){ let goods_id = end_goods_id+i; let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg',name: '商品名称', originCost:'¥198' ,price: '¥168', slogan:'1235人付款' }; this.goodsList.push(p); } }, } </script> <style lang="scss"> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #F7F6F6; } .header{ display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #F7F6F6; height:178rpx ; width: 100%; z-index: 999; position: fixed; top: 0; left: 0; } .searchBar { width: 670rpx; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 0rpx 16rpx; border: 1px solid #FF6B4A; border-radius: 8rpx; background-color: #ffffff; } .searchIpt { height: 68rpx; width: 670rpx; padding: 16rpx; font-size: 28rpx; box-sizing: border-box; } .screenBar{ width: 670rpx; height: 110rpx; display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: #333333; font-size: 32rpx; } .active{ color: #FF6B4A; } .screenItem{ display: flex; justify-content: center; align-items: center; } .content-wrap{ width: 100%; background-color: #FFFFFF; } .HMfilterDropdown{ top: 178rpx !important; } .goods-list{ padding-top: 286rpx; .loading-text{ width: 100%; display: flex; justify-content: center; align-items: center; height: 30px; color: #979797; font-size: 12px; } .product-list{ width: 92%; padding: 0 4% 3vw 4%; display: flex; justify-content: space-between; flex-wrap: wrap; .product{ width: 48%; margin: 0 0 20rpx 0; background: #FFFFFF; border: 1px solid #F2F2F2; } } } </style>