129 lines
2.9 KiB
Vue
129 lines
2.9 KiB
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>
|