Merge remote-tracking branch 'origin/master'

k94314517

2024-05-10 0df3c99a23b6774c39abf16af51cf20bbfefc8a5

 h5/pages/staff/memberSel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,219 @@
<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>
</template>

<script>
export default {
   data() {
      return {
         memberList: [],
         selList: [],

         isShowSelMem: false
      }
   },
   methods: {
      onSubmit() {
         uni.navigateBack()
      }
   }
};
</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;
         }
      }
   }
}
.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;
   }
}
.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;
   }
}
.search_inp {
   height: 72rpx;
   background: #f7f7f7;
   border-radius: 4rpx;
   padding-left: 16rpx;
   .search{
      width: 28rpx;
   }
   input {
      flex: 1;
      font-size: 28rpx;
      color: #333333;
   }
}
</style>