mnsx/pages/order/choisestore.vue

<template>
	<view class="stores-wrapper">
		<scroll-view scroll-y="true" :style="{ height: height }" @scrolltolower="loadDate()" class="scroll-wrapper">
			<empty v-if="loaded === true && list.length === 0"></empty>
			<view class="store" v-for="item in list" @click="sele(item)">
				<view class="store-logo">
					<image :src="item.image" mode="" v-if="type == 1"></image>
					<text class="store-name clamp">{{ item.name }}</text>
				</view>
				<view class="store-addr store-base">
					地区：
					<text>{{ item.detailed_address }}</text>
				</view>
				<view class="store-addr store-base">
					电话：
					<text>{{ item.phone }}</text>
				</view>
				<view class="store-addr store-base">
					距离：
					<text>{{ item.distance | distance }}</text>
				</view>
				<view class="store-addr store-base">
					营业时间：
					<text>{{ item.day_time }}</text>
				</view>
				<view class="store-lv ">{{ type == 1 ? '门店' : '自提点' }}</view>
				<view class="store-lv " v-if="item.store_user" style="background: #9a0b09;">采购</view>
				<!-- <view class="store-can">支持自取</view> -->
				<view class="tocall flex" style="background-color: #9a0b09;" @click.stop="tocall(item.phone)">
					<image src="../../static/icon/tocall.png" mode=""></image>
				</view>
				<view class="todh flex" style="background-color: #388bff;" @click.stop="todh(item)">
					<image src="../../static/icon/todh.png" mode=""></image>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	import {
		loadIndexs,
		getIndexData,
		getStoreList,
		getPointList
	} from '@/api/index.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import empty from '@/components/empty';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			empty,
			uniLoadMore
		},
		data() {
			return {
				list: [],
				page: 1,
				limit: 10,
				loadingType: 'more',
				loaded: false,
				height: '',
				type: 0, //1为选择门店，2为选择自提点
				store_id: 0
			};
		},
		onLoad(opt) {
			this.type = opt.type;
			if (this.type == 2) {
				this.store_id = opt.id;
				uni.setNavigationBarTitle({
					title: '选择自提点'
				});
			}
			this.loadDate();
		},
		onReady() {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.scroll-wrapper').boundingClientRect();
					query.exec(function(res) {
						console.log(res, 'ddddddddddddd');
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		computed: {
			...mapState('user', ['userInfo', 'checkedStore', 'des', 'latlng', 'latitude', 'longitude'])
		},
		filters: {
			distance(val) {
				let str = '';
				if (val) {
					if (val * 1 > 1000) {
						return (str = ((val * 1) / 1000).toFixed(1) + 'km');
					} else {
						return (str = (val * 1).toFixed(0) + 'm');
					}
				}
				return str;
			}
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'setOrderInfo', 'setStoreInfo', 'setPointInfo', 'setDes']),
			loadDate() {
				if (this.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				//修改当前对象状态为加载中
				this.loadingType = 'loading';
				if (this.type == 1) {
					getStoreList({
							page: this.page,
							limit: this.limit,
							latitude: this.latitude,
							longitude: this.longitude
						})
						.then(({
							data
						}) => {
							console.log(data.list, '店面列表');
							let arr = data.list.map(item => {
								return item;
							});
							this.list = this.list.concat(arr);
							this.page++;
							if (this.limit == data.list.length) {
								this.loadingType = 'more';
							} else {
								this.loadingType = 'noMore';
							}
							this.$set(this, 'loaded', true);
						})
						.catch(err => {
							console.log(err);
						});
				} else {
					getPointList({
								page: this.page,
								limit: this.limit,
								latitude: this.latitude,
								longitude: this.longitude
							},
							this.store_id
						)
						.then(({
							data
						}) => {
							console.log(data.list, '自提点列表');
							let arr = data.list.map(item => {
								return item;
							});
							this.list = this.list.concat(arr);
							this.page++;
							if (this.limit == data.list.length) {
								this.loadingType = 'more';
							} else {
								this.loadingType = 'noMore';
							}

							this.$set(this, 'loaded', true);
						})
						.catch(err => {
							console.log(err);
						});
				}
			},
			sele(item) {
				this.getCurrentPages;
				let obj = this;
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				if (this.type == 1) {
					this.setStoreInfo(item);
					this.setDes(item.distance);
					this.setPointInfo('');
					uni.navigateBack({
						success: function() {
							console.log(prevPage.$vm);
							prevPage.$vm.refrech(); // 执行上一页的onLoad方法
						}
					});
				} else if (this.type == 2) {
					this.setPointInfo(item);
					uni.navigateBack({});
				}
			},
			tocall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			// 导航
			todh(item) {
				console.log(item)
				wx.openLocation({
					latitude: item.latitude * 1,
					longitude: item.longitude * 1,
					name: item.name,
					address: item.detailed_address
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f6f6;
		height: 100%;
	}

	.stores-wrapper {
		padding-top: 20rpx;
		height: 100%;

		.store {
			width: 710rpx;
			// height: 231rpx;
			background: #ffffff;
			box-shadow: 0px 0px 20rpx 0rpx rgba(50, 50, 52, 0.06);
			border-radius: 10rpx;
			// margin-bottom: 15rpx;
			margin: 0 auto 15rpx;
			position: relative;
			padding: 25rpx 0 20rpx 20rpx;

			.store-logo {
				height: 65rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				line-height: 65rpx;
				margin-bottom: 20rpx;
				position: relative;

				image {
					width: 65rpx;
					height: 65rpx;
					border-radius: 50%;
				}

				.store-name {
					max-width: 500rpx;
					display: inline-block;
					padding-left: 12rpx;
					position: absolute;
					top: 0;
				}
			}

			.store-base {
				height: 37rpx;
				line-height: 37rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #333333;

				text {
					font-weight: normal;
				}
			}

			.store-lv {
				display: inline-block;
				// width: 60rpx;
				padding: 0 10rpx;
				height: 40rpx;
				background: linear-gradient(-90deg, #dcb876 0%, #eecd92 100%);
				border-radius: 5rpx;
				text-align: center;
				line-height: 40rpx;
				color: #fff;
				font-size: 23rpx;
				position: absolute;
				right: 20rpx;
				top: 38rpx;
			}

			.store-can {
				width: 113rpx;
				height: 44rpx;
				border: 2px solid #901b21;
				border-radius: 5rpx;
				font-size: 23rpx;
				text-align: center;
				line-height: 44rpx;
				font-weight: 500;
				color: #901b21;
				position: absolute;
				right: 20rpx;
				bottom: 25rpx;
			}
		}
	}

	.tocall {
		position: absolute;
		right: 25rpx;
		bottom: 50rpx;
		height: 50rpx;
		width: 50rpx;
		border-radius: 25rpx;
		color: #fff;
		font-size: 28rpx;
		justify-content: center;
		line-height: 50rpx;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.todh {
		position: absolute;
		right: 100rpx;
		bottom: 50rpx;
		height: 50rpx;
		width: 50rpx;
		border-radius: 25rpx;
		color: #fff;
		font-size: 28rpx;
		justify-content: center;
		line-height: 50rpx;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>