~chenshaoxiong/treatment_room_screen.git

jazz

2023-12-27 6283f47d248818ef9fa64e4d65f27a343b54bdd2

提交 \| 用户 \| age
3ac5f2	1	<!--room-list.vue-->
J	2	<template>
878885	3	<div class="page flex flex-col">
3ac5f2	4	<div class="page_header flex flex-ver">
878885	5	<div class="left flex flex-ver" @click="resetPage">
J	6	<div class="page_logo_1">
	7	<img class="img" src="static/imgs/logo_1.png">
	8	</div>
	9	<div class="page_logo_2">
	10	<img class="img" src="static/imgs/logo_2.png">
	11	</div>
3ac5f2	12	</div>
1c200b	13	<div class="flex-1 flex flex-center">
J	14	<div class="select_shop_block flex flex-ver" @click="showChooseShop">
	15	<div v-if="!shopId" class="tx">请选择门店</div>
	16	<div v-if="shopId" class="tx">{{ shopName }}</div>
	17	<div class="icon_block">
	18	<img class="icon" src="static/imgs/down.png">
	19	</div>
	20	</div>
	21	</div>
	22	<div class="right flex flex-jcfe flex-ver">
	23	<!-- <div class="page_choose_shop">
6da3c1	24	<el-select v-model="shopId" placeholder="请选择" style="width:400px;" clearable @change="getRoomList">
J	25	<el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id" />
	26	</el-select>
1c200b	27	</div> -->
3ac5f2	28	<div class="page_date">
J	29	<div class="page_week">{{ timeObj.week }}</div>
	30	<div class="page_day">{{ timeObj.date }}</div>
	31	</div>
	32	<div class="page_time">{{ timeObj.timeMin }}</div>
	33	<!-- <div class="page_time">{{ timeObj.time }}</div> -->
	34	</div>
	35	</div>
878885	36	<div class="page_container flex-1 h1 flex flex-col">
J	37	<div class="list_container h1 flex-1 flex flex-col">
3ac5f2	38	<div class="list_container__title">请选择房间</div>
878885	39	<div class="list_block flex-1 h1">
6da3c1	40	<div v-if="list && list.length" class="list flex flex-ver flex-wrap">
3ac5f2	41	<!-- act -->
6da3c1	42	<div v-for="(item, index) in list" :key="index" class="list__item flex flex-center" @click="selectRoom(item)">{{ item.roomNo }}</div>
J	43	</div>
	44	<div v-if="!list \|\| !list.length" class="list flex flex-center">
	45	<!-- act -->
	46	<div class="notip flex flex-center">暂无数据</div>
3ac5f2	47	</div>
J	48	</div>
	49	</div>
	50	</div>
1c200b	51
J	52	<XioRoomListShopChg ref="XioRoomListShopChg" @confirm="confirmShop" />
3ac5f2	53	</div>
J	54	</template>
	55
	56	<script>
	57	// import Login from '../utils/jun_login.js'
