smart-tourism/smart-ui-app/pages/shop/up.vue

<template>
	<view>
		<view class="mtop"><text class="icon">&#xe617;</text></view>
		<view class="time">上次上报：{{ time }}</view>
		<view class="cn">
			<!--上传门店数据-->
			<view class="info" v-if="item.shopType == 1">
				<view class="form_group hr">
					<view class="lable">散客预约人数</view>
					<input type="number" placeholder="请输入散客预约人数" v-model="item.scatteredAppointment" />
				</view>
				<view class="form_group hr">
					<view class="lable">散客接待人数</view>
					<input type="number" placeholder="请输入散客接待人数" v-model="item.scatteredReception" />
				</view>
				<view class="form_group hr">
					<view class="lable">团客预约人数</view>
					<input type="number" placeholder="请输入团客预约人数" v-model="item.groupAppointment" />
				</view>
				<view class="form_group hr">
					<view class="lable">团客接待人数</view>
					<input type="number" placeholder="请输入团客接待人数" v-model="item.groupReception" />
				</view>
				<view class="form_group hr">
					<view class="lable">销售金额(元)</view>
					<input type="number" placeholder="请输入销售金额" v-model="item.salesAmount" />
				</view>
				<view class="form_group hr">
					<view class="lable">销售时间</view>
					<input type="text" placeholder="请选择销售时间" :disabled="true" v-model="item.salesTime" @click="calendar_show = true" />
				</view>
			</view>
			<!--上传酒店数据-->
			<view v-else>
				<view class="info">
					<view class="item" v-for="(it, index) in item.shopGuestRecordList" :key="index">
						<text>{{ it.guestName }}</text>
						<text class="icon del" @click="del(it)">&#xe600;</text>
					</view>
				</view>
				<view class="mt10">
					<u-divider v-if="item.shopGuestRecordList.length > 0">共添加{{ item.shopGuestRecordList.length }}个游客</u-divider>
				</view>
			</view>
			<button class="btn add" @click="popup" v-if="item.shopType == 2">添加游客</button>
			<button class="btn" @click="up()">上报数据</button>
		</view>
		<!--添加游客信息-->
		<u-popup v-model="popup_show" :mask-close-able="false" mode="center" border-radius="14" width="90%" height="auto" :closeable="true">
			<view class="u-popup">
				<view class="tttt" style="font-weight: bolder;">添加游客</view>
				<view class="form_group hr">
					<view class="lable">游客姓名</view>
					<input placeholder="请输入散客预约人数" v-model="guest.guestName" />
				</view>
				<view class="form_group hr">
					<view class="lable">身份证号</view>
					<input placeholder="请输入散客预约人数" v-model="guest.idCard" />
				</view>
				<view class="form_group hr">
					<view class="lable">手机号码</view>
					<input type="number" placeholder="请输入散客预约人数" v-model="guest.phone" />
				</view>
				<view class="form_group hr">
					<view class="lable">入住日期</view>
					<input :disabled="true" placeholder="请选择入住日期" @click="calendar_show = true" v-model="guest.checkInTime" />
				</view>
				<view class="form_group hr">
					<view class="lable">游客类型</view>
					<input :disabled="true" @click="guest_show = true" placeholder="请选择游客类型" v-model="guest.guestType" />
				</view>
				<button class="btn" @click="add()">保存并继续</button>
			</view>
		</u-popup>
		<u-calendar v-model="calendar_show" @change="calendar"></u-calendar>
		<u-select v-model="guest_show" :list="[{ label: '散客', value: '散客' }, { label: '团客', value: '团客' }]" @confirm="confirm"></u-select>
	</view>
