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

<template>
	<view class="page">
		<view class="btg" v-if="item.auditFlag == 0" style="margin: 0px 0px 12px 0px;background-color: #f0f9eb;color: #67c23a;">后台审核中..... 审核通过后才能展示出来</view>
		<view class="btg" v-if="item.orders" style="margin: 0px 0px 12px 0px;background-color: #f0f9eb;color: #67c23a;" @click="navigate('/pages/order/sale')">
			<text>你有{{ item.orders }}条待处理订单,请尽快处理</text>
			<text class="icon">&#xe62d;</text>
		</view>
		<view class="btg" v-if="item.auditFlag == 2" style="margin: 0px 0px 12px 0px;" @click="navigate('/pages/shop/apply?item=' + JSON.stringify(item))">
			<text>审核不通过： {{ item.msg }}</text>
			<text class="icon">&#xe62d;</text>
		</view>
		<view class="hotel_item">
			<u-grid :col="3" class="cd">
				<u-grid-item @click="navigate('/pages/shop/apply?item=' + JSON.stringify(item))">
					<u-badge :is-dot="true" :offset="[25, 40]" v-if="item.auditFlag == 2"></u-badge>
					<view class="icon" style="background-color: #F44336">&#xe610;</view>
					<view class="grid-text">店铺信息</view>
				</u-grid-item>
				<u-grid-item @click="navigate('/pages/shop/detail?shopId=' + item.shopId)">
					<view class="icon" style="background-color: #67c23a">&#xec86;</view>
					<view class="grid-text">店铺预览</view>
				</u-grid-item>
				<u-grid-item @click="navigate('/pages/shop/up?item=' + JSON.stringify(item))">
					<view class="icon" style="background-color: #607D8B">&#xebb3;</view>
					<view class="grid-text">上报数据</view>
				</u-grid-item>
			</u-grid>
			<view v-if="item.shopType == 2">
				<view style="margin: 20px 0px 20px 0px;"><u-divider>酒店预订</u-divider></view>
				<u-grid :col="3" class="cd">
					<u-grid-item @click="navigate('/pages/shop/hotel/room?shopId=' + item.shopId)">
						<view class="icon" style="background-color: #FF9800">&#xe736;</view>
						<view class="grid-text">房间管理</view>
					</u-grid-item>
					<u-grid-item @click="navigate('/pages/order/sale')">
						<u-badge :count="item.orders" :offset="[20, 30]" v-if="item.auditFlag == 1"></u-badge>
						<view class="icon" style="background-color: #9E9E9E">&#xe705;</view>
						<view class="grid-text">预订订单</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="hotel_item" v-if="item.shopType == 2">
			<view class="enable">
				<text>是否开启酒店预订</text>
				<u-switch v-model="item.enableFlag" @change="change" active-color="#67c23a" active-value="0" inactive-value="1"></u-switch>
			</view>
		</view>
		<view class="hotel_item">
			<view class="enable">
				<text>注销并且关闭店铺</text>
				<text class="del" @click="del()">确定</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ip: this.$http.urls.ip,
			item: {},
			shopId: '' //店铺id
		};
	},
	onLoad(e) {
		this.shopId = e.shopId;
	},
	onShow() {
		this.getData();
	},
	methods: {
		//获取数据
		getData() {
			this.$http.request({
				url: this.$http.urls.shopManage,
				data: { shopId: this.shopId },
				success: res => {
					this.item = res.data.data.shop;
					this.item.enableFlag = this.item.enableFlag == 0 ? true : false;
					//待处理订单
					if (res.data.data.orders) {
						this.item.orders = res.data.data.orders.length;
					}
					this.item.imgs = []; //轮播图
					this.item.showPictures = this.item.showPictures.split(',');
					this.item.pic = this.item.pic.split(',');
					this.item.showPictures.forEach(item => {
						this.item.imgs.push({ image: this.ip + item });
					});
				}
			});
		},
		navigate(url) {
			if (url.indexOf('/apply') == -1 && this.item.auditFlag != 1) {
				uni.showModal({ content: '审核通过后才能操作', showCancel: false });
				return;
			}
			uni.navigateTo({ url: url });
		},
		// 是否开启酒店预订
		change(status) {
			this.$http.request({
				url: this.$http.urls.hotelEnable,
				data: { shopId: this.item.shopId, enableFlag: status },
				success: res => {}
			});
		},
		//注销并且关闭店铺
		del() {
			uni.showModal({
				title: '提示',
				content: '是否注销并且关闭店铺?',
				success: res => {
					if (res.confirm) {
						this.$http.request({
							url: this.$http.urls.hotelDelete,
							data: { shopId: this.item.shopId },
							success: res => {
								uni.$emit('shop');
								uni.showToast({ title: '操作成功' });
								setTimeout(() => {
									uni.navigateBack();
								}, 1000);
							}
						});
					}
				}
			});
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
			this.getData();
		}, 1000);
	}
};
</script>
<style lang="scss">
.page {
	padding: 12px;
}
.enable {
	padding: 10px;
	font-size: 16px;
	.u-switch {
		margin-top: -5px;
		float: right;
	}
	.del {
		float: right;
		color: red;
	}
}
.cd {
	margin-top: 10px;
	text-align: center;
	.icon {
		font-size: 30px;
		padding: 5px 8px;
		background-color: red;
		color: white;
		margin-bottom: 5px;
		border-radius: 5px;
	}
}
</style>