dingdong-master/pages/order-manage/choose-shop.vue

<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true" :isBackHome="true" :homePageUrl="'/pages/index/index'">
			<block slot="content">选择门店</block>
		</cu-custom>
		<!-- 产品列表 -->
		<view class="padding-lr padding-top bg-white solid-top">
			<view class="solid-bottom margin-bottom-sm padding-bottom-sm"
				v-for="(item, index) in productList" :key="item.id">
				<view class="flex-sub flex margin-top-sm">
					<view style="height: 150rpx;line-height: 150rpx;margin-right: 10px;">
						<radio class="main-color" :checked="chooseShopInfo && chooseShopInfo.shopId === item.shopId" @click="chooseShopInfo = item" />
					</view>
					<!-- <checkbox style="transform:scale(0.8);" class="main-color" :checked="chooseShopId === item.shopId" @click.stop="chooseShopId = item.shopId"></checkbox> -->
					<view style="width: 150rpx;height: 150rpx;margin-right:10px;display: flex;flex-direction: row;justify-content: center;">
						<image style="width: 100%;height: 100%;" :src="item.imageUrl" mode="aspectFill"></image>
					</view>
					<view class="flex-sub">
						<view class="text-bold" style="text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">{{item.shopName}}</view>
						<view>
							<view style="text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">{{item.provinceName + item.cityName + item.countryName + item.streetName + item.address}}</view>
							<view class="margin-lr-sm" style="display: inline-block;" v-if="item.distance">
								<view class="cu-tag bg-red" style="padding: 0 2px;height: auto;">距离客户</view>
								<text class="text-gray" style="vertical-align: middle;">{{item.distance}}</text>
							</view>
						</view>
						
						<view v-if="index == 0">
							<text style="font-size: 24rpx;color: #0081ff;">您购买的商品的店铺所属服务点（距离近可优先选择）</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部新增地址按钮 -->
		<view class="cu-bar tabbar border shop fixed-bottom-bar bg-back">
			<button class="cu-btn bg-main-color long-btn margin-lr-sm shadow-blur" @click="selectShop">确定</button>
		</view>
		<!-- <view class="margin-bottom-lg">
			<view v-if="hasMoreData" class="text-center bg-main-color padding-tb text-lg" @click="loadProductData">
				<text class="margin-right-xs">查看更多</text>
				<text class="text-bold cuIcon-unfold"></text>
			</view>
			<view class="cu-load" :class="loadMoreStatus"></view>
		</view> -->
	</view>
</template>

<script>

	export default {
		data() {
			return {
				productList: [],
				loadMoreStatus: '',
				hasMoreData: false,
				pageNum: this.$globalData.initPageNum,
				pageSize: this.$globalData.initPageSize,
				inputGoodsName: null,
				goodsId: null,
				shopId: null,
				chooseShopInfo: null,
				addressFull: null,
			}
		},
		async onLoad(options) {
			this.goodsId = options.goodsId;
			this.shopId = options.shopId;
			this.addressFullObj = JSON.parse(options.addressFullObj)
			
			this.loadData();
		},
		methods: {
			async loadData() {
				this.pageNum = this.$globalData.initPageNum;
				this.pageSize = this.$globalData.initPageSize;
				this.loadProductData();
			},
			loadCategoryList(type = 1) {},
			async loadProductData(params = {}) {
				params.pageNum = this.pageNum;
				params.pageSize = this.pageSize;
				// if(this.addressLatitude && this.addressLongitude) {
				// 	params.latitude = this.addressLatitude
				// 	params.longitude = this.addressLongitude
				// }
				params.provinceName = this.addressFullObj.provinceName,
				params.cityName = this.addressFullObj.cityName,
				params.countryName = this.addressFullObj.countryName,
				params.streetName = this.addressFullObj.streetName,
				params.address = this.addressFullObj.address
				params.goodsId = this.goodsId
				// params.goodsId = 2089
				 
				this.loadMoreStatus = 'loading bg-main-color padding-tb text-lg';
				this.hasMoreData = false;
				try {
					await this.loadShopPage(params);
					this.loadMoreStatus = this.hasMoreData ? '' : 'over bg-grey padding-tb text-lg';
				} catch (e) {
					this.loadMoreStatus = 'erro bg-red padding-tb text-lg'
				}
			},
			reloadShopPage() {
				this.pageNum = this.$globalData.initPageNum;
				this.pageSize = this.$globalData.initPageSize;
				this.pageNumOfOtherCityPage = this.$globalData.initPageNum;
				this.productList = [];
				this.loadProductData();
			},
			async loadShopPage(params) {
				let res = await this.$request.getShopsByGoodsId(params);
				// let rowsLength = res[1].data.rows.length;
				// if (rowsLength === this.pageSize) {
				// 	this.hasMoreData = true;
				// }
				// if (this.pageNum === this.$globalData.initPageNum) {
				// 	this.productList = res[1].data.rows;
				// } else {
				// 	this.productList = this.productList.concat(res[1].data.rows);
				// }
				// this.pageNum++;
				
				this.productList = res.data.serviceShops
				this.chooseShopInfo = res.data.serviceShops.find(i => i.shopId == this.shopId)
				console.log(this.productList);
			},
			searchGoods() {
				this.reloadShopPage();
			},
			selectShop() {
				uni.$emit('chooseShop', this.chooseShopInfo);
				uni.navigateBack({
					delta: -1
				})
			}
		},
	}
</script>

<style scoped>
	.search-nav-item-text {
		width: 100rpx;
	}

	.nav .cu-item {
		height: 90rpx;
		display: inline-block;
		line-height: 90rpx;
		margin: 0;
		padding: 0 10rpx;
		width: 180rpx;
		background-color: transparent;
	}
	
	.cu-load {
	    display: block;
	    line-height: unset;
	    text-align: center;
	}
</style>