css

liukangdong

2024-06-03 248f2f32b0f1e406a8110f0839702914a9c3ca0a

 h5/pages/staff/meetingSubOrder.vue

@@ -1,19 +1,249 @@
<template>
   <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 {
				
         };
      }
   }
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;
        }
            .active{
               background-color: #4d99a8;
               color: #fff;
            }
      }
    }
  }
  padding-bottom: 100rpx;
}
.empty {
  width: 750rpx;
  height: 20rpx;
  background-color: #f7f7f7;
  margin: 0 -30rpx;
}
.sub_btn {
  width: 690rpx;
  height: 72rpx;
  line-height: 72rpx;
  text-align: center;
  background: $uni-color-primary;
  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>