LocalLivingServicesUniapp/pages/topUp/shareStoreAdd.vue

<template>
	<view class="page">
		<u-navbar title="共享门店" :autoBack="true" :placeholder="true"></u-navbar>

		<!-- 可选门店列表 -->
		<view class="list" v-if="candidateList.length">
			<view
				class="store-card"
				v-for="item in candidateList"
				:key="item.id"
				@click="toggleSelect(item)"
			>
				<view class="checkbox" :class="{ checked: isSelected(item.id) }">
					<u-icon v-if="isSelected(item.id)" name="checkmark" color="#fff" size="14"></u-icon>
				</view>
				<image class="logo" :src="item.logo || defaultLogo" mode="aspectFill"></image>
				<view class="info">
					<view class="name u-line-1">{{ item.name }}</view>
					<view class="meta">
						<view class="stars">
							<u-icon
								v-for="n in 5"
								:key="n"
								name="heart-fill"
								:color="n <= Math.round(item.rating) ? '#FF4D4F' : '#E5E5E5'"
								size="20"
							></u-icon>
						</view>
						<text class="meta-text">{{ formatRating(item) }}</text>
					</view>
					<view class="addr-row">
						<text class="addr u-line-1">{{ item.address || '暂无地址' }}</text>
						<text class="distance" v-if="item.distance">距您{{ item.distance }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="empty-wrap" v-else-if="!loading">
			<u-empty text="暂无可添加门店" mode="list"></u-empty>
		</view>
		<view class="empty-wrap" v-else>
			<u-loading mode="circle" size="48"></u-loading>
		</view>

		<!-- 数据说明 -->
		<view class="tips-box" v-if="candidateList.length || !loading">
			<view class="tips-title">数据说明</view>
			<view class="tips-content" :class="{ collapsed: !tipsExpanded }">
				<text class="tips-text">{{ tipsDisplayText }}</text>
			</view>
			<view class="tips-toggle" @click="tipsExpanded = !tipsExpanded">
				<text>{{ tipsExpanded ? '收起' : '展开更多' }}</text>
				<u-icon :name="tipsExpanded ? 'arrow-up' : 'arrow-down'" color="#1C7CF9" size="12"></u-icon>
			</view>
		</view>

		<view class="footer">
			<view
				class="confirm-btn"
				:class="{ disabled: !selectedIds.length || submitting }"
				@click="onConfirm"
			>
				{{ submitting ? '提交中...' : '确认并添加' }}
			</view>
		</view>
	</view>
</template>

<script>
	import prepaidApi, { getMerchantLocation, formatStoreDistance } from '@/api/memberPrepaid.js'

	const DEFAULT_LOGO = '/static/index/shop.png'

	const TIPS_SHORT =
		'1、共享门店由对方商户自主开启权限控制，未开启权限的门店无法添加；若对方后续关闭权限，该门店将自动从共享列表中移除。'
	const TIPS_FULL =
		'1、共享门店由对方商户自主开启权限控制，未开启权限的门店无法添加；若对方后续关闭权限，该门店将自动从共享列表中移除。\n' +
		'2、添加共享后，储值本金可在所选门店通用消费；充值赠送的优惠券仅限原充值门店使用，不可跨店核销。\n' +
		'3、勾选门店并点击「确认并添加」后生效；结算时优先扣除共享储值余额。可随时取消共享，不影响已产生的订单。'

	export default {
		data() {
			return {
				defaultLogo: DEFAULT_LOGO,
				tipsExpanded: false,
				candidateList: [],
				selectedIds: [],
				loading: false,
				submitting: false,
				longitude: null,
				latitude: null
			};
		},
		computed: {
			tipsDisplayText() {
				return this.tipsExpanded ? TIPS_FULL : TIPS_SHORT;
			}
		},
		onLoad() {
			this.loadCandidates();
		},
		methods: {
			formatRating(item) {
				const score = Number(item.rating) || 0;
				const count = item.reviewCount;
				let countText = '';
				if (count === undefined || count === null || count === '') {
					countText = '暂无评论';
				} else if (typeof count === 'string') {
					countText = /评价|评论/.test(count) ? count : `${count}条评论`;
				} else {
					countText = `${count}条评论`;
				}
				return `${score.toFixed(1)}分 | ${countText}`;
			},
			mapStore(item) {
				return {
					id: item.merchantId || item.id,
					name: item.storeName || item.name || '',
					logo: item.headPhoto || item.logo || DEFAULT_LOGO,
					address: item.address || '',
					rating: Number(item.grade || item.rating || 0),
					reviewCount: item.commentNum ?? item.reviewCount ?? '',
					distance: formatStoreDistance(item)
				};
			},
			ensureLocation() {
				if (this.longitude != null && this.latitude != null) {
					return Promise.resolve({
						longitude: this.longitude,
						latitude: this.latitude
					});
				}
				return getMerchantLocation().then((loc) => {
					this.longitude = loc.longitude;
					this.latitude = loc.latitude;
					return loc;
				});
			},
			loadCandidates() {
				this.loading = true;
				this.ensureLocation()
					.then((loc) =>
						prepaidApi.getShareableStores({
							pageNo: 1,
							pageSize: 100,
							longitude: loc.longitude,
							latitude: loc.latitude
						})
					)
					.then((res) => {
						if (res.data.code !== 200) {
							uni.showToast({ title: res.data.message || '加载失败', icon: 'none' });
							return;
						}
						const page = res.data.result || {};
						const records = Array.isArray(page.records) ? page.records : [];
						this.candidateList = records.map((item) => this.mapStore(item));
						this.selectedIds = [];
					})
					.catch((err) => {
						this.candidateList = [];
						uni.showToast({
							title: (err && err.message) || '加载失败，请稍后重试',
							icon: 'none'
						});
					})
					.finally(() => {
						this.loading = false;
					});
			},
			isSelected(id) {
				return this.selectedIds.includes(id);
			},
			toggleSelect(item) {
				const idx = this.selectedIds.indexOf(item.id);
				if (idx >= 0) {
					this.selectedIds.splice(idx, 1);
				} else {
					this.selectedIds.push(item.id);
				}
			},
			onConfirm() {
				if (!this.selectedIds.length || this.submitting) return;

				this.submitting = true;
				prepaidApi
					.addSharedStores(this.selectedIds.slice())
					.then((res) => {
						if (res.data.code === 200) {
							uni.showToast({ title: '已添加共享门店', icon: 'none' });
							setTimeout(() => {
								uni.navigateBack();
							}, 400);
						} else {
							uni.showToast({ title: res.data.message || '添加失败', icon: 'none' });
						}
					})
					.catch(() => {
						uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
					})
					.finally(() => {
						this.submitting = false;
					});
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		min-height: 100vh;
		background: #f7f7f7;
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.list {
		padding: 24rpx 24rpx 0;
	}

	.store-card {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;

		.checkbox {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			border: 2rpx solid #ccc;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			margin-right: 16rpx;
			box-sizing: border-box;

			&.checked {
				background: #1C7CF9;
				border-color: #1C7CF9;
			}
		}

		.logo {
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
			background: #f0f0f0;
			flex-shrink: 0;
			margin-right: 20rpx;
		}

		.info {
			flex: 1;
			min-width: 0;

			.name {
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
				line-height: 1.35;
				margin-bottom: 10rpx;
			}

			.meta {
				display: flex;
				align-items: center;
				gap: 8rpx;
				margin-bottom: 10rpx;

				.stars {
					display: flex;
					align-items: center;
					gap: 2rpx;
				}

				.meta-text {
					font-size: 22rpx;
					color: #FF4D4F;
					line-height: 1.2;
				}
			}

			.addr-row {
				display: flex;
				align-items: center;
				gap: 12rpx;

				.addr {
					flex: 1;
					min-width: 0;
					font-size: 22rpx;
					color: #999;
					line-height: 1.4;
				}

				.distance {
					flex-shrink: 0;
					font-size: 22rpx;
					color: #999;
					line-height: 1.4;
				}
			}
		}
	}

	.tips-box {
		margin: 8rpx 24rpx 24rpx;
		padding: 24rpx;
		background: #fff;
		border-radius: 16rpx;

		.tips-title {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 16rpx;
		}

		.tips-content {
			.tips-text {
				font-size: 24rpx;
				color: #999;
				line-height: 1.7;
				white-space: pre-wrap;
			}

			&.collapsed {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
		}

		.tips-toggle {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6rpx;
			margin-top: 16rpx;
			font-size: 24rpx;
			color: #1C7CF9;
		}
	}

	.empty-wrap {
		padding-top: 120rpx;
		display: flex;
		justify-content: center;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 16rpx 32rpx calc(16rpx + env(safe-area-inset-bottom));
		background: #fff;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.04);
		z-index: 20;

		.confirm-btn {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 160rpx;
			background: linear-gradient(269deg, #2260F6 0%, #0FB0FF 100%);
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;

			&.disabled {
				background: #B7D4FF;
				color: #fff;
			}
		}
	}
</style>