junzitang/pagesT/store/ChangeStore.vue

<template>
	<view :class="['qn-page-' + theme]">
		<view v-if="false"><map style="width: 750rpx; height: 450rpx;" :latitude="locationObj.latitude" :longitude="locationObj.longitude"></map></view>
		<view class="tabs-view" v-if="false">
			<u-tabs-swiper
				ref="tabs"
				:active-color="primaryColor"
				:bar-style="{ height: '6rpx', width: '60rpx' }"
				height="92"
				@change="tabsChange"
				:current="tab_current"
				:list="tab_list"
				:is-scroll="false"
			></u-tabs-swiper>
		</view>
		<view class="store-ul">
			<view class="store-li clearfix" v-for="(item, index) in store_list" :key="index" @click="changeStore(item)">
				<view class="float_left">
					<image class="logo" :src="item.logo || 'https://onlineimg.qianniao.vip/161190485572831/5037749c8b9dbef2f1d8bc75bd1c1733/shop-ic.jpg'" mode="aspectFill"></image>
				</view>
				<view class="store-info float_left">
					<view class="store-name ellipsis">{{ item.name }}</view>
					<view class="other-info clearfix">
						<view class="float_left">
							<text class="ibonfont ibonshijian"></text>
							<text v-if="item.openTime.isAllDay">全天营业</text>
							<text v-else>{{ item.openTime.start }}-{{ item.openTime.end }}</text>
						</view>
						<view class="float_right juli">{{ item.meters || '' }}</view>
					</view>
					<view class="other-info">
						<u-icon name="map-fill" size="28"></u-icon>
						<text>{{ item.area.provinceName }}{{ item.area.cityName }}{{ item.area.districtName }}{{ item.area.address }}</text>
					</view>
					<view class="other-info status-info clearfix">
						<view class="float_left" style="margin-right: 20rpx;">
							<text class="success" v-if="item.enableStatus === 5">营业中</text>
							<text class="info" v-else>已打烊</text>
						</view>
						<view class="float_left" v-if="nowStore.id === item.id"><u-tag mode="dark" size="mini" text="当前店铺" type="success" /></view>
						<view class="float_right">
							<text>切换店铺</text>
							<text class="ibonfont ibonjinru"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="loading_status" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading_status: 'nomore',
			tab_current: 0,
			tab_list: [{ name: '门店选择' }, { name: '常用/收藏' }],
			page: 1,
			pageSize: 10,
			store_list: [],
			pageTotal: 0
		};
	},
	computed: {
		locationObj() {
			return this.$store.state.locationObj;
		},
		// 获取当前门店数据
		nowStore() {
			return this.$store.state.nowStore;
		}
	},
	onLoad() {
		this.shopGetAll();
	},
	onReachBottom() {
		if (this.pageTotal / this.pageSize > this.page) {
			this.page += 1;
			this.shopGetAll();
		}
	},
	onPullDownRefresh() {
		uni.startPullDownRefresh();
		this.page = 1;
		this.shopGetAll();
	},
	methods: {
		shopGetAll() {
			this.$u.api
				.shopGetAll({
					page: this.page,
					pageSize: this.pageSize,
					longitude: this.locationObj.longitude, // 经度
					latitude: this.locationObj.latitude //纬度
				})
				.then(res => {
					uni.stopPullDownRefresh();
					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.store_list.length, res.pageTotal);
				})
				.catch(() => {
					uni.stopPullDownRefresh();
				});
		},
		tabsChange(index) {
			this.tab_current = index;
		},
		changeStore(item) {
			let content = '确认切换到该门店吗?';
			if (this.nowStore.id === item.id) {
				content = '您选中的是当前所在店铺，是否返回上级页面继续下单？';
			}
			uni.showModal({
				title: '温馨提示',
				content: content,
				success: res => {
					if (res.confirm) {
						if (this.nowStore.id !== item.id) {
							this.$store.commit('commit_nowStore', item);
						}
						setTimeout(() => {
							uni.navigateBack();
						}, 500);
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		phoneCall(mobile) {
			uni.makePhoneCall({
				phoneNumber: mobile
			});
		},
		openLocation(latitude, longitude) {
			uni.openLocation({
				latitude: latitude,
				longitude: longitude,
				name: this.locationObj.address,
				success: function() {
					console.log('success');
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.tabs-view {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
}
.store-ul {
	padding: 0 20rpx;
	.store-li {
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx 0;
		box-shadow: 2px 2px 7px 1px rgba(234, 232, 232, 0.5);
		.logo {
			display: block;
			width: 268rpx;
			height: 200rpx;
			border: 1px solid #f5f5f5;
		}
		.store-info {
			width: 376rpx;
			margin-left: 20rpx;
			position: relative;
			height: 200rpx;
			.store-name {
				width: 410rpx;
				-webkit-line-clamp: 1;
				margin-bottom: 8rpx;
			}
			.other-info {
				font-size: 24rpx;
				margin-top: 10rpx;
				color: #9d9d9d;
				.ibonfont {
					font-size: 22rpx;
					margin-right: 4rpx;
					display: inline-block;
					width: 28rpx;
					text-align: center;
				}
			}
			.status-info {
				position: absolute;
				bottom: 0;
				width: 100%;
				left: 0;
				color: #333333;
				.float_left {
					.success {
						color: $uni-color-success;
					}
					.info {
						color: #9d9d9d;
					}
				}
			}
		}
	}
}
</style>