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