</template>
<script>
export default {
	data() {
		return {
			item: { shopType: 2, shopGuestRecordList: [] },
			guest: { guestType: '散客', checkInTime: this.$util.getDate() }, //游客
			guest_list: [],
			time: '未上报过',
			popup_show: false,
			calendar_show: false,
			guest_show: false
		};
	},
	onLoad(e) {
		if (e.item) {
			this.item = JSON.parse(e.item);
			if (this.item.shopType == 1) {
				this.$nextTick(() => {
					uni.setNavigationBarTitle({
						title: '门店数据上报'
					});
				});
			}
			if (this.item.shopType == 2) {
				this.item.shopGuestRecordList = [];
				this.$nextTick(() => {
					uni.setNavigationBarTitle({
						title: '酒店数据上报'
					});
				});
			}
		}
		//上报时间
		if (uni.getStorageSync('time-' + this.item.shopId) != '') {
			this.time = this.$u.timeFrom(new Date(uni.getStorageSync('time-' + this.item.shopId).replace(/\-/g, '/')).getTime());
		}
	},
	methods: {
		calendar(e) {
			this.item.salesTime = e.result;
			this.guest.checkInTime = e.result;
		},
		popup() {
			this.guest = { guestName: '', idCard: '', phone: '', guestType: this.guest.guestType, checkInTime: this.guest.checkInTime };
			this.popup_show = true;
		},
		//选择游客类型
		confirm(e) {
			this.guest.guestType = e[0].value;
		},
		add() {
			let rule = [
				{ name: 'guestName', checkType: 'notnull', errorMsg: '请输入游客姓名' },
				{ name: 'idCard', checkType: 'notnull', errorMsg: '请输入游客身份证号' },
				{ name: 'checkInTime', checkType: 'notnull', errorMsg: '请选择游客入住日期' }
			];
			if (!this.$verify.check(this.guest, rule)) {
				uni.showModal({ content: this.$verify.error, showCancel: false });
				return;
			}
			this.item.shopGuestRecordList.push(JSON.parse(JSON.stringify(this.guest)));
			uni.showToast({ title: '保存成功' });
			this.guest = { guestName: '', idCard: '', phone: '', guestType: this.guest.guestType, checkInTime: this.guest.checkInTime };
			this.$forceUpdate();
		},
		del(item) {
			this.item.shopGuestRecordList.splice(this.item.shopGuestRecordList.indexOf(item), 1);
			this.$forceUpdate();
		},
		up() {
			if (this.item.shopType == 1) {
				let rule = [
					{ name: 'scatteredAppointment', checkType: 'notnull', errorMsg: '请输入散客预约人数' },
					{ name: 'scatteredReception', checkType: 'notnull', errorMsg: '请输入散客接待人数' },
					{ name: 'groupAppointment', checkType: 'notnull', errorMsg: '请输入团客预约人数' },
					{ name: 'groupReception', checkType: 'notnull', errorMsg: '请输入团客接待人数' },
					{ name: 'salesAmount', checkType: 'notnull', errorMsg: '请输入销售金额' },
					{ name: 'salesTime', checkType: 'notnull', errorMsg: '请选择销售时间' }
				];
				if (!this.$verify.check(this.item, rule)) {
					uni.showModal({ content: this.$verify.error, showCancel: false });
					return;
				}
			} else {
				if (this.item.shopGuestRecordList == 0) {
					uni.showModal({ content: '请先添加游客再上传数据', showCancel: false });
					return;
				}
			}
			this.$http.request({
				method: 'POST',
				url: this.$http.urls.pushRecord,
				data: this.item,
				success: res => {
					uni.showToast({ title: '上报成功' });
					uni.setStorageSync('time-' + this.item.shopId, this.$util.getDate('time'));
					setTimeout(() => {
						uni.navigateBack();
					}, 700);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.mtop {
	text-align: center;
	margin-top: 20px;
	.icon {
		font-size: 90px;
		color: $dar;
	}
}
.time {
	text-align: center;
	color: $dar;
	font-size: 13px;
	margin-top: 10px;
}
.cn {
	padding: 15px;
	.info {
		background-color: white;
		border-radius: 5px;
		margin-top: 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		.item {
			padding: 12px;
			border-bottom: 1px solid #f0f0f0;
			.del {
				float: right;
				color: $theme-color;
				font-size: 21px;
			}
		}
	}
	.add {
		background-color: #2979ff;
		border: 1px solid #2979ff;
	}
	.btn {
		margin-top: 25px;
	}
}
.u-popup {
	padding: 20px;
	.tttt {
		font-weight: bold;
		font-size: 18px;
		margin-bottom: 10px;
	}
	.inp {
		text-align: right !important;
		padding-right: 5px !important;
	}
}
</style>