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.
413 lines
9.5 KiB
413 lines
9.5 KiB
<template>
|
|
<view class="shops-list">
|
|
<view class="form" :style="{ 'background-color': navBgColor }">
|
|
<view class="left flex-center-x">
|
|
<image :src="$picUrl+'/static/home/search.png'" mode="" class="searchIcon"></image>
|
|
<input v-model.trim="search" confirm-type="search" @input="onSearch(search)" placeholder="搜索商户" />
|
|
</view>
|
|
<!-- <image src="@/static/position.png" mode="aspectFill" class="position"></image> -->
|
|
</view>
|
|
<view class="filter-box">
|
|
<view v-for="(item, index) in filterItems" :key="index" class="filter-item" :class="{active: activeFilter === item.key}" @click="activeFilter = item.key">{{ item.name }}</view>
|
|
<!-- <view class="filter-item">
|
|
筛选
|
|
<image src="@/static/filter.png" mode="aspectFill"></image>
|
|
</view> -->
|
|
</view>
|
|
<view class="list">
|
|
<view v-for="(item, index) in shopsList" :key="index" class="shop-item">
|
|
<view class="shop-info">
|
|
<image :src="item.logoImage.external_url" mode="aspectFill" class="logo"></image>
|
|
<view class="info-box">
|
|
<view class="info-top">
|
|
<text class="name">{{ item.shop_name }}</text>
|
|
<text class="label">{{ item.shop_label }}</text>
|
|
</view>
|
|
<view class="info-bottom">
|
|
<view class="score"><uni-rate :readonly="true" :value="item.score" activeColor="#F34A40" />{{ item.score }}</view>
|
|
<!-- <view class="distance">{{ item.distance }}km</view> -->
|
|
</view>
|
|
</view>
|
|
<view class="toShop" @click="toShop(item)">进店</view>
|
|
</view>
|
|
<view v-if="item.goodsInfo && item.goodsInfo.data && item.goodsInfo.data.length > 0" class="shop-goods-list">
|
|
<view v-for="(good, k) in item.goodsInfo.data" :key="k" class="good-item" @click="onGoodDetail(good.goods_id)">
|
|
<image :src="good.goods_image" mode="aspectFill" class="good-pic"></image>
|
|
<view class="price">￥{{ good.goods_price_min }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="shopsList.length && !loading" class="finished">{{ loadTitle }}</view>
|
|
<view v-if="finished && !shopsList.length" class="empty">
|
|
<image mode="aspectFill" src="@/static/empty.png" alt="暂无商品" />
|
|
<view>暂无商品</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { debounce } from 'lodash';
|
|
import styleColor from '../styleColor';
|
|
import UniRate from '../../uni_modules/uni-rate/components/uni-rate/uni-rate.vue';
|
|
import * as Api from '@/api/shop/index'
|
|
|
|
export default {
|
|
components: {
|
|
UniRate
|
|
},
|
|
data() {
|
|
return {
|
|
search: '',
|
|
categoryId: '',
|
|
activeFilter: '',
|
|
shopsList: [
|
|
// {
|
|
// logo: '',
|
|
// name: '小米旗舰店',
|
|
// label: '官方旗舰店',
|
|
// score: 3.2,
|
|
// distance: 100,
|
|
// goods: [
|
|
// {
|
|
// pic: '',
|
|
// price: '620.00'
|
|
// },
|
|
// {
|
|
// pic: '',
|
|
// price: '620.00'
|
|
// },
|
|
// {
|
|
// pic: '',
|
|
// price: '620.00'
|
|
// }
|
|
// ]
|
|
// }
|
|
],
|
|
page: 1,
|
|
limit: 10,
|
|
loadTitle: '',
|
|
loading: false,
|
|
finished: false,
|
|
filterItems: [
|
|
{ name: '默认', key: ''},
|
|
{ name: '销量', key: 'sale'},
|
|
{ name: '好评', key: 'score'},
|
|
]
|
|
};
|
|
},
|
|
computed: {
|
|
styleIndex() {
|
|
const index = uni.getStorageSync('styleIndex') || '';
|
|
return index;
|
|
},
|
|
navBgColor() {
|
|
return this.styleIndex ? (styleColor.shopNavBgColor[this.styleIndex - 1] || '#FFA3B2') : '#FFA3B2'
|
|
}
|
|
},
|
|
watch: {
|
|
styleIndex: {
|
|
immediate: true,
|
|
handler() {
|
|
console.log(styleColor.shopNavBgColor[this.styleIndex - 1] || '#FFA3B2');
|
|
uni.setNavigationBarColor({
|
|
frontColor : '#000000',
|
|
backgroundColor: styleColor.shopNavBgColor[this.styleIndex - 1] || '#FFA3B2',
|
|
})
|
|
},
|
|
},
|
|
activeFilter() {
|
|
this.page = 1;
|
|
this.finished = false;
|
|
this.shopsList = [];
|
|
this.getshopsList();
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.getshopsList();
|
|
},
|
|
onReachBottom() {
|
|
this.getshopsList();
|
|
},
|
|
methods: {
|
|
onSearch: debounce(function () {
|
|
console.log(this.search);
|
|
this.page = 1;
|
|
this.finished = false;
|
|
this.shopsList = [];
|
|
this.getshopsList();
|
|
}, 500),
|
|
async getshopsList() {
|
|
if (this.loading || this.finished) {
|
|
return;
|
|
}
|
|
this.loadTitle = "";
|
|
Api.getShopList({
|
|
sort: this.activeFilter,
|
|
page: this.page++,
|
|
pageSize: this.limit,
|
|
search: this.search,
|
|
})
|
|
.then(result => {
|
|
console.log(result);
|
|
const data = result.data.data;
|
|
this.shopsList = this.shopsList.concat(data);
|
|
this.finished = data.length < this.limit;
|
|
this.loadTitle = this.finished ? "已全部加载完" : "上拉加载更多";
|
|
console.log(this.shopsList);
|
|
})
|
|
.finally(() => this.loading = false)
|
|
},
|
|
toShop(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/shopList/shopPage?id=${item.merchant_id}`,
|
|
})
|
|
},
|
|
// 跳转商品详情页
|
|
onGoodDetail(goodsId) {
|
|
this.$navTo('pages/goods/detail', {
|
|
goodsId
|
|
})
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.shops-list {
|
|
background: #F7F8FA;
|
|
height: 100vh;
|
|
display: block;
|
|
// padding: 0 30rpx 40rpx;
|
|
.form {
|
|
// padding: 30rpx 106rpx 30rpx 24rpx;
|
|
padding: 30rpx 24rpx;
|
|
position: relative;
|
|
.position {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 26rpx;
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
.left {
|
|
width: 702rpx;
|
|
height: 70rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 35rpx;
|
|
border: 1px solid #EAEAEA;
|
|
line-height: 70rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.searchIcon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
opacity: 1;
|
|
margin: 0rpx 0 0 26rpx;
|
|
}
|
|
input {
|
|
padding-left: 20rpx;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.filter-box {
|
|
height: 88rpx;
|
|
padding: 0 30rpx;
|
|
align-items: center;
|
|
display: flex;
|
|
background: #fff;
|
|
.filter-item {
|
|
flex: 1;
|
|
color: #666;
|
|
font-size: 28rpx;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
&.active {
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
// &:not(:last-child) {
|
|
// padding-left: 28rpx;
|
|
// }
|
|
&:last-child {
|
|
justify-content: center;
|
|
}
|
|
image {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
margin-left: 12rpx;
|
|
}
|
|
text {
|
|
width: 0;
|
|
height: 0;
|
|
border: 10rpx solid;
|
|
border-color: #000 transparent transparent transparent;
|
|
vertical-align: top;
|
|
position: absolute;
|
|
left: 90rpx;
|
|
top: 15rpx;
|
|
&.up {
|
|
border-color: transparent transparent #000 transparent;
|
|
top: -1rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.list {
|
|
.shop-item {
|
|
margin-top: 20rpx;
|
|
padding: 30rpx 24rpx;
|
|
background: #fff;
|
|
// border-top: 20rpx solid #F7F8FA;
|
|
.shop-info {
|
|
display: flex;
|
|
align-items: center;
|
|
.logo {
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
border: 1px solid #EAEAEA;
|
|
margin-right: 23rpx;
|
|
}
|
|
.info-box {
|
|
flex: 1;
|
|
padding-top: 10rpx;
|
|
.info-top {
|
|
height: 40rpx;
|
|
display: flex;
|
|
margin-bottom: 30rpx;
|
|
.name {
|
|
color: #333333;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
line-height: 40rpx;
|
|
// flex: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.label {
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
padding: 0 12rpx;
|
|
background: #F34A40;
|
|
border-radius: 10rpx;
|
|
margin-left: 20rpx;
|
|
color: #FFFFFF;
|
|
font-size: 22rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
.info-bottom {
|
|
height: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.score {
|
|
color: #E53623;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
::v-deep {
|
|
.uni-rate {
|
|
margin-right: 12rpx;
|
|
.uni-rate__icon, .uni-rate__icon-on {
|
|
.uni-icons {
|
|
font-size: 32rpx!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.distance {
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
color: #999999;
|
|
position: relative;
|
|
padding-left: 16rpx;
|
|
margin-left: 16rpx;
|
|
&:before {
|
|
position: absolute;
|
|
content: '';
|
|
height: 24rpx;
|
|
width: 2rpx;
|
|
background: #999;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.toShop {
|
|
width: 110rpx;
|
|
height: 60rpx;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
background: #F34A40;
|
|
border-radius: 30rpx;
|
|
color: #FFFFFF;
|
|
font-size: 22rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
.shop-goods-list {
|
|
display: flex;
|
|
margin-top: 28rpx;
|
|
.good-item {
|
|
position: relative;
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
margin-right: 20rpx;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.good-pic {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
border: 1px solid #EAEAEA;
|
|
}
|
|
.price {
|
|
position: absolute;
|
|
border-radius: 20rpx 0rpx 10rpx 0rpx;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
height: 40rpx;
|
|
padding: 0 14rpx;
|
|
font-size: 22rpx;
|
|
color: #FFFFFF;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.finished,
|
|
.loading {
|
|
font-size: 28rpx;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
color: #bbb;
|
|
}
|
|
.empty {
|
|
margin-top: 100rpx;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
color: #bbb;
|
|
}
|
|
|
|
.empty image {
|
|
display: block;
|
|
width: 306rpx;
|
|
height: 200rpx;
|
|
margin: 0 auto 20rpx;
|
|
pointer-events: none;
|
|
}
|
|
</style> |