ll

liukangdong

2024-12-06 86baa8ff948d2e79588e0dd7efa16f6b8ac3b157

 h5/pages/staff/meetingDetail.vue

@@ -1,168 +1,358 @@
<template>
   <view class="main_app">
      <view class="head_app">
         <view class="title">讨论智能会议室系统选型</view>
         <view class="text">201会议室｜2023年5月4日 10:00-12:00</view>
      </view>
      <!--  -->
      <view class="empty"></view>
      <view class="module_list">
         <view class="item">
            <view class="label">会议内容</view>
            <view class="value">
               <!-- <text>主要讨论智能会议室系统选型，请大家一定要按时来开会，时间宝贵。感谢大家！</text> -->
               <u-textarea border="none" v-model="param.aaa" count :maxlength="300" placeholder="请输入会议内容" placeholder-class="placeholder9"    />
            </view>
         </view>
         <view class="item">
            <view class="label">参会人员</view>
            <view class="value">
               <view class="personnel">
                  <view class="per_item" v-for="i in 10">
                     <image src="../../static/logo@2x.png" class="avatar" mode=""></image>
                     <view class="name">胡八一</view>
                  </view>
               </view>
            </view>
         </view>
         <view class="item">
            <view class="label">服务项</view>
            <view class="value">席卡 |  投影仪 |  笔记本电脑</view>
         </view>
         <view class="item">
            <view class="label">备注</view>
            <view class="value">今天人多，请按时参加</view>
         </view>
         <view class="item">
            <view class="label">预约人</view>
            <view class="value">行政部 赵强 18832319899</view>
         </view>
      </view>
      <view class="empty empty2"></view>
      <view class="main_footer">
         <view class="btn" @click="handleSub('0')">撤回</view>
         <view class="btn agree" @click="handleSub('1')">修改</view>
      </view>
   </view>
  <view class="main_app">
    <view class="head_app">
      <view class="title">{{ detail.meetingName }}</view>
      <view class="text"
        >{{ detail.roomName }}｜{{ detail.meetingDate }}
        {{ detail.meetingTime }}</view
      >
    </view>
    <!--  -->
    <view class="empty"></view>
    <view class="module_list">
      <view class="item" v-if="detail.meetingContent">
        <view class="label">会议内容</view>
        <view class="value">
          <!-- <text>主要讨论智能会议室系统选型，请大家一定要按时来开会，时间宝贵。感谢大家！</text> -->
          <u-textarea
               autoHeight
            border="none"
            v-model="detail.meetingContent"
            disabled
            :maxlength="300"
            placeholder="请输入会议内容"
            placeholder-class="placeholder9"
          />
        </view>
      </view>
      <view class="item" v-if="detail.userResponseList && detail.userResponseList.length > 0">
        <view class="label">参会人员</view>
        <view class="value">
          <view class="personnel">
            <view
              class="per_item"
              v-for="mem in detail.userResponseList"
              :key="mem.id"
            >
              <image
                v-if="mem.avatar"
                :src="mem.avatar"
                class="avatar"
                mode=""
              ></image>
              <view v-else class="avatar">{{ mem.realname.slice(0, 1) }}</view>
              <view class="name">{{ mem.realname }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="item" v-if="detail.projectsResponseList && detail.projectsResponseList.length > 0">
        <view class="label">服务项</view>
        <view class="value">
          <template v-for="(ser, serI) in detail.projectsResponseList">
            <text :key="ser.id">{{ ser.name }}</text>
            <text
              :key="ser.id"
              class="mr12 ml12"
              v-if="serI != detail.projectsResponseList.length - 1"
            >
              |
            </text>
          </template>
        </view>
      </view>
      <view class="item" v-if="detail.remark || detail.meetingRemark">
        <view class="label">备注</view>
        <view class="value">{{ detail.remark || detail.meetingRemark }}</view>
      </view>
      <view class="item">
        <view class="label">预约人</view>
        <view class="value" v-if="detail.bookingUser"
          >{{ detail.bookingUser.companyName || "" }}
          {{ detail.bookingUser.realname }}
          {{ detail.bookingUser.mobile }}</view
        >
      </view>
    </view>
    <view class="empty empty2"></view>
    <view class="main_footer" v-if="detail.meetingStatus == '1'">
      <view class="btn" @click="openCancel">撤回</view>
      <view class="btn edit" @click="handleEdit">修改</view>
      <view class="btn agree" @click="handleStart">开始会议</view>
    </view>
    <view class="main_footer" v-if="detail.meetingStatus == '2' && detail.isAdmin == 1">
      <view class="btn agree" @click="openClose">结束</view>
    </view>
    <!-- 撤回 -->
    <u-popup
      catchtouchmove
      :show="isShowCancel"
      closeable
      :round="12"
      mode="bottom"
      @close="isShowCancel = false"
    >
      <view class="cancel_modal">
        <view class="title">撤销预约</view>
        <view class="line">
          <view class="label">撤回说明</view>
          <textarea
            class="textarea"
            placeholder="请输入"
            maxlength="300"
            v-model="cancelParam.businessRemark"
          />
        </view>
        <view class="sub_btn" @click="handleCancel('0')">提交</view>
      </view>
    </u-popup>
    <!-- 结束 -->
    <u-popup
      catchtouchmove
      closeable
      :show="isShowClose"
      :round="12"
      mode="bottom"
      @close="isShowClose = false"
    >
      <view class="cancel_modal">
        <view class="title">结束预约</view>
        <view class="line">
          <view class="label">结束说明</view>
          <textarea
            class="textarea"
            placeholder="请输入"
            maxlength="300"
            v-model="cancelParam.businessRemark"
          />
        </view>
        <view class="sub_btn" @click="handleCancel('1')">提交</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
   export default {
      data() {
         return {
            param: {}
         };
import { meetingDetail, cancelById, closeMeetignById,startMeetignById,startEarlyMeetignById } from '@/api'
export default {
  data() {
    return {
      param: {},
      detail: {},

      cancelParam: {},
      isShowCancel: false,
      isShowClose: false,
      id: ''
    }
  },
  onLoad(option) {
    this.id = option.id
    this.getDetail()
  },
  methods: {
    getDetail() {
      const { id } = this
      meetingDetail({ id }).then(res => {
        this.detail = res.data
      })
    },
    openCancel() {
      this.isShowCancel = true
      this.cancelParam = {}
    },
    openClose() {
      this.isShowClose = true
      this.cancelParam = {}
    },
    handleCancel(str) {
      const { id } = this.detail
      let fn = str == '0' ? cancelById : closeMeetignById
      fn({ id, ...this.cancelParam }).then(res => {
        if (res.code === 200) {
          setTimeout(() => {
            uni.showToast({
              title: '提交成功',
              icon: 'none'
            })
          })
          setTimeout(() => {
            uni.navigateBack()
          })
        }
      })
    },
      handleStart() {
         const { id, detail } = this
         let fn = new Date(detail.startTime).getTime() > new Date().getTime() ? startEarlyMeetignById : startMeetignById
         fn({ id }).then(res => {
           if (res.code === 200) {
             setTimeout(() => {
               uni.showToast({
                 title: '会议已开始',
                 icon: 'none'
               })
             })
             setTimeout(() => {
               uni.navigateBack()
             })
           }
         })
      },
      methods: {
         handleSub() {
				
         }
      }
   }
    handleEdit() {
      const { id } = this
      uni.navigateTo({
        url: `/pages/staff/meetingSubOrder?id=${id}`
      })
    },
    handleSub() {

    }
  }
}
</script>

<style lang="scss">
   page{
      background-color: #f7f7f7;
   }
   .main_app{
      padding: 0 ;
      .head_app{
         padding: 30rpx;
         background-color: #fff;
         .title{
            font-weight: 600;
            font-size: 36rpx;
            color: #222222;
            margin-bottom: 30rpx;
         }
         .text{
            font-size: 28rpx;
            color: #666666;
         }
      }
   }
   .module_list {
      background-color: #fff;
      padding: 0 30rpx;
      .item {
         padding: 30rpx 0;
         border-bottom: 1rpx solid #E5E5E5;
	
         .label {
            font-size: 26rpx;
            color: #666666;
            margin-bottom: 20rpx;
         }
	
         .value {
            font-size: 30rpx;
            display: flex;
            align-items: center;
            ::v-deep textarea{
               padding: 0;
               background-color: #fff !important;
            }
            .personnel{
               display: flex;
               width: 100%;
               overflow-x: auto;
               .per_item{
                  flex-shrink: 0;
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
                     align-items: center;
                     margin-right: 24rpx;
                     .avatar{
                        width: 72rpx;
                        height: 72rpx;
                        border-radius: 50%;
                     }
                     .name{
                        font-size: 26rpx;
                        color: #777777;
                     }
               }
            }
         }
      }
   }
   .main_footer {
      padding-bottom: 64rpx;
      display: flex;
      justify-content: space-between;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      padding: 0 30rpx;
      .btn {
         width: 336rpx;
         height: 88rpx;
         line-height: 88rpx;
         background: #FFFFFF;
         border-radius: 44rpx;
         border: 1rpx solid #999999;
         font-size: 32rpx;
         text-align: center;
         margin: 16rpx 0;
      }

      .agree {
         background: $uni-color-primary;
         color: #fff;
         border: 1rpx solid $uni-color-primary;
      }
   }
.empty{
   width: 750rpx;
      height: 20rpx;
      background-color: #f7f7f7;
      margin: 0 -30rpx;
page {
  background-color: #f7f7f7;
}
.empty2{
   height: 280rpx !important;
.main_app {
  padding: 0;
  .head_app {
    padding: 30rpx;
    background-color: #fff;
    .title {
      font-weight: 600;
      font-size: 36rpx;
      color: #222222;
      margin-bottom: 30rpx;
    }
    .text {
      font-size: 28rpx;
      color: #666666;
    }
  }
}
.module_list {
  background-color: #fff;
  padding: 0 30rpx;
  .item {
    padding: 30rpx 0;
    border-bottom: 1rpx solid #e5e5e5;

    .label {
      font-size: 26rpx;
      color: #666666;
      margin-bottom: 20rpx;
    }

    .value {
      font-size: 30rpx;
      display: flex;
      align-items: center;
      ::v-deep textarea {
        padding: 0;
        background-color: #fff !important;
      }
      .personnel {
        display: flex;
            flex-wrap: wrap;
        width: 100%;
        .per_item {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          justify-content: center;
          margin-right: 16rpx;
               width: 85rpx;
               margin-bottom: 22rpx;
               &:nth-of-type(7n){
                  margin-right: 0;
               }
          .avatar {
            width: 72rpx;
            height: 72rpx;
            margin: 0;
            border-radius: 50%;
                  margin-bottom: 8rpx;
          }
          .name {
            font-size: 26rpx;
            color: #777777;
          }
        }
      }
    }
  }
}
.main_footer {
  padding-bottom: 64rpx;
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 0 30rpx;
  .btn {
    flex: 3;
    height: 88rpx;
    line-height: 88rpx;
    background: #ffffff;
    border-radius: 44rpx;
    border: 1rpx solid #999999;
    font-size: 32rpx;
    text-align: center;
    margin: 16rpx 8rpx;
  }
   .edit{
      color: $uni-color-primary;
      border: 1rpx solid $uni-color-primary;
   }
  .agree {
      flex: 5;
    background: $uni-color-primary;
    color: #fff;
    border: 1rpx solid $uni-color-primary;
  }
}
.empty {
  width: 750rpx;
  height: 20rpx;
  background-color: #f7f7f7;
  margin: 0 -30rpx;
}
.empty2 {
  height: 280rpx !important;
}
.cancel_modal {
  height: 440rpx;
  padding: 30rpx;
  .title {
    padding: 0 30rpx 50rpx;
    text-align: center;
  }
  .line {
    .label {
      margin-bottom: 10rpx;
    }
    textarea {
      height: 120rpx;
    }
  }
  .sub_btn {
    background-color: $uni-color-primary;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 44rpx;
    width: 690rpx;
    height: 88rpx;
    margin: 20rpx auto;
  }
}
</style>