<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" data-format="Object" ></HMfilterDropdown> <!-- 商品列表 --> <view class="goods-list"> <view class="product-list"> <view class="product" v-for="(goods) in goodsList" :key="goods.id"> <Card :goods="goods"></Card> </view> </view> <view class="loading-text">{{loadingText}}</view> </view> </view> </view> </view> </template> <script> import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; import Card from "@/components/CommodityCard/CommodityCard.vue"; import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; import data from "@/common/data.js"; //筛选菜单数据 import store from '@/store'; 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: "", loadingText: "~~到底了~~", filterDropdownValue: [], filterData: [], goodsList:[ { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:1 }, { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:2 }, { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:3 }, { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:4 }, { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:1 }, { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:2 }, { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:3 }, { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:4 }, { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:1 }, { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'¥198',price: '¥168', slogan:'1235人浏览',goodType:2 } ], }; }, computed: { // goodsList() { // // 也可以从 getters 获取 // console.log('list', this.$store.state.test.list); // return this.$store.state.test.list; // }, // categoryList(){ // console.log(this.$store.state.categoryOrder.categoryList); // this.filterData = this.$store.state.categoryOrder.categoryList // } }, filters: { outData(value) { return JSON.stringify(value); } }, onLoad: function() { store.dispatch('test/fetch'); store.dispatch('categoryOrder/fetch') // 登陆 // store.dispatch('user/login') //定时器模拟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); }, 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: [] }; } }, }; </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>