| 提交 | 用户 | age | ||
| 1c200b | 1 | <template> |
| J | 2 | <div v-if="isShow" class="mask" @click="hideDialog"> |
| 3 | <div class="xio_room_list_shop_chg_dialog" @click.stop="noop"> | |
| 4 | <div class="title">请选择门店</div> | |
| 5 | <div class="list flex flex-ver flex-wrap"> | |
| 6 | <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> | |
| 7 | </div> | |
| 8 | </div> | |
| 9 | </div> | |
| 10 | </template> | |
| 11 | ||
| 12 | <script> | |
| 13 | import Req from '../../utils/jun_httpInstall' // http 请求 | |
| 14 | export default { | |
| c1e103 | 15 | name: 'XioRoomListShopChg', |
| 1c200b | 16 | props: { |
| J | 17 | isActive: { |
| 18 | type: Boolean, | |
| 19 | default: false | |
| 20 | } | |
| 21 | }, | |
| 22 | data() { | |
| 23 | return { | |
| 24 | shopList: [], | |
| 25 | shopId: '', | |
| 26 | isShow: false | |
| 27 | } | |
| 28 | }, | |
| 29 | methods: { | |
| 30 | noop() { | |
| 31 | return | |
| 32 | }, | |
| 33 | // 确认 | |
| 34 | // confirm() { | |
| 35 | // this.isShow = false | |
| 36 | // this.$emit('confirm', { }) | |
| 37 | // }, | |
| 38 | // 选择门店 | |
| 39 | chooseHandle(item) { | |
| 40 | this.shopId = item.id | |
| 41 | if (this.shopList && this.shopList.length) { | |
| 42 | this.shopList.forEach((o) => { | |
| 43 | o.act = false | |
| 44 | if (o.id === this.shopId) { | |
| 45 | o.act = true | |
| 46 | } | |
| 47 | }) | |
| 48 | } | |
| 49 | this.isShow = false | |
| 50 | this.$emit('confirm', item) | |
| 51 | }, | |
| 52 | async showShopDialog(shopId) { | |
| 53 | this.shopId = shopId || '' | |
| 54 | this.showDialog() | |
| 55 | await this.getShopList() | |
| 56 | }, | |
| 57 | // 获取门店列表 | |
| 58 | getShopList() { | |
| 59 | var params = {} | |
| 60 | return new Promise((resolve, reject) => { | |
| 61 | Req.http.post({ | |
| 62 | url: 'guide/treat/screen/shop/list', | |
| 63 | data: params, | |
| 64 | udData: { noLoading: true }, | |
| 65 | header: { 'Content-Type': 'application/json' }, | |
| 66 | mockData: { | |
| 67 | code: 100, | |
| 68 | msg: '', | |
| 69 | data: [{ | |
| 70 | name: 'xx', | |
| 71 | id: 'xx' | |
| 72 | }] | |
| 73 | } | |
| 74 | }).then((res) => { | |
| 75 | if (res.data && res.data.length) { | |
| 76 | res.data.forEach((o) => { | |
| 77 | o.act = false | |
| 78 | if (o.id === this.shopId) { | |
| 79 | o.act = true | |
| 80 | } | |
| 81 | }) | |
| 82 | } | |
| 83 | this.shopList = res.data || [] | |
| 84 | resolve(res) | |
| 85 | }) | |
| 86 | }) | |
| 87 | }, | |
| 88 | // 显示弹窗 | |
| 89 | showDialog() { | |
| 90 | this.isShow = true | |
| 91 | }, | |
| 92 | // 关闭弹窗 | |
| 93 | hideDialog() { | |
| 94 | if (!this.shopId) { | |
| 95 | return | |
| 96 | } | |
| 97 | this.isShow = false | |
| 98 | // this.$emit('confirm', { }) | |
| 99 | } | |
| 100 | } | |
| 101 | } | |
| 102 | </script> | |
| 103 | ||
| 104 | <style scoped> | |
| 105 | .xio_room_list_shop_chg_dialog { | |
| 106 | width: 1141px; | |
| 107 | height: 689px; | |
| 108 | /* border-radius: 10px; */ | |
| 109 | background-color: rgba(255,255,255,1); | |
| 110 | border: 1px solid rgba(187,187,187,1); | |
| 111 | position: absolute; | |
| 112 | top: 50%; | |
| 113 | left: 50%; | |
| 114 | transform: translate(-50%, -50%); | |
| 115 | -webkit-transform: translate(-50%, -50%); | |
| 116 | z-index: 1; | |
| 117 | } | |
| 118 | .xio_room_list_shop_chg_dialog .title { | |
| 119 | line-height: 63px; | |
| 120 | color: rgba(16,16,16,1); | |
| 121 | font-size: 45px; | |
| 122 | text-align: center; | |
| 123 | font-family: PingFangSC-medium; | |
| 124 | font-weight: bold; | |
| 125 | padding-top: 31px; | |
| 126 | } | |
| 127 | .xio_room_list_shop_chg_dialog .list { | |
| 128 | margin-top: 50px; | |
| 129 | height: 480px; | |
| 130 | overflow: auto; | |
| 131 | } | |
| 132 | .xio_room_list_shop_chg_dialog .list_item { | |
| 133 | cursor: pointer; | |
| 134 | min-width: 300px; | |
| 135 | height: 100px; | |
| 136 | box-sizing: border-box; | |
| 137 | padding: 0 20px; | |
| 138 | margin-left: 55px; | |
| 139 | margin-bottom: 50px; | |
| 140 | line-height: 73px; | |
| 141 | border-radius: 4px; | |
| 142 | background-color: rgba(229,238,253,1); | |
| 143 | color: rgba(0,10,123,1); | |
| 144 | font-size: 50px; | |
| 145 | text-align: center; | |
| 146 | font-family: Microsoft Yahei; | |
| 147 | } | |
| 148 | .xio_room_list_shop_chg_dialog .list_item.act { | |
| 149 | background-color: #5980FF; | |
| 150 | color: #fff; | |
| 151 | } | |
| 152 | </style> | |
