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

<template>
	<view>
		<view class="list">
			<view class="r_item" v-for="(it, index) in list" :key="index" @click="popup(it)">
				<view class="lef"><image :src="ip + it.pic[0]" mode="aspectFill" class="pic"></image></view>
				<view class="con">
					<view class="title omit">{{ it.title }}</view>
					<view class="ms">
						<text class="rmb">¥{{ it.price }}</text>
						<text>起</text>
					</view>
					<view class="ms">共有{{ it.nums }}间</view>
					<view class="btn" @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" v-if="popup_show">
					<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(e) {
		this.shopId = e.shopId;
		this.getData();
	},
	methods: {
		//获取数据
		getData() {
			this.$http.request({
				url: this.$http.urls.roomList,
				data: { shopId: this.shopId },
				success: res => {
					console.log("zx:"+JSON.stringify(res));
					this.list = res.data.data;
					this.list.forEach(item => {
						item.pic = item.pic.split(',');
					});
					this.$forceUpdate();
				}
			});
		},
		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;
	.r_item {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0);
		border-radius: 0px;
		.btn {
			float: right;
			margin-top: -54px;
			padding: 5px 25px;
			border-radius: 20px;
			background-color: orange;
			margin-right: -34px;
		}
	}
}
.noLogin {
	margin-top: -40px;
}
</style>