Merge remote-tracking branch 'origin/master'

jiangping

2024-06-03 ee010e7160f0a4dee5e0c2fde55d488f4f2f9788

 h5/pages/staff/meetingSel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,322 @@
<template>
  <view class="main_app">
    <view class="search_inp df_ac">
      <image
        class="mr12 search"
        src="../../static/ic_search@2x.png"
        mode="widthFix"
      ></image>
      <input
        v-model="param.keyword"
        @blur="initData()"
        type="text"
        placeholder="搜索"
        placeholder-style="color: #999999;"
      />
    </view>
    <view class="member_list">
      <view v-for="item in memberList" :key="item.id" class="line">
        <image
          :src="
            item.prefixUrl
              ? item.prefixUrl
              : require('@/static/logo@2x.png')
          "
          class="avatar"
          mode=""
        ></image>
        <view class="content">
          <view class="info">
            <text class="name">{{ item.realname }}</text>
            <!-- <text class="tag">tag</text> -->
          </view>
          <view class="depart">{{ item.departmentName }}</view>
        </view>
        <image
          @click="changeMem(item, index)"
          v-if="item.checked"
          src="@/static/meeting/icon/ic_choose_sel@2x.png"
          mode="widthFix"
          class="checked"
        ></image>
        <image
          @click="changeMem(item, index)"
          v-if="!item.checked"
          src="@/static/meeting/icon/ic_choose@2x.png"
          mode="widthFix"
          class="checked"
        ></image>
        <text></text>
      </view>
      <view class="empty"></view>
    </view>
    <!--  -->
    <view class="sub_wrap">
      <view class="sel_mem">
        <text>已选择：</text>
        <view class="members">
                <text v-for="(item, i) in selList" :key="i">{{ item.realname }}；</text>
        </view>
        <image
          @click="isShowSelMem = true"
          class="open_icon"
          src="../../static/staff/renyuan_ic_open.png"
          mode=""
        ></image>
      </view>
      <view class="btn" @click="onSubmit">确认({{ selList.length }}/20)</view>
    </view>
    <!--  -->
     <u-popup
      :show="isShowSelMem"
      :round="12"
      mode="bottom"
      @close="isShowSelMem = false"
    >
      <view class="modal">
        <view class="modal_header">
          <text class="status">已选择：{{ selList.length }}人</text>
          <text class="btn" @click="isShowSelMem = false">确认</text>
        </view>
        <view class="modal_mem_list">
          <view class="line" v-for="(item, i) in selList" :key="i">
            <image
              :src="
                item.faceImgFull
                  ? item.faceImgFull
                  : require('@/static/logo@2x.png')
              "
              class="avatar"
              mode=""
            ></image>
            <view class="content">
              <view class="info">
                <text class="name">{{ item.realname }}</text>
              </view>
              <view class="depart">{{ item.departmentName }}</view>
            </view>
            <view class="btn" @click="handleRemove(item)">移除</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { userPagePost } from '@/api'
export default {
  data() {
    return {
      memberList: [],
      selList: [],
      param: {},
      pagination: {
        page: 1,
        capacity: 20
      },

      isShowSelMem: false
    }
  },
  onLoad(option) {
    this.param = { ...option, keyword: '' }
    this.initData()
  },
  methods: {
    onSubmit() {
         this.$eventBus.$emit('meetingPeo', this.selList)
      uni.navigateBack()
    },
      changeMem(item, index) {
      item.checked = !item.checked
      this.selList = this.memberList.filter(i => i.checked)
      // const arr = e.detail.value
      // let arrTemp = arr.map(item => {
      //   let obj = {}
      //   this.memberList.forEach(ite => {
      //     if (item == ite.id) {
      //       obj.name = ite.name.split('-')[0]
      //       obj.componey = ite.name.split('-')[1] || ''
      //       obj.id = ite.id
      //     }
      //   })
      //   return obj
      // })
      // this.selList = arrTemp
      this.$forceUpdate()
    },
    initData() {
      const { param, pagination } = this
      userPagePost({
        model: { ...param },
        ...pagination,

      }).then(res => {
        this.memberList = res.data.records || []
            this.memberList.map(i => {
               i.checked = false
            })
      })
    },
      handleRemove(item) {
      this.memberList.forEach(ite => {
        if (item.id === ite.id) {
          ite.checked = false
        }
      })
      // console.log(this.memberList);
      this.$forceUpdate()
    },
  }
};
</script>

<style lang="scss">
.modal {
  padding: 40rpx 30rpx;
  .modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .status {
      font-weight: 600;
    }
    .btn {
      color: $uni-color-primary;
    }
  }
  .modal_mem_list {
    .line {
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #e5e5e5;
      padding: 30rpx 0;
      .avatar {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20rpx;
      }
      .content {
        flex: 1;
        .depart {
          font-size: 24rpx;
          color: #666666;
        }
        .info {
          display: flex;
          margin-bottom: 16rpx;
          .name {
            font-size: 30rpx;
          }
        }
      }
      .btn {
        width: 80rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        font-size: 24rpx;
        color: #333333;
        border-radius: 4rpx;
        border: 1rpx solid #999999;
      }
    }
  }
}
.sub_wrap {
  position: fixed;
  bottom: 0;
   background-color: #fff;
  left: 0;
  width: 100%;
  box-shadow: 0rpx 0rpx 6rpx 0rpx #b2b2b2;
  padding: 30rpx 30rpx 64rpx;
  .sel_mem {
    display: flex;
    align-items: center;
    .members {
      width: 500rpx;
      color: $uni-color-primary;
      white-space: nowrap;
      overflow: hidden; //文本超出隐藏
      text-overflow: ellipsis;
      margin-right: 20rpx;
    }
    .open_icon {
      width: 44rpx;
      height: 44rpx;
    }
  }
  .btn {
    width: 690rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: $uni-color-primary;
    border-radius: 44rpx;
    color: #fff;
    text-align: center;
    margin-top: 22rpx;
  }
}
.member_list {
  .line {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #e5e5e5;
    padding: 30rpx 0;
    .avatar {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;
    }
    .content {
      flex: 1;
      .depart {
        font-size: 24rpx;
        color: #666666;
      }
      .info {
        display: flex;
        margin-bottom: 16rpx;
        .name {
          font-size: 30rpx;
        }
        .tag {
          font-size: 24rpx;
          border-radius: 4rpx;
          border: 1rpx solid #f62710;
          color: #f62710;
          padding: 0rpx 6rpx;
          margin-left: 8rpx;
        }
      }
    }
      .checked{
      width: 48rpx;
    }
  }
  .empty {
    width: 100%;
    height: 280rpx;
  }
}
.search_inp {
  height: 72rpx;
  background: #f7f7f7;
  border-radius: 4rpx;
  padding-left: 16rpx;
  .search {
    width: 28rpx;
  }
  input {
    flex: 1;
    font-size: 28rpx;
    color: #333333;
  }
}
</style>