|
|
@@ -0,0 +1,549 @@
|
|
|
+<template>
|
|
|
+ <view class="page">
|
|
|
+ <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" @change="onModeChange">
|
|
|
+ <u-radio name="orderOnly" active-color="#5B9EFF">仅下单</u-radio>
|
|
|
+ <u-radio name="orderPay" active-color="#5B9EFF">下单和支付</u-radio>
|
|
|
+ </u-radio-group>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="table-card" :style="{ paddingBottom: tableList.length ? '24rpx' : '0' }">
|
|
|
+ <view class="table-head">
|
|
|
+ <text class="table-title">桌号·共{{ tableList.length }}桌</text>
|
|
|
+ <view v-if="tableList.length" class="add-link" @click="openAdd">
|
|
|
+ <u-icon name="plus" color="#5B9EFF" size="26"></u-icon>
|
|
|
+ <text>添加桌号</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 空态 -->
|
|
|
+ <view v-if="!tableList.length" class="empty-box">
|
|
|
+ <view class="empty-illust">
|
|
|
+ <view class="box-lid"></view>
|
|
|
+ <view class="box-body"></view>
|
|
|
+ </view>
|
|
|
+ <text class="empty-text">您的门店暂无桌号哦~</text>
|
|
|
+ <view class="empty-btn" @click="openAdd">去添加桌号</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 列表 -->
|
|
|
+ <view v-else class="table-list">
|
|
|
+ <view class="list-row" v-for="item in tableList" :key="item.no">
|
|
|
+ <text class="no-text">{{ item.no }}-桌号</text>
|
|
|
+ <view class="qr-entry" @click="openQr(item)">
|
|
|
+ <image class="qr-ico" src="/static/scan/qrcode.png" mode="aspectFit"></image>
|
|
|
+ <text>二维码</text>
|
|
|
+ </view>
|
|
|
+ </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-sub">桌号·共{{ tableList.length }}桌</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 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>
|
|
|
+
|
|
|
+ <!-- 查看二维码：底部弹层 -->
|
|
|
+ <u-popup v-model="qrVisible" mode="bottom" border-radius="24" :mask-close-able="true">
|
|
|
+ <view class="qr-sheet">
|
|
|
+ <view class="sheet-title">{{ currentTable.no }}桌号二维码</view>
|
|
|
+ <view class="qr-block">
|
|
|
+ <image class="qr-img" :src="miniQrUrl" mode="aspectFit"></image>
|
|
|
+ <text class="qr-label">小程序二维码</text>
|
|
|
+ </view>
|
|
|
+ <view class="qr-block" v-if="officialQrUrl">
|
|
|
+ <image class="qr-img" :src="officialQrUrl" mode="aspectFit"></image>
|
|
|
+ <text class="qr-label">公众号二维码</text>
|
|
|
+ </view>
|
|
|
+ <view class="btn primary sheet-btn" @click="saveQr">保存二维码</view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { USER_INFO } from '@/common/util/constants.js'
|
|
|
+
|
|
|
+ const STORAGE_LIST = 'ordering_table_list'
|
|
|
+ const STORAGE_MODE = 'ordering_order_mode'
|
|
|
+
|
|
|
+ function padTableNo(num) {
|
|
|
+ const intVal = parseInt(String(num).trim(), 10)
|
|
|
+ if (Number.isNaN(intVal) || intVal < 1) return ''
|
|
|
+ if (intVal >= 1 && intVal <= 99) return String(intVal).padStart(3, '0')
|
|
|
+ return String(intVal)
|
|
|
+ }
|
|
|
+
|
|
|
+ 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: [],
|
|
|
+ addVisible: false,
|
|
|
+ startNo: '',
|
|
|
+ endNo: '',
|
|
|
+ qrVisible: false,
|
|
|
+ currentTable: { no: '' },
|
|
|
+ miniQrUrl: '',
|
|
|
+ officialQrUrl: '',
|
|
|
+ merchantId: '',
|
|
|
+ tipVisible: false,
|
|
|
+ tipMessage: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ const info = uni.getStorageSync(USER_INFO) || {}
|
|
|
+ this.merchantId = info.merchantId || ''
|
|
|
+ this.loadData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ storageKey(base) {
|
|
|
+ return `${base}_${this.merchantId || 'default'}`
|
|
|
+ },
|
|
|
+ loadData() {
|
|
|
+ const mode = uni.getStorageSync(this.storageKey(STORAGE_MODE))
|
|
|
+ if (mode === 'orderOnly' || mode === 'orderPay') this.orderMode = mode
|
|
|
+ const list = uni.getStorageSync(this.storageKey(STORAGE_LIST))
|
|
|
+ this.tableList = Array.isArray(list) ? list : []
|
|
|
+ },
|
|
|
+ saveList() {
|
|
|
+ uni.setStorageSync(this.storageKey(STORAGE_LIST), this.tableList)
|
|
|
+ },
|
|
|
+ showTip(msg) {
|
|
|
+ this.tipMessage = msg
|
|
|
+ this.tipVisible = true
|
|
|
+ },
|
|
|
+ onModeChange(val) {
|
|
|
+ this.orderMode = val
|
|
|
+ uni.setStorageSync(this.storageKey(STORAGE_MODE), val)
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ const start = parseInt(startRaw, 10)
|
|
|
+ const end = parseInt(endRaw, 10)
|
|
|
+ if (Number.isNaN(start) || Number.isNaN(end) || start < 1 || end < 1) {
|
|
|
+ this.showTip('桌号不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (start > end) {
|
|
|
+ this.showTip('开始桌号不能大于结束桌号')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (end - start + 1 > 200) {
|
|
|
+ this.showTip('单次最多添加200个桌号')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const existSet = new Set(this.tableList.map((i) => i.no))
|
|
|
+ const toAdd = []
|
|
|
+ for (let i = start; i <= end; i++) {
|
|
|
+ const no = padTableNo(i)
|
|
|
+ if (!no) continue
|
|
|
+ if (existSet.has(no)) {
|
|
|
+ this.showTip(`桌号${parseInt(no, 10)}已存在，请重新输入`)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ toAdd.push({ no, createTime: Date.now() })
|
|
|
+ }
|
|
|
+ this.tableList = this.tableList.concat(toAdd).sort((a, b) => parseInt(a.no, 10) - parseInt(b.no, 10))
|
|
|
+ this.saveList()
|
|
|
+ this.addVisible = false
|
|
|
+ uni.showToast({ title: '添加成功', icon: 'success' })
|
|
|
+ },
|
|
|
+ goDownload() {
|
|
|
+ uni.navigateTo({ url: '/pages/orderingSet/download' })
|
|
|
+ },
|
|
|
+ openQr(item) {
|
|
|
+ this.currentTable = item
|
|
|
+ const content = buildQrContent(this.merchantId, item.no)
|
|
|
+ this.miniQrUrl = buildQrImageUrl(content)
|
|
|
+ this.officialQrUrl = ''
|
|
|
+ this.qrVisible = true
|
|
|
+ },
|
|
|
+ saveQr() {
|
|
|
+ const url = this.miniQrUrl
|
|
|
+ if (!url) {
|
|
|
+ uni.showToast({ title: '暂无二维码', icon: 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.showLoading({ title: '保存中' })
|
|
|
+ uni.downloadFile({
|
|
|
+ url,
|
|
|
+ success: (res) => {
|
|
|
+ if (res.statusCode !== 200) {
|
|
|
+ uni.hideLoading()
|
|
|
+ uni.showToast({ title: '下载失败', icon: 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
+ filePath: res.tempFilePath,
|
|
|
+ success: () => {
|
|
|
+ uni.hideLoading()
|
|
|
+ uni.showToast({ title: '已保存到相册', icon: 'success' })
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ uni.hideLoading()
|
|
|
+ uni.showToast({ title: '保存失败，请检查相册权限', icon: 'none' })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ uni.hideLoading()
|
|
|
+ uni.showToast({ title: '下载失败', icon: 'none' })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ $theme: #5b9eff;
|
|
|
+ $theme-soft: #eaf3ff;
|
|
|
+ $page-bg: #f5f6f8;
|
|
|
+
|
|
|
+ .page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: $page-bg;
|
|
|
+ padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mode-card {
|
|
|
+ margin: 24rpx 28rpx 0;
|
|
|
+ padding: 32rpx 28rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .mode-label {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #1d2129;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-card {
|
|
|
+ margin: 24rpx 28rpx 0;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ background-image: linear-gradient(180deg, #eef5ff 0%, #ffffff 120rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-head {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 28rpx 28rpx 12rpx;
|
|
|
+
|
|
|
+ .table-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #1d2129;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-link {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: $theme;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 80rpx 40rpx 72rpx;
|
|
|
+
|
|
|
+ .empty-illust {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 28rpx;
|
|
|
+
|
|
|
+ .box-lid {
|
|
|
+ position: absolute;
|
|
|
+ left: 20rpx;
|
|
|
+ top: 8rpx;
|
|
|
+ width: 140rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ border: 8rpx solid #d0d5dd;
|
|
|
+ border-radius: 8rpx 8rpx 0 0;
|
|
|
+ border-bottom: none;
|
|
|
+ transform: rotate(-8deg);
|
|
|
+ transform-origin: left bottom;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-body {
|
|
|
+ position: absolute;
|
|
|
+ left: 24rpx;
|
|
|
+ bottom: 10rpx;
|
|
|
+ width: 132rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ border: 8rpx solid #d0d5dd;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background: linear-gradient(180deg, #f7f8fa 0%, #eef0f3 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #86909c;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-btn {
|
|
|
+ min-width: 280rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ padding: 0 40rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ border: 2rpx solid #a8cbff;
|
|
|
+ color: $theme;
|
|
|
+ font-size: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-list {
|
|
|
+ padding: 0 8rpx 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 34rpx 20rpx;
|
|
|
+ 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: 30rpx;
|
|
|
+ color: #1d2129;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qr-entry {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #86909c;
|
|
|
+
|
|
|
+ .qr-ico {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 20rpx 40rpx calc(20rpx + env(safe-area-inset-bottom));
|
|
|
+ background: #fff;
|
|
|
+ z-index: 20;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ height: 88rpx;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+
|
|
|
+ &.soft {
|
|
|
+ background: $theme-soft;
|
|
|
+ color: $theme;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.primary {
|
|
|
+ background: $theme;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-sheet,
|
|
|
+ .qr-sheet {
|
|
|
+ padding: 36rpx 40rpx calc(40rpx + env(safe-area-inset-bottom));
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sheet-title {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1d2129;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sheet-sub {
|
|
|
+ margin-top: 28rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #1d2129;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .range-row {
|
|
|
+ margin-top: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16rpx;
|
|
|
+
|
|
|
+ .range-input {
|
|
|
+ flex: 1;
|
|
|
+ height: 80rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ background: #f5f6f8;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .range-dash {
|
|
|
+ color: #86909c;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ph {
|
|
|
+ color: #c0c4cc;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sheet-btn {
|
|
|
+ margin-top: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip-dialog {
|
|
|
+ width: 560rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .tip-title {
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 40rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1d2129;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip-content {
|
|
|
+ text-align: center;
|
|
|
+ padding: 28rpx 40rpx 36rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #4e5969;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip-ok {
|
|
|
+ height: 96rpx;
|
|
|
+ border-top: 1rpx solid #f0f2f5;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: $theme;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .qr-block {
|
|
|
+ margin-top: 28rpx;
|
|
|
+ border: 1rpx solid #e5e6eb;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 32rpx 24rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .qr-img {
|
|
|
+ width: 280rpx;
|
|
|
+ height: 280rpx;
|
|
|
+ background: #f5f6f8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qr-label {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #4e5969;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
付晓文。