<template> <view class="container"> <view class="content skeleton" v-show="showContent" > <view class="header"> <!-- 搜索--> <view class="searchBar skeleton-rect"> <icon class="searchIcon" type="search" size="14" ></icon> <input v-model="searchText" class="searchIpt" placeholder="老花镜" confirm-type="search" @blur="searchKey" /> </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 skeleton-rect"> <view> <HMfilterDropdown :filterData="categoryList" :defaultSelected="filterDropdownValue" :updateMenuName="true" @search="search" @getList="getList" data-format="Object" ></HMfilterDropdown> <!-- 商品列表 --> <!-- <scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y style="height: 1000px;margin-bottom: 20px;" > --> <view class="goods-list"> <view class="product-list"> <view class="product skeleton-rect" v-for="(goods) in goodsList" :key="goods.id" > <Card :goods="goods" :scrollTop="scrollTop" :viewHeight="viewHeight" ></Card> </view> </view> <view class="loading-text"> <text v-if="isLoading==true">{{loadingText}}</text> <text v-else>{{loadedText}}</text> </view> </view> <!-- </scroll-view> --> </view> </view> </view> <!--引用组件--> <skeleton :show="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF" ></skeleton> </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 skeleton from '@/components/quick-skeleton/quick-skeleton.vue' import store from '@/store' export default { components: { UniDrawer: UniDrawer, HMfilterDropdown: HMfilterDropdown, Card: Card, skeleton: skeleton, }, data() { return { indexArr: '', valueArr: '', isLoading: true, // 初始化加载状态 loadingText: 'data loading...', loadedText: '~~暂无更多数据~~', filterDropdownValue: [], filterData: [], searchText: '', scrollTop: 0, showContent: true, viewHeight: uni.getSystemInfoSync().windowHeight, showSkeleton: false, // 骨架屏显示隐藏 } }, onPageScroll({ scrollTop }) { // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 this.scrollTop = scrollTop }, computed: { goodsList() { // 也可以从 getters 获取 // console.log('index-list=====>',this.$store.state.index.list) const list = this.$store.state.index.list if (list.length == 0) { this.isLoading = false } this.scrollTop = 0.1 return list }, categoryList() { return this.$store.state.index.categoryList }, }, filters: { outData(value) { return JSON.stringify(value) }, }, /** * 页面载入完成后调用子组件的方法生成预加载效果 */ onReady: function() { this.getInitData() }, methods: { async getInitData () { this.showSkeleton = true await Promise.all([store.dispatch('index/category'), store.dispatch('index/list')]) this.showSkeleton = false this.showContent = true }, showDrawer(e) { this.$refs[e].open() }, // 朋友圈设置页面 onShareAppMessage() { let myName = this.$store.state.user.userInfo.nickName if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') { myName = '【神秘人】' } else { myName = '【' + myName + '】' } return { title: 'Hi,' + myName + '送你300元来试戴最新潮流眼镜!', // 默认是小程序的名称(可以写slogan等) path: '/pages/index/index', // imageUrl: '/static/img/details/d1.png', // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 success: function (res) { if (res.errMsg === 'shareAppMessage:ok') { console.log('分享成功!', res) } }, fail: function (res) { if (res.errMsg === 'shareAppMessage:fail cancel') { console.log('fail', '放弃分享') } else if (res.errMsg === 'shareAppMessage:fail') { console.log('fail', '分享失败') } }, } }, getList() { store.dispatch('index/list') this.isLoading = false // TODO:::这里不知道怎么改,请同学帮忙写一下。 // 把data里的isLoading 改为false就可以了 }, // search(params) { // this.$store.index. // }, closeDrawer(e) { this.$refs[e].close() }, change(e, type) { this[type] = e }, onClickItem(e) { if (this.current !== e) { this.current = e } }, dropDown() { console.log('下拉') }, searchKey(e) { const { value: keyword } = e.detail this.keyWords = keyword store.dispatch('index/search', { params: {}, keyword, }) }, // 接收菜单结果 search(e) { const { on, value, selectedData } = e let params = {} const selectedPayload = {} for (const key in selectedData) { if (Object.prototype.hasOwnProperty.call(selectedData, key)) { selectedPayload[key] = selectedData[key].toString() } } if (on[0] === 1) { // 若点击全部 this.searchText = '' store.dispatch('index/list') } else { for (let i = 1; i <= on.length; i++) { // on[0]是全部 if (on[i] === 1) { // 若该选项被选中 if (this.categoryList[i].value === 'filter') { params = { ...selectedPayload, ...params, } } else if (this.categoryList[i].value === 'px') { params.orderby = value[i][0] } else { params[`${this.categoryList[i].value}`] = value[i][0] } } } store.dispatch('index/search', { params, keyword: this.keyWords, }) } }, }, } </script> <style lang="scss"> .content, .container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .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%; min-height: 120rpx; margin: 0 0 20rpx 0; background: #ffffff; border: 1px solid #f2f2f2; } } } </style>