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