LocalLivingServicesUniapp/pages/orderingSet/index.vue

<template>
	<view class="page">
		<view class="page-content">
			<u-navbar title="门店管理" :autoBack="true" :placeholder="true" :border-bottom="false"></u-navbar>

			<!-- 下单类型 -->
			<view class="mode-card">
				<text class="mode-label">下单类型</text>
				<u-radio-group v-model="orderMode" active-color="#5B9EFF" :disabled="modeSaving" @change="onModeChange">
					<u-radio name="orderOnly" active-color="#3B4DF8" class="u-m-r-52">仅下单</u-radio>
					<u-radio name="orderPay" active-color="#3B4DF8" class="radio-item">下单和支付</u-radio>
				</u-radio-group>
			</view>

			<view class="table-card">
				<view class="table-head">
					<text class="table-title">桌号·共{{ total }}桌</text>
					<view v-if="tableList.length" class="add-link" @click="openAdd">
						<u-icon name="plus" color="#165DFF" size="26"></u-icon>
						<text>添加桌号</text>
					</view>
				</view>

				<!-- 空态 -->
				<view v-if="!tableList.length" class="empty-box">
					<view class="empty-illust">
						<u-image width="350rpx" height="350rpx" :src="`${$config.staticUrl}/static/common/empty.png`"></u-image>
					</view>
					<text class="empty-text">您的门店暂无桌号哦~</text>
					<view class="empty-btn" @click="openAdd">去添加桌号</view>
				</view>

				<!-- 列表：仅此区域滚动 -->
				<scroll-view
					v-else
					scroll-y
					class="table-scroll"
					:lower-threshold="80"
					@scrolltolower="loadMore"
				>
					<view class="table-list">
						<view class="list-row" v-for="item in tableList" :key="item.id || item.no">
							<text class="no-text">{{ item.no }}-桌号</text>
							<view class="qr-entry" @click="openQr(item)">
								<image class="qr-ico" :src="`${$config.staticUrl}/static/order-food/icon-qrcode.png`" mode="aspectFit"></image>
								<text>二维码</text>
							</view>
						</view>
						<u-loadmore :status="loadStatus" margin-top="24" margin-bottom="24" />
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="footer" v-if="tableList.length">
			<view class="btn soft" @click="goDownload">下载链接</view>
		</view>

		<!-- 添加桌号：底部弹层 -->
		<u-popup v-model="addVisible" mode="bottom" border-radius="24" :mask-close-able="true">
			<view class="add-sheet">
				<view class="sheet-title">门店桌号</view>
        		<view class="sheet-card">
				  <view class="sheet-sub">桌号·共{{ total }}桌</view>
				  <view class="range-row">
				  	<input
				  		class="range-input"
				  		type="number"
				  		v-model="startNo"
				  		placeholder="请输入开始桌号"
				  		placeholder-class="ph"
				  	/>
				  	<text class="range-dash"></text>
				  	<input
				  		class="range-input"
				  		type="number"
				  		v-model="endNo"
				  		placeholder="请输入结束桌号"
				  		placeholder-class="ph"
				  	/>
				  </view>
        		</view>
				<view class="btn primary sheet-btn" @click="confirmAdd">确认添加</view>
			</view>
		</u-popup>

		<!-- 校验提示弹窗 -->
		<u-popup v-model="tipVisible" mode="center" border-radius="24" :mask-close-able="false">
			<view class="tip-dialog">
				<view class="tip-title">提示</view>
				<view class="tip-content">{{ tipMessage }}</view>
				<view class="tip-ok" @click="tipVisible = false">确定</view>
			</view>
		</u-popup>

		<!-- 查看二维码：底部弹层 -->
    	<QrCodePopup
			v-model="qrVisible"
			:table-no="currentTable.no"
			:mini-qr-url="miniQrUrl"
			:official-qr-url="officialQrUrl"
		></QrCodePopup>
	</view>
</template>

