治疗室屏幕web
查看 | 历史 | 提交 | 提交对比
jazz
2023-12-08 878885c5872fe2fcd153a6571e75a27cb1025e97
提交 | 用户 | 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 请求
3ac5f2 48 export default {
J 49   name: 'RoomList',
50   components: {},
51   inject: ['noop'],
52   data() {
53     return {
6da3c1 54       shopList: [],
J 55       shopId: '',
56       list: [],
3ac5f2 57       timeObj: {}// week：星期，date：年月日，timeMin：时分，time：时分秒，timeStamp：时间戳
J 58     }
59   },
60   computed: {
61
62   },
63   mounted() {
64     console.log('roomList mounted')
65     this.init()
66   },
67   destroyed() {
68
69   },
70   methods: {
71     init() {
cf3e3e 72       // 计时
bb2b08 73       this.countGetTime(this, 'timeObj', 'list')
6da3c1 74       this.getShopList()
J 75       this.getRoomList()
76     },
878885 77     // 刷新页面
J 78     resetPage() {
79       this.getRoomList()
80     },
6da3c1 81     // 获取门店列表
J 82     getShopList() {
83       var params = {}
84       Req.http.post({
878885 85         url: 'guide/treat/screen/shop/list',
6da3c1 86         data: params,
J 87         header: { 'Content-Type': 'application/json' },
88         mockData: {
89           code: 100,
90           msg: '',
878885 91           data: [{
J 92             name: 'xx',
93             id: 'xx'
94           }]
6da3c1 95         }
J 96       }).then((res) => {
97         this.shopList = res.data || []
98       })
99     },
100     // 获取列表
101     getRoomList() {
102       var params = {}
103       if (this.shopId) {
104         params.shopId = this.shopId
105       }
106       Req.http.post({
878885 107         url: 'guide/treat/screen/room/list',
6da3c1 108         data: params,
J 109         header: { 'Content-Type': 'application/json' },
110         mockData: {
111           code: 100,
112           msg: '',
878885 113           data: [{
J 114             id: 'xx', roomNo: 'xx'
115           }]
6da3c1 116         }
J 117       }).then((res) => {
118         this.list = res.data || []
119       })
aeb317 120     },
J 121     // 返回
122     back() {
123       this.stopCountGetTime('list')
124       this.stopPollingAjaxFn('list')
125       this.$router.go(-1)
126     },
cf3e3e 127     // 跳转详情
aeb317 128     selectRoom(item = {}) {
J 129       this.$router.push({
6da3c1 130         path: `./room/detail?id=${item.id || ''}`
aeb317 131       })
3ac5f2 132     }
J 133   }
134 }
135 </script>
6da3c1 136 <style>
J 137 .page_choose_shop .el-input__inner {
138   background-color: transparent;
139   border: 0;
140   line-height: 50px;
141   color: rgba(255,255,255,1);
142   font-size: 36px;
cf3e3e 143   text-align: right;
J 144   padding-right: 40px;
145 }
146 .page_choose_shop .el-select .el-input .el-select__caret {
147   font-size: 30px;
148   color: #fff;
6da3c1 149 }
J 150 </style>
3ac5f2 151 <style scoped>
878885 152 /* .page_container {
J 153   overflow: hidden;
154 } */
3ac5f2 155 .list_container {
J 156   width: 100%;
157   background-color: #fff;
158   border-radius: 10px;
878885 159   /* overflow: hidden; */
3ac5f2 160 }
J 161 .list_container__title {
162   line-height: 56px;
163   color: rgba(16,16,16,1);
164   font-size: 40px;
165   text-align: center;
166   font-family: PingFangSC-medium;
167   padding: 27px 0;
168   /* font-weight: bold; */
169 }
170 .list_block {
171   overflow: auto;
172 }
173 .list_block .list {
878885 174   margin-bottom: 20px;
3ac5f2 175 }
J 176 .list_block .list .list__item {
177   padding: 40px 30px;
178   border-radius: 100px;
179   background-color: rgba(229,238,253,1);
180   color: rgba(0,0,0,1);
181   font-size: 40px;
182   text-align: center;
183   font-family: Roboto;
184   line-height: 1;
185   margin-left: 48px;
186   margin-bottom: 30px;
6da3c1 187   box-sizing: border-box;
J 188   min-width: 280px;
189   cursor: pointer;
3ac5f2 190 }
J 191 .list_block .list .list__item.act {
192   background-color: #5980FF;
193   color: #fff;
194 }
6da3c1 195 .list_block .list .notip {
J 196   color: rgba(0,0,0,.3);
197   font-size: 40px;
198   text-align: center;
199   font-family: Roboto;
200 }
3ac5f2 201 </style>