smart-tourism/smart-ui-app/pages/shop/hotel/room.vue

<template>
	<view>
		<view class="list">
			<view class="item" v-for="(it, index) in list" :key="index" @click="popup(it)">
				<view class="lef"><image :src="ip + it.pic" mode="aspectFill" class="pic"></image></view>
				<view class="con">
					<view class="title omit">{{ it.title }}</view>
					<view class="ms">￥{{ it.price }}/晚</view>
					<view class="ms">共有{{ it.nums }}间</view>
					<view class="del" @click.stop="del(it)">删除</view>
				</view>
				<view class="clear"></view>
			</view>
		</view>
		<view class="noLogin">
			<image class="u-error-icon" src="../../../static/sj.png" mode="widthFix" v-if="list.length == 0"></image>
			<view class="dll" @click="popup()">添加房间</view>
		</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;">{{ popup_title }}</view>
				<view class="form_group hr">
					<view class="lable">房间名称</view>
					<input placeholder="例如单人房" v-model="item.title" />
				</view>
				<view class="form_group hr">
					<view class="lable">房价价格</view>
					<input type="number" placeholder="每晚价格" v-model="item.price" />
				</view>
				<view class="form_group hr">
					<view class="lable">房间数量</view>
					<input type="number" placeholder="请输入房间数量" v-model="item.nums" />
				</view>
				<view class="form_group"><view class="lable">房间图片</view></view>
				<view class="pl5">
					<u-upload
						:ip="ip"
						:action="upload.action"
						:header="upload.header"
						:size-type="upload.size"
						:max-count="upload.count"
						:name="upload.name"
						:file-list="item.pic"
						ref="pic"
						width="140"
						height="140"
					></u-upload>
				</view>
				<button class="btn" @click="add()">保存</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ip: this.$http.urls.ip,
			list: [],
			item: {},
			popup_show: false,
			popup_title: '添加房间',
			shopId: '',
			upload: {
				header: { apiToken: this.$getUser().apiToken },
				name: 'img',
				action: this.$http.urls.uploadImg,
				size_type: 'compressed ',
				count: 1
			}
		};
	},
	onLoad() {
		this.shopId = 30;
		this.getData();
	},
	methods: {
		//获取数据
		getData() {
			this.$http.request({
				url: this.$http.urls.roomList,
				data: { shopId: this.shopId },
				success: res => {
					this.list = res.data.data;
					this.list.forEach(item => {
						item.pic=item.pic.split(",");
					});
				}
			});
		},
		popup(item) {
			if (item) {
				item=JSON.stringify(item);
				this.item =JSON.parse(item);
				this.popup_title = '编辑房间';
			} else {
				this.item = {};
			}
			this.popup_show = true;
		},
		add() {
			let pic = this.$refs.pic.lists.filter(val => {
				return val.progress == 100;
			});
			pic.forEach(item => {
				if (item.response) {
					this.item.pic = item.response.fileName; //获取上传成功的网络地址
				} else {
					this.item.pic = item.url; //原来的地址
				}
			});
			let rule = [
				{ name: 'title', checkType: 'notnull', errorMsg: '请输入房间名称' },
				{ name: 'price', checkType: 'notnull', errorMsg: '请输入房间价格' },
				{ name: 'nums', checkType: 'notnull', errorMsg: '请输入房间数量' },
				{ name: 'pic', checkType: 'notnull', errorMsg: '请上传一张房间图片' }
			];
			if (!this.$verify.check(this.item, rule)) {
				uni.showModal({ content: this.$verify.error, showCancel: false });
				return;
			}
			this.item.shopId = this.shopId;
			this.$http.request({
				method: 'POST',
				url: this.$http.urls.roomAdd,
				data: this.item,
				success: res => {
					uni.showToast({ title: '添加成功' });
					this.popup_show = false;
					this.getData();
				}
			});
		},
		del(item) {
			uni.showModal({
				title: '提示',
				content: '是否删除该房间?',
				success: res => {
					if (res.confirm) {
						this.$http.request({
							url: this.$http.urls.roomDel,
							data: { id: item.id },
							success: res => {
								uni.showToast({ title: '添加成功' });
								this.list.splice(this.list.indexOf(item), 1);
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.list {
	padding: 0px 10px 70px 10px;
	.item {
		background-color: white;
		padding: 15px 8px 15px 8px;
		border-bottom: 1px solid #e5e5e5;
		border-radius: 5px;
		margin-top: 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
		.lef {
			float: left;
			width: 30%;
			position: relative;
			overflow: hidden;
			height: 85px;
			border-radius: 4px;
			.pic {
				width: 100%;
				height: 85px;
				background-color: #dcdcdc;
			}
		}
		.con {
			padding-left: 30px;
			width: 60%;
			float: left;
			.title {
				font-size: 15px;
				text-align: left;
				color: #252525;
				font-weight: bold;
			}
			.ms {
				margin-top: 5px;
			}
			.del {
				float: right;
				margin-top: -20px;
				color: $theme-color;
				margin-right: -25px;
			}
		}
	}
}
.noLogin {
	margin-top: -40px;
}
</style>