menduner-uniapp/pagesA/vip/blockEnt/index.vue

<!-- 屏蔽企业 -->
<template>
  <view style="height: 100%; overflow: auto; padding-bottom: 50px;">
    <!-- 搜索条 -->
    <view class="white-bgc stick ss-p-t-10">
      <view style="position: relative;">
        <uni-search-bar
          v-model="name"
          placeholder="请输入公司关键字"
          cancelButton="none"
          :focus="false"
          bgColor="#fff"
          @confirm="getEntList($event.value)"
          @clear="query.content = ''"
        >
        </uni-search-bar>
        <button class="search-btn" @click.stop="getEntList" :loading="loading">搜索</button>
      </view>
    </view>
    <!-- 已屏蔽的企业 -->
    <view class="tags">
      <view style="color: #777; width: 100%; margin-bottom: 15px;">已屏蔽的企业：</view>
      <view
        v-for="k in dataList" :key="k.id"
        class="tag"
        style="color: #00B760; background-color: #e2f0ef;;"
        @tap="handleDel(k)"
      >
        {{ k.name }}
        <uni-icons type="clear" size="16" color="#00B760"></uni-icons>
      </view>
    </view>
     
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <view style="padding: 30rpx;">
        <view class="entListBox">
          <view style="color: #777; margin: 20rpx 0 30rpx 40rpx; ">请选择要屏蔽的企业</view>
          <view v-if="!entList?.length" style="color: #777; text-align: center; margin-top: 20vh;">未查询到相关内容 . . .</view>
          <uni-card v-else v-for="item in entList" :key="item.key" @click="joinBlock(item)" :is-shadow="true" :border='false' shadow="0px 0px 3px 1px rgba(0,0,0,0.1)">
            <view>{{ item.value }}</view>
          </uni-card>
        </view>
      </view>
    </uni-popup>
    <!-- 确认框 -->
    <uni-popup ref="confirm" type="dialog">
      <uni-popup-dialog
        type="warn"
        cancelText="取消"
        confirmText="确认" 
        title="系统提示"
        :content="dialogContent"
        @confirm="handleConfirm"
        @close="handleClose"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { 
  getBlockEnterpriseList,
  handleBlockEnterprise,
  handleUnBlockEnterprise,
} from '@/api/vip'
import { enterpriseSearchByName } from '@/api/resume.js'

const dataList = ref([])
const getData = async () => {
  try {
    const res = await getBlockEnterpriseList()
    dataList.value = res?.data?.list || []
  } catch (error) {
    uni.showToast({
      title: '查询数据失败，请重试',
      icon: 'none'
    })
  }
}
getData()

let confirm = ref()
const handleConfirm = async () => {
  if (isDel) {
    await handleUnBlockEnterprise(enterpriseId)
    uni.showToast({ title: '取消屏蔽成功！', icon: 'none' })
  } else {
    await handleBlockEnterprise({ enterpriseId })
    uni.showToast({ title: '屏蔽企业成功！', icon: 'none' })
  }
  popup.value.close()
  dialogContent.value = ''
  enterpriseId = ''
  getData()
}
const handleClose = () => {
  dialogContent.value = ''
  enterpriseId = ''
  confirm.value.close()
}

let enterpriseId = ''
let isDel = false
const dialogContent = ref('')

// 屏蔽
const joinBlock = (item) => {
  isDel = false
  enterpriseId = item.key
  dialogContent.value = item?.value ? `是否确定屏蔽《${item.value}》?` : '是否确定屏蔽'
  confirm.value.open()

}
// 取消屏蔽
const handleDel = (item) => {
  isDel = true
  enterpriseId = item.id
  dialogContent.value = (item?.name || item?.anotherName) ? `是否取消屏蔽《${item.name || item.anotherName}》?` : '是否取消屏蔽'
  confirm.value.open()
}

// 搜索企业
const popup = ref()
const loading = ref(false)
const name = ref('')
const entList = ref([])
// 获取企业列表
const getEntList = async () => {
  if (!name.value || name.value === '公司' || name.value === '有限公司' || name.value === '酒店') {
    uni.showToast({ title: '请输入公司名称关键字查询', icon: 'none' })
    return
  }
  if (name.value.length < 2) {
    uni.showToast({ title: '输入内容过少，请输入更多关键字查询', icon: 'none' })
    return
  }
  try {
    loading.value = true
    const res = await enterpriseSearchByName({ name: name.value })
    entList.value = res?.data || []
    popup.value.open()
    loading.value = false
  } catch (error) {
    uni.showToast({
      title: '搜索失败',
      icon: 'none'
    })
    loading.value = false
  }
}

</script>
<style lang="scss" scoped>
.stick {
  z-index: 1;
  position: sticky;
  top: 0;
}
.search-btn {
  position: absolute;
  right: 11px;
  top: 10px;
  width: 110px;
  height: 40px;
  font-size: 16px;
  background-color: #00B760;
  color: #fff;
  border-radius: 0 5px 5px 0;
  z-index: 9;
}
:deep(.uni-searchbar__box) {
  width: calc(100% - 105px);
  height: 40px !important;
  border: 1px solid #00B760;
  padding-right: 20px;
  flex: none;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 30rpx;
  .tag {
    margin: 0 15rpx 12rpx 0;
    border: 2rpx 15rpx #00B760;
    color: #00B760;
    white-space: nowrap;
    padding: 4rpx 10rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
  }
}
.entListBox {
  height: 70vh;
  overflow: auto;
}
</style>