321 lines
7.3 KiB
Vue
321 lines
7.3 KiB
Vue
<template>
|
||
<view>
|
||
<top-bar></top-bar>
|
||
<common-header></common-header>
|
||
<category-bar></category-bar>
|
||
|
||
<!-- <view class="page-nav">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||
<el-breadcrumb-item><navigator url="/pages/spot/goods/goods">现货市场</navigator></el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</view> -->
|
||
|
||
<view class="carousel">
|
||
<el-carousel height="170px">
|
||
<el-carousel-item v-for="item in 4" :key="item">
|
||
<image class="carousel-img"
|
||
src="http://jyx.gxwebsoft.com/uploads/20210506/600fc93e6b85324b3ea1373ee264290d.jpg"
|
||
mode="aspectFill"></image>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
<view class="goods-options">
|
||
<el-row class="">
|
||
<el-button @click="toRelease" type="primary" round>发布/编辑我的现货</el-button>
|
||
<!-- <el-button type="primary" round plain>我发布的现货</el-button> -->
|
||
</el-row>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 筛选表单 -->
|
||
<view class="filter-outer">
|
||
<el-form @submit.native.prevent label-width="80px">
|
||
<el-form-item label="关键词">
|
||
<el-input @keyup.enter.native="search" clearable placeholder="输入关键字搜索" v-model="keyword">
|
||
<el-button @click="search(1)" type="primary" slot="append" icon="el-icon-search"></el-button>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="分类">
|
||
<el-tabs>
|
||
<el-tab-pane v-for="(item, index) in categoryTreeData" :label="item.name" :key="item._id">
|
||
<el-checkbox-group v-model="checkCategoryList[index]">
|
||
<el-checkbox v-for="(citem, cindex) in item.children" :label="citem"
|
||
:key="cindex">{{citem.name}}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-tab-pane>
|
||
|
||
</el-tabs>
|
||
</el-form-item>
|
||
<el-form-item label="城市">
|
||
<el-checkbox-group v-model="checkProvinceList">
|
||
<!-- <el-checkbox :label="{code:0,name: '全国'}">全国</el-checkbox> -->
|
||
<el-checkbox :checked="cindex == 0" v-for="(citem, cindex) in provinceData" :label="citem"
|
||
:key="cindex">{{citem.name}}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item label="已选">
|
||
<view class="tags">
|
||
<el-tag v-for="(item, index) in checkCategoryArr" :key="index">{{item.name}}</el-tag>
|
||
</view>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
</view>
|
||
|
||
<!-- 商品列表 -->
|
||
<view class="goods-list">
|
||
<view v-for="(item, index) in goodsData.rows" :key="index" class="goods">
|
||
<view class="goods-title">{{item.name}}</view>
|
||
<view class="goods-stock">库存：{{item.stock}}吨</view>
|
||
<view class="goods-address">供货地：{{item.addressStr}}</view>
|
||
<view class="goods-image">
|
||
<image :src="item.user.businessCard.logo" mode="aspectFit"></image>
|
||
</view>
|
||
<view v-if="item.user.accountType == 1" class="goods-company">{{item.user.person.personName}}</view>
|
||
<view v-if="item.user.accountType == 2" class="goods-company">{{item.user.company.companyName}}</view>
|
||
<el-button @click="vk.navigateTo('/pages/spot/goods/detail?id=' + item._id);" type="primary" plain round size="small">立即查看</el-button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="paginatio">
|
||
<el-pagination
|
||
@current-change="search"
|
||
background
|
||
layout="prev, pager, next"
|
||
:total="goodsData.total">
|
||
</el-pagination>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
|
||
provinces.unshift({
|
||
code: 9999,
|
||
name: '全国'
|
||
})
|
||
export default {
|
||
data() {
|
||
return {
|
||
categoryTreeData: [],
|
||
provinceData: provinces,
|
||
checkCategoryList: [],
|
||
checkProvinceList: [],
|
||
keyword: '',
|
||
goodsData: {
|
||
total: 0,
|
||
rows: []
|
||
}
|
||
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.search(1)
|
||
vk.callFunction({
|
||
url: 'client/spot/category/pub/getTree',
|
||
title: '请求中...',
|
||
data: {
|
||
|
||
},
|
||
success: (data) => {
|
||
this.categoryTreeData = data.rows
|
||
for (var i = 0; i < data.rows.length; i++) {
|
||
this.checkCategoryList.push([])
|
||
}
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
toRelease() {
|
||
|
||
if (!vk.getVuex('$user.userInfo.fadadaConfirm')) {
|
||
this.$confirm('您尚未认证, 是否前往认证?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.getCertUrl()
|
||
})
|
||
}else if(vk.pubfn.isNull(vk.getVuex('$user.userInfo.businessCard'))) {
|
||
this.$confirm('请完善名片信息', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
vk.navigateTo('/pages/user/user?menu=business-card');
|
||
})
|
||
}else {
|
||
uni.navigateTo({
|
||
url: '/pages/spot/release/release'
|
||
})
|
||
}
|
||
|
||
|
||
|
||
|
||
},
|
||
search(pageIndex) {
|
||
const categoryIds = []
|
||
this.checkCategoryList.forEach(item => {
|
||
item.forEach(sitem => {
|
||
categoryIds.push(sitem._id)
|
||
})
|
||
})
|
||
|
||
let provinceCodes = this.checkProvinceList.map(item => item.code)
|
||
|
||
if (provinceCodes.includes(9999)) {
|
||
provinceCodes = []
|
||
}
|
||
|
||
vk.callFunction({
|
||
url: 'client/spot/goods/pub/getList',
|
||
data: {
|
||
pageIndex: pageIndex,
|
||
pageSize: 20,
|
||
keyword: this.keyword,
|
||
categoryIds: categoryIds,
|
||
provinceCodes: provinceCodes
|
||
|
||
},
|
||
success: (data) => {
|
||
console.log('data: ',data);
|
||
data.rows.forEach(item => {
|
||
try {
|
||
item.addressStr = item.address.province.name + "-" + item.address.city.name + "-" + item.address.area.name
|
||
} catch(err){
|
||
item.addressStr = ""
|
||
}
|
||
})
|
||
this.goodsData = data
|
||
}
|
||
});
|
||
},
|
||
},
|
||
computed: {
|
||
checkCategoryArr() {
|
||
let arr = []
|
||
this.checkCategoryList.forEach(item => {
|
||
arr.push(...item)
|
||
})
|
||
|
||
this.checkProvinceList.forEach(item => {
|
||
arr.push({
|
||
...item
|
||
})
|
||
})
|
||
return arr
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.carousel {
|
||
width: 1200px;
|
||
margin: 20px auto;
|
||
}
|
||
|
||
.carousel-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.goods-options {
|
||
background-color: #FFFFFF;
|
||
padding: 20px;
|
||
}
|
||
|
||
.filter-outer {
|
||
width: 1200px;
|
||
margin: 20px auto;
|
||
background-color: #FFFFFF;
|
||
padding: 20px;
|
||
}
|
||
|
||
.tags {
|
||
display: flex;
|
||
|
||
.el-tag {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
|
||
.goods-list {
|
||
width: 1200px;
|
||
margin: 20px auto;
|
||
display: flex;
|
||
|
||
}
|
||
|
||
.goods {
|
||
width: 217px;
|
||
height: 280px;
|
||
background-color: #FFFFFF;
|
||
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
|
||
text-align: center;
|
||
margin-right: 20px;
|
||
margin-bottom: 25px;
|
||
|
||
&-title {
|
||
font-size: 15px;
|
||
color: #101010;
|
||
height: 62px;
|
||
padding-top: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
&-stock {
|
||
font-size: 12px;
|
||
color: #BD3124;
|
||
}
|
||
|
||
&-address {
|
||
font-size: 12px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
&-image {
|
||
width: 200px;
|
||
height: 70px;
|
||
margin: 0 auto;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
&-company {
|
||
color: #4F4F4F;
|
||
font-size: 14px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
&-buy {
|
||
width: 108px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
color: rgba(169, 41, 36, 1);
|
||
font-size: 13px;
|
||
text-align: center;
|
||
font-family: Roboto;
|
||
border: 1px solid rgba(169, 41, 36, 1);
|
||
margin: 0 auto;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.paginatio{
|
||
float: none;
|
||
width: 1200px;
|
||
margin: 20px auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
</style>
|