LocalLivingServicesUniapp/pages/topUp/shareStore.vue

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

		<view class="list-wrap">
			<ListScrollView
				v-if="locationReady"
				ref="listScroll"
				:api="api"
				:init="initParams"
				:pageSize="10"
				@afterFetch="afterFetch"
			>
				<template v-slot:list="{ data }">
					<view class="list">
						<view class="store-card" v-for="item in data" :key="item.id">
							<view class="del-btn" @click.stop="onDelete(item)">
								<image class="del-bg" src="/static/topUp/del.png" mode="scaleToFill"></image>
								<text class="del-text">删除</text>
							</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 u-line-1">{{ item.address || '暂无地址' }}</view>
								<view class="distance" v-if="item.distance">距您{{ item.distance }}</view>
							</view>
						</view>
					</view>
				</template>
			</ListScrollView>
		</view>

		<view class="footer">
			<view class="add-btn" :class="{ disabled: !canAdd }" @click="goAdd">添加</view>
		</view>

		<!-- 删除确认弹窗 -->
		<u-popup v-model="confirmVisible" mode="center" border-radius="24" :mask-close-able="false">
			<view class="confirm-dialog">
				<view class="confirm-title">提示</view>
				<view class="confirm-body">
					<text class="confirm-text">是否确认删除该共享门店?</text>
				</view>
				<view class="confirm-footer">
					<view class="btn cancel" @click="onConfirmCancel">取消</view>
					<view class="btn ok" @click="confirmDelete">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import prepaidApi, { getMerchantId, getMerchantLocation, formatStoreDistance } from '@/api/memberPrepaid.js'
	import ListScrollView from '@/components/list-scroll-view/index.vue'

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

	export default {
		components: {
			ListScrollView
		},
		data() {
			return {
				defaultLogo: DEFAULT_LOGO,
				canAdd: false,
				confirmVisible: false,
				pendingDelete: null,
				deleting: false,
				longitude: null,
				latitude: null,
				locationReady: false,
				api: {
					url: `${BASE}/store/shared/page`,
					method: 'GET'
				},
				initParams: {
					merchantId: getMerchantId()
				}
			};
		},
		onShow() {
			this.confirmVisible = false;
			this.pendingDelete = null;
			this.refreshEnabled();
			this.ensureLocation()
				.then((loc) => {
					this.initParams = {
						merchantId: getMerchantId(),
						longitude: loc.longitude,
						latitude: loc.latitude
					};
					if (this.locationReady && this.$refs.listScroll && this.$refs.listScroll.mescroll) {
						this.$refs.listScroll.reloadList(this.initParams);
					} else {
						// 等经纬度就绪后再挂载列表，避免无坐标请求一次
						this.locationReady = true;
					}
				})
				.catch((err) => {
					this.initParams = { merchantId: getMerchantId() };
					uni.showToast({
						title: (err && err.message) || '获取门店位置失败',
						icon: 'none'
					});
					if (this.locationReady && this.$refs.listScroll && this.$refs.listScroll.mescroll) {
						this.$refs.listScroll.reloadList(this.initParams);
					} else {
						this.locationReady = true;
					}
				});
		},
		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;
				});
			},
			afterFetch(result) {
				const records = Array.isArray(result.records)
					? result.records
					: (result.page && Array.isArray(result.page.records) ? result.page.records : []);
				records.forEach((item) => {
					Object.assign(item, this.mapStore(item));
				});
			},
			refreshEnabled() {
				const merchantId = getMerchantId();
				if (!merchantId) {
					this.canAdd = false;
					return;
				}
				prepaidApi.getFeatureStatus(merchantId).then((res) => {
					if (res.data.code !== 200) return;
					const data = res.data.result || {};
					this.canAdd = Number(data.auditStatus) === 2 && Number(data.operationStatus) === 1;
				});
			},
			goAdd() {
				if (!this.canAdd) {
					uni.showToast({ title: '请先开启储值功能', icon: 'none' });
					return;
				}
				uni.navigateTo({ url: '/pages/topUp/shareStoreAdd' });
			},
			onDelete(item) {
				this.pendingDelete = item;
				this.confirmVisible = true;
			},
			onConfirmCancel() {
				this.confirmVisible = false;
				this.pendingDelete = null;
			},
			confirmDelete() {
				const item = this.pendingDelete;
				this.confirmVisible = false;
				this.pendingDelete = null;
				if (!item || this.deleting) return;

				this.deleting = true;
				prepaidApi
					.removeSharedStore(item.id)
					.then((res) => {
						if (res.data.code === 200) {
							uni.showToast({ title: '已删除共享', icon: 'none' });
							if (this.$refs.listScroll) {
								this.$refs.listScroll.reloadList(this.initParams);
							}
						} else {
							uni.showToast({ title: res.data.message || '删除失败', icon: 'none' });
						}
					})
					.catch(() => {
						uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
					})
					.then(() => {
						this.deleting = false;
					});
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		height: 100vh;
		background: #f7f7f7;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.list-wrap {
		flex: 1;
		min-height: 0;
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.list {
		padding: 24rpx;
	}

	.store-card {
		position: relative;
		display: flex;
		align-items: flex-start;
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		overflow: hidden;

		.del-btn {
			position: absolute;
			top: 0;
			right: 0;
			width: 96rpx;
			height: 44rpx;
			z-index: 2;

			.del-bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}

			.del-text {
				position: relative;
				z-index: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				font-size: 22rpx;
				color: #1C7CF9;
				line-height: 1;
				padding-left: 8rpx;
				box-sizing: border-box;
			}
		}

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

		.info {
			flex: 1;
			min-width: 0;
			padding-right: 80rpx;
			position: relative;

			.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 {
				font-size: 22rpx;
				color: #999;
				line-height: 1.4;
				padding-right: 120rpx;
			}

			.distance {
				position: absolute;
				right: 0;
				bottom: 0;
				font-size: 22rpx;
				color: #666;
				line-height: 1.4;
			}
		}
	}

	.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;

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

			&.disabled {
				background: #B7D4FF;
				color: #fff;
			}
		}
	}

	.confirm-dialog {
		width: 560rpx;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		padding: 48rpx 40rpx 40rpx;
		box-sizing: border-box;

		.confirm-title {
			text-align: center;
			font-size: 34rpx;
			font-weight: 600;
			color: #333;
			line-height: 1.4;
			margin-bottom: 28rpx;
		}

		.confirm-body {
			padding: 0 8rpx 40rpx;

			.confirm-text {
				display: block;
				text-align: center;
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;
			}
		}

		.confirm-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 24rpx;

			.btn {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				font-size: 30rpx;
				box-sizing: border-box;
			}

			.cancel {
				color: #999;
				background: #fff;
				border: 2rpx solid #dcdcdc;
			}

			.ok {
				color: #fff;
				background: linear-gradient(90deg, #3ab3ff 0%, #2472ff 100%);
				border: none;
			}
		}
	}
</style>