From 583e1038163d7b95f7927f83b19d81f6eac32020 Mon Sep 17 00:00:00 2001
From: jazz <jazzxhunter@163.com>
Date: 星期四, 28 十二月 2023 19:35:44 +0800
Subject: [PATCH] update_202312281935_单个治疗室多个客人的逻辑编写v1

---
 src/pages/room/list.vue |  197 ++++++++++++++++++++++++++++++++++++++++++++-----
 1 files changed, 177 insertions(+), 20 deletions(-)

diff --git a/src/pages/room/list.vue b/src/pages/room/list.vue
index a7e191e..04ff80f 100644
--- a/src/pages/room/list.vue
+++ b/src/pages/room/list.vue
@@ -1,12 +1,30 @@
 <!--room-list.vue-->
 <template>
-  <div class="page">
+  <div class="page flex flex-col">
     <div class="page_header flex flex-ver">
-      <div class="left flex flex-ver" @click="back">
-        <img class="page_logo_1" src="../../assets/img/logo_1.png">
-        <img class="page_logo_2" src="../../assets/img/logo_2.png">
+      <div class="left flex flex-ver" @click="resetPage">
+        <div class="page_logo_1">
+          <img class="img" src="static/imgs/logo_1.png">
+        </div>
+        <div class="page_logo_2">
+          <img class="img" src="static/imgs/logo_2.png">
+        </div>
       </div>
-      <div class="right flex-1 flex flex-jcfe flex-ver">
+      <div class="flex-1 flex flex-center">
+        <div class="select_shop_block flex flex-ver" @click="showChooseShop">
+          <div v-if="!shopId" class="tx">璇烽�夋嫨闂ㄥ簵</div>
+          <div v-if="shopId" class="tx">{{ shopName }}</div>
+          <div class="icon_block">
+            <img class="icon" src="static/imgs/down.png">
+          </div>
+        </div>
+      </div>
+      <div class="right flex flex-jcfe flex-ver">
+        <!-- <div class="page_choose_shop">
+          <el-select v-model="shopId" placeholder="璇烽�夋嫨" style="width:400px;" clearable @change="getRoomList">
+            <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </div> -->
         <div class="page_date">
           <div class="page_week">{{ timeObj.week }}</div>
           <div class="page_day">{{ timeObj.date }}</div>
@@ -15,36 +33,51 @@
         <!-- <div class="page_time">{{ timeObj.time }}</div> -->
       </div>
     </div>
-    <div class="page_container">
-      <div class="list_container flex flex-col">
+    <div class="page_container flex-1 h1 flex flex-col">
+      <div class="list_container h1 flex-1 flex flex-col">
         <div class="list_container__title">璇烽�夋嫨鎴块棿</div>
-        <div class="list_block flex-1">
-          <div class="list flex flex-ver flex-wrap">
+        <div class="list_block flex-1 h1">
+          <div v-if="list && list.length" class="list flex flex-ver flex-wrap">
             <!-- act -->
-            <div v-for="(item, index) in list" :key="index" class="list__item flex flex-center" @click="selectRoom()">VIP璇婄枟瀹�-1</div>
+            <div v-for="(item, index) in list" :key="index" class="list__item flex flex-center" @click="selectRoom(item)">{{ item.roomNo }}</div>
+          </div>
+          <div v-if="!list || !list.length" class="list flex flex-center">
+            <!-- act -->
+            <div class="notip flex flex-center">鏆傛棤鏁版嵁</div>
           </div>
         </div>
       </div>
     </div>
+
+    <XioRoomListShopChg ref="XioRoomListShopChg" @confirm="confirmShop" />
   </div>
 </template>
 
 <script>
 // import Login from '../utils/jun_login.js'
