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