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

<!-- 屏蔽企业 -->
<template>
  <view>
    <!-- 搜索条 -->
    <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="getData($event.value)"
          @clear="query.content = ''"
        >
        </uni-search-bar>
        <button class="search-btn" @click.stop="getData" :loading="loading">搜索</button>
      </view>
    </view>
    <uni-popup ref="popup" type="bottom" background-color="#fff">
			<uni-card v-for="(item, index) in list" :key="index" :is-shadow="true" :border='false' shadow="0px 0px 3px 1px rgba(0,0,0,0.1)">
				<view class="d-flex align-center">
          <view @click="preview(item.url)"  style="flex: 1;">
            <view class="font-size-14" style="font-weight: bold; margin: 15rpx 0; color: #777;">{{ item.title }}</view>
          </view>
        </view>
			</uni-card>
    </uni-popup>
  </view>
</template>

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

const popup = ref()
const loading = ref(false)
const name = ref('')
const list = ref()
const getData = async () => {
  try {
    loading.value = true
    const res = await getBlockEnterpriseList()
    list.value = res?.data || []
    popup.value.open()
  } 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: #00897B;
  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 #00897B;
  padding-right: 20px;
  flex: none;
}
</style>