ks-app-employment-service/packageA/pages/choiceness/choiceness.vue

<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">精选企业</view>

    <!-- 格子布局 -->
    <view class="grid-container">
      <view
        class="grid-item"
        :style="{ backgroundColor: item.backgroudColor }"
        v-for="item in list"
        :key="item.companyCardId"
      >
        <text class="title">{{ item.name }}</text>
        <view class="status" v-if="item.isCollection" @click="delCollectionCard(item)">已关注 ✓</view>
        <view class="status" v-else @click="CollectionCard(item)">特别关注</view>
      </view>

      <!--   <view class="grid-item green">
        <text class="title">银行招聘</text>
        <view class="status">特别关注</view>
      </view>

      <view class="grid-item orange">
        <text class="title">世界500强</text>
        <view class="status">特别关注</view>
      </view>

      <view class="grid-item red">
        <text class="title">中国500强</text>
        <view class="status">特别关注</view>
      </view> -->
    </view>
  </view>
</template>

<script setup>
import dictLabel from '@/components/dict-Label/dict-Label.vue';
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import useUserStore from '@/stores/useUserStore';
const { $api, navTo } = inject('globalFunction');
const list = ref([]);

onLoad(() => {
  getPremiumList();
});

function CollectionCard(item) {
  $api.createRequest(`/app/company/card/collection/${item.companyCardId}`, {}, 'PUT').then((resData) => {
    getPremiumList();
    $api.msg('关注成功');
  });
}

function delCollectionCard(item) {
  $api.createRequest(`/app/company/card/collection/${item.companyCardId}`, {}, 'DELETE').then((resData) => {
    getPremiumList();
    $api.msg('取消关注');
  });
}

function getPremiumList() {
  $api.createRequest('/app/company/card').then((resData) => {
    const { rows, total } = resData;
    list.value = rows;
  });
}
</script>

<style lang="stylus" scoped>
/* 页面整体样式 */
.container
  background-color #edf4ff
  height 100%
  display flex
  flex-direction column
  padding 20rpx

/* 搜索栏样式 */
.search-bar
  font-size 32rpx
  font-weight bold
  color #333
  margin-bottom 20rpx

/* 格子布局样式 */
.grid-container
  display flex
  flex-wrap wrap
  justify-content space-between
  gap 20rpx

.grid-item
  width 48%
  height 200rpx
  border-radius 20rpx
  display flex
  flex-direction column
  justify-content center
  align-items center
  color #fff
  font-size 28rpx
  font-weight bold
  position relative

  .status
    position absolute
    bottom 20rpx
    font-size 24rpx
    background-color rgba(255, 255, 255, 0.9)
    color #333
    padding 5rpx 15rpx
    border-radius 15rpx

/* 每种格子对应的颜色 */
.blue
  background-color #3b82f6

.green
  background-color #22c55e

.orange
  background-color #f59e0b

.red
  background-color #ef4444
</style>