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