LocalLivingServicesUniapp/pages/topUp/shareStore.vue

<template>
	<view class="page">
		<u-navbar title="共享门店" :autoBack="true" :placeholder="true"></u-navbar>
		<view class="list" v-if="storeList.length">
			<view class="store-card" v-for="item in storeList" :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>

		<view class="empty-wrap" v-else-if="loading">
			<u-loading mode="circle" size="48"></u-loading>
			<text class="empty-text">加载中...</text>
		</view>
		<view class="empty-wrap" v-else>
			<u-empty text="暂无数据" mode="list"></u-empty>
		</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'

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

	export default {
		data() {
			return {
				defaultLogo: DEFAULT_LOGO,
				canAdd: false,
				loading: false,
				storeList: [],
				confirmVisible: false,
				pendingDelete: null,
				deleting: false,
				longitude: null,
				latitude: null
			};
		},
		onShow() {
			this.confirmVisible = false;
			this.pendingDelete = null;
			this.refreshEnabled();
			this.loadList();
		},
		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)
				};
			},
			parseRecords(result) {
				if (!result) return [];
				if (Array.isArray(result)) return result;
				if (Array.isArray(result.records)) return result.records;
				if (result.page && Array.isArray(result.page.records)) return result.page.records;
				return [];
			},
			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;
				});
			},
			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;
				});
			},
			loadList() {
				this.loading = true;
				this.ensureLocation()
					.then((loc) =>
						prepaidApi.getSharedStores({
							pageNo: 1,
							pageSize: 100,
							longitude: loc.longitude,
							latitude: loc.latitude
						})
					)
					.then((res) => {
						if (res.data.code !== 200) {
							this.storeList = [];
							uni.showToast({ title: res.data.message || '加载失败', icon: 'none' });
							return;
						}
						const records = this.parseRecords(res.data.result);
						this.storeList = records.map((item) => this.mapStore(item));
					})
					.catch((err) => {
						this.storeList = [];
						uni.showToast({
							title: (err && err.message) || '加载失败，请稍后重试',
							icon: 'none'
						});
					})
					.then(() => {
						this.loading = false;
					});
			},
			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' });
							this.loadList();
						} 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 {
		min-height: 100vh;
		background: #f7f7f7;
		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;
			}
		}
	}

	.empty-wrap {
		padding-top: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16rpx;

		.empty-text {
			font-size: 26rpx;
			color: #999;
		}
	}

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