<template>
|
<view class="ambitusShop-wrapper wrapperLayer borderBox">
|
<view class="list-container colCen">
|
<block v-for="(items,index) in list" :key="index">
|
<view class="items-container colCen" @tap="geDetails(items)">
|
<view class="relimg-content">
|
<image class="main-img" :src="items.pic" mode="aspectFill"></image>
|
<view class="shopLogo rowCenCen borderBox">
|
<image class="logopic" :src="items.shopLogo" mode="aspectFill"></image>
|
</view>
|
</view>
|
|
<view class="shop-name borderBox">
|
{{items.shopName}}
|
</view>
|
|
<view class="tips-bar rowCen borderBox">
|
<image class="shopicon" src="../../../static/images/community/market.png" mode="aspectFill"></image>
|
<view class="tips-info">
|
{{items.distance}}km丨{{items.businessDistrict}}丨{{items.typeStr}}丨人均￥{{items.consumptionPerPerson}}
|
</view>
|
</view>
|
|
<view class="workingtime-bar rowCen borderBox">
|
<view class="green-box rowCen">
|
营业时间 | {{items.businessHours}}
|
</view>
|
</view>
|
|
<view class="bottom-btn-bar rowCenEnd borderBox">
|
<view class="clockBtn rowCenCen">
|
<view>打卡</view>
|
</view>
|
</view>
|
</view>
|
</block>
|
</view>
|
<aLoadMore :status="loadstate" mode="loading3" :showTitle='true' color="#999999"></aLoadMore>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
props:{
|
lcInfo:{
|
type:Object,
|
default:'',
|
}
|
},
|
data(){
|
return{
|
list:[],
|
pageNum:1,
|
loadstate:'loading',
|
canLoad:false
|
}
|
},
|
created() {
|
this.getList()
|
},
|
methods:{
|
getList(){
|
this.$http.post('bbc/shop/getShopList', {
|
limit:10,
|
offset:this.pageNum,
|
latitude:this.lcInfo.latitude,
|
longitude:this.lcInfo.longitude,
|
}, 'application/json').then(res => {
|
console.log(res);
|
if(res.length<10){
|
this.canLoad = false
|
this.loadstate = 'nomore'
|
}else{
|
this.canLoad = true
|
this.loadstate = 'loading'
|
this.pageNum++
|
}
|
this.list = res
|
})
|
},
|
|
getNextpage() {
|
if (this.canLoad) {
|
this.$http.post('bbc/shop/getShopList', {
|
limit:10,
|
offset:this.pageNum,
|
latitude:this.lcInfo.latitude,
|
longitude:this.lcInfo.longitude,
|
}, 'application/json').then(res => {
|
console.log(res);
|
if(res.length<10){
|
this.canLoad = false
|
this.loadstate = 'nomore'
|
}else{
|
this.canLoad = true
|
this.loadstate = 'loading'
|
this.pageNum++
|
}
|
this.list = this.list.concat(res)
|
})
|
}
|
},
|
|
geDetails(info){
|
uni.navigateTo({
|
url:'./shopDetails?id='+info.id
|
})
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.ambitusShop-wrapper{
|
width: 750rpx;
|
padding: 0 26rpx;
|
.sortbar-container{
|
width: 100%;
|
height: 80rpx;
|
padding: 0 57rpx;
|
background-color: #FFFFFF;
|
.sort-items{
|
.label-txt{
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #333333;
|
margin-right: 12rpx;
|
}
|
.downIcon{
|
width: 13rpx;
|
height: 8rpx;
|
}
|
}
|
}
|
|
.list-container{
|
width: 100%;
|
margin-top: 20rpx;
|
.items-container{
|
width: 100%;
|
border-radius: 16rpx;
|
margin-bottom: 20rpx;
|
background-color: #FFFFFF;
|
.relimg-content{
|
width: 100%;
|
height: 234rpx;
|
position: relative;
|
.main-img{
|
width: 100%;
|
height: 100%;
|
border-top-left-radius: 16rpx;
|
border-top-right-radius: 16rpx;
|
}
|
.shopLogo{
|
position: absolute;
|
z-index: 10;
|
width: 94rpx;
|
height: 94rpx;
|
background: #108687;
|
border: 2rpx solid #FFFFFF;
|
border-radius: 50%;
|
left: 20rpx;
|
top: 164rpx;
|
.logopic{
|
width: 94rpx;
|
height: 94rpx;
|
border-radius: 50%;
|
}
|
}
|
}
|
|
.shop-name{
|
width: 100%;
|
padding: 0 20rpx;
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #333333;
|
margin-top: 40rpx;
|
}
|
|
.tips-bar{
|
width: 100%;
|
margin: 18rpx 0rpx;
|
padding: 0 20rpx;
|
.shopicon{
|
width: 20rpx;
|
height: 20rpx;
|
margin-right: 14rpx;
|
}
|
.tips-info{
|
font-size: 22rpx;
|
font-weight: 500;
|
color: #666666;
|
}
|
}
|
|
.workingtime-bar{
|
width: 100%;
|
padding: 0 20rpx;
|
.green-box{
|
height: 30rpx;
|
background: rgba(16, 134, 135, 0.1);
|
border-radius: 4rpx;
|
padding: 0 8rpx;
|
font-size: 22rpx;
|
font-weight: 500;
|
color: #108687;
|
}
|
}
|
|
.bottom-btn-bar{
|
width: 100%;
|
padding: 0 20rpx;
|
margin-bottom: 30rpx;
|
.clockBtn{
|
width: 168rpx;
|
height: 52rpx;
|
background: #FF002C;
|
border-radius: 8rpx;
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
