heshanApp/pages_im/components/ChooseIndexFooter/index.vue

<template>
  <view class="member_checked_desc">
    <view @click="showSelected = true" class="left_info">
      <!-- <view class="select_num">
        <text class="text">{{ `已选择(${choosedData.length})` }}</text>
        <u-icon name="arrow-up" size="14" color="#007aff" />
      </view>
      <view class="select_list">{{ selectedStr }}</view> -->
      <view class="avatar_view" v-for="(item, index) in choosedData" :key="index">
           <my-avatar :src="item.faceURL" size="42">
			    <image v-if="getRole(item) == 1" mode="aspectFit" class="taoj" src="/static/svg/doctor.svg"></image>
			    <image v-if="getRole(item) == 2" mode="aspectFit" class="taoj" src="/static/svg/guanjia.svg"></image>
		  </my-avatar>
		   
      </view>
    </view>
    <view class="">
      <u-button class="save_btn" :loading="comfirmLoading" @click="clickComfirm" :disabled="choosedData.length === 0 && !canConfirmEmpty" 
        :text="isRemove
          ? '移除'
          : `确定(${choosedData.length}${maxLength > 0 ? `/${maxLength}` : ``
          })`
          " />
      <u-popup round="24" :show="showSelected" mode="bottom" @close="close">
        <view class="selected_container">
          <view class="top_desc">
            <text>{{ `已选择(${choosedData.length})` }}</text>
            <text @click="close" class="comfirm_text">关闭</text>
          </view>
		  
          <u-list class="selected_list">
            <u-list-item v-for="item in choosedData" :key="item.userID || item.groupID">
                <selected-member @removeItem="removeItem(item)" :source="item" />
            </u-list-item>
          </u-list>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import SelectedMember from "./SelectedMember.vue";
import MyAvatar from "../MyAvatar/index.vue";
export default {
  name: "ChooseIndexFooter",
  components: {
    SelectedMember,
    MyAvatar
  },
  props: {
    isRemove: Boolean,
    choosedData: Array,
    comfirmLoading: Boolean,
    maxLength: Number,
    canConfirmEmpty: {
        type: Boolean,
        default: false
    }
  },
  data() {
    return {
      showSelected: false,
      showConfirmModal: false,
    };
  },
  computed: {
    selectedStr() {
      return this.choosedData
        .map((item) => item.nickname || item.showName || item.groupName)
        .join("、");
    },
  },

  methods: {
    close() {
		  this.showSelected = false;
		},
		removeItem(item) {
		  this.$emit("removeItem", item);
		},
		clickComfirm() {
		  this.$emit("confirm");
		},
		getRole(item) {
			let userType = 0;
			let userId = item.userID;
			console.log("qxj item",item);
			if (userId != undefined && (userId != "" || userId.length > 0)) {
				if (userId.indexOf('U') !== -1) {
					userType = 0;
				}
				if (userId.indexOf('D') !== -1) {
					userType = 1;
				}
				if (userId.indexOf('C') !== -1) {
					userType = 2;
				}
			}
			return userType;
		}
  },
};
</script>

<style lang="scss" scoped>
.member_checked_desc {
  @include btwBox();
  background-color: #fff;
  align-items: center;
  padding: 23rpx 24rpx 23rpx;
  height: 70px;
  max-height: 70px;
  box-shadow: 0px -1px 4px 1px rgba(0, 0, 0, 0.04);
  border-top: 1rpx solid #E5E5E5;
  .save_btn{
		height: 40px !important;
		line-height: 40px !important;
		padding: 0 24rpx;
		border-radius: 20rpx;
		background-color: #FF5030 !important;
		color: #fff;
  }
  .left_info {
    // @include colBox(false);
    display: flex;
    item-align: center;
    .avatar_view {
         margin-right: 12rpx;
    }
    .select_num {
      display: flex;
      align-items: center;
      color: $uni-color-primary;
    }

    .select_list {
	  font-size: 24rpx;
	  color: #8e9ab0;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  max-width: 50vw;
    }

    .text {
      font-size: 30rpx;
      margin-right: 24rpx;
    }
  }

  .u-button {
    background-color: #0089ff;
    height: 40px;
    margin: 0;
  }
}

.selected_container {
  padding: 24rpx;
  .top_desc {
    @include btwBox();
    margin-bottom: 20rpx;
    .comfirm_text {
      color: #FF5030;
      margin-right: 24rpx;
    }
  }

  .selected_list {
    height: 60vh !important;
    overflow-y: auto;
  }	
  
}

.taoj {
	  position: absolute;
	  left: 0px;
	  top: 0px;
	  width: 100%;
	  height: 100%;
}
</style>