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