<!--room-list.vue-->
|
<template>
|
<div class="page">
|
<div class="page_header flex flex-ver">
|
<div class="left flex flex-ver" @click="back">
|
<img class="page_logo_1" src="../../assets/img/logo_1.png">
|
<img class="page_logo_2" src="../../assets/img/logo_2.png">
|
</div>
|
<div class="right flex-1 flex flex-jcfe flex-ver">
|
<div class="page_choose_shop">
|
<el-select v-model="shopId" placeholder="请选择" style="width:400px;" clearable @change="getRoomList">
|
<el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id" />
|
</el-select>
|
</div>
|
<div class="page_date">
|
<div class="page_week">{{ timeObj.week }}</div>
|
<div class="page_day">{{ timeObj.date }}</div>
|
</div>
|
<div class="page_time">{{ timeObj.timeMin }}</div>
|
<!-- <div class="page_time">{{ timeObj.time }}</div> -->
|
</div>
|
</div>
|
<div class="page_container">
|
<div class="list_container flex flex-col">
|
<div class="list_container__title">请选择房间</div>
|
<div class="list_block flex-1">
|
<div v-if="list && list.length" class="list flex flex-ver flex-wrap">
|
<!-- act -->
|
<div v-for="(item, index) in list" :key="index" class="list__item flex flex-center" @click="selectRoom(item)">{{ item.roomNo }}</div>
|
</div>
|
<div v-if="!list || !list.length" class="list flex flex-center">
|
<!-- act -->
|
<div class="notip flex flex-center">暂无数据</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import Login from '../utils/jun_login.js'
|
import Req from '../../utils/jun_httpInstall' // http 请求
|
export default {
|
name: 'RoomList',
|
components: {},
|
inject: ['noop'],
|
data() {
|
return {
|
shopList: [],
|
shopId: '',
|
list: [],
|
timeObj: {}// week：星期，date：年月日，timeMin：时分，time：时分秒，timeStamp：时间戳
|
}
|
},
|
computed: {
|
|
},
|
mounted() {
|
console.log('roomList mounted')
|
this.init()
|
},
|
destroyed() {
|
|
},
|
methods: {
|
init() {
|
// 计时
|
this.countGetTime(this, 'timeObj', 'list')
|
this.getShopList()
|
this.getRoomList()
|
},
|
// 获取门店列表
|
getShopList() {
|
var params = {}
|
Req.http.post({
|
url: 'treat/screen/shop/list',
|
data: params,
|
header: { 'Content-Type': 'application/json' },
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {}
|
}
|
}).then((res) => {
|
this.shopList = res.data || []
|
})
|
},
|
// 获取列表
|
getRoomList() {
|
var params = {}
|
if (this.shopId) {
|
params.shopId = this.shopId
|
}
|
Req.http.post({
|
url: 'treat/screen/room/list',
|
data: params,
|
header: { 'Content-Type': 'application/json' },
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {}
|
}
|
}).then((res) => {
|
this.list = res.data || []
|
})
|
},
|
// 返回
|
back() {
|
this.stopCountGetTime('list')
|
this.stopPollingAjaxFn('list')
|
this.$router.go(-1)
|
},
|
// 跳转详情
|
selectRoom(item = {}) {
|
this.$router.push({
|
path: `./room/detail?id=${item.id || ''}`
|
})
|
}
|
}
|
}
|
</script>
|
<style>
|
.page_choose_shop .el-input__inner {
|
background-color: transparent;
|
border: 0;
|
line-height: 50px;
|
color: rgba(255,255,255,1);
|
font-size: 36px;
|
text-align: right;
|
padding-right: 40px;
|
}
|
.page_choose_shop .el-select .el-input .el-select__caret {
|
font-size: 30px;
|
color: #fff;
|
}
|
</style>
|
<style scoped>
|
.list_container {
|
width: 100%;
|
height: 100%;
|
background-color: #fff;
|
border-radius: 10px;
|
}
|
.list_container__title {
|
line-height: 56px;
|
color: rgba(16,16,16,1);
|
font-size: 40px;
|
text-align: center;
|
font-family: PingFangSC-medium;
|
padding: 27px 0;
|
/* font-weight: bold; */
|
}
|
.list_block {
|
/* padding-right: 66px; */
|
margin-bottom: 50px;
|
overflow: auto;
|
}
|
.list_block .list {
|
|
}
|
.list_block .list .list__item {
|
padding: 40px 30px;
|
border-radius: 100px;
|
background-color: rgba(229,238,253,1);
|
color: rgba(0,0,0,1);
|
font-size: 40px;
|
text-align: center;
|
font-family: Roboto;
|
line-height: 1;
|
margin-left: 48px;
|
margin-bottom: 30px;
|
box-sizing: border-box;
|
min-width: 280px;
|
cursor: pointer;
|
}
|
.list_block .list .list__item.act {
|
background-color: #5980FF;
|
color: #fff;
|
}
|
.list_block .list .notip {
|
color: rgba(0,0,0,.3);
|
font-size: 40px;
|
text-align: center;
|
font-family: Roboto;
|
}
|
</style>
|
