yizhizan-h5/package/my/pingbi.vue

<template>
  <view class="page-box">
    <navBar title="屏蔽公司" color="#000" />
    <view class="margin-lr-xl">
      <view class="margin-top">
        <view class="text-bold" style="font-size: 44upx; color: #333333">屏蔽公司</view>
        <view class="text-sm margin-top-sm" style="color: #999999"
          >添加屏蔽公司后，你和这些公司Boss，都不会被相互推荐 你的查看行为也不会告知对方
        </view>
      </view>

      <view class="box margin-top">
        <view class="margin-left-xs">
          <image src="../static/qiye.png" style="width: 36upx; height: 34upx"></image>
        </view>
        <view class="text-left" style="width: 70%">
          <u-input
            v-model="value"
            @input="change()"
            type="text"
            placeholder="输入添加屏蔽公司名称"
            inputAlign="text-align:left"
          />
        </view>
        <view class="add" @click="addpingbi()">添加</view>
      </view>
      <view class="searchList" v-if="show">
        <view
          class="searchList-item"
          @click="selectcompany(item.companyId, item.companyName)"
          v-for="(item, index) in companyList"
          :key
        >
          {{ item.companyName }}
        </view>
      </view>

      <view class="margin-top-xl">
        <view
          class="flex align-center justify-between"
          style="margin-bottom: 20rpx"
          v-for="(item, index) in pingbiList"
          :key="index"
        >
          <view style="color: #000000">{{
            item.company ? item.company.companyName : ""
          }}</view>
          <view class="btn" @click="jiebang(item.shieldCompanyId)">解除屏蔽</view>
        </view>
      </view>
      <empty v-if="pingbiList.length == 0" />
    </view>
  </view>
</template>

<script>
import empty from "@/components/empty.vue";
import navBar from "@/components/nav-bar/index.vue";

export default {
  components: {
    empty,
    navBar,
  },
  data() {
    return {
      show: false,
      value: "",
      page: 1,
      limit: 10,
      userId: "",
      companyList: [],
      companyId: "",
      pingbiList: [],
      cont: "",
    };
  },
  onLoad() {
    this.getDataList();
  },
  onPullDownRefresh() {
    this.page = 1;
    this.getDataList();
  },
  onReachBottom() {
    if (this.page == this.cont) {
      uni.showToast({
        title: "已经到底了",
        icon: "none",
      });
    } else {
      this.page += 1;
      this.getDataList();
    }
  },
  methods: {
    //解除屏蔽
    jiebang(shieldCompanyId) {
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确认解除该公司的屏蔽?",
        complete(iet) {
          if (iet.confirm) {
            _this.$Request
              .post("/app/shieldCompany/deleteShieldCompany", {
                shieldCompanyId: shieldCompanyId,
              })
              .then((res) => {
                if (res.code == 0) {
                  uni.showToast({
                    title: "解除成功",
                  });
                  _this.getDataList();
                } else {
                  uni.showToast({
                    title: res.msg,
                    icon: "none",
                  });
                }
              });
          }
        },
      });
    },
    //屏蔽公司
    addpingbi() {
      if (this.companyId == "") {
        uni.showToast({
          title: "请选择公司",
          icon: "none",
        });
        return;
      }
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确认屏蔽该公司吗？",
        complete(iet) {
          console.log(iet);
          if (iet.confirm) {
            _this.$Request
              .postJson("/app/shieldCompany/insertShieldCompany", {
                companyId: _this.companyId,
                shieldType: 1,
                userId: uni.getStorageSync("userId"),
              })
              .then((res) => {
                if (res.code == 0) {
                  uni.showToast({
                    title: "屏蔽成功",
                  });
                  _this.companyId = "";
                  _this.value = "";
                  _this.show = false;
                  _this.getDataList();
                } else {
                  uni.showToast({
                    title: res.msg,
                    icon: "none",
                  });
                  _this.companyId = "";
                  _this.value = "";
                  _this.show = false;
                  _this.getDataList();
                }
              });
          }
        },
      });
    },
    //选择要屏蔽的公司
    selectcompany(companyId, companyName) {
      this.value = companyName;
      this.companyId = companyId;
      this.show = false;
    },
    //搜索公司
    change(e) {
      if (this.value == "") {
        this.show = false;
        return;
      }
      let data = {
        page: 1,
        limit: 999,
        status: 2,
        companyName: this.value,
      };
      this.$Request.get("/app/company/selectCompanyList", data).then((res) => {
        if (res.code == 0) {
          this.companyList = res.data.records;
          if (this.companyList.length > 0) {
            this.show = true;
          }
        }
      });
    },
    //查询屏蔽列表
    getDataList() {
      let data = {
        page: this.page,
        limit: this.limit,
        userId: uni.getStorageSync("userId"),
      };
      this.$Request.get("/app/shieldCompany/selectShieldList", data).then((res) => {
        uni.stopPullDownRefresh();
        if (res.code == 0) {
          this.cont = res.data.totalPage;
          if (this.page == 1) {
            this.pingbiList = res.data.list;
          } else {
            this.pingbiList = [...this.pingbiList, ...res.data.list];
          }
        }
      });
    },
  },
};
</script>

<style lang="less">
.page-box {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;

}
.margin-lr-xl{
	flex: 1;
	overflow: hidden;
	overflow-y: auto;
	// width: 100%;
}
page {
  background: #ffffff;
}
.searchList {
  width: 100%;
  background-color: #f7f7f7;
  padding-left: 10rpx;
  padding-right: 10rpx;
}
.searchList-item {
  padding: 20rpx;
}
.box {
  background: #f7f7f7;
  padding: 10upx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.add {
  background: #016bf6;
  color: #ffffff;
  padding: 15upx 30upx;
  border-radius: 8upx;
}

.btn {
  background: rgba(0, 184, 143, 0.1);
  border-radius: 31upx;
  color: #016bf6;
  padding: 10rpx 27rpx;
}
</style>