From f6ea728ea50706b1dfa75bc0d266fb6b5f13ef7f Mon Sep 17 00:00:00 2001 From: jazz <jazzxhunter@163.com> Date: 星期二, 09 一月 2024 19:29:29 +0800 Subject: [PATCH] Merge branch 'xio_dev' --- src/components/xio_room_guest_info_box/index.vue | 308 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 308 insertions(+), 0 deletions(-) diff --git a/src/components/xio_room_guest_info_box/index.vue b/src/components/xio_room_guest_info_box/index.vue new file mode 100644 index 0000000..2d9ce6c --- /dev/null +++ b/src/components/xio_room_guest_info_box/index.vue @@ -0,0 +1,308 @@ +<template> + <div class="guest_info_box"> + <div v-if="roomInfo && roomInfo.roomNo" class="room_title">{{ roomInfo.roomNo }}</div> + <div class="room_content"> + <div class="tip">璇婄枟瀹夋帓</div> + <!-- <div class="name">{{ occupyInfoView.userName }}</div> appellationName --> + <div v-show="isShowAppellationName" class="flex flex-center"> + <div class="flex flex-ver"> + <div class="name">{{ occupyInfoView.appellationName }}</div> + <div class="name_icon" @click="tapAppellationHandle"> + <img class="img" src="static/imgs/eye.png"> + </div> + </div> + </div> + <div v-show="!isShowAppellationName" class="flex flex-center"> + <div class="flex flex-ver"> + <div class="name"> + <el-popover + placement="top" + width="400" + popper-class="top_tx" + trigger="click" + :popper-options="{ removeOnDestroy: true }" + > + <div>{{ occupyInfoView.userName }}</div> + <div slot="reference" class="tx ell">{{ occupyInfoView.userName }}</div> + </el-popover> + </div> + <div class="name_icon" @click="tapAppellationHandle"> + <img class="img" src="static/imgs/eye.png"> + </div> + </div> + </div> + <div v-if="occupyInfoView.ciq" class="ciq">({{ occupyInfoView.ciq }})</div> + <div v-if="occupyInfoView.startTime" class="time">瀹夋帓娌荤枟鏃堕棿锛歿{ occupyInfoView.startTime }} 寮�濮�</div> + </div> + <div v-show="occupyInfoView" class="room_left_btn_box flex flex-ver" style="margin-top: 105px;"> + <div v-show="occupyInfoView.treatRoomStatus == 0" class="room_left_btn_box__item flex flex-1 flex-center b-green btn_ani" @click="setStatus('鏁烽夯涓�', 4, occupyInfoView)">寮�濮嬫暦楹�</div> + <div v-show="occupyInfoView.treatRoomStatus == 0" class="room_left_btn_box__item flex flex-1 flex-center green btn_ani" style="margin-right: 0;" @click="setStatus('浣跨敤涓�', 1, occupyInfoView)">寮�濮嬫不鐤�</div> + <div v-show="occupyInfoView.treatRoomStatus == 4" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('浣跨敤涓�', 1, occupyInfoView)">寮�濮嬫不鐤�</div> + <div v-show="occupyInfoView.treatRoomStatus == 1" class="room_left_btn_box__item flex-1 flex flex-center yellow btn_ani" @click="setStatus('瀹汉浼戞伅', 2, occupyInfoView)">瀹汉浼戞伅</div> + <div v-show="occupyInfoView.treatRoomStatus == 1" class="room_left_btn_box__item flex-1 flex flex-center gray btn_ani" style="margin-right: 0;" @click="setStatus('鎵撴壂涓�', 3, occupyInfoView)">閫氱煡鎵撴壂</div> + <div v-show="occupyInfoView.treatRoomStatus == 2" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('鎵撴壂涓�', 3, occupyInfoView)">閫氱煡鎵撴壂</div> + <div v-show="occupyInfoView.treatRoomStatus == 3" class="room_left_btn_box__item flex flex-center green btn_ani" @click="setStatus('绌洪棽', 0, occupyInfoView)">缁撴潫鎵撴壂</div> + </div> + <!-- MIC閫氱煡鍗搁夯 --> + <XioRoomOffNarcosisNotice ref="XioRoomOffNarcosisNotice" @confirm="offNarcosisNoticeConfirm" /> + </div> +</template> + +<script> +// 閫氱煡鍗搁夯 +import XioRoomOffNarcosisNotice from '@/components/xio_room_off_narcosis_notice' +export default { + name: 'XioRoomGuestInfoBox', + components: { + XioRoomOffNarcosisNotice + }, + props: { + roomInfo: { + type: Object, + default: () => { + return {} + } + }, + occupyInfoView: { + type: [Object, Array], + default: () => { + return {} + } + }, + offNarcosisIds: { + type: Array, + default: () => { + return [] + } + } + }, + data() { + return { + isShowAppellationName: true + } + }, + methods: { + noop() { + return + }, + // 璁剧疆宸查�氱煡鍗搁夯id鏁扮粍 + setLocalStorageOffNarcosisIds() { + localStorage.setItem('offNarcosisIds', JSON.stringify(this.offNarcosisIds)) + }, + // 鍗搁夯閫氱煡纭 + offNarcosisNoticeConfirm() { + if (this.occupyInfoView) { + if (this.offNarcosisIds && this.offNarcosisIds.length) { + var flag = this.offNarcosisIds.find((o) => { return o === this.occupyInfoView.userId }) + if (!flag) { + this.offNarcosisIds.push(this.occupyInfoView.userId) + } + } else if (this.offNarcosisIds) { + this.offNarcosisIds.push(this.occupyInfoView.userId) + } + this.setLocalStorageOffNarcosisIds() + } + }, + // 鏄剧ず閫氱煡鍗搁夯寮圭獥 + showOffNarcosisNotice() { + // 鎵撳紑寮圭獥 + this.$refs['XioRoomOffNarcosisNotice'].showDialog() + this.$refs['XioRoomOffNarcosisNotice'].dataInit(this.occupyInfoView) + }, + // 鐐瑰嚮鏄剧ず闅愯棌绉拌皳 + tapAppellationHandle() { + this.isShowAppellationName = !this.isShowAppellationName + }, + setStatus(tx, status, item) { + this.$emit('setStatus', { tx, status, item }) + }, + // 纭 + confirm() { + this.isShow = false + this.$emit('confirm', { }) + }, + // 鏄剧ず寮圭獥 + showDialog() { + this.isShow = true + }, + // 鍏抽棴寮圭獥 + hideDialog() { + this.isShow = false + this.$emit('confirm', { }) + } + } +} +</script> + +<style scoped> +.guest_info_box { + width: 100%; + height: 100%; + box-sizing: border-box; + padding-top: 39px; + position: relative; +} +.guest_info_box .room_title { + line-height: 50px; + color: rgba(255,255,255,1); + font-size: 36px; + text-align: center; + font-family: PingFangSC-medium; + padding: 10px 0; + background-color: rgba(34,123,235,1); + width: 400px; + margin: 0 auto 0 auto; +} +.guest_info_box .room_main_tip { + line-height: 168px; + font-size: 120px; + color: rgba(46,77,124,1); + text-align: center; + font-family: PingFangSC-medium; + margin-top: 107px; + /* font-weight: bold; */ +} +.guest_info_box .room_main_tip.gray { + color: rgba(154,154,154,1); +} +.guest_info_box .btn_box { + margin-top: 130px; +} +.guest_info_box .btn_box__item { + width: 250px; + height: 120px; + border-radius: 10px; + box-shadow: 0px 2px 6px 0px rgba(206,206,206,1); + margin-right: 70px; + cursor: pointer; +} +.guest_info_box .btn_box__item:last-child { + margin-right: 0; +} +.guest_info_box .btn_box__item.white { + background-color: rgba(255,255,255,1); +} +.guest_info_box .btn_box__item.blue { + background-color: rgba(46,77,124,1); +} +.guest_info_box .btn_box__item.yellow { + background-color: rgba(255,199,115,1); +} +.guest_info_box .btn_box__item.gray { + background-color: rgba(206,206,206,1); +} +.guest_info_box .btn_box__item .icon { + width: 60px; + height: 60px; + display: block; + margin-right: 17px; +} +.guest_info_box .btn_box__item .icon .img { + width: 100%; + height: 100%; +} +.guest_info_box .btn_box__item .tx { + line-height: 37px; + color: rgba(51,51,51,1); + font-size: 26px; + text-align: center; + font-family: PingFangSC-medium; +} +.guest_info_box .btn_box__item .tx.white { + color: rgba(255,255,255,1); +} +.guest_info_box .room_left_btn_box { + padding: 0 23px; + margin-top: 163px; +} +.guest_info_box .room_left_btn_box__item { + width: 500px; + height: 150px; + line-height: 73px; + border-radius: 10px; + font-size: 50px; + text-align: center; + margin: auto; +} +.guest_info_box .room_left_btn_box__item.flex-1 { + width: auto; + height: 150px; + line-height: 58px; + border-radius: 10px; + font-size: 40px; + text-align: center; + font-family: Microsoft Yahei; + margin-right: 20px; + font-weight: bold; +} +/* .guest_info_box .room_left_btn_box__item:last-child { + margin-right: 0; +} */ +.guest_info_box .room_left_btn_box__item.yellow { + color: rgba(255,255,255,1); + background-color: rgba(233,157,66,1); +} +.guest_info_box .room_left_btn_box__item.gray { + background-color: rgba(206,206,206,1); + color: rgba(79,79,79,1); +} +.guest_info_box .room_left_btn_box__item.green { + background-color: rgba(47,174,206,1); + color: rgba(255,255,255,1); +} +.guest_info_box .room_left_btn_box__item.b-green { + background-color: rgba(79,167,114,1); + color: rgba(255,255,255,1); +} +.guest_info_box .room_content { + margin-top: 30px; +} +.guest_info_box .room_content .tip { + line-height: 33px; + color: rgba(79,79,79,1); + font-size: 24px; + text-align: center; + font-family: PingFangSC-medium; +} +.guest_info_box .room_content .name { + line-height: 168px; + color: rgba(51,51,51,1); + font-size: 120px; + text-align: center; + font-family: PingFangSC-medium; + margin-top: 13px; +} +.guest_info_box .room_content .name .tx { + max-width: 666px; + margin: auto; + text-align: center; +} +.guest_info_box .room_content .name_icon { + width: 40px; + height: 40px; + display: block; + margin-top: 13px; + padding: 20px; +} +.guest_info_box .room_content .name_icon .img { + width: 100%; + height: 100%; +} +.guest_info_box .room_content .ciq { + line-height: 42px; + color: rgba(51,51,51,1); + font-size: 30px; + text-align: center; + font-family: PingFangSC-regular; + margin-top: -5px; +} +.guest_info_box .room_content .time { + line-height: 42px; + color: rgba(0,0,0,1); + font-size: 30px; + text-align: center; + font-family: PingFangSC-medium; + font-weight: bold; + margin-top: 21px; +} +</style> -- Gitblit v1.8.0