6da3c1	58	import Req from '../../utils/jun_httpInstall' // http 请求
1d1095	59	// import xioFn from './utils/xio_fn.js'
1c200b	60	// 通知卸麻
J	61	import XioRoomListShopChg from '@/components/xio_room_list_shop_chg'
3ac5f2	62	export default {
J	63	name: 'RoomList',
1c200b	64	components: {
J	65	XioRoomListShopChg
	66	},
3ac5f2	67	inject: ['noop'],
J	68	data() {
	69	return {
6da3c1	70	shopList: [],
J	71	shopId: '',
1c200b	72	shopName: '',
6da3c1	73	list: [],
3ac5f2	74	timeObj: {}// week：星期，date：年月日，timeMin：时分，time：时分秒，timeStamp：时间戳
J	75	}
	76	},
	77	computed: {
	78
	79	},
bf4dca	80	activated() {},
3ac5f2	81	mounted() {
J	82	console.log('roomList mounted')
	83	this.init()
	84	},
	85	destroyed() {
	86
	87	},
	88	methods: {
1c200b	89	async init() {
cf3e3e	90	// 计时
bb2b08	91	this.countGetTime(this, 'timeObj', 'list')
1c200b	92	// await this.getShopList()
J	93	// this.getRoomList()
	94	this.showChooseShop()
	95	},
	96	// 确定选择门店
	97	confirmShop(item) {
	98	this.shopId = item.id
	99	this.shopName = item.name
6da3c1	100	this.getRoomList()
1c200b	101	},
J	102	// 显示选择门店列表弹窗
	103	showChooseShop() {
	104	// 打开弹窗
	105	this.$refs['XioRoomListShopChg'].showShopDialog(this.shopId)
6da3c1	106	},
1d1095	107	// 刷新浏览器页面
878885	108	resetPage() {
1d1095	109	window.location.reload()
J	110	// this.getRoomList()
878885	111	},
6da3c1	112	// 获取门店列表
J	113	getShopList() {
	114	var params = {}
1c200b	115	return new Promise((resolve, reject) => {
J	116	Req.http.post({
	117	url: 'guide/treat/screen/shop/list',
	118	data: params,
	119	header: { 'Content-Type': 'application/json' },
	120	mockData: {
	121	code: 100,
	122	msg: '',
	123	data: [{
	124	name: 'xx',
	125	id: 'xx'
	126	}]
	127	}
	128	}).then((res) => {
	129	this.shopList = res.data \|\| []
	130	resolve(res)
	131	})
6da3c1	132	})
J	133	},
	134	// 获取列表
	135	getRoomList() {
	136	var params = {}
	137	if (this.shopId) {
	138	params.shopId = this.shopId
	139	}
	140	Req.http.post({
878885	141	url: 'guide/treat/screen/room/list',
6da3c1	142	data: params,
J	143	header: { 'Content-Type': 'application/json' },
	144	mockData: {
	145	code: 100,
	146	msg: '',
878885	147	data: [{
J	148	id: 'xx', roomNo: 'xx'
	149	}]
6da3c1	150	}
J	151	}).then((res) => {
	152	this.list = res.data \|\| []
	153	})
aeb317	154	},
J	155	// 返回
	156	back() {
	157	this.stopCountGetTime('list')
	158	this.stopPollingAjaxFn('list')
	159	this.$router.go(-1)
	160	},
cf3e3e	161	// 跳转详情
aeb317	162	selectRoom(item = {}) {
bf4dca	163	// console.log(this.$router.options.routes)
J	164	// this.$router.options.routes
34cb2b	165	localStorage.removeItem('curTreatId')
bf4dca	166	if (this.$router && this.$router.options && this.$router.options.routes) {
J	167	this.$router.options.routes.forEach((o) => {
	168	if (o.name === 'roomDetail') {
	169	o.meta && (o.meta.isPush = true)
	170	}
	171	})
	172	}
aeb317	173	this.$router.push({
6da3c1	174	path: `./room/detail?id=${item.id \|\| ''}`
aeb317	175	})
3ac5f2	176	}
J	177	}
	178	}
	179	</script>
6da3c1	180	<style>
J	181	.page_choose_shop .el-input__inner {
	182	background-color: transparent;
	183	border: 0;
	184	line-height: 50px;
	185	color: rgba(255,255,255,1);
	186	font-size: 36px;
cf3e3e	187	text-align: right;
J	188	padding-right: 40px;
	189	}
	190	.page_choose_shop .el-select .el-input .el-select__caret {
	191	font-size: 30px;
	192	color: #fff;
6da3c1	193	}
J	194	</style>
3ac5f2	195	<style scoped>
1c200b	196	.page_header .left {
J	197	min-width: 300px;
	198	}
	199	.page_date {
	200	margin-left: 0;
	201	}
878885	202	/* .page_container {
J	203	overflow: hidden;
	204	} */
3ac5f2	205	.list_container {
J	206	width: 100%;
	207	background-color: #fff;
	208	border-radius: 10px;
878885	209	/* overflow: hidden; */
3ac5f2	210	}
J	211	.list_container__title {
	212	line-height: 56px;
	213	color: rgba(16,16,16,1);
	214	font-size: 40px;
	215	text-align: center;
	216	font-family: PingFangSC-medium;
	217	padding: 27px 0;
	218	/* font-weight: bold; */
	219	}
	220	.list_block {
	221	overflow: auto;
	222	}
	223	.list_block .list {
878885	224	margin-bottom: 20px;
3ac5f2	225	}
J	226	.list_block .list .list__item {
1c200b	227	cursor: pointer;
3ac5f2	228	padding: 40px 30px;
J	229	border-radius: 100px;
	230	background-color: rgba(229,238,253,1);
	231	color: rgba(0,0,0,1);
	232	font-size: 40px;
	233	text-align: center;
	234	font-family: Roboto;
	235	line-height: 1;
	236	margin-left: 48px;
	237	margin-bottom: 30px;
6da3c1	238	box-sizing: border-box;
J	239	min-width: 280px;
	240	cursor: pointer;
3ac5f2	241	}
J	242	.list_block .list .list__item.act {
	243	background-color: #5980FF;
	244	color: #fff;
	245	}
6da3c1	246	.list_block .list .notip {
J	247	color: rgba(0,0,0,.3);
	248	font-size: 40px;
	249	text-align: center;
	250	font-family: Roboto;
	251	}
1c200b	252	.select_shop_block {
J	253	cursor: pointer;
	254	}
	255	.select_shop_block .tx {
	256	line-height: 50px;
	257	color: rgba(255,255,255,1);
	258	font-size: 36px;
	259	text-align: center;
	260	font-family: PingFangSC-regular;
	261	}
	262	.select_shop_block .icon_block {
	263	width: 30px;
	264	height: 30px;
	265	display: block;
	266	}
	267	.select_shop_block .icon_block .icon {
	268	width: 100%;
	269	height: 100%;
	270	}
3ac5f2	271	</style>