369 lines
8.4 KiB
Vue
369 lines
8.4 KiB
Vue
<template>
|
|
<view v-if="loaded">
|
|
<view class="top">
|
|
<view class="search">
|
|
<input class="search-input" type="text" focus @input="onInput" :placeholder="nameVal" />
|
|
<view class="search-btn" @click="searchClick">搜索</view>
|
|
</view>
|
|
<view class="tabs">
|
|
<view class="tabs-item" @click="onType">
|
|
{{goodsType[goodsTypeIndex].name || ''}}
|
|
<image class="tabs-item-arrow" src="@/static/icons/search_row.png" mode="" />
|
|
</view>
|
|
<view class="tabs-item" @click="onTabs">
|
|
<span :class="marketType === ''?'':'activess'">{{searchType == 0 ? '价格' : '信用值'}}</span>
|
|
<image class="icon" mode="widthFix"
|
|
:src="require(marketType == 'asc' ? '@/static/icons/market_icon_low.png': '@/static/icons/market_icon_high.png')" />
|
|
</view>
|
|
<view class="tabs-item" @click="onPv">
|
|
<span :class="pvType === ''?'':'activess'">贡献值</span>
|
|
<image class="icon" mode="widthFix"
|
|
:src="require(pvType == 'asc' ? '@/static/icons/market_icon_low.png': '@/static/icons/market_icon_high.png')" />
|
|
</view>
|
|
<view class="tabs-item" v-if="searchType == 0" @click="pageUrl">全部分类
|
|
<image class="tabs-item-arrow" src="@/static/icons/search_row.png" mode="" />
|
|
</view>
|
|
<view class="tabs-item" v-if="searchType == 1" @click="companyOpne">{{companyName}}
|
|
<image class="tabs-item-arrow" src="@/static/icons/search_row.png" mode="" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lists">
|
|
<!-- 优选商品 -->
|
|
<goods-list :list="searchArr" priceType="CNY" v-if="searchType == 0" @on-goods="onGoods" />
|
|
|
|
<!-- 商家 -->
|
|
<industry-list :list="searchArr" v-if="searchType == 1" @on-industry="onOpenWechat" />
|
|
</view>
|
|
|
|
<!-- 分页 -->
|
|
<uni-load-more :status="pageStatus" :iconSize="16" v-if="searchArr.length > 0" />
|
|
|
|
<!-- 企业分类弹出 -->
|
|
<view class="companyBack" :class="companyShow ? 'active' : ''"></view>
|
|
<view class="companyPopup" :class="companyShow ? 'active' : ''">
|
|
<view class="nowrap companyPopup-label" :class="{'show': item.industry_id == companyId}"
|
|
v-for="(item, index) in categoryArr" :key="index" @click="companyList(item.industry_id, index)">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
searchUrl,
|
|
companyCategory,
|
|
randgoodsUrl,
|
|
shopself
|
|
} from '@/apis/interfaces/goods'
|
|
export default {
|
|
data() {
|
|
return {
|
|
nameVal: '',
|
|
searchArr: [],
|
|
searchType: '0', // 分类 0位商品 1为企业
|
|
marketType: 'asc', // 排序
|
|
pvType:'asc',
|
|
categoryArr: [], // 分类数组--企业
|
|
companyId: '', // 分类数组--企业id
|
|
companyName: '选择行业',
|
|
companyShow: false,
|
|
goodsType: [],
|
|
goodsTypeIndex: 0,
|
|
// 分页
|
|
pageStatus: '',
|
|
page: 1,
|
|
loaded:false
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.searchType = this.$Route.query.type
|
|
this.getShopSelf()
|
|
// 商品分类默认关键字 type=0为商品列表; type=1为企业列表
|
|
let wechaUrl = '' // 定义接口来源名称
|
|
if (this.searchType == '0') wechaUrl = 'mall/randgoods' //商品关键字
|
|
if (this.searchType == '1') wechaUrl = 'companies/rand' //商品关键字
|
|
randgoodsUrl(wechaUrl, {
|
|
type: 1
|
|
}).then(res => {
|
|
this.nameVal = res.name
|
|
})
|
|
|
|
// 企业分类数据
|
|
if (this.searchType == '1') {
|
|
companyCategory().then(res => {
|
|
this.categoryArr = res
|
|
})
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
getShopSelf(){
|
|
shopself().then(res => {
|
|
this.goodsType = res
|
|
this.loaded = true
|
|
})
|
|
},
|
|
// 筛选自营和合作企业等条件
|
|
onType(e) {
|
|
uni.showActionSheet({
|
|
itemList: this.goodsType.map((item) => item.name),
|
|
success: e => {
|
|
if(this.goodsTypeIndex !== e.tapIndex){
|
|
this.goodsTypeIndex = e.tapIndex
|
|
this.getList()
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 商品详情
|
|
onGoods(e) {
|
|
this.$Router.push({
|
|
name: 'goodsDetails',
|
|
params: {
|
|
id: e.goods_id
|
|
}
|
|
})
|
|
},
|
|
// 打开微信小程序
|
|
onOpenWechat(e) {
|
|
plus.share.getServices(res => {
|
|
let sweixin = null;
|
|
for (let val of res) {
|
|
if (val.id === 'weixin') {
|
|
sweixin = val
|
|
}
|
|
}
|
|
/** 以此为例子 显示跳转引导页
|
|
* 'index_4'
|
|
* index 跳小程序企业首页
|
|
* 4 企业id
|
|
**/
|
|
if (sweixin != null) {
|
|
sweixin.launchMiniProgram({
|
|
id: e.original_id,
|
|
path: 'pages/login/guide?scene=index_' + e.company_id,
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: '当前环境不支持打开微信小程序',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 列表数据
|
|
getList() {
|
|
// type=0为商品列表; type=1为企业列表
|
|
let wechaUrl = '' // 定义接口来源名称
|
|
if (this.searchType == '0') wechaUrl = 'mall/goods' // 商品列表
|
|
if (this.searchType == '1') wechaUrl = 'companies/lists' //企业列表
|
|
|
|
searchUrl(wechaUrl, {
|
|
page: this.goodsPage,
|
|
order_by: this.marketType,
|
|
industry_id: this.companyId,
|
|
name: this.nameVal,
|
|
is_self:this.goodsType[this.goodsTypeIndex].id,
|
|
pv:this.pvType
|
|
}).then(res => {
|
|
if (res.page.current === 1) {
|
|
this.searchArr = []
|
|
}
|
|
this.searchArr = this.searchArr.concat(res.data)
|
|
this.goodsPage = res.page.current
|
|
this.pageStatus = res.page.has_more ? 'more' : 'noMore'
|
|
})
|
|
},
|
|
|
|
// 输入关键词
|
|
onInput(val) {
|
|
this.nameVal = val.detail.value
|
|
},
|
|
|
|
// 搜索
|
|
searchClick() {
|
|
// 获取列表
|
|
this.getList();
|
|
},
|
|
|
|
// 筛选产品
|
|
onTabs(e) {
|
|
this.marketType = this.marketType == 'asc' ? 'desc' : 'asc'
|
|
this.pvType = ''
|
|
this.getList()
|
|
},
|
|
|
|
onPv(){
|
|
this.pvType = this.pvType == 'asc' ? 'desc' : 'asc'
|
|
this.marketType = ''
|
|
this.getList()
|
|
},
|
|
|
|
// 商品分类跳转
|
|
pageUrl() {
|
|
this.$Router.push({
|
|
name: 'goodsClassify'
|
|
})
|
|
},
|
|
|
|
// 查看企业行业
|
|
companyOpne() {
|
|
this.companyShow = !this.companyShow
|
|
},
|
|
|
|
// 筛选企业列表
|
|
companyList(id, index) {
|
|
this.companyId = id
|
|
this.companyName = this.categoryArr[index].title
|
|
this.companyShow = false
|
|
// 获取全局列表
|
|
this.getList();
|
|
}
|
|
},
|
|
|
|
// 下拉加载
|
|
onReachBottom() {
|
|
if (this.pageStatus == 'more') {
|
|
this.pageStatus = 'loading'
|
|
this.goodsPage += 1
|
|
this.getList()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.top {
|
|
position: fixed;
|
|
top: 0;
|
|
//#ifdef H5
|
|
top: 100rpx;
|
|
//#endif
|
|
left: 0;
|
|
z-index: 9;
|
|
width: 100%;
|
|
height: 180rpx;
|
|
|
|
.search {
|
|
background: white;
|
|
height: 100rpx;
|
|
width: 100%;
|
|
padding: 20rpx $padding 0;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
|
|
.search-input {
|
|
padding: 0 $padding;
|
|
box-sizing: border-box;
|
|
height: 60rpx;
|
|
background-color: #f7f7f7;
|
|
font-size: $title-size-m;
|
|
border-radius: 80rpx;
|
|
flex: 1;
|
|
margin-right: $margin;
|
|
}
|
|
|
|
.search-btn {
|
|
line-height: 60rpx;
|
|
color: #e93340;
|
|
}
|
|
}
|
|
|
|
.tabs {
|
|
background: white;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
height: 80rpx;
|
|
margin-bottom: 20rpx;
|
|
box-sizing: border-box;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
|
|
.tabs-item {
|
|
font-size: $title-size-m;
|
|
color: $text-gray;
|
|
.activess{
|
|
color: $main-color;
|
|
}
|
|
.icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
vertical-align: middle;
|
|
margin-left: $margin / 3;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
&.show {
|
|
color: $text-price;
|
|
}
|
|
|
|
.tabs-item-arrow {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 列表
|
|
.lists {
|
|
padding: 180rpx 0 $padding;
|
|
}
|
|
|
|
// 企业弹出
|
|
.companyBack,
|
|
.companyPopup {
|
|
position: fixed;
|
|
top: 200rpx;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 99;
|
|
}
|
|
|
|
.companyBack {
|
|
height: calc(100% - 200rpx);
|
|
background-color: rgba(0, 0, 0, .2);
|
|
display: none;
|
|
|
|
&.active {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.companyPopup {
|
|
height: 45%;
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
border-top: 1rpx solid #f1f1f1;
|
|
background-color: #FFFFFF;
|
|
padding: $padding - 10 $padding;
|
|
display: none;
|
|
box-sizing: border-box;
|
|
|
|
.companyPopup-label {
|
|
width: calc(25% - 20rpx);
|
|
font-size: $title-size-sm - 2;
|
|
display: inline-block;
|
|
height: 60rpx;
|
|
line-height: 58rpx;
|
|
border: 1rpx solid #F8F8F8;
|
|
background-color: #FFFFFF;
|
|
margin: 10rpx;
|
|
text-align: center;
|
|
|
|
&.show {
|
|
color: #e93340;
|
|
border-color: #efd3d3;
|
|
background-color: #fef9f9;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
display: block;
|
|
}
|
|
}
|
|
</style>
|