<template>
|
<view class="nearbyShop-wrapper wrapperLayer borderBox">
|
<view class="firstCate-container borderBox">
|
<scroll-view scroll-x class="cateScroll" scroll-with-animation>
|
<block v-for="(items,index) in cateScroll" :key="index">
|
<view class="inline-box" @tap="fristCurrent(items)">
|
<view class="items-cate colCenCen">
|
<view class="items-label">
|
{{items.value}}
|
</view>
|
<view class="border" :class="items.key==cateCurrent?'active-border':''">
|
</view>
|
</view>
|
</view>
|
</block>
|
</scroll-view>
|
</view>
|
<view class="sortbar-container rowCenBet borderBox">
|
<view class="sort-items rowCen" @tap="selectDrowp('cate')">
|
<view class="label-txt">
|
{{secondCatelabel?secondCatelabel:'全部分类'}}
|
</view>
|
<image class="downIcon" :class="drowpType=='cate'&&showDrop?'roateIcon':''"
|
src="../../../static/images/community/down.png" mode=""></image>
|
</view>
|
<view class="sort-items rowCen" @tap="selectDrowp('radius')">
|
<view class="label-txt">
|
{{radiusLabel?radiusLabel:'附近'}}
|
</view>
|
<image class="downIcon" :class="drowpType=='radius'&&showDrop?'roateIcon':''"
|
src="../../../static/images/community/down.png" mode=""></image>
|
</view>
|
<view class="sort-items rowCen" @tap="selectDrowp('sort')">
|
<view class="label-txt">
|
{{sortLabel?sortLabel:'距离最近'}}
|
</view>
|
<image class="downIcon" :class="drowpType=='sort'&&showDrop?'roateIcon':''"
|
src="../../../static/images/community/down.png" mode=""></image>
|
</view>
|
</view>
|
|
<view class="dropdown-list colCen"
|
:style="showDrop?'height:' + drowpList.length*88 + 'rpx;transition: all 0.3s;':'height:0rpx;'">
|
<block v-for="(items,index) in drowpList" :key="index">
|
<view class="drop-items rowCenBet borderBox" @tap="secondCateTap(items)" v-if="drowpType=='cate'">
|
<view class="left-label">
|
{{items.value}}
|
</view>
|
<image class="checkIcon" v-if="items.key==secondCurrent"
|
src="../../../static/images/community/check.png" mode=""></image>
|
</view>
|
|
<view class="drop-items rowCenBet borderBox" @tap="radiusTap(items)" v-if="drowpType=='radius'">
|
<view class="left-label">
|
{{items.value}}
|
</view>
|
<image class="checkIcon" v-if="items.key==secondCurrent"
|
src="../../../static/images/community/check.png" mode=""></image>
|
</view>
|
|
<view class="drop-items rowCenBet borderBox" @tap="sortTap(items)" v-if="drowpType=='sort'">
|
<view class="left-label">
|
{{items.value}}
|
</view>
|
<image class="checkIcon" v-if="items.key==sortCurrent"
|
src="../../../static/images/community/check.png" mode=""></image>
|
</view>
|
</block>
|
</view>
|
|
<view class="lists-container colCen">
|
<block v-for="(items,index) in List" :key="index">
|
<view class="items-container rowCen" @tap="goDetails(items)">
|
<view class="content-box rowSta">
|
<image class="logopic" :src="items.dealBaseInfo.defaultPic" mode="aspectFill"></image>
|
<view class="right-content">
|
<view class="shopname">
|
{{items.shopInfo.shopName}}
|
</view>
|
|
<view class="introduce-bar rowCen">
|
<block v-for="(star,index) in 5" :key="index">
|
<image class="star"
|
v-if="(index+1)<(items.shopInfo.shopPower/10) || (index+1)==(items.shopInfo.shopPower/10)"
|
src="../../../static/images/community/redStar.png" mode=""></image>
|
<image class="star"
|
v-else-if="(index+1)>(items.shopInfo.shopPower/10) && (index+1 - (items.shopInfo.shopPower/10)<0.5)"
|
src="../../../static/images/community/harfstar.png" mode=""></image>
|
<image class="star" v-else src="../../../static/images/community/empstar.png"
|
mode=""></image>
|
</block>
|
|
<view class="grade-num">
|
{{Number(items.shopInfo.shopPower/10).toFixed(1)}}
|
</view>
|
|
<view class="cate-txt">
|
{{items.shopInfo.cateName}} {{items.shopInfo.regionName}}
|
{{items.shopInfo.distanceToShow}}
|
</view>
|
</view>
|
|
<scroll-view class="slide-goods-list" scroll-with-animation scroll-x>
|
<block v-for="(itm,idx) in items.subset" :key="idx">
|
<view class="inline-content">
|
<image class="goodspic" :src="itm.dealBaseInfo.defaultPic" mode="aspectFill">
|
</image>
|
<view class="goods-title">
|
{{itm.dealBaseInfo.dealTitle}}
|
</view>
|
<view class="price-bar rowEnd">
|
<view class="rmb">
|
￥
|
</view>
|
<view class="nowprice">
|
{{(itm.dealBaseInfo.finalPrice/100).toFixed(2)}}
|
</view>
|
<view class="ordprice">
|
￥{{Number(itm.dealBaseInfo.marketPrice/100).toFixed(2)}}
|
</view>
|
</view>
|
</view>
|
</block>
|
</scroll-view>
|
</view>
|
</view>
|
</view>
|
</block>
|
|
<aLoadMore :status="loadstate" mode="loading3" :showTitle='true' color="#999999"></aLoadMore>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
lcInfo: {
|
type: Object,
|
default: '',
|
},
|
searchTxt: {
|
type: String,
|
default: '',
|
},
|
cityId: {
|
type: String,
|
default: '56'
|
}
|
},
|
data() {
|
return {
|
cateScroll: [],
|
cateCurrent: 0,
|
secondCatelabel: '',
|
secondCurrent: '',
|
|
showDrop: false,
|
drowpType: '',
|
drowpList: [],
|
|
radiusList: [{
|
value: '附近',
|
key: ''
|
},
|
{
|
value: '500m',
|
key: '500'
|
},
|
{
|
value: '1km',
|
key: '1000'
|
},
|
{
|
value: '3km',
|
key: '3000'
|
},
|
{
|
value: '5km',
|
key: '5000'
|
},
|
{
|
value: '10km',
|
key: '10000'
|
}
|
],
|
radiusCurrent: '',
|
radiusLabel: '',
|
|
sortList: [{
|
value: '离我最近',
|
key: 1
|
},
|
{
|
value: '销量由高到低',
|
key: 7
|
},
|
{
|
value: '价格由高到低',
|
key: 9
|
},
|
{
|
value: '价格由低到高',
|
key: 10
|
}
|
],
|
sortCurrent: 1,
|
sortLabel: '',
|
|
List: [],
|
pageNum: 1,
|
loadstate: 'loading',
|
canLoad: false
|
}
|
},
|
created() {
|
console.log(1222222)
|
this.getCates()
|
},
|
|
methods: {
|
getCates() {
|
var that =this;
|
this.$u.api.cityCate({
|
cateId: 0,
|
cityId: this.cityId,
|
}).then(e => {
|
if(e.code != 0) return that.$alert(e.msg)
|
var res = e.data.list;
|
that.cateScroll = res
|
that.cateCurrent = res[0].key
|
that.newData()
|
}).catch(function (err) {
|
})
|
},
|
|
getList() {
|
var that = this;
|
this.$u.api.searchDeals({
|
cateId: this.cateCurrent,
|
cat1Ids:this.secondCurrent,
|
cityId: this.cityId,
|
lat: this.lcInfo.latitude,
|
lng: this.lcInfo.longitude,
|
page: this.pageNum,
|
radii: this.radiusCurrent,
|
sortType: this.sortCurrent,
|
keyWords: this.searchTxt,
|
pageSize: 20,
|
}).then(e => {
|
if(e.code != 0) return that.$alert(e.msg)
|
var res = e.data.list;
|
that.List = that.List.concat(res)
|
var obj = {};
|
that.List = that.List.reduce(function(item, next) {
|
obj[next.shopInfo.shopId] ? '' : obj[next.shopInfo.shopId] = true && item.push(next);
|
return item;
|
}, []);
|
if (res.length > 0) {
|
that.pageNum++
|
that.loadstate = 'loading'
|
if (that.List.length < 10) {
|
that.getList()
|
} else {
|
that.canClick = true
|
that.canLoad = true
|
}
|
} else {
|
that.canClick = true
|
that.canLoad = false
|
that.loadstate = 'nomore'
|
}
|
}).catch(function (err) {
|
console.log(err)
|
})
|
},
|
|
getNextpage() {
|
if (this.canLoad) {
|
var that = this;
|
this.$u.api.searchDeals({
|
cateId: this.cateCurrent,
|
cat1Ids:this.secondCurrent,
|
cityId: this.cityId,
|
lat: this.lcInfo.latitude,
|
lng: this.lcInfo.longitude,
|
page: this.pageNum,
|
radii: this.radiusCurrent,
|
sortType: this.sortCurrent,
|
keyWords: this.searchTxt,
|
pageSize: 20,
|
}).then(e => {
|
if(e.code != 0) return that.$alert(e.msg)
|
var res = e.data.list;
|
if (res.length > 0) {
|
that.pageNum++
|
that.loadstate = 'loading'
|
that.canLoad = true
|
} else {
|
that.canLoad = false
|
that.loadstate = 'nomore'
|
}
|
that.List = that.List.concat(res)
|
var obj = {};
|
that.List = that.List.reduce(function(item, next) {
|
obj[next.shopInfo.shopId] ? '' : obj[next.shopInfo.shopId] = true && item.push(next);
|
return item;
|
}, []);
|
}).catch(function (err) {
|
console.log(err)
|
})
|
}
|
},
|
|
newData() {
|
this.canLoad = false
|
this.pageNum = 1
|
this.List = []
|
this.loadstate = 'loading'
|
this.getList()
|
},
|
|
selectDrowp(type) {
|
this.drowpType = type
|
if (this.drowpType != type) {
|
this.showDrop = false
|
} else {
|
if (this.showDrop) {
|
this.showDrop = false
|
} else {
|
if (type == 'cate') {
|
var that =this;
|
this.$u.api.cityCate({
|
cateId: this.cateCurrent,
|
cityId: this.cityId,
|
}).then(e => {
|
if(e.code != 0) return that.$alert(e.msg)
|
var res = e.data.list;
|
that.drowpList = res
|
that.secondCurrent = that.cateCurrent
|
that.drowpList.unshift({
|
key: '',
|
value: '全部分类'
|
})
|
that.showDrop = true
|
}).catch(function (err) {
|
})
|
} else if (type == 'radius') {
|
this.drowpList = this.radiusList
|
this.showDrop = true
|
} else if (type == 'sort') {
|
this.drowpList = this.sortList
|
this.showDrop = true
|
}
|
}
|
}
|
},
|
|
fristCurrent(info) {
|
if (this.canClick) {
|
this.showDrop = false
|
this.cateCurrent = info.key
|
this.secondCatelabel = '全部分类'
|
this.secondCurrent = ''
|
this.canClick = false
|
this.newData()
|
}
|
},
|
|
secondCateTap(info) {
|
this.secondCatelabel = info.value
|
this.secondCurrent = info.key
|
this.showDrop = false
|
this.newData()
|
},
|
|
radiusTap(info) {
|
this.radiusCurrent = info.key
|
this.radiusLabel = info.value
|
this.showDrop = false
|
this.newData()
|
},
|
|
sortTap(info) {
|
this.sortCurrent = info.key
|
this.sortLabel = info.value
|
this.showDrop = false
|
this.newData()
|
},
|
|
goDetails(info) {
|
var param = {
|
id:info.shopInfo.shopId,
|
cateId: this.cateCurrent,
|
cat1Ids:this.secondCurrent,
|
cityId: this.cityId,
|
lat: this.lcInfo.latitude,
|
lng: this.lcInfo.longitude
|
};
|
uni.navigateTo({
|
url: './shopBuyDetails?info=' + encodeURIComponent(JSON.stringify(param))
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.nearbyShop-wrapper {
|
width: 750rpx;
|
padding: 0 26rpx;
|
|
.firstCate-container {
|
width: 100%;
|
background-color: #FFFFFF;
|
height: 80rpx;
|
padding: 0 36rpx;
|
|
.cateScroll {
|
width: 100%;
|
height: 100%;
|
white-space: nowrap;
|
.inline-box {
|
display: inline-block;
|
height: 100%;
|
|
.items-cate {
|
height: 100%;
|
margin-right: 30rpx;
|
|
.items-label {
|
font-size: 30rpx;
|
font-weight: 500;
|
color: #333333;
|
margin-bottom: 10rpx;
|
}
|
|
.border {
|
width: 60rpx;
|
height: 4rpx;
|
border-radius: 20rpx;
|
background-color: transparent;
|
}
|
|
.active-border {
|
background-color: #FDE76E;
|
}
|
}
|
}
|
}
|
}
|
|
.sortbar-container {
|
width: 100%;
|
height: 80rpx;
|
padding: 0 36rpx;
|
background-color: #FFFFFF;
|
|
.sort-items {
|
.label-txt {
|
font-size: 30rpx;
|
font-weight: 500;
|
color: #333333;
|
margin-right: 12rpx;
|
}
|
|
.downIcon {
|
width: 13rpx;
|
height: 8rpx;
|
transition: all 0.3s;
|
}
|
|
.roateIcon {
|
transform: rotate(-180deg);
|
}
|
}
|
}
|
|
.dropdown-list {
|
width: 100%;
|
overflow: hidden;
|
|
.drop-items {
|
width: 100%;
|
height: 88rpx;
|
background: #FFFFFF;
|
box-shadow: 0px -1rpx 0px 0px #EDEDED;
|
padding: 0 20rpx;
|
|
.left-label {
|
font-size: 26rpx;
|
font-weight: 500;
|
color: #333333;
|
}
|
|
.checkIcon {
|
width: 28rpx;
|
height: 18rpx;
|
}
|
}
|
}
|
|
.lists-container {
|
width: 100%;
|
|
.items-container {
|
width: 100%;
|
height: 370rpx;
|
background-color: #FFFFFF;
|
box-shadow: 0px -1rpx 0px 0px #F8F8F8;
|
|
.content-box {
|
width: 100%;
|
|
.logopic {
|
width: 112rpx;
|
height: 78rpx;
|
margin: 0 20rpx;
|
border-radius: 12rpx;
|
}
|
|
.right-content {
|
width: 546rpx;
|
|
.shopname {
|
width: 100%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
font-size: 28rpx;
|
font-weight: bold;
|
color: #333333;
|
}
|
|
.introduce-bar {
|
margin-top: 10rpx;
|
|
.star {
|
width: 22rpx;
|
height: 22rpx;
|
margin-right: 5rpx;
|
}
|
|
.grade-num {
|
margin-left: 15rpx;
|
margin-right: 30rpx;
|
font-size: 22rpx;
|
font-weight: 500;
|
color: #FF002C;
|
}
|
|
.cate-txt {
|
white-space: nowrap;
|
font-size: 22rpx;
|
font-weight: 500;
|
color: #666666;
|
}
|
}
|
|
.slide-goods-list {
|
width: 100%;
|
margin-top: 30rpx;
|
white-space: nowrap;
|
|
.inline-content {
|
display: inline-block;
|
width: 158rpx;
|
height: 100%;
|
margin-right: 10rpx;
|
|
.goodspic {
|
width: 158rpx;
|
height: 158rpx;
|
border-radius: 12rpx;
|
}
|
|
.goods-title {
|
width: 100%;
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #333333;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
margin: 10rpx 0;
|
}
|
|
.price-bar {
|
.rmb {
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #FF002C;
|
line-height: 24rpx;
|
}
|
|
.nowprice {
|
font-size: 24rpx;
|
font-weight: bold;
|
color: #FF002C;
|
}
|
|
.ordprice {
|
font-size: 18rpx;
|
font-weight: 500;
|
text-decoration: line-through;
|
color: #999999;
|
line-height: 24rpx;
|
margin-left: 10rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
