Merge remote-tracking branch 'origin/master'

jiangping

2024-05-31 6be28040e74e1ff7764478174a9b5d706fe4fc39

 h5/pages/staff/memberSel.vue

@@ -1,219 +1,279 @@
<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 type="text" placeholder="搜索" placeholder-style="color: #999999;" />
      </view>
      <view class="member_list">
         <view class="line">
            <image src="../../static/logo@2x.png" class="avatar" mode=""></image>
            <view class="content">
               <view class="info">
                  <text class="name">name</text>
                  <text class="tag">tag</text>
               </view>
               <view class="depart">xx科室</view>
            </view>
            <checkbox class="checkbox" />
            <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 100" :key="i">{{ item }}</text>
            </view>
            <image @click="isShowSelMem = true" class="open_icon" src="../../static/staff/renyuan_ic_open.png" mode=""></image>
         </view>
         <view class="btn" @click="onSubmit">确认(00/20)</view>
      </view>
      <!--  -->
      <u-popup :show="isShowSelMem" :round="12" mode="bottom" @close="isShowSelMem = false">
         <view class="modal">
            <view class="modal_header">
               <text class="status">已选择：xx人</text>
               <text class="btn" @click="isShowSelMem = false">确认</text>
            </view>
            <view class="modal_mem_list">
               <view class="line">
                  <image src="../../static/logo@2x.png" class="avatar" mode=""></image>
                  <view class="content">
                     <view class="info">
                        <text class="name">name</text>
                     </view>
                     <view class="depart">xx科室</view>
                  </view>
                  <view class="btn">移除</view>
               </view>
            </view>
         </view>
      </u-popup>
		
   </view>
  <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.name"
        @blur="initData()"
        type="text"
        placeholder="搜索"
        placeholder-style="color: #999999;"
      />
    </view>
    <view class="member_list">
      <checkbox-group @change="changeMem">
        <view v-for="item in memberList" :key="item.id" class="line">
          <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.name }}</text>
              <!-- <text class="tag">tag</text> -->
            </view>
            <view class="depart">{{ item.companyName }}</view>
          </view>
          <label>
            <checkbox
              :value="String(item.id)"
              class="checkbox"
            />
          </label>
          <text></text>
        </view>
      </checkbox-group>
      <view class="empty"></view>
    </view>
    <!--  -->
    <!-- <view class="sub_wrap">
      <view class="sel_mem">
        <text>已选择：</text>
        <view class="members">
          <text v-for="(item, i) in 100" :key="i">{{ item }}</text>
        </view>
        <image
          @click="isShowSelMem = true"
          class="open_icon"
          src="../../static/staff/renyuan_ic_open.png"
          mode=""
        ></image>
      </view>
      <view class="btn" @click="onSubmit">确认(00/20)</view>
    </view> -->
    <!--  -->
    <u-popup
      :show="isShowSelMem"
      :round="12"
      mode="bottom"
      @close="isShowSelMem = false"
    >
      <view class="modal">
        <view class="modal_header">
          <text class="status">已选择：xx人</text>
          <text class="btn" @click="isShowSelMem = false">确认</text>
        </view>
        <view class="modal_mem_list">
          <view class="line">
            <image
              src="../../static/logo@2x.png"
              class="avatar"
              mode=""
            ></image>
            <view class="content">
              <view class="info">
                <text class="name">name</text>
              </view>
              <view class="depart">xx科室</view>
            </view>
            <view class="btn">移除</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { findHiddenAreaMemberList } from '@/api'
export default {
   data() {
      return {
         memberList: [],
         selList: [],
  data() {
    return {
      memberList: [],
      selList: [],
      param: {},

         isShowSelMem: false
      }
   },
   methods: {
      onSubmit() {
         uni.navigateBack()
      }
   }
      isShowSelMem: false
    }
  },
  onLoad() {
    this.initData()
  },
  methods: {
    onSubmit() {
      uni.navigateBack()
    },
    changeMem(e) {
         console.log( e.detail.value[0]);
         const id = Number(e.detail.value[0])
         const item = this.memberList.find(i => i.id === id)
         console.log('item', item);
         uni.navigateTo({
            url: `/pages/staff/snapshot?id=${item.id}&name=${item.name}`
         })
    },
    initData() {
      const { param } = this
      findHiddenAreaMemberList({
        name: param.name
      }).then(res => {
        this.memberList = res.data || []
      })
    }
  }
};
</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: #279baa;
      }
   }
   .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;
         }
      }
   }
  padding: 40rpx 30rpx;
  .modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .status {
      font-weight: 600;
    }
    .btn {
      color: #279baa;
    }
  }
  .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: absolute;
   bottom: 0;
   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: #4d98a7;
         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: #279baa;
      border-radius: 44rpx;
      color: #fff;
      text-align: center;
      margin-top: 22rpx;
   }
  position: absolute;
  bottom: 0;
  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: #4d98a7;
      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: #279baa;
    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;
            }
         }
      }
   }
   .empty {
      width: 100%;
      height: 280rpx;
   }
  .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;
        }
      }
    }
  }
  .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;
   }
  height: 72rpx;
  background: #f7f7f7;
  border-radius: 4rpx;
  padding-left: 16rpx;
  .search {
    width: 28rpx;
  }
  input {
    flex: 1;
    font-size: 28rpx;
    color: #333333;
  }
}
</style>