~chenshaoxiong/treatment_room_screen.git

long

2024-06-20 601fbd0b2fda10ce5ddcc4de3a32b04c9d6aaa60

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