‘’

liukangdong

2024-05-31 9e47e0ece28c6145638aecca5bdf86857c049cf9

 h5/pages/staff/meetingSubOrder.vue

@@ -1,145 +1,249 @@
<template>
   <view class="main_app">
      <view class="module_list">
         <view class="item">
            <view class="name">会议时间</view>
            <view class="line">
               <view class="label">2022年22月2日 1000000000</view>
               <u-icon name="arrow-right" color="#999999" size="14" />
            </view>
         </view>
         <view class="item">
            <view class="name">会议室</view>
            <view class="line">
               <view class="label">aaaaaaaa</view>
            </view>
         </view>
         <view class="item">
            <view class="name">预约人</view>
            <view class="line">
               <view class="label">aaaaaaaa</view>
            </view>
         </view>
         <view class="empty"></view>
         <view class="item">
            <view class="name">
               <text>会议主题</text>
               <text class="star">*</text>
            </view>
            <view class="line">
               <input type="text" v-model="param.aaa" placeholder="请输入会议主题" placeholder-class="placeholder9" class="label">
            </view>
         </view>
         <view class="item">
            <view class="name">
               <text>会议内容</text>
            </view>
            <view class="line">
               <u-textarea border="none" v-model="param.aaa" count :maxlength="300" placeholder="请输入会议内容" placeholder-class="placeholder9" class="label" />
            </view>
         </view>
         <view class="empty"></view>
         <view class="item">
            <view class="name">参会人员</view>
            <view class="line">
               <view class="label">
                  <text v-if="false">moumoumou</text>
                  <text v-else class="placeholder9" @click="$jump('/pages/staff/memberSel')">请选择</text>
               </view>
               <u-icon name="arrow-right" color="#999999" size="14" @click="$jump('/pages/staff/memberSel')" />
            </view>
         </view>
         <view class="item">
            <view class="name">选择服务项</view>
            <view class="line">
               <view class="label">
                  <view class="service_item" v-for="(item,index) in serviceOps" :key="index">
                     {{ item.value }}
                  </view>
               </view>
            </view>
         </view>
         <view class="item">
            <view class="name">
               <text>备注</text>
            </view>
            <view class="line">
               <textarea v-model="param.as" :maxlength="-1" placeholder="请输入" placeholder-class="placeholder9" class="label" />
            </view>
         </view>
			
         <view class="sub_btn">
            确认预约
         </view>
			
      </view>
   </view>
  <view class="main_app">
    <view class="module_list">
      <view class="item">
        <view class="name">会议时间</view>
        <view class="line">
          <view class="label">
            {{ param.activeDate }} {{ param.startTime }}-{{ param.endTime }}
          </view>
          <u-icon name="arrow-right" color="#999999" size="14" />
        </view>
      </view>
      <view class="item">
        <view class="name">会议室</view>
        <view class="line">
          <view class="label">{{ param.roomName }}</view>
        </view>
      </view>
      <view class="item">
        <view class="name">预约人</view>
        <view class="line">
          <view class="label">{{ userInfo.realname }}</view>
        </view>
      </view>
      <view class="empty"></view>
      <view class="item">
        <view class="name">
          <text>会议主题</text>
          <text class="star">*</text>
        </view>
        <view class="line">
          <input
            type="text"
            v-model="param.name"
            placeholder="请输入会议主题"
            placeholder-class="placeholder9"
            class="label"
          />
        </view>
      </view>
      <view class="item">
        <view class="name">
          <text>会议内容</text>
        </view>
        <view class="line">
          <u-textarea
            border="none"
            v-model="param.content"
            count
            :maxlength="300"
            placeholder="请输入会议内容"
            placeholder-class="placeholder9"
            class="label"
          />
        </view>
      </view>
      <view class="empty"></view>
      <view class="item">
        <view class="name">参会人员</view>
        <view class="line" @click="selPeople">
          <view class="label">
            <text v-if="param.sysList && param.sysList.length > 0">
                     {{ param.sysList.map(i=>i.realname).join(',') }}
                  </text>
            <text
              v-else
              class="placeholder9"
              @click="$jump('/pages/staff/memberSel')"
              >请选择</text
            >
          </view>
          <u-icon
            name="arrow-right"
            color="#999999"
            size="14"
            @click="$jump('/pages/staff/memberSel')"
          />
        </view>
      </view>
      <view class="item">
        <view class="name">选择服务项</view>
        <view class="line">
          <view class="label">
            <view
              class="service_item"
                     :class="{active: item.checked}"
              v-for="(item, index) in info.projectList"
              :key="index"
                     @click="serviceClick(item)"
            >
              {{ item.projectName }}
            </view>
          </view>
        </view>
      </view>
      <view class="item">
        <view class="name">
          <text>备注</text>
        </view>
        <view class="line">
          <textarea
            v-model="param.remark"
            :maxlength="-1"
            placeholder="请输入"
            placeholder-class="placeholder9"
            class="label"
          />
        </view>
      </view>

      <view class="sub_btn" @click="onSubmit"> 确认预约 </view>
    </view>
  </view>
