wxThird/pages/shop/ckshopList.vue

<template>
	<view class="box">

		<view class="shopline" v-for="(item,index) in queryShopList" @click="goDetail(item)">
			<view class="shoplineLeft">
				<image :src="item.photoPath" mode="" class="shopImg" v-if="item.photoPath"></image>
				<image src="../../static/img/noimg.png" mode="" class="shopImg" v-else></image>
			</view>
			<view class="shopright">
				<view class="shopTop">
					<view class="shopName">{{item.shopName}}</view>
				</view>
				<view class="brandsBg" v-if="item.brands">
					<view class="brands" v-for="(v,index2) in item.brands.split(',')">{{v}}</view>
				</view>
				<view class="shopTime"><span v-if="item.startTime">{{item.startTime}}</span> - <span
						v-if="item.endTime">{{item.endTime}}</span> </view>
				<view class="shopBottomLeft">
					<span class="shopaddress"
						v-if="item.address">{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.address}}</span>
					<span v-if="item.distance&&item.distance!= '0.00'">{{item.distance}}km</span>
				</view>
			</view>

		</view>

		<!-- 上拉 加载更多 -->
		<view class="noMore" v-if="noMoreShow && (queryShopList.length!=0)">没有更多数据</view>
		<!-- 无数据空白页 -->
		<nodata v-if="queryShopList.length==0"></nodata>

	</view>
</template>

<script>
	import nodata from '../../components/nodata/nodata.vue'
	export default {
		components: {
			nodata,
		},

		data() {
			return {
				location: {
					lng: '',
					lat: '',
				},
				queryShopList: '',
				noMoreShow: false,
                goodsId:'',


			}
		},

		onLoad(opt) {
			var that = this;
			this.goodsId=opt.goodsId;
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					console.log(res)
					that.location.lat = res.latitude
					that.location.lng = res.longitude

					that.getqueryShopList() //获取全部门店列表

				},
				fail(err) {

				}
			});
		},
		methods: {


			getqueryShopList() {
				uni.showLoading({
					title: '加载中'
				})
				this.$http('openMall/openStoreList', {
                    goodsId:this.goodsId,
					lat: this.location.lat ? this.location.lat : '',
					lng: this.location.lng ? this.location.lng : '',
				}, 'GET').then(res => {
					uni.hideLoading();
					this.queryShopList = res.data
					//console.log('list+=', this.queryShopList);

				})
			},

			goDetail(item) {
				 this.$store.commit('mutationsckshopInfo', item)	
				uni.navigateBack({
					delta:-1
				})
				// uni.navigateTo({
				// 	url: '../shop/shopDetail?id=' + item.shopId
				// })
			}
		},
		
		// 下拉刷新
		onPullDownRefresh() {
			
			this.getqueryShopList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background-color: #F4F5F7;
		padding-top: 20rpx;
		padding-bottom: 60rpx;
	}

	.shopline {
		margin: 0rpx 24rpx 20rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

		display: flex;
	}


	.nodataImg {
		width: 400rpx;
		padding-top: 100rpx;
	}

	.noTxt {
		font-size: 36rpx;
		color: #999999;
		padding-top: 50rpx;
	}

	.nodataBox {
		text-align: center;
	}

	.shopImg {
		width: 146rpx;
		height: 146rpx;
		border-radius: 6rpx;
	}

	.shopBox {
		padding-top: 30rpx;
		display: flex;
	}

	.flex {
		display: flex;
		justify-content: space-between;
	}

	.shopCont {
		padding-left: 22rpx;
		width: 520rpx;
	}

	.shopName {
		color: #333333;
		font-size: 26rpx;
		font-weight: 600;
	}

	.span1 {
		color: #FF4F00;
		font-size: 36rpx;
	}

	.span2 {
		color: #FF4F00;
		font-size: 22rpx;
	}

	.span3 {
		color: #333333;
		font-size: 22rpx;
		padding-left: 22rpx;
	}

	.shopBq {
		color: #FF4F00;
		font-size: 22rpx;
		border-radius: 4rpx;
		border: 1px solid #FF4F00;
		line-height: 30rpx;
		height: 30rpx;
		padding: 0rpx 5rpx;
		margin-top: 10rpx;
	}

	.brandsBg {
		display: flex;
        height: 38rpx;
		flex-wrap: wrap;
		align-items: center;
		overflow: hidden;
		padding: 5rpx 0rpx;

	}

	.brands {
		border-radius: 4rpx;
		padding: 0 5rpx;
		color: #F19D01;
		height: 28rpx;
		border: 1px solid #F19D01;

		font-size: 20rpx;
		line-height: 28rpx;
		margin: 5rpx 10rpx 5rpx 0rpx;
	}

	.timeBg {
		display: flex;

	}

	.shopTime {
		color: #666666;
		font-size: 22rpx;
	}

	.addressBox {
		color: #666666;
		font-size: 22rpx;
	}

	.shopNameSearchInput {
		width: 500rpx;
	}

	.colorCS {
		color: #FF4F00;
	}

	.shopbox {
		padding: 0 16rpx;
	}



	.shopImg {
		width: 146rpx;
		height: 146rpx;
		border-radius: 10rpx;
	}

	.shopCallImg {
		width: 38rpx;
		height: 46rpx;
	}

	.shopTop {
		display: flex;
		justify-content: space-between;
		width: 510rpx;
	}

	.shopright {
		padding-left: 20rpx;
	}

	.shopName {
		font-size: 26rpx;
		color: #333333;
		line-height: 37rpx;
		width: 450rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.shopScore1 {
		font-size: 36rpx;
		font-weight: bold;
		color: #FF4F00;
		height: 50rpx;
		line-height: 50rpx;
	}

	.shopScore11 {
		font-size: 22rpx;
		color: #FF4F00;
		margin-right: 14rpx;

	}

	.shopScore2 {
		font-size: 22rpx;
		color: #666666;
		margin-right: 14rpx;
		padding: 8rpx 0;
	}

	.shopScore3 {
		font-size: 22rpx;
		color: #333333;
		padding-left: 20rpx;
	}



	.Btn {
		width: 104rpx;
		height: 56rpx;
		background: #FF2400 linear-gradient(135deg, #FD5300 0%, #FF270A 100%);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		color: #FFFFFF;
		line-height: 56rpx;
	}

	.shopBottom {
		display: flex;

	}

	.shopBottomLeft {

		font-size: 25rpx;
		color: #666666;
		line-height: 30rpx;
		padding-top: 10rpx;
		display: flex;
		justify-content: space-between;
		padding-right: 10rpx;
	}

	.shopaddress {
		width: 400rpx;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.noMore {
		text-align: center;
		line-height: 50rpx;
		color: #999999;
		font-size: 28rpx;
	}
</style>