~chenshaoxiong/treatment_room_screen.git

jazz

2023-12-13 d3f0ff6001c34c9ac37e9e776f090f5a696a1361

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