junzitang/pagesT/store/StoreList.vue

<template>
	<view :class="['qn-page-' + theme]">
		<view style="margin-bottom: 20rpx;">
			<view class="store_origin" v-if="store_set.user_origin === 2">
				<text class="origin_text">当前位置</text>
				<view class="clearfix" style="margin-top: 6rpx;">
					<view class="float_left">
						<u-icon name="map-fill" color="red" style="font-size: 32rpx;"></u-icon>
						<text style="margin-left: 10rpx;">{{ location.address || '请手动选择' }}</text>
					</view>
					<view class="origin_desc float_right" @click="openLocation">修改位置</view>
				</view>
			</view>
			<view class="store_select clearfix" v-if="store_set.user_origin === 3">
				<view class="float_left search_text" @click="openLocation">
					<text class="select_text">{{ location.cityName || '请手动选择' }}</text>
					<u-icon name="arrow-down" style="font-size: 32rpx;"></u-icon>
				</view>
				<view class="float_left select_search">
					<u-search placeholder="请输入店铺名称" @search="searchShop" v-model="select_origin" :show-action="false" shape="square"></u-search>
				</view>
			</view>
			<view class="banner-view" v-if="store_set.images.length">
				<u-swiper mode="rect" border-radius="0" bg-color="#ffffff" :list="store_set.images" height="350"></u-swiper>
			</view>
		</view>
		<view class="store-ul">
			<!-- 空白页 -->
			<Aempty text="暂无数据" v-if="store_list.length === 0" src="https://onlineimg.qianniao.vip/data.png"></Aempty>
			<view class="store-li" v-for="(item, index) in store_list" :key="index">
				<view class="store-img" v-if="store_set.user_info.indexOf('商户LOGO') > -1"><image :src="item.license" mode="aspectFill"></image></view>
				<view class="store-info">
					<view class="store-name ellipsis">{{ item.name }}</view>
					<view class="store-desc ellipsis" v-if="store_set.user_info.indexOf('商户简介') > -1">{{ item.desc || '' }}</view>
					<view class="store-address ellipsis" v-if="store_set.user_info.indexOf('商户地址') > -1">
						<block v-if="item.area">{{ item.area.provinceName }}{{ item.area.cityName }}{{ item.area.districtName }}{{ item.area.address }}</block>
					</view>
					<view class="store-distance" v-if="store_set.user_info.indexOf('距离') > -1">
						<view class="address-icon primary-bg"><u-icon name="map-fill" color="#ffffff" size="24"></u-icon></view>
						<text>{{ item.distance / 1000 }}km</text>
					</view>
				</view>
				<view class="in-btn primary-btn" @click="inStore(item)">进店</view>
			</view>
		</view>
		<u-loadmore margin-top="20" :status="loading_status" v-if="store_list.length" />
	</view>
</template>

<script>
import PageDesign from '@/components/PageDesign/PageDesign.vue';
export default {
	data() {
		return {
			loading_status: 'loadmore',
			select_origin: '',
			swiper_list: [],
			page: 1,
			pageSize: 10,
			pageTotal: 0,
			store_istrue: true,
			store_list: [],
			now_sel_address: {},
			location: {},
			store_set: {
				user_info: ['商户LOGO', '商户简介', '商户地址', '距离']
			},
			latitude: '',
			longitude: ''
		};
	},
	onLoad() {
		this.location = this.$store.state.locationObj;
		(this.latitude = this.location.latitude), (this.longitude = this.location.longitude);
		this.getSettingMerchant();
		this.getAllApiMerchant();
	},
	onReachBottom() {
		if (this.pageTotal / this.pageSize > this.page) {
			this.page += 1;
			this.getAllApiMerchant();
		}
	},
	methods: {
		inStore(item) {
			this.goPage('/pagesT/store/StoreHome?storeData=' + JSON.stringify(item));
		},
		searchShop() {
			this.getAllApiMerchant();
		},
		openLocation() {
			// #ifdef MP-WEIXIN
			uni.chooseLocation({
				success: res => {
					const location = this.$_utils.getArea(res.address);
					this.location = location;
					(this.latitude = res.latitude), (this.longitude = res.longitude);
				}
			});
			this.getAllApiMerchant();
			// #endif
			// #ifdef APP-PLUS || MP-TOUTIAO
			this.goPage('/pages/index/SearchAddress');
			// #endif
		},
		getAllApiMerchant() {
			let params = {
				page: this.page,
				pageSize: this.pageSize,
				latitude: this.latitude,
				longitude: this.longitude
			};
			if (this.store_set.user_origin === 3) {
				params.keyword = this.select_origin;
			}
			this.loading_status = 'loading';
			this.$u.api.getAllApiMerchant(params).then(res => {
				if (this.page === 1) {
					this.store_list = res.data;
				} else {
					this.store_list = this.store_list.concat(res.data);
				}
				this.pageTotal = res.pageTotal;
				this.loading_status = this.$_utils.loadStatus(this.page, this.pageSize, this.pageTotal);
			});
		},
		getSettingMerchant() {
			this.$u.api
				.getSettingMerchant({
					type: 6
				})
				.then(res => {
					if (JSON.stringify(res.data) === '{}') {
						return;
					}
					this.store_set = res.data;
				});
		}
	}
};
</script>

<style scoped lang="scss">
.banner-view {
	background-color: #ffffff;
}
.store_origin {
	background-color: #ffffff;
	padding: 20rpx 24rpx;
	font-size: 30rpx;

	.origin_text {
		color: #999999;
		font-size: 24rpx;
	}

	.origin_desc {
		color: red;
		font-size: 24rpx;
	}
}

.store_select {
	background-color: #ffffff;
	padding: 20rpx 24rpx;
	font-size: 30rpx;

	.search_text {
		margin-top: 10rpx;

		.select_text {
			font-weight: 560;
			margin-right: 10rpx;
		}
	}

	.select_search {
		width: 520rpx;
		margin-left: 30rpx;
	}
}

.store-ul {
	background-color: #ffffff;
	padding: 30rpx 24rpx 0;
	margin-bottom: 20rpx;
	.store-li {
		display: flex;
		margin-bottom: 30rpx;

		.store-img {
			image {
				width: 170rpx;
				height: 170rpx;
				border-radius: 8rpx;
			}
		}

		.store-info {
			width: 412rpx;
			padding: 0 30rpx;

			.store-name {
				font-size: 30rpx;
			}

			.store-desc {
				font-size: 24rpx;
				color: #999999;
				-webkit-line-clamp: 1;
				margin-bottom: 10rpx;
			}

			.store-address {
				font-size: 26rpx;
				color: #666666;
				-webkit-line-clamp: 1;
				margin-bottom: 10rpx;
			}

			.store-distance {
				font-size: 24rpx;
				color: #666666;
				-webkit-line-clamp: 1;

				.address-icon {
					display: inline-block;
					width: 30rpx;
					height: 30rpx;
					line-height: 30rpx;
					text-align: center;
					border-radius: 4rpx;
					margin-right: 10rpx;
				}
			}
		}

		.in-btn {
			width: 120rpx;
			line-height: 50rpx;
			color: #ffffff;
			border-radius: 6rpx;
			height: 50rpx;
			text-align: center;
			font-size: 24rpx;
			transform: translateY(60rpx);
		}
	}
}
</style>