You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
249 lines
7.3 KiB
249 lines
7.3 KiB
<template>
|
|
<page-meta :page-style="themeColor"></page-meta>
|
|
<view class="content">
|
|
<view class="head-wrap">
|
|
<!-- 搜索区域 -->
|
|
<view class="search-wrap uni-flex uni-row">
|
|
<searchSelect @search="search" />
|
|
<!-- <view class="flex-item input-wrap">
|
|
<input class="uni-input" maxlength="50" v-model="keyword" @confirm="debounceBtn()" @input="debounceBtn()"
|
|
placeholder="请输入您要搜索的商品名称/编号" />
|
|
<text class="iconfont icon-sousuo3" @tap.stop="debounceBtn()"></text>
|
|
</view> -->
|
|
<view class="iconfont" :class="{ 'icon-apps': isList, 'icon-list': !isList }"
|
|
@click="changeListStyle()"></view>
|
|
</view>
|
|
|
|
<!-- 排序 -->
|
|
<view class="sort-wrap">
|
|
<view class="comprehensive-wrap" :class="{ 'color-base-text': orderType === '' }"
|
|
@click="sortTabClick('')">
|
|
<text :class="{ 'color-base-text': orderType === '' }">综合</text>
|
|
</view>
|
|
|
|
<view :class="{ 'color-base-text': orderType === 'sale_num' }" @click="sortTabClick('sale_num')">
|
|
销量
|
|
</view>
|
|
|
|
<view class="price-wrap" @click="sortTabClick('discount_price')">
|
|
<text :class="{ 'color-base-text': orderType === 'discount_price' }">价格</text>
|
|
<view class="iconfont-wrap">
|
|
<view class="iconfont icon-iconangledown-copy asc" :class="{
|
|
'color-base-text':
|
|
priceOrder === 'asc' && orderType === 'discount_price'
|
|
}"></view>
|
|
<view class="iconfont icon-iconangledown desc" :class="{
|
|
'color-base-text':
|
|
priceOrder === 'desc' && orderType === 'discount_price'
|
|
}"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view :class="{ 'color-base-text': orderType === 'screen' }" class="screen-wrap">
|
|
<text @click="sortTabClick('screen')">筛选</text>
|
|
<view @click="sortTabClick('screen')" class="iconfont-wrap">
|
|
<view class="iconfont icon-shaixuan color-tip"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<mescroll-uni top="180" ref="mescroll" @getData="getGoodsList">
|
|
<block slot="list">
|
|
<view class="goods-list single-column" style="padding: 32rpx 32rpx 0;" :class="{ show: !isList }">
|
|
<horizontalGoodsItem v-for="(item, index) in goodsList" :key="index" :item="item" @click="toDetail">
|
|
</horizontalGoodsItem>
|
|
<u-loadmore v-if="goodsList.length && !isList" :status.sync="loadStatus" :line="true" />
|
|
</view>
|
|
|
|
<view class="rol2_Item" v-if="isList">
|
|
<directionGoodsItem :pageUrlName='pageUrlName' ref="directionGoodsItem"
|
|
v-for="(item, index) in goodsList" :key="index" :item="item" @click="toDetail"
|
|
class="rol2_Item_components"></directionGoodsItem>
|
|
<u-loadmore v-if="goodsList.length && isList" :status.sync="loadStatus" :line="true" />
|
|
</view>
|
|
<view v-if="goodsList.length == 0 && emptyShow">
|
|
<ns-empty text="暂无商品"></ns-empty>
|
|
</view>
|
|
</block>
|
|
</mescroll-uni>
|
|
|
|
<!-- 筛选弹出框 -->
|
|
<uni-drawer :visible="showScreen" mode="right" @close="showScreen = false" class="screen-wrap">
|
|
<view class="title color-tip">筛选</view>
|
|
<scroll-view scroll-y>
|
|
<!-- 包邮 -->
|
|
<!-- <view class="item-wrap">
|
|
<view class="label"><text>是否包邮</text></view>
|
|
<view class="list">
|
|
<uni-tag
|
|
:inverted="true"
|
|
text="包邮"
|
|
:type="isFreeShipping ? 'primary' : 'default'"
|
|
@click="isFreeShipping = !isFreeShipping"
|
|
/>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 价格筛选项 -->
|
|
<view class="item-wrap">
|
|
<view class="label"><text>价格区间(元)</text></view>
|
|
<view class="price-wrap">
|
|
<input class="uni-input" type="digit" v-model="minPrice" placeholder="最低价" />
|
|
<view class="h-line"></view>
|
|
<input class="uni-input" type="digit" v-model="maxPrice" placeholder="最高价" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 生产厂家 -->
|
|
|
|
<view class="item-wrap">
|
|
<view class="item-Manufacturer">生产厂家</view>
|
|
<view class="df aic fw">
|
|
<view v-for="(item, index) in BusinessList" :key="index" v-if="BusinessList.length">
|
|
<view :class="{ manufactorActive: indexa == index }" class="manufactor df aic jcsa"
|
|
@click="Selectmanufacturer(item, index)">
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else class="manufactor df aic jcsa">暂无生产厂家</view>
|
|
</view>
|
|
</view>
|
|
<!-- 品牌筛选项 -->
|
|
<!-- <view class="item-wrap" v-if="brandList.length > 0">
|
|
<view class="label"><text>品牌</text></view>
|
|
<view class="list">
|
|
<view v-for="(item, index) in brandList" :key="index">
|
|
<uni-tag
|
|
:inverted="true"
|
|
:text="item.brand_name"
|
|
:type="item.brand_id == brandId ? 'primary' : 'default'"
|
|
@click="
|
|
brandId == item.brand_id
|
|
? (brandId = 0)
|
|
: (brandId = item.brand_id)
|
|
"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 分类筛选项 -->
|
|
<!-- <view class="category-list-wrap">
|
|
<text class="first">全部分类</text>
|
|
<view class="class-box">
|
|
<view @click="selectedCategory('')" class="list-wrap">
|
|
<text
|
|
:class="{ selected: !categoryId, 'color-base-text': !categoryId }"
|
|
>
|
|
全部
|
|
</text>
|
|
</view>
|
|
<view
|
|
@click="selectedCategory(item.category_id)"
|
|
v-for="(item, index) in categoryList"
|
|
:key="index"
|
|
class="list-wrap"
|
|
>
|
|
<text
|
|
:class="{
|
|
selected: item.category_id == categoryId,
|
|
'color-base-text': item.category_id == categoryId
|
|
}"
|
|
>
|
|
{{ item.category_name }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
</scroll-view>
|
|
|
|
<view class="footer df aic" :class="{ 'safe-area': isIphoneX }">
|
|
<view class="footer-btn " @click="resetData">重置</view>
|
|
<view class="footer-btn1 " @click="screenData">确定</view>
|
|
</view>
|
|
</uni-drawer>
|
|
<loading-cover ref="loadingCover"></loading-cover>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniDrawer from '../components/uni-drawer/uni-drawer.vue';
|
|
// import uniTag from '@/components/uni-tag/uni-tag.vue';
|
|
import list from './public/js/list.js';
|
|
import directionGoodsItem from '@/components/directionGoodsItem.vue';
|
|
import horizontalGoodsItem from '@/components/horizontalGoodsItem.vue';
|
|
export default {
|
|
components: {
|
|
uniDrawer,
|
|
// uniTag,
|
|
directionGoodsItem,
|
|
horizontalGoodsItem
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
mixins: [list],
|
|
onLoad() {},
|
|
methods: {}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './public/css/list.scss';
|
|
</style>
|
|
<style scoped lang="scss">
|
|
::v-deep {
|
|
.uni-tag--primary.uni-tag--inverted {
|
|
background-color: #f5f5f5 !important;
|
|
}
|
|
|
|
.u-icon__icon {
|
|
font-size: 50rpx !important;
|
|
}
|
|
|
|
.bottom {
|
|
flex-direction: column;
|
|
justify-content: center !important;
|
|
align-items: flex-start !important;
|
|
}
|
|
|
|
.bottom div:nth-child(2) {
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.rol2_Item {
|
|
width: 95%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin: 30rpx auto;
|
|
|
|
.rol2_Item_components {
|
|
/* #ifdef MP-WEIXIN */
|
|
width: 49%;
|
|
display: flex;
|
|
/* #endif */
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-Manufacturer {
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.manufactor {
|
|
background-color: rgb(245, 245, 245);
|
|
border-radius: 20rpx;
|
|
margin: 10rpx 22rpx;
|
|
padding: 10rpx 30rpx;
|
|
}
|
|
|
|
.manufactorActive {
|
|
background-color: rgb(33, 187, 243);
|
|
}
|
|
</style>
|