336 lines
8.7 KiB
Vue
336 lines
8.7 KiB
Vue
<template>
|
||
<view>
|
||
<top-bar></top-bar>
|
||
<common-header></common-header>
|
||
<category-bar></category-bar>
|
||
<view class="w-1200">
|
||
<common-swiper page="shop"/>
|
||
<view class="tool-bar">
|
||
<view class="search">
|
||
<el-row :gutter="10" flex justify="center" align="center">
|
||
<el-col :span="8">
|
||
<el-input v-model="keyword" placeholder="请输入商品名称" clearable @clear="getGoodsList()"
|
||
@keyup.enter.native="getGoodsList()" class="w-100"/>
|
||
</el-col>
|
||
<el-col :span="10">
|
||
<view class="flex justify-start items-center">
|
||
<text class="text-25">特产地区：</text>
|
||
<el-cascader :options="options" :props="{label: 'name', value: 'code'}"
|
||
v-model="address"
|
||
@change="getGoodsList()" clearable/>
|
||
</view>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<image src="https://oss.wsdns.cn/20231204/bcc976f4396e437abf19deb11c1f06b4.png"
|
||
mode="widthFix"/>
|
||
</el-col>
|
||
</el-row>
|
||
</view>
|
||
</view>
|
||
<view class="tool-bar">
|
||
<view class="item">分类：</view>
|
||
<view class="item" @click="selectCate(null)">全部</view>
|
||
<view class="item" v-for="(item, index) in categoryList" :key="index"
|
||
@click="selectCate(item._id)"
|
||
:class="[categoryId === item._id? 'active' : '']">{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<div class="m-a w-1200 flex justify-start items-center flex-wrap" v-if="adLoaded">
|
||
<div v-for="(ad, adIndex) in adList" :key="adIndex"
|
||
:style="{width: '600px'}">
|
||
<template v-if="ad.length > 0">
|
||
<el-carousel :height="`100px`" class="m-a">
|
||
<el-carousel-item v-for="(item, index) in ad" :key="index" :style="{width: '600px'}">
|
||
<image @click="vk.navigateTo(`/pages/yellowPage/info?id=${item.companyId}`)"
|
||
class="pointer" :src="item.swiper" mode="aspectFill"
|
||
:style="{width: '100%', height: '100px'}"/>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<view class="goods-list">
|
||
<view class="flex flex-wrap justify-start is-status">
|
||
<view class="w-20p " v-for="(item, index) in goodsList" :key="index">
|
||
<view class="p-20 ">
|
||
<view class="grid-content bg-purple pointer pos-r"
|
||
@click="navTo(`/pages/index/shop/detail?id=${item._id}`)">
|
||
<text class="recommend" v-if="item.recommend === 1">荐</text>
|
||
<image :src="item.cover" mode="aspectFill"/>
|
||
<view class="comments">
|
||
<view class="goods-name" style="height: 60px">
|
||
{{ item.name }}
|
||
</view>
|
||
<view class="goods-price">￥{{ item.amount }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<div class="pagination">
|
||
<el-pagination
|
||
background
|
||
layout="prev, pager, next"
|
||
:total="total"
|
||
:page-size="pageSize"
|
||
@click="getGoodsList"
|
||
>
|
||
</el-pagination>
|
||
</div>
|
||
</view>
|
||
<!-- 现货市场 end -->
|
||
<gap height="50"/>
|
||
<right-bar></right-bar>
|
||
<common-footer></common-footer>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import UGap from "@/uni_modules/vk-uview-ui/components/u-gap/u-gap.vue";
|
||
import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
|
||
import citys from "@/uni_modules/vk-uview-ui/libs/address/citys.json";
|
||
|
||
export default {
|
||
components: {UGap},
|
||
data() {
|
||
return {
|
||
categoryList: [],
|
||
goodsList: [],
|
||
options: [],
|
||
address: [],
|
||
pageIndex: 1,
|
||
pageSize: 20,
|
||
total: 0,
|
||
categoryId: null,
|
||
keyword: null,
|
||
adList: [],
|
||
adNum: 0,
|
||
adLoaded: false
|
||
};
|
||
},
|
||
async onLoad(options) {
|
||
await this.getCategoryList()
|
||
if (options && options.menu) this.currMenu = options.menu
|
||
if (options && options.keyword) this.keyword = options.keyword
|
||
if (options && options.cateName) {
|
||
const cate = this.categoryList.find(item => item.name === options.cateName)
|
||
if (cate) this.categoryId = cate._id
|
||
}
|
||
|
||
this.options = provinces.map(item => {
|
||
item.children = [];
|
||
return item
|
||
})
|
||
this.options.forEach((province, index) => {
|
||
citys[index].forEach(city => {
|
||
this.options[index].children.push(city)
|
||
})
|
||
})
|
||
|
||
console.error(this.options)
|
||
|
||
this.getGoodsList()
|
||
},
|
||
methods: {
|
||
menuSelect(e) {
|
||
this.currMenu = e
|
||
},
|
||
navTo(url) {
|
||
vk.navigateTo(url);
|
||
},
|
||
async getCategoryList() {
|
||
const res = await vk.callFunction({
|
||
url: 'client/goods/category/pub/getList'
|
||
})
|
||
this.categoryList = res.rows
|
||
},
|
||
getGoodsList(pageIndex = 1) {
|
||
vk.callFunction({
|
||
url: 'client/goods/list/pub/getList',
|
||
data: {
|
||
pageIndex,
|
||
pageSize: this.pageSize,
|
||
city: this.address.length > 1 ? this.address[1] : null,
|
||
parentId: this.categoryId,
|
||
keyword: this.keyword
|
||
}
|
||
}).then(res => {
|
||
this.goodsList = res.rows
|
||
this.getAdList()
|
||
})
|
||
},
|
||
selectCate(cateId) {
|
||
if (this.categoryId === cateId) this.categoryId = null
|
||
else this.categoryId = cateId
|
||
this.getGoodsList()
|
||
},
|
||
async getAdList() {
|
||
this.adList = [[], [], [], [], []]
|
||
if (this.address.length === 0) {
|
||
if (!this.categoryId) {
|
||
for (let i = 0; i < 5; i++) {
|
||
const res = await vk.callFunction({
|
||
url: 'client/ad/pub/getList',
|
||
data: {
|
||
adKey: 27 + i
|
||
}
|
||
})
|
||
if (res.data) this.adList[i] = res.data
|
||
}
|
||
} else {
|
||
const cate = this.categoryList.find(item => item._id === this.categoryId)
|
||
if (cate.ad && cate.ad.length > 0) {
|
||
cate.ad.forEach(item => {
|
||
this.adList[item.adKey - 27].push(item)
|
||
})
|
||
}
|
||
}
|
||
} else {
|
||
for (let i = 0; i < 5; i++) {
|
||
const res = await vk.callFunction({
|
||
url: 'client/ad/pub/getList',
|
||
data: {
|
||
adKey: 27 + i,
|
||
region: this.address[0]
|
||
}
|
||
})
|
||
if (res.data) this.adList[i] = res.data
|
||
// rows.forEach(item => {
|
||
// if (item.businessCard.album && item.businessCard.album.length > 0) {
|
||
// this.adList[i].push({
|
||
// swiper: Array.isArray(item.businessCard.album) ? item.businessCard.album[0] : item.businessCard.album,
|
||
// companyId: item._id
|
||
// })
|
||
// }
|
||
// })
|
||
}
|
||
}
|
||
this.adNum = 0
|
||
for (let i = 0; i < 5; i++) {
|
||
if (this.adList[i].length > 0) {
|
||
this.adNum += 1
|
||
}
|
||
}
|
||
this.adLoaded = true
|
||
this.$forceUpdate()
|
||
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.w-1200 {
|
||
width: 1200px;
|
||
margin: 20px auto;
|
||
background-color: #fff;
|
||
|
||
.test {
|
||
height: 50px;
|
||
color: #ffffff;
|
||
font-size: 18px;
|
||
background-color: #bf2b28;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
text {
|
||
margin: 0 20px;
|
||
}
|
||
}
|
||
|
||
.tool-bar {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding: 20px;
|
||
font-size: 16px;
|
||
|
||
.search {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.item {
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.item:hover, .active {
|
||
color: #bf2b28;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.wrap {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.goods-list {
|
||
width: 1200px;
|
||
margin: 20px auto;
|
||
|
||
.grid-content {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
width: 100%;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
flex-direction: column;
|
||
|
||
.comments {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: start;
|
||
align-items: flex-start;
|
||
line-height: 2em;
|
||
width: 100%;
|
||
|
||
.goods-name {
|
||
font-size: 16px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.goods-price {
|
||
color: #bf2b28;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bg-purple {
|
||
border-top: 1px solid #f3f3f3;
|
||
border-right: 1px solid #f3f3f3;
|
||
|
||
image {
|
||
width: 180px;
|
||
height: 180px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pagination {
|
||
width: 1200px;
|
||
margin: 20px auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.recommend {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
padding: 5px;
|
||
background-color: #bf2b28;
|
||
color: white;
|
||
font-size: 30rpx;
|
||
z-index: 999;
|
||
}
|
||
</style>
|