<script>
  	import QrCodePopup from './components/QrCodePopup.vue'
	import {
		batchCreateTables,
		fetchDiningConfig,
		fetchTableList,
		getMerchantId,
		mapDiningModeToOrderMode,
		mapOrderModeToDiningMode,
		normalizeTableList,
		parseDiningConfigResponse,
		parseTableListResponse,
		saveDiningConfig
	} from '@/api/diningTable.js'

	const STORAGE_MODE = 'ordering_order_mode'

	function buildQrContent(merchantId, tableNo) {
		return `${merchantId || ''}桌号${tableNo}`
	}

	function buildQrImageUrl(content) {
		return `https://api.qrserver.com/v1/create-qr-code/?size=280x280&data=${encodeURIComponent(content)}`
	}

	export default {
		data() {
			return {
				orderMode: 'orderOnly',
				tableList: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				loadStatus: 'loadmore',
				listLoading: false,
				addVisible: false,
				startNo: '',
				endNo: '',
				qrVisible: false,
				currentTable: { no: '' },
				miniQrUrl: '',
				officialQrUrl: '',
				merchantId: '',
				modeSaving: false,
				tipVisible: false,
				tipMessage: '',
				submitting: false
			}
		},
    components: {
			QrCodePopup
		},
		onShow() {
			this.merchantId = getMerchantId()
			this.loadDiningConfig()
			this.loadData(true)
		},
		methods: {
			storageKey(base) {
				return `${base}_${this.merchantId || 'default'}`
			},
			loadMore() {
				this.loadData(false)
			},
			loadDiningConfig() {
				if (!this.merchantId) return
				fetchDiningConfig(this.merchantId).then(res => {
					if (res.data.code !== 200 || !res.data.result) return
					const cfg = parseDiningConfigResponse(res.data.result)
					if (cfg.diningMode) {
						this.orderMode = mapDiningModeToOrderMode(cfg.diningMode)
						uni.setStorageSync(this.storageKey(STORAGE_MODE), this.orderMode)
					}
				}).catch(() => {})
			},
			loadData(refresh = true) {
				if (!this.merchantId) {
					this.tableList = []
					this.total = 0
					return
				}
				if (this.listLoading) return
				if (!refresh && this.loadStatus === 'nomore') return

				if (refresh) {
					this.pageNo = 1
					this.loadStatus = 'loadmore'
				}

				const requestPage = refresh ? 1 : this.pageNo
				this.listLoading = true
				if (!refresh) this.loadStatus = 'loading'

				fetchTableList(this.merchantId, {
					pageNo: requestPage,
					pageSize: this.pageSize
				}).then(res => {
					if (res.data.code !== 200) {
						if (refresh) {
							this.tableList = []
							this.total = 0
						}
						this.showTip(res.data.message || '获取桌号列表失败')
						return
					}
					const parsed = parseTableListResponse(res.data.result)
					const newList = normalizeTableList(parsed.list)
					this.tableList = refresh
						? newList
						: normalizeTableList(this.tableList.concat(newList))
					this.total = parsed.total
					this.pageNo = parsed.current + 1
					this.loadStatus = parsed.hasMore ? 'loadmore' : 'nomore'
				}).catch(() => {
					if (refresh) {
						this.tableList = []
						this.total = 0
					}
					this.loadStatus = 'loadmore'
					this.showTip('获取桌号列表失败，请稍后重试')
				}).finally(() => {
					this.listLoading = false
				})
			},
			showTip(msg) {
				this.tipMessage = msg
				this.tipVisible = true
			},
			onModeChange(val) {
				if (!this.merchantId) {
					this.showTip('未获取到门店信息')
					this.$nextTick(() => {
						this.orderMode = val === 'orderPay' ? 'orderOnly' : 'orderPay'
					})
					return
				}
				if (this.modeSaving) return

				const prevMode = val === 'orderPay' ? 'orderOnly' : 'orderPay'
				this.modeSaving = true
				uni.showLoading({ title: '保存中', mask: true })

				saveDiningConfig({
					merchantId: this.merchantId,
					diningMode: mapOrderModeToDiningMode(val),
          enabled: true, // 是否启用线上扫码点餐
          version: 0 // 版本号
				}).then(res => {
					if (res.data.code === 200) {
						const cfg = parseDiningConfigResponse(res.data.result || {})
						if (cfg.diningMode) this.orderMode = mapDiningModeToOrderMode(cfg.diningMode)
						uni.setStorageSync(this.storageKey(STORAGE_MODE), this.orderMode)
						uni.showToast({ title: '设置成功', icon: 'success' })
						return
					}
					this.orderMode = prevMode
					this.showTip(res.data.message || '保存失败')
				}).catch((err) => {
					this.orderMode = prevMode
					const msg = (err && err.data && err.data.message) || '保存失败，请稍后重试'
					this.showTip(msg)
				}).finally(() => {
					this.modeSaving = false
					uni.hideLoading()
				})
			},
			openAdd() {
				this.startNo = ''
				this.endNo = ''
				this.addVisible = true
			},
			confirmAdd() {
				const startRaw = String(this.startNo).trim()
				const endRaw = String(this.endNo).trim()
				if (!startRaw || !endRaw) {
					this.showTip('桌号不能为空')
					return
				}
				if (!/^[0-9]+$/.test(startRaw) || !/^[0-9]+$/.test(endRaw)) {
					this.showTip('桌号仅支持正整数')
					return
				}
				const start = parseInt(startRaw, 10)
				const end = parseInt(endRaw, 10)
				if (start < 1 || end < 1) {
					this.showTip('桌号不能为空')
					return
				}
				if (start > end) {
					this.showTip('开始桌号不能大于结束桌号')
					return
				}
				if (end - start + 1 > 200) {
					this.showTip('单次最多添加200个桌号')
					return
				}
				if (!this.merchantId) {
					this.showTip('未获取到门店信息')
					return
				}
				if (this.submitting) return

				const payload = {
					merchantId: this.merchantId,
					startTableCode: startRaw,
					endTableCode: endRaw,
					diningMode: mapOrderModeToDiningMode(this.orderMode)
				}

				this.submitting = true
				uni.showLoading({ title: '提交中', mask: true })
				batchCreateTables(payload).then(res => {
					if (res.data.code === 200) {
						this.addVisible = false
						this.startNo = ''
						this.endNo = ''
						this.loadData(true)
						uni.showToast({ title: '添加成功', icon: 'success' })
					} else {
						this.showTip(res.data.message || '添加失败')
					}
				}).catch((err) => {
					const msg = (err && err.data && err.data.message) || '网络异常，请稍后重试'
					this.showTip(msg)
				}).finally(() => {
					this.submitting = false
					uni.hideLoading()
				})
			},
			goDownload() {
				uni.navigateTo({ url: '/pages/orderingSet/download' })
			},
			openQr(item) {
				this.currentTable = item
				if (item.miniQrUrl) {
					this.miniQrUrl = item.miniQrUrl
					this.officialQrUrl = item.officialQrUrl || ''
				} else {
					const content = buildQrContent(this.merchantId, item.no)
					this.miniQrUrl = buildQrImageUrl(content)
					this.officialQrUrl = ''
				}
				this.qrVisible = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	$theme: #5b9eff;
	$theme-soft: #E8F3FF;
	$page-bg: #F7F7F7;

	.page {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: $page-bg;
		box-sizing: border-box;
    	font-family: PingFang SC, PingFang SC;
    	font-weight: 400;
    	line-height: 44rpx;
	}

	.page-content {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding: 0 32rpx 5rpx;
		box-sizing: border-box;
	}

	.mode-card {
		flex-shrink: 0;
		margin: 24rpx 0 32rpx;
		padding: 32rpx;
		background: #fff;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
    	font-size: 28rpx;
    	color: #1D2129;

		.mode-label {
      		font-weight: 500;
      		font-size: 32rpx;
      		color: #1D2129;
		}
	}

	.table-card {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: #fff;
		border-radius: 24rpx;
    	background: linear-gradient( -216deg, #DEEEFF 0%, #FFFFFF 28%);
	}

	.table-head {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
    	border-bottom: 1rpx solid #EEEEEE;

		.table-title {
			font-size: 30rpx;
			color: #1d2129;
			font-weight: 600;
		}

		.add-link {
			display: flex;
			align-items: center;
			gap: 8rpx;
			font-size: 28rpx;
      		font-weight: 500;
      		font-size: 28rpx;
      		color: #165DFF;
		}
	}

	.empty-box {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		padding-bottom: 72rpx;

		.empty-text {
  			font-size: 28rpx;
      		color: #86909C;
			margin: 8rpx 0 48rpx;
		}

		.empty-btn {
      		width: 264rpx;
      		height: 72rpx;
      		background: #E8F3FF;
      		border-radius: 140rpx;
      		border: 1rpx solid #1C7CF9;
			display: flex;
			align-items: center;
			justify-content: center;
      		font-weight: 500;
      		font-size: 28rpx;
      		color: #165DFF;
		}
	}

	.table-scroll {
		flex: 1;
		height: 0;
		min-height: 0;
	}

	.table-list {
		padding: 0 20rpx 10rpx 32rpx;
	}

	.list-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 8rpx;
		margin: 0 12rpx;
		border-bottom: 1rpx solid #f0f2f5;

		&:last-child {
			border-bottom: none;
		}

		.row-left {
			display: flex;
			align-items: center;
			gap: 20rpx;
		}

		.no-text {
			font-size: 32rpx;
      		color: #4E5969;
		}

		.qr-entry {
			display: flex;
			align-items: center;
			gap: 8rpx;
      		font-weight: 500;
			font-size: 26rpx;
			color: #86909c;

			.qr-ico {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.footer {
		flex-shrink: 0;
		padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom));
		background: #fff;
		z-index: 20;
	}

	.btn {
		height: 88rpx;
   	 	border-radius: 140rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
    	font-size: 32rpx;
    	color: #FFFFFF;

		&.soft {
      		background: #E8F3FF;
      		border-radius: 140rpx;
      		border: 1rpx solid #1C7CF9;
      		color: #165DFF;
		}

		&.primary {
			background: linear-gradient( 88deg, #0FB0FF 0%, #2260F6 100%);
			color: #fff;
		}
	}

	.add-sheet {
		padding: 0 32rpx calc(40rpx + env(safe-area-inset-bottom));
		background: #fff;
	}

	.sheet-title {
	  	text-align: center;
    	font-weight: 500;
    	font-size: 32rpx;
    	color: #1D2129;
    	padding: 56rpx 0 52rpx;

	}

  .sheet-card {
    background: linear-gradient( -216deg, #DEEEFF 0%, #FFFFFF 18%);
    border-radius: 24rpx;
    border: 1rpx solid #11ADFF;
	margin-bottom: 598rpx;

	  .sheet-sub {
		  font-size: 28rpx;
		  color: #1d2129;
		  font-weight: 500;
      	  padding: 32rpx 32rpx 24rpx;
      	  border-bottom: 1rpx solid #EEEEEE;
	  }

	  .range-row {
		  display: flex;
		  align-items: center;
		  gap: 94rpx;
          padding: 32rpx;
          text-align: center;

		  .range-input {
		  	flex: 1;
            font-weight: 500;
            font-size: 32rpx;
            color: #165DFF;
		  }
    
		  .range-dash {
		  	width: 40rpx;
       		height: 2rpx;
       		background: #C9CDD4;
		  }
    
		  .ph {
		  	font-size: 28rpx;
        	color: #C9CDD4;
		  }
	  }
  }

	.sheet-btn {
    	margin-top: 22rpx;
	}

	.tip-dialog {
		width: 560rpx;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
    	padding: 48rpx;

		.tip-title {
			text-align: center;
			font-weight: 500;
      		font-size: 32rpx;
      		color: #000000;
		}

		.tip-content {
			text-align: center;
			padding: 68rpx 0 106rpx;
      		font-size: 28rpx;
      		color: #1D2129;
		}

		.tip-ok {
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
      		font-size: 32rpx;
      		color: #FFFFFF;
      		height: 88rpx;
      		background: linear-gradient( 92deg, #0FB0FF 0%, #2260F6 100%);
      		border-radius: 140rpx;
		}
	}

  ::v-deep {
    .u-radio__label {
      margin: 0 0 0 16rpx;
    }
  }
</style>