-
+import Req from '../../utils/jun_httpInstall' // http 璇锋眰
+// import xioFn from './utils/xio_fn.js'
+// 閫氱煡鍗搁夯
+import XioRoomListShopChg from '@/components/xio_room_list_shop_chg'
 export default {
   name: 'RoomList',
-  components: {},
+  components: {
+    XioRoomListShopChg
+  },
   inject: ['noop'],
   data() {
     return {
-      list: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
+      shopList: [],
+      shopId: '',
+      shopName: '',
+      list: [],
       timeObj: {}// week锛氭槦鏈燂紝date锛氬勾鏈堟棩锛宼imeMin锛氭椂鍒嗭紝time锛氭椂鍒嗙锛宼imeStamp锛氭椂闂存埑
     }
   },
   computed: {
 
   },
+  activated() {},
   mounted() {
     console.log('roomList mounted')
     this.init()
@@ -53,8 +86,71 @@
 
   },
   methods: {
-    init() {
+    async init() {
+      // 璁℃椂
       this.countGetTime(this, 'timeObj', 'list')
+      // await this.getShopList()
+      // this.getRoomList()
+      this.showChooseShop()
+    },
+    // 纭畾閫夋嫨闂ㄥ簵
+    confirmShop(item) {
+      this.shopId = item.id
+      this.shopName = item.name
+      this.getRoomList()
+    },
+    // 鏄剧ず閫夋嫨闂ㄥ簵鍒楄〃寮圭獥
+    showChooseShop() {
+      // 鎵撳紑寮圭獥
+      this.$refs['XioRoomListShopChg'].showShopDialog(this.shopId)
+    },
+    // 鍒锋柊娴忚鍣ㄩ〉闈�
+    resetPage() {
+      window.location.reload()
+      // this.getRoomList()
+    },
+    // 鑾峰彇闂ㄥ簵鍒楄〃
+    getShopList() {
+      var params = {}
+      return new Promise((resolve, reject) => {
+        Req.http.post({
+          url: 'guide/treat/screen/shop/list',
+          data: params,
+          header: { 'Content-Type': 'application/json' },
+          mockData: {
+            code: 100,
+            msg: '',
+            data: [{
+              name: 'xx',
+              id: 'xx'
+            }]
+          }
+        }).then((res) => {
+          this.shopList = res.data || []
+          resolve(res)
+        })
+      })
+    },
+    // 鑾峰彇鍒楄〃
+    getRoomList() {
+      var params = {}
+      if (this.shopId) {
+        params.shopId = this.shopId
+      }
+      Req.http.post({
+        url: 'guide/treat/screen/room/list',
+        data: params,
+        header: { 'Content-Type': 'application/json' },
+        mockData: {
+          code: 100,
+          msg: '',
+          data: [{
+            id: 'xx', roomNo: 'xx'
+          }]
+        }
+      }).then((res) => {
+        this.list = res.data || []
+      })
     },
     // 杩斿洖
     back() {
@@ -62,21 +158,55 @@
       this.stopPollingAjaxFn('list')
       this.$router.go(-1)
     },
+    // 璺宠浆璇︽儏
     selectRoom(item = {}) {
+      // console.log(this.$router.options.routes)
+      // this.$router.options.routes
+      localStorage.removeItem('curTreatId')
+      if (this.$router && this.$router.options && this.$router.options.routes) {
+        this.$router.options.routes.forEach((o) => {
+          if (o.name === 'roomDetail') {
+            o.meta && (o.meta.isPush = true)
+          }
+        })
+      }
       this.$router.push({
-        path: `./detail?id=${item.id || ''}`
+        path: `./room/detail?id=${item.id || ''}`
       })
     }
   }
 }
 </script>
-
+<style>
+.page_choose_shop .el-input__inner {
+  background-color: transparent;
+  border: 0;
+  line-height: 50px;
+  color: rgba(255,255,255,1);
+  font-size: 36px;
+  text-align: right;
+  padding-right: 40px;
+}
+.page_choose_shop .el-select .el-input .el-select__caret {
+  font-size: 30px;
+  color: #fff;
+}
+</style>
 <style scoped>
+.page_header .left {
+  min-width: 300px;
+}
+.page_date {
+  margin-left: 0;
+}
+/* .page_container {
+  overflow: hidden;
+} */
 .list_container {
   width: 100%;
-  height: 100%;
   background-color: #fff;
   border-radius: 10px;
+  /* overflow: hidden; */
 }
 .list_container__title {
   line-height: 56px;
@@ -88,14 +218,13 @@
   /* font-weight: bold; */
 }
 .list_block {
-  /* padding-right: 66px; */
-  margin-bottom: 50px;
   overflow: auto;
 }
 .list_block .list {
-
+  margin-bottom: 20px;
 }
 .list_block .list .list__item {
+  cursor: pointer;
   padding: 40px 30px;
   border-radius: 100px;
   background-color: rgba(229,238,253,1);
@@ -106,9 +235,37 @@
   line-height: 1;
   margin-left: 48px;
   margin-bottom: 30px;
+  box-sizing: border-box;
+  min-width: 280px;
+  cursor: pointer;
 }
 .list_block .list .list__item.act {
   background-color: #5980FF;
   color: #fff;
 }
+.list_block .list .notip {
+  color: rgba(0,0,0,.3);
+  font-size: 40px;
+  text-align: center;
+  font-family: Roboto;
+}
+.select_shop_block {
+  cursor: pointer;
+}
+.select_shop_block .tx {
+  line-height: 50px;
+  color: rgba(255,255,255,1);
+  font-size: 36px;
+  text-align: center;
+  font-family: PingFangSC-regular;
+}
+.select_shop_block .icon_block {
+  width: 30px;
+  height: 30px;
+  display: block;
+}
+.select_shop_block .icon_block .icon {
+  width: 100%;
+  height: 100%;
+}
 </style>

--
Gitblit v1.8.0