548 lines
14 KiB
Vue
548 lines
14 KiB
Vue
<template>
|
|
<view class="supplier" :style="{height: winHeight + 'px' }">
|
|
<!-- <view class="head-wrapper" :style="'top:'+statusBarHeight">
|
|
<view class="head-menu">
|
|
<view class='iconfont icon-xiangzuo' @click="returns"></view>
|
|
<view class="iconfont icon-shouye4" @click="goHome"></view>
|
|
</view>
|
|
</view> -->
|
|
<view class="header_warpper">
|
|
<!-- <u-swiper :list="swiperList" keyName="img" :autoplay="true" height="491.23rpx"></u-swiper> -->
|
|
<!-- <view class="head_search flex_a_c">
|
|
<view class="search_content flex_a_c_j_sb">
|
|
<view class="flex_a_c">
|
|
<view class="iconfont icon-sousuo"></view>
|
|
<input type="text" v-model="sotreParam.keyword" placeholder="请搜索">
|
|
</view>
|
|
<button class="search_btn" @click="searchStoreMerchant">搜索</button>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
|
|
<view class="con-box">
|
|
<view class="left_classify">
|
|
<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" scroll-with-animation='true'>
|
|
<block v-for="(item,index) in merList" :key="item.merchant_category_id">
|
|
<view class="clify_item" :class="activeTwo === index ? 'pictch' : ''" @click="classifyClick(item, index)">
|
|
{{ item.category_name }}
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="right_storee">
|
|
<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" scroll-with-animation='true'
|
|
@scrolltolower="scrolltolower" class="my-scroll-view">
|
|
<image class="banner" :src="src" mode="aspectFit"></image>
|
|
<view style="background-color: #fff;width: 100%;">
|
|
<view class="tabs_box flex_a_c_j_sb">
|
|
<view v-for="(item,index) in tabsList" :key="index" class="flex_a_c" :class="active==index?'active':''">
|
|
<view @click="tabsChange(index)">{{item}}</view>
|
|
<!-- <view class="iconfont icon-shaixuan" v-if="index==3"></view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<block v-for="(item,index) in storeMerchant" :key="index">
|
|
<storeCard :store_item="item" :category="item.category_name" :isDetail="isDetail"></storeCard>
|
|
</block>
|
|
<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
|
|
:nomore-text="nomoreText" />
|
|
</scroll-view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- <u-action-sheet :show="show" @close="close" @select="select" :actions="actions" :closeOnClickOverlay="true">
|
|
</u-action-sheet>
|
|
<rightSlider v-if="rightBox" :status="rightBox" :merList="merList" :storeTypeArr="storeTypeArr" @confirm="confirm"
|
|
@close="rightSliderClose"></rightSlider> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
|
import storeCard from './component/shop_card.vue'
|
|
import rightSlider from './component/rightSlider';
|
|
import { getDiy } from '@/api/api.js'
|
|
import { storeMerchantList, merClassifly, getStoreTypeApi } from '@/api/store.js'
|
|
import { storeClassifyDel } from '@/api/product.js'
|
|
export default {
|
|
components: {
|
|
rightSlider,
|
|
storeCard
|
|
},
|
|
data() {
|
|
return {
|
|
statusBarHeight: statusBarHeight, //系统导航条高度
|
|
swiperList: [],
|
|
activeTwo: 0,
|
|
winHeight: 0,
|
|
num: '',
|
|
status: 'loadmore',
|
|
loadingText: '努力加载中',
|
|
loadmoreText: '轻轻上拉',
|
|
nomoreText: '我也是有底线的~~',
|
|
show: false,
|
|
actions: [{
|
|
name: '选项1',
|
|
},
|
|
{
|
|
name: '选项2',
|
|
},
|
|
{
|
|
name: '选项3',
|
|
}, {
|
|
name: '选项4',
|
|
},
|
|
{
|
|
name: '选项5',
|
|
},
|
|
],
|
|
src: 'https://cdn.uviewui.com/uview/album/1.jpg',
|
|
search: '',
|
|
tabsList: ['综合排序', '销量优先', '好评'],
|
|
active: 0,
|
|
storeMerchant: [],
|
|
storeList: {
|
|
page: 1,
|
|
limit: 10
|
|
},
|
|
StoreType: [],
|
|
rightBox: false,
|
|
merList: [], //商户分类
|
|
storeTypeArr: [], //店铺类型
|
|
sotreParam: {
|
|
keyword: '',
|
|
page: 1,
|
|
limit: 10,
|
|
order: 'order', // 顺序
|
|
category_id: '', // 分类
|
|
type_id: '', // 类型
|
|
street_id: '' // 位置
|
|
},
|
|
isDetail: 2
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.sotreParam.street_id = e.street_id
|
|
if (e.type_id) {
|
|
this.sotreParam.type_id = e.type_id
|
|
}
|
|
if (e.isDetail) this.isDetail = e.isDetail
|
|
this.getStoreMerchant()
|
|
this.getStore()
|
|
this.getClassfication()
|
|
this.getStoreType()
|
|
this.getBanner()
|
|
uni.getSystemInfo({
|
|
success: (res) => {
|
|
this.winHeight = res.windowHeight
|
|
this.$set(this, 'winHeight', res.windowHeight)
|
|
},
|
|
});
|
|
},
|
|
onShow() {},
|
|
methods: {
|
|
// 后退
|
|
returns: function() {
|
|
uni.navigateBack()
|
|
},
|
|
// 首页
|
|
goHome() {
|
|
uni.switchTab({
|
|
url: '/pages/home/index'
|
|
});
|
|
},
|
|
async getBanner() {
|
|
const { data } = await getDiy({ id: 0 })
|
|
if (data.value['1683638943100000']) {
|
|
this.swiperList = data.value['1683638943100000'].swiperConfig.list
|
|
} else {
|
|
this.swiperList = data.value['1683875164005000'].swiperConfig.list
|
|
}
|
|
},
|
|
classifyClick(item, index) {
|
|
this.activeTwo = index
|
|
this.storeMerchant = []
|
|
this.sotreParam.page = 1
|
|
this.sotreParam.category_id = item.merchant_category_id
|
|
this.getStoreMerchant();
|
|
},
|
|
// 获取商户分类
|
|
getClassfication: function() {
|
|
let temp = []
|
|
merClassifly()
|
|
.then(res => {
|
|
temp = res.data.map(item => {
|
|
return {
|
|
...item,
|
|
check: false
|
|
}
|
|
})
|
|
if (this.sotreParam.category_id.length > 0) {
|
|
this.sotreParam.category_id.forEach((ids, index) => {
|
|
temp.forEach(el => {
|
|
if (ids == el.merchant_category_id) {
|
|
el.check = true
|
|
}
|
|
})
|
|
})
|
|
}
|
|
temp.unshift({
|
|
category_name: '全部',
|
|
merchant_category_id: ''
|
|
})
|
|
this.merList = temp
|
|
})
|
|
.catch(res => {
|
|
this.$util.Tips({
|
|
title: res
|
|
});
|
|
});
|
|
},
|
|
// 获取店铺类型
|
|
getStoreType: function() {
|
|
let temp = []
|
|
getStoreTypeApi()
|
|
.then(res => {
|
|
temp = res.data.map(item => {
|
|
return {
|
|
...item,
|
|
check: false
|
|
}
|
|
})
|
|
if (this.sotreParam.type_id.length > 0) {
|
|
this.sotreParam.type_id.forEach((ids, index) => {
|
|
temp.forEach(el => {
|
|
if (ids == el.mer_type_id) {
|
|
el.check = true
|
|
}
|
|
})
|
|
})
|
|
}
|
|
this.storeTypeArr = temp
|
|
})
|
|
.catch(res => {
|
|
this.$util.Tips({
|
|
title: res
|
|
});
|
|
});
|
|
},
|
|
|
|
// 组件确定
|
|
confirm(data) {
|
|
let arr1 = [],
|
|
arr2 = []
|
|
if (data.storeTypeArr.length == 0) {
|
|
this.sotreParam.type_id = ''
|
|
} else {
|
|
data.storeTypeArr.forEach(item => {
|
|
arr1.push(item.mer_type_id)
|
|
})
|
|
this.sotreParam.type_id = arr1.toString();
|
|
}
|
|
if (data.merList.length == 0) {
|
|
this.sotreParam.category_id = ''
|
|
} else {
|
|
data.merList.forEach(item => {
|
|
arr2.push(item.merchant_category_id)
|
|
})
|
|
this.sotreParam.category_id = arr2.toString();
|
|
}
|
|
this.rightBox = data.status
|
|
this.loadend = false;
|
|
this.$set(this.sotreParam, 'page', 1)
|
|
this.storeList = [];
|
|
this.getStoreMerchant();
|
|
},
|
|
// 组件关闭
|
|
rightSliderClose() {
|
|
this.rightBox = false
|
|
},
|
|
//获取商户
|
|
async getStoreMerchant() {
|
|
const res = await storeMerchantList(this.sotreParam)
|
|
this.storeMerchant.push(...res.data.list)
|
|
// console.log(this.storeMerchant);
|
|
if (res.data.list.length < 10) this.status = 'nomore'
|
|
},
|
|
async searchStoreMerchant() {
|
|
this.storeMerchant = []
|
|
const res = await storeMerchantList(this.sotreParam)
|
|
this.storeMerchant = res.data.list
|
|
},
|
|
navigator(id) {
|
|
uni.navigateTo({
|
|
url: `/pages/nongKe/supply_chain/merchant?id=${id}`
|
|
})
|
|
},
|
|
//获取商户类型分类
|
|
async getStore() {
|
|
const res = await merClassifly()
|
|
for (let i = 0; i < res.data.length; i++) {
|
|
this.actions[i].name = res.data[i].category_name
|
|
this.actions[i].index = res.data[i].merchant_category_id
|
|
}
|
|
},
|
|
tabsChange(i) {
|
|
this.active = i
|
|
// this.sotreParam.category_id = ''
|
|
// this.sotreParam.type_id = ''
|
|
this.sotreParam.page = 1
|
|
this.storeMerchant = []
|
|
if (this.active == 0) {
|
|
this.sotreParam.order = ''
|
|
this.getStoreMerchant()
|
|
}
|
|
if (this.active == 1) {
|
|
this.sotreParam.order = 'sales'
|
|
this.getStoreMerchant()
|
|
}
|
|
if (this.active == 2) {
|
|
this.sotreParam.order = 'rate'
|
|
this.getStoreMerchant()
|
|
}
|
|
//筛选
|
|
if (this.active == 3) {
|
|
this.status = 'nomore'
|
|
this.rightBox = true
|
|
// this.sotreParam.order = ''
|
|
// this.getStoreMerchant()
|
|
}
|
|
},
|
|
close() {
|
|
this.show = false
|
|
},
|
|
select(e) {
|
|
// console.log('select', e);
|
|
|
|
},
|
|
scrolltolower() {
|
|
if (this.status != 'nomore') {
|
|
this.sotreParam.page++
|
|
this.getStoreMerchant()
|
|
}
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
//如果状态为nomore 则不能在触发上拉事件
|
|
if (this.status != 'nomore') {
|
|
this.sotreParam.page++
|
|
this.getStoreMerchant()
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
this.storeMerchant = []
|
|
this.getStoreMerchant()
|
|
uni.stopPullDownRefresh()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.supplier {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.header_warpper {
|
|
width: 100%;
|
|
}
|
|
|
|
.head_search {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
height: 108.77rpx;
|
|
|
|
.search_content {
|
|
margin: 0 auto;
|
|
width: 694.74rpx;
|
|
height: 66.67rpx;
|
|
padding: 2px 2px 2px 21.05rpx;
|
|
border: 1px solid $uni-theme-color;
|
|
border-radius: 100px;
|
|
|
|
.icon-sousuo {
|
|
font-weight: bold;
|
|
color: $uni-theme-color;
|
|
margin-right: 17.54rpx;
|
|
}
|
|
|
|
.search_btn {
|
|
color: #fff;
|
|
width: 135.09rpx;
|
|
height: 59.65rpx;
|
|
line-height: 59.65rpx;
|
|
background: $uni-theme-bg-color;
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.con-box {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
margin-top: 28.07rpx;
|
|
}
|
|
|
|
.left_classify {
|
|
width: 192.98rpx;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
overflow: hidden;
|
|
|
|
.clify_item {
|
|
width: 192.98rpx;
|
|
height: 112.28rpx;
|
|
text-align: center;
|
|
line-height: 112.28rpx;
|
|
}
|
|
|
|
.pictch {
|
|
background: #fff;
|
|
font-weight: 700;
|
|
position: relative;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
content: '';
|
|
display: inline-block;
|
|
width: 3px;
|
|
height: 100%;
|
|
background-color: #F84221;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right_storee {
|
|
flex: 1;
|
|
width: 557.89rpx;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
overflow: hidden;
|
|
padding: 0 12.28rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.banner {
|
|
width: 100%;
|
|
height: 131.58rpx;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.tabs_box {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
height: 80.7rpx;
|
|
border-top: 1px solid #E7E6E4;
|
|
background-color: #fff;
|
|
padding: 0 21.05rpx;
|
|
}
|
|
|
|
.active {
|
|
font-weight: 700;
|
|
color: #F84221;
|
|
}
|
|
|
|
.item_cont {
|
|
width: 100%;
|
|
// height: 147.37rpx;
|
|
padding: 17.54rpx 28.07rpx;
|
|
background-color: #fff;
|
|
margin-top: 28.07rpx;
|
|
border-radius: 8px;
|
|
|
|
.item-left {
|
|
.img {
|
|
width: 98.25rpx;
|
|
height: 98.25rpx;
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
|
|
.item-right {
|
|
margin-left: 21.05rpx;
|
|
|
|
.store_name {
|
|
margin-bottom: 8.77rpx;
|
|
|
|
.sales_volume {
|
|
font-size: 28.07rpx;
|
|
color: #666;
|
|
margin-left: 52.63rpx;
|
|
}
|
|
|
|
.name {
|
|
flex: 1;
|
|
width: 245.61rpx;
|
|
font-size: 31.58rpx;
|
|
// font-weight: bold;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.msg {
|
|
|
|
.category_name {
|
|
color: $uni-theme-color;
|
|
}
|
|
|
|
.scope {
|
|
flex: 1;
|
|
width: 350.88rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
&::before {
|
|
content: '|';
|
|
margin: 0 10.53rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.head-wrapper {
|
|
z-index: 999;
|
|
display: flex;
|
|
align-items: center;
|
|
position: fixed;
|
|
left: 30rpx;
|
|
top: 0;
|
|
/* #ifdef MP */
|
|
height: 43px;
|
|
/* #endif */
|
|
/* #ifdef H5 */
|
|
height: 114rpx;
|
|
/* #endif */
|
|
}
|
|
|
|
.head-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 54rpx;
|
|
width: 140rpx;
|
|
background: rgba(0, 0, 0, .25);
|
|
border-radius: 27rpx;
|
|
|
|
.iconfont {
|
|
flex: 1;
|
|
text-align: center;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
|
|
&.icon-xiangzuo {
|
|
border-right: 1px solid #fff;
|
|
}
|
|
}
|
|
}
|
|
</style> |