jiangping
2024-06-07 73af3ed9fbcc616cdecc739fc4307163c19c5764
h5/pages/staff/meetingDetail.vue
@@ -1,168 +1,244 @@
<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">
        <view class="label">会议内容</view>
        <view class="value">
          <!-- <text>主要讨论智能会议室系统选型,请大家一定要按时来开会,时间宝贵。感谢大家!</text> -->
          <u-textarea
            border="none"
            v-model="detail.meetingContent"
            disabled
            :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="mem in detail.userResponseList"
              :key="mem.id"
            >
              <image :src="mem.avatar" class="avatar" mode=""></image>
              <view class="name">{{ mem.realname }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="item">
        <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">
        <view class="label">备注</view>
        <view class="value">{{ detail.remark || detail.meetingRemark }}</view>
      </view>
      <view class="item">
        <view class="label">预约人</view>
        <view class="value"
          >{{ 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="handleCancel(detail.id)">撤回</view>
      <view class="btn agree" @click="handleEdit">修改</view>
    </view>
    <view class="main_footer" v-if="detail.meetingStatus == '2'">
      <view class="btn agree" @click="handleSub('2')">结束</view>
    </view>
  </view>
</template>
<script>
   export default {
      data() {
         return {
            param: {}
         };
      },
      methods: {
         handleSub() {
         }
      }
   }
import { meetingDetail, cancelById } from '@/api'
export default {
  data() {
    return {
      param: {},
      detail: {},
      id: ''
    }
  },
  onLoad(option) {
    this.id = option.id
    this.getDetail()
  },
  methods: {
    getDetail() {
      const { id } = this
      meetingDetail({ id }).then(res => {
        this.detail = res.data
      })
    },
    handleCancel(id) {
      uni.showModal({
        title: '提示',
        // confirmText: '确认',
        content: '确认撤回该会议吗',
        success: function (res) {
          if (res.confirm) {
            cancelById({ id }).then(res => {
              if (res.code === 200) {
                setTimeout(() => {
                  uni.showToast({
                    title: '撤回成功',
                    icon: 'success'
                  })
                })
                setTimeout(() => {
                  uni.navigateBack()
                })
              }
            })
          }
        }
      })
    },
    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;
        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 {
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    background: #ffffff;
    border-radius: 44rpx;
    border: 1rpx solid #999999;
    font-size: 32rpx;
    text-align: center;
    margin: 16rpx 8rpx;
  }
  .agree {
    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;
}
</style>