治疗室屏幕web
查看 | 历史 | 提交 | 提交对比
jazz
2023-12-08 bf4dca5344dee1a84b75d9993f4dfc59de3f3ee9
提交 | 用户 | 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
132       if (this.$router && this.$router.options && this.$router.options.routes) {
133         this.$router.options.routes.forEach((o) => {
134           if (o.name === 'roomDetail') {
135             o.meta && (o.meta.isPush = true)
136           }
137         })
138       }
aeb317 139       this.$router.push({
6da3c1 140         path: `./room/detail?id=${item.id || ''}`
aeb317 141       })
3ac5f2 142     }
J 143   }
144 }
145 </script>
6da3c1 146 <style>
J 147 .page_choose_shop .el-input__inner {
148   background-color: transparent;
149   border: 0;
150   line-height: 50px;
151   color: rgba(255,255,255,1);
152   font-size: 36px;
cf3e3e 153   text-align: right;
J 154   padding-right: 40px;
155 }
156 .page_choose_shop .el-select .el-input .el-select__caret {
157   font-size: 30px;
158   color: #fff;
6da3c1 159 }
J 160 </style>
3ac5f2 161 <style scoped>
878885 162 /* .page_container {
J 163   overflow: hidden;
164 } */
3ac5f2 165 .list_container {
J 166   width: 100%;
167   background-color: #fff;
168   border-radius: 10px;
878885 169   /* overflow: hidden; */
3ac5f2 170 }
J 171 .list_container__title {
172   line-height: 56px;
173   color: rgba(16,16,16,1);
174   font-size: 40px;
175   text-align: center;
176   font-family: PingFangSC-medium;
177   padding: 27px 0;
178   /* font-weight: bold; */
179 }
180 .list_block {
181   overflow: auto;
182 }
183 .list_block .list {
878885 184   margin-bottom: 20px;
3ac5f2 185 }
J 186 .list_block .list .list__item {
187   padding: 40px 30px;
188   border-radius: 100px;
189   background-color: rgba(229,238,253,1);
190   color: rgba(0,0,0,1);
191   font-size: 40px;
192   text-align: center;
193   font-family: Roboto;
194   line-height: 1;
195   margin-left: 48px;
196   margin-bottom: 30px;
6da3c1 197   box-sizing: border-box;
J 198   min-width: 280px;
199   cursor: pointer;
3ac5f2 200 }
J 201 .list_block .list .list__item.act {
202   background-color: #5980FF;
203   color: #fff;
204 }
6da3c1 205 .list_block .list .notip {
J 206   color: rgba(0,0,0,.3);
207   font-size: 40px;
208   text-align: center;
209   font-family: Roboto;
210 }
3ac5f2 211 </style>