</template>

<script>
   export default {
      data() {
         return {
            param: {},
            serviceOps: [
               { key: '0', value: '席卡' },
               { key: '1', value: '投影仪' },
               { key: '2', value: '笔记本电脑' },
            ]
         };
      }
   }
import {
  reservationMeeting,
  getRoomDetail
} from '@/api'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      param: {},
      userInfo: uni.getStorageSync('userInfo'),
         info: {},
    }
  },
  onLoad(option) {
    this.param = { ...option }
    this.$set(this.param, 'activeDate', dayjs(option.yudingDate).format('YYYY年M月D日'))
      this.initOption()
  },
   mounted() {
    this.$eventBus.$on('meetingPeo', (res) => {
      this.$set(this.param, 'sysList', res)
      // this.$set(this.param, 'memberIds', res.map(i => i.id).join(','))
      // this.$set(this.param, 'memberNames', res.map(i => i.name).join(','))
    })
  },
  methods: {
      onSubmit() {
         const { param, info } = this
         if (!param.name) return uni.showToast({
        title: '请输入会议主题',
        icon: 'none'
      })
         reservationMeeting({
            ...param,
            startTime: `${param.yudingDate} ${param.startTime}:00`,
            endTime: `${param.yudingDate} ${param.endTime}:00`,
            projectList: info.projectList.filter(i => i.checked),
         }).then(res => {
            if(res.code === 200){

            }
         })
      },
    selPeople() {
         const { param } = this
         let startTime = param.yudingDate + ' ' + param.startTime
         let endTime = param.yudingDate + ' ' + param.endTime
      uni.navigateTo({
        url: `/pages/staff/meetingSel?startTime=${startTime}&endTime=${endTime}`
      })
    },
      serviceClick(item) {
         const { info } = this
         info.projectList.forEach(ite => {
            if(ite.projectId === item.projectId){
               ite.checked = !ite.checked
            }
         })
         this.$forceUpdate()
      },
    initOption() {
         const roomId = Number(this.param.roomId)
      getRoomDetail({ roomId }).then(res => {
        res.data.projectList.forEach(item => {
          item.active = false
        })
        this.info = res.data
            if(this.info && this.info.projectList){
               this.info.projectList.forEach(i => {
                  i.checked = false
               })
            }
      })
    }
  }
}
</script>

<style lang="scss">
.module_list{
   .item{
      border-bottom: 1rpx solid #E5E5E5;
      padding: 30rpx 0;
      .name{
         color: #666666;
         margin-bottom: 30rpx;
      }
      .line{
         display: flex;
         .label{
            flex: 1;
            display: flex;
            align-items: center;
            .service_item{
               height: 64rpx;
               line-height: 64rpx;
               background: #F7F7F7;
               border-radius: 4rpx;
               padding: 0 24rpx;
               margin-right: 20rpx;
.module_list {
  .item {
    border-bottom: 1rpx solid #e5e5e5;
    padding: 30rpx 0;
    .name {
      color: #666666;
      margin-bottom: 30rpx;
    }
    .line {
      display: flex;
      .label {
        flex: 1;
        display: flex;
        align-items: center;
        .service_item {
          height: 64rpx;
          line-height: 64rpx;
          background: #f7f7f7;
          border-radius: 4rpx;
          padding: 0 24rpx;
          margin-right: 20rpx;
        }
            .active{
               background-color: #4d99a8;
               color: #fff;
            }
         }
			
      }
   }
   padding-bottom: 100rpx;
      }
    }
  }
  padding-bottom: 100rpx;
}
.empty {
   width: 750rpx;
   height: 20rpx;
   background-color: #f7f7f7;
   margin: 0 -30rpx;
  width: 750rpx;
  height: 20rpx;
  background-color: #f7f7f7;
  margin: 0 -30rpx;
}
.sub_btn{
            width: 690rpx;
            height: 72rpx;
            line-height: 72rpx;
            text-align: center;
            background: #279BAA;
            box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
            border-radius: 36rpx;
            font-size: 30rpx;
            color: #FFFFFF;
            margin-top: 20rpx;
         }
.star{
   margin-left: 4rpx;
   color: #e42d2d;
.sub_btn {
  width: 690rpx;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
  background: #279baa;
  box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
  border-radius: 36rpx;
  font-size: 30rpx;
  color: #ffffff;
  margin-top: 20rpx;
}
.star {
  margin-left: 4rpx;
  color: #e42d2d;
}
</style>