From 1c200b3f9934e5c655b9d69a59b626cac14fd63e Mon Sep 17 00:00:00 2001
From: jazz <jazzxhunter@163.com>
Date: 星期三, 27 十二月 2023 12:18:43 +0800
Subject: [PATCH] update_202312271217_门店选择修改
---
static/imgs/down.png | 0
src/pages/room/list.vue | 97 +++++++++++++++----
src/components/xio_room_list_shop_chg/index.vue | 152 ++++++++++++++++++++++++++++++
3 files changed, 229 insertions(+), 20 deletions(-)
diff --git a/src/components/xio_room_list_shop_chg/index.vue b/src/components/xio_room_list_shop_chg/index.vue
new file mode 100644
index 0000000..d86457e
--- /dev/null
+++ b/src/components/xio_room_list_shop_chg/index.vue
@@ -0,0 +1,152 @@
+<template>
+ <div v-if="isShow" class="mask" @click="hideDialog">
+ <div class="xio_room_list_shop_chg_dialog" @click.stop="noop">
+ <div class="title">璇烽�夋嫨闂ㄥ簵</div>
+ <div class="list flex flex-ver flex-wrap">
+ <div v-for="(item,index) in shopList" :key="index" class="list_item flex flex-center" :class="[item.act?'act':'']" @click="chooseHandle(item)">{{ item.name }}</div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import Req from '../../utils/jun_httpInstall' // http 璇锋眰
+export default {
+ name: 'XioRoomStatusChg',
+ props: {
+ isActive: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data() {
+ return {
+ shopList: [],
+ shopId: '',
+ isShow: false
+ }
+ },
+ methods: {
+ noop() {
+ return
+ },
+ // 纭
+ // confirm() {
+ // this.isShow = false
+ // this.$emit('confirm', { })
+ // },
+ // 閫夋嫨闂ㄥ簵
+ chooseHandle(item) {
+ this.shopId = item.id
+ if (this.shopList && this.shopList.length) {
+ this.shopList.forEach((o) => {
+ o.act = false
+ if (o.id === this.shopId) {
+ o.act = true
+ }
+ })
+ }
+ this.isShow = false
+ this.$emit('confirm', item)
+ },
+ async showShopDialog(shopId) {
+ this.shopId = shopId || ''
+ this.showDialog()
+ await this.getShopList()
+ },
+ // 鑾峰彇闂ㄥ簵鍒楄〃
+ getShopList() {
+ var params = {}
+ return new Promise((resolve, reject) => {
+ Req.http.post({
+ url: 'guide/treat/screen/shop/list',
+ data: params,
+ udData: { noLoading: true },
+ header: { 'Content-Type': 'application/json' },
+ mockData: {
+ code: 100,
+ msg: '',
+ data: [{
+ name: 'xx',
+ id: 'xx'
+ }]
+ }
+ }).then((res) => {
+ if (res.data && res.data.length) {
+ res.data.forEach((o) => {
+ o.act = false
+ if (o.id === this.shopId) {
+ o.act = true
+ }
+ })
+ }
+ this.shopList = res.data || []
+ resolve(res)
+ })
+ })
+ },
+ // 鏄剧ず寮圭獥
+ showDialog() {
+ this.isShow = true
+ },
+ // 鍏抽棴寮圭獥
+ hideDialog() {
+ if (!this.shopId) {
+ return
+ }
+ this.isShow = false
+ // this.$emit('confirm', { })
+ }
+ }
+}
+</script>
+
+<style scoped>
+.xio_room_list_shop_chg_dialog {
+ width: 1141px;
+ height: 689px;
+ /* border-radius: 10px; */
+ background-color: rgba(255,255,255,1);
+ border: 1px solid rgba(187,187,187,1);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+ z-index: 1;
+}
+.xio_room_list_shop_chg_dialog .title {
+ line-height: 63px;
+ color: rgba(16,16,16,1);
+ font-size: 45px;
+ text-align: center;
+ font-family: PingFangSC-medium;
+ font-weight: bold;
+ padding-top: 31px;
+}
+.xio_room_list_shop_chg_dialog .list {
+ margin-top: 50px;
+ height: 480px;
+ overflow: auto;
+}
+.xio_room_list_shop_chg_dialog .list_item {
+ cursor: pointer;
+ min-width: 300px;
+ height: 100px;
+ box-sizing: border-box;
+ padding: 0 20px;
+ margin-left: 55px;
+ margin-bottom: 50px;
+ line-height: 73px;
+ border-radius: 4px;
+ background-color: rgba(229,238,253,1);
+ color: rgba(0,10,123,1);
+ font-size: 50px;
+ text-align: center;
+ font-family: Microsoft Yahei;
+}
+.xio_room_list_shop_chg_dialog .list_item.act {
+ background-color: #5980FF;
+ color: #fff;
+}
+</style>
diff --git a/src/pages/room/list.vue b/src/pages/room/list.vue
index 2e1d4ed..04ff80f 100644
--- a/src/pages/room/list.vue
+++ b/src/pages/room/list.vue
@@ -10,12 +10,21 @@
<img class="img" src="static/imgs/logo_2.png">
</div>
</div>
- <div class="right flex-1 flex flex-jcfe flex-ver">
- <div class="page_choose_shop">
+ <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> -->
<div class="page_date">
<div class="page_week">{{ timeObj.week }}</div>
<div class="page_day">{{ timeObj.date }}</div>
@@ -39,6 +48,8 @@
</div>
</div>
</div>
+
+ <XioRoomListShopChg ref="XioRoomListShopChg" @confirm="confirmShop" />
</div>
</template>
@@ -46,14 +57,19 @@
// 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 {
shopList: [],
shopId: '',
+ shopName: '',
list: [],
timeObj: {}// week锛氭槦鏈燂紝date锛氬勾鏈堟棩锛宼imeMin锛氭椂鍒嗭紝time锛氭椂鍒嗙锛宼imeStamp锛氭椂闂存埑
}
@@ -70,11 +86,23 @@
},
methods: {
- init() {
+ async init() {
// 璁℃椂
this.countGetTime(this, 'timeObj', 'list')
- this.getShopList()
+ // 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() {
@@ -84,20 +112,23 @@
// 鑾峰彇闂ㄥ簵鍒楄〃
getShopList() {
var params = {}
- 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 || []
+ 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)
+ })
})
},
// 鑾峰彇鍒楄〃
@@ -162,6 +193,12 @@
}
</style>
<style scoped>
+.page_header .left {
+ min-width: 300px;
+}
+.page_date {
+ margin-left: 0;
+}
/* .page_container {
overflow: hidden;
} */
@@ -187,6 +224,7 @@
margin-bottom: 20px;
}
.list_block .list .list__item {
+ cursor: pointer;
padding: 40px 30px;
border-radius: 100px;
background-color: rgba(229,238,253,1);
@@ -211,4 +249,23 @@
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>
diff --git a/static/imgs/down.png b/static/imgs/down.png
new file mode 100644
index 0000000..22900d9
--- /dev/null
+++ b/static/imgs/down.png
Binary files differ
--
Gitblit v1.8.0