shengxian/pages/order/express/store-address2.vue

<!-- 自提点 -->
<template>
	<view class="map-box">
		<!-- 标题栏 -->
		<view class="dragLayer safe-area-inset-bottom" :class="moveCard">
			<view class="oilStation">
				<!-- 自提点列表 -->
				<scroll-view class="oilStation-bottom" enable-back-to-top scroll-y>
					<view class=" list-content">
						<u-radio-group style="width: 100%;" v-model="storeId" active-color="#e9b561">
							<view style="width: 100%;" @tap="selStoreAddress(address.id, index)" v-for="(address, index) in addressList" :key="address.id">
								<view class="address-item u-flex u-col-center u-row-between">
									<view class="address-left">
										<!-- 门店 -->
										<view class="address-name">{{ address.name }}</view>
										<!-- 时间 -->
										<view class="time-box ">
											<view class=" u-flex u-col-center">
												<text class="u-iconfont uicon-clock u-m-r-20" style="color: #999;"></text>
												{{ address.openhours }}
											</view>
											<view class="u-flex u-col-center u-p-l-30 u-m-t-20">
												<text v-for="week in address.openweeks_arr" :key="week">{{ weekMap[week] }}、</text>
											</view>
										</view>
										<!-- 地址 -->
										<view class="address-detail u-flex u-col-center">
											<text class="u-iconfont uicon-map u-m-r-20" style="color: #999;"></text>
											{{ address.province_name }}{{ address.city_name }}{{ address.area_name }}{{ address.address }}
										</view>
										<!-- 电话 -->
										<view class="address-phone u-flex u-col-center">
											<text class="u-iconfont uicon-phone u-m-r-20" style="color: #999;"></text>
											{{ address.phone }}
										</view>
									</view>
									<view class="address-right u-flex-col u-row-center u-col-center">
										<u-radio :name="address.id"></u-radio>
										<text class="address-distance u-m-t-10">{{ address.distance_text || 0 }}</text>
									</view>
								</view>
							</view>
						</u-radio-group>
					</view>
				</scroll-view>
				<view class="foot_box u-flex u-row-center u-col-center"><button class="u-reset-button save-btn" @tap="onSave">确认</button></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			longitude: 0,
			latitude: 0,
			mapHeight: 0,
			showCard: false,
			moveCard: 'dragLayer-bottom',
			distance: 0,
			storeId: 0, //默认门店ID
			addressList: [], //门店列表
			storeInfo: [], //当前门店信息
			weekMap: {
				1: '周一',
				2: '周二',
				3: '周三',
				4: '周四',
				5: '周五',
				6: '周六',
				7: '周日'
			},
			loadStatus: 'loadmore',
			currentPage: 1,
			lastPage: 1,
			searchVal: ''
		};
	},
	computed: {},
	onLoad(options) {
		console.log(options)
		this.latitude = this.$Route.query.lat;
		this.longitude = this.$Route.query.lng;
		this.storeId = this.$Route.query.storeId;
		this.getStoreAddress();
	},
	methods: {
		// 选中门店
		onSave() {
			if (this.storeId) {
				uni.$emit('SELECT_STORE1', { storeInfo: JSON.stringify(this.storeInfo) });
				this.$Router.back();
			} else {
				this.$u.toast('请选择门店');
			}
		},
		// 选择门店
		selStoreAddress(id, index) {
			this.storeId = id;
			this.latitude = this.addressList[index].latitude;
			this.longitude = this.addressList[index].longitude;
			this.storeInfo = this.addressList[index];
		},
		// 获取商品支持的自提点。
		async getStoreAddress() {
			let that = this;
			let { code, data } = await that.$http('common.getNearbyStore', {
				latitude: that.latitude,
				longitude: that.longitude,
			}, '')
			if (code === 1) {
				if(data && data.length > 0){
				 data.sort((a,b)=>{
				  return a.distance - b.distance
				 })
				}
				that.addressList = data
			}
		},

	}
};
</script>

<style lang="scss">
.search-wrap {
	/* #ifdef MP-WEIXIN */
	width: 460rpx;
	/* #endif */
	/* #ifndef MP-WEIXIN */
	width: 100%;
	/* #endif */
}
/* 浮层 */
.dragLayer {
	width: 750rpx;
	position: fixed;
	z-index: 996;
	background-color: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	bottom: 0;
	box-shadow: 0px 1rpx 18rpx 0px rgba(83, 83, 83, 0.35);
	display: flex;
	height: 100%;
}

.oilStation {
	width: 690rpx;
	margin: 0 30rpx;
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 100%;
}
.oilStation-top {
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.touch-guide {
	justify-content: center;
	align-items: center;
	height: 100rpx;
}
.touch-jintou {
	width: 60rpx;
	height: 8rpx;
}
// 确认门店
.foot_box {
	height: 100rpx;
	background-color: #fff;
	.save-btn {
		color: #fff;
		width: 690rpx;
		line-height: 80rpx;
		background: linear-gradient(90deg, rgba(233, 181, 97, 1), rgba(238, 204, 138, 1));
		box-shadow: 1rpx 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		border-radius: 40rpx;
		font-size: 28rpx;
	}
}

// 自提点列表
.oilStation-bottom {
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
	flex: 1;
	height: 100%;
	overflow: hidden;
}
.list-content {
	background-color: #fff;
	overflow-x: hidden;
}
.address-item {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #eef1f4;
	padding: 15rpx 0 15rpx;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
}
.address-name {
	font-size: 30rpx;

	font-weight: 600;
	color: rgba(51, 51, 51, 1);
	margin-bottom: 30rpx;
}
.time-box,
.address-detail,
.address-phone {
	flex-direction: row;
	align-items: center;
	font-size: 24rpx;

	font-weight: 400;
	color: #666;
	margin-bottom: 20rpx;
}
.address-icon {
	color: #bdbdbd;
	margin-right: 10rpx;
	font-size: 30rpx;
}
.address-left {
	flex: 1;
}
.address-right {
	align-items: center;
	color: #a8700e;
	font-size: 24rpx;
	margin-bottom: 20rpx;
	white-space: nowrap;
}
.more {
	width: 750rpx;
	height: 90rpx;
	justify-content: center;
	align-items: center;
}

.more-text {
	font-size: 24rpx;
	color: #ccc;
}
</style>