YQuniapp/pages/store/table_code/index.vue

<template>
	<!-- 商品分类 -->
	<view :style="colorStyle">
		<!-- 门店的两种样式布局 -->
		<storeCate1 :info="info" :isFooter="isFooter" :pageVisible="pageVisible" ref="refresh2">
		</storeCate1>
		<pageFooter @newDataStatus="newDataStatus"></pageFooter>
		<template v-if="popupVisible">
			<view class="white"></view>
			<view class="mask"></view>
			<view class="popup">
				<view class="body">
					<view class="title">请选择用餐人数</view>
					<view class="spinner">
						<button :class="{ disabled: number == 1 }" :disabled="number == 1" class="btn" hover-class="none" @tap="changeNumber(-1)">
							<text class="iconfont icon-shangpinshuliang-jian"></text>
						</button>
						<view class="passive">{{ number }}</view>
						<button class="btn" hover-class="none" @tap="changeNumber(1)">
							<text class="iconfont icon-shangpinshuliang-jia"></text>
						</button>
					</view>
				</view>
				<view class="foot">
					<button class="btn" hover-class="none" @tap="addTableCode(number)">提交</button>
				</view>
			</view>
		</template>
		<authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import colors from "@/mixins/color";
	import storeCate1 from './cart.vue'
	import pageFooter from '@/components/pageFooter/index.vue'
	import {
		colorChange
	} from '@/api/api.js';
	import {
		getTableData,
		addTableCode,
		isTableCode,
		changeTable,
		getStoreData,
	} from '@/api/store.js';
	import util from '../../../utils/util.js';
	export default {
		computed: mapGetters(['isLogin', 'uid']),
		components: {
			storeCate1,
			pageFooter
		},
		mixins: [colors],
		data() {
			return {
				info: {},
				id: 0,
				isFooter: false,
				category: '',
				customerType: 1,
				cart_num: 0,
				number: 1,
				popupVisible: false,
				pageVisible: true,
				isShowAuth: false,
			}
		},
		onLoad(options) {
			if (options.scene) {
				options = util.getUrlParams(decodeURIComponent(options.scene));
			}
			const { store_id, qrcode_id } = options;
			this.info = { ...this.info, store_id, qrcode_id };
		},
		onShow() {
			this.info.tableId = 0;
			if (this.isLogin) {
				this.getTableData();
			} else {
				this.isShowAuth = true;
			}
		},
		onHide() {
			this.pageVisible = false;
		},
		methods: {
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 授权回调
			onLoadFun() {
				this.isShowAuth = false;
				this.getTableData();
			},
			// 获取桌码配置
			getTableData() {
				getTableData({
					store_id: this.info.store_id
				}).then(res => {
					let data = res.data;
					if (Array.isArray(data)) {
						data = {};
					}
					const { store_code_switch, store_number_diners_window } = data;
					// 门店是否开启桌码
					if (store_code_switch == 1) {
						this.isTableCode(store_number_diners_window);
					} else{
						this.$util.Tips({
							title: '当前门店未开启桌码'
						});
					}
				});
			},
			// 选择用餐人数
			changeNumber(value) {
				this.number += value;
			},
			// 记录桌码
			addTableCode(number) {
				const { store_id, qrcode_id, tableId: y_tableId } = this.info;
				let data = { store_id, qrcode_id };
				if (number) {
					data.number = number;
				}
				return new Promise((resolve, reject) => {
					addTableCode(data).then(res => {
						this.info = { ...this.info, tableId: res.data.tableId };
						this.getStore();
						resolve(y_tableId);
						if (number) {
							this.popupVisible = false;
						}
					}).catch(err => {
						reject(y_tableId);
						this.$util.Tips({
							title: err
						});
					});
				});
			},
			// 检查桌码记录
			isTableCode(store_number_diners_window) {
				const { store_id, qrcode_id } = this.info;
				isTableCode({ store_id, qrcode_id }).then(res => {
					const { code, tableId } = res.data;
					this.info = { ...this.info, tableId };
					// 判断是不是换桌
					if (!code) {
						return uni.showModal({
							title: '确定要换桌吗？',
							content: '换桌后，您已点的商品会自动转移到新桌',
							success: (res) => {
								if (res.confirm) {
									this.changeTable();
								} else{
									this.getStore();
								}
							}
						});
					}
					// 判断这桌是否记录桌码
					if (tableId) {
						this.getStore();
					} else{
						// 是否弹出选择人数弹窗
						this.popupVisible = store_number_diners_window == 1;
						if (!this.popupVisible) {
							this.addTableCode();
						}
					}
				});
			},
			// 处理换桌商品
			async changeTable() {
				const y_tableId = await this.addTableCode();
				if (!y_tableId) {
					return;
				}
				changeTable({
					tableId: this.info.tableId,
					y_tableId
				}).then(() => {
					this.$util.Tips({
						title: '换桌完成',
						success: this.getStore
					});
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
				});
			},
			// 获取接口附近门店
			getStore() {
				getStoreData({
					store_id: this.info.store_id
				}).then(res => {
					this.info = {
						...this.info,
						...res.data
					};
					this.$refs.refresh2.getMarTop();
					this.$refs.refresh2.getAllCategory();
				});
			},
			newDataStatus(val) {
				this.isFooter = val;
			},
		},
		onReachBottom: function() {
			setTimeout(() => {
				this.$refs.refresh2.getProducts()
			}, 10)
		}
	}
</script>
<style scoped lang="scss">
	/deep/.goodCate .uni-badge-left-margin .uni-badge--error{
		background-color: #fff !important;
		color: var(--view-theme);
		border-color: var(--view-theme);
		z-index: 8;
	}
	/deep/.goodCate .footer .cartIcon .uni-badge-left-margin .uni-badge--error{
		right: 0 !important;
		top: 10px !important;
	}
	/deep/.mask {
		z-index: 99;
	}

	/deep/.good-cate {
		padding: 80rpx;
	}

	.white {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100;
		background-color: #FFFFFF;
	}

	.mask {
		z-index: 100;
	}

	.popup {
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 100;
		width: 600rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		transform: translate(-50%, -50%);

		.body {
			padding: 52rpx 0;
		}

		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 500;
			font-size: 34rpx;
			color: #282828;
		}

		.spinner {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 46rpx;

			.btn {
				background-color: transparent;
				.iconfont {
					display: inline-block;
					vertical-align: middle;
					text-align: center;
					line-height: 56rpx;
					width: 56rpx;
					height: 56rpx;
					border-radius: 28rpx;
					background-color: var(--view-theme);
					font-size: 22rpx;
					color: #FFFFFF;
				}

				&.disabled {
					.iconfont {
						background-color: #F5F5F5;
						color: #000000;
					}
				}
			}
		}

		.passive {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 98rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #000000;
		}

		.foot {
			display: flex;
			height: 98rpx;
			border-top: 1rpx solid #EEEEEE;

			.btn {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				color: var(--view-theme);
			}
		}
	}
</style>