修改背景颜色

pagesB/jobFair/enterprisesClassification.vue

@@ -1,11 +1,11 @@
 <!-- 招聘会/企业详情 -->
 <template>
-  <view class="box">
+  <view class="box" :style="`background-color: ${backgroundColor}`">
     <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
       <view>
         <!-- 轮播图 -->
-        <SwiperAd v-if="swiperAdList.length" :list="swiperAdList" imgUrlKey="img" margin="0" borderRadius="0" :strType="false" @click="handleToDetails"></SwiperAd>
-        <view class="stick">
+        <SwiperAd v-if="swiperAdList.length" :list="swiperAdList" margin="0" borderRadius="0" @click="handleToDetails"></SwiperAd>
+        <view class="stick" :style="`background-color: ${backgroundColor}`">
           <!-- tab页签 -->
           <scroll-view v-if="tabList?.length" scroll-x="true" class="scroll-container">
             <view
@@ -46,13 +46,13 @@
                 </view>
               </view>
             </view>
-            <view class="jobCount">{{ val.jobCount }}个在线职位招聘中</view>
+            <view class="jobCount">{{ val.jobCount }}个在线职位招聘中 >>></view>
           </uni-card>
-          <uni-load-more :status="more" />
+          <uni-load-more :status="more" :color="textColor" />
         </view>
         <view v-else class="nodata-img-parent">
           <!-- <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image> -->
-          <uni-load-more class="ss-m-t-50" status="noMore" :content-text="{'contentnomore': '暂无数据，请切换类型查看~'}" />
+          <uni-load-more class="ss-m-t-50" status="noMore" :color="textColor" :content-text="{'contentnomore': '暂无数据，请切换类型查看~'}" />
         </view>
       </view>
     </scroll-view>
@@ -61,10 +61,9 @@
 
 <script setup>
 import { onLoad } from '@dcloudio/uni-app'
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
 import { dealDictArrayData } from '@/utils/position'
 import { getJobFairEnterprisePage, getJobFair } from '@/api/jobFair'
-import { getWebContent } from '@/api/common'
 import SwiperAd from '@/components/SwiperAd'
 import { formatName } from '@/utils/getText'
 
@@ -86,24 +85,30 @@ onLoad(async (options) => {
 	}
 })
 
-// 获取轮播图
-const swiperAdList = ref([])
-const getSystemWebContent = async () => {
-  const { data } = await getWebContent()
-  swiperAdList.value = data?.appHomeCarousel || []
-}
-getSystemWebContent()
-
 // 招聘会详情
 const tabIndex = ref(-1)
 const tabList = ref([])
+const swiperAdList = ref([])
+const backgroundColor = ref('#fff')
+const textColor = computed(() => {
+  return backgroundColor.value === '#fff' ? '#777' : '#fff'
+})
 const getJobFairDetail = async () => {
   if (!query.jobFairId) return
   const { data } = await getJobFair(query.jobFairId)
+  // tab
   if (data?.tag?.length) {
     tabList.value = data.tag
     tabIndex.value = 0
   }
+  // 轮播图
+  if (data?.headImg?.length) {
+    swiperAdList.value = data.headImg
+  }
+  // 背景色
+  if (data?.backgroundColour) {
+    backgroundColor.value = data.backgroundColour || '#fff'
+  }
   getData()
 }
 getJobFairDetail()
@@ -153,9 +158,10 @@ const loadingMore = () => {
 }
 
 const toDetail = (item) =>{
-  // if (!item?.id || !(item?.jobFairId ?? query.jobFairId)) return
-  // const url = `/pagesB/jobFair/positions?jobFairId=${query.jobFairId || item.jobFairId}&enterpriseId=${item.id}&entName=${item.anotherName}`
-  // uni.navigateTo({ url })
+  if (!item?.id || !(item?.jobFairId ?? query.jobFairId)) return
+  let url = `/pagesB/jobFair/positionClassification?jobFairId=${query.jobFairId || item.jobFairId}&enterpriseId=${item.id}&entName=${item.anotherName}`
+  url = url + `&backgroundColor=${backgroundColor.value}`
+  uni.navigateTo({ url })
 }
 // const goBack = () => {
 // 	uni.navigateTo({
@@ -170,7 +176,6 @@ const toDetail = (item) =>{
   z-index: 1;
   position: sticky;
   top: 0;
-  background-color: #5985dc;
 }
 .box {
   height: 100vh;
@@ -179,7 +184,6 @@ const toDetail = (item) =>{
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  background-color: #5985dc;
 }
 .listDataBox {
   // padding: 1px 0 120rpx;
@@ -198,8 +202,9 @@ const toDetail = (item) =>{
   .jobCount {
     height: 40px;
     line-height: 40px;
-    color: #5985dc;
+    color: #00897B;
     text-align: center;
+    // padding: 0 50rpx;
     font-size: 15px;
     // background: linear-gradient(to right, #12ebb0, #7ec04c);
     background: #F5F5F5;
@@ -212,9 +217,9 @@ const toDetail = (item) =>{
   box-sizing: border-box;
 }
 
-:deep(.uni-load-more__text) {
-  color: #fff !important;
-}
+// :deep(.uni-load-more__text) {
+//   color: #fff !important;
+// }
 
 :deep(.uni-card) {
   padding: 0 !important;

pagesB/jobFair/positionClassification.vue

@@ -1,13 +1,13 @@
 <!-- 招聘会/企业详情 -->
 <template>
-  <view class="box">
+  <view class="box" :style="`background-color: ${backgroundColor}`">
     <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
       <view>
         <!-- 轮播图 -->
-        <SwiperAd v-if="swiperAdList.length" :list="swiperAdList" imgUrlKey="img" margin="0" borderRadius="0" :strType="false" @click="handleToDetails"></SwiperAd>
-        <view class="stick">
+        <SwiperAd v-if="swiperAdList.length" :list="swiperAdList" margin="0" borderRadius="0" @click="handleToDetails"></SwiperAd>
+        <view class="stick" :style="`background-color: ${backgroundColor}`">
           <!-- tab页签 -->
-          <scroll-view scroll-x="true" class="scroll-container">
+          <scroll-view v-if="tabList?.length" scroll-x="true" class="scroll-container">
             <view
               class="scroll-item"
               :style="`margin-left: ${index ? '24px' : ''};`"
@@ -21,6 +21,7 @@
               </view>
             </view>
           </scroll-view>
+          <view v-if="entName" class="enterpriseName" :style="`color: ${entNameColor}`">{{ entName }}</view>
         </view>
         <view v-if="listData?.length" class="listDataBox">
           <PositionList
@@ -28,13 +29,13 @@
             :noMore="false"
             :jobFairId="query.jobFairId"
             :showUpdateTime="false"
-            noDataTextColor="#fff"
+            :noDataTextColor="textColor"
           ></PositionList>
-          <uni-load-more :status="more" />
+          <uni-load-more :status="more" :color="textColor" />
         </view>
         <view v-else class="nodata-img-parent">
           <!-- <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image> -->
-          <uni-load-more class="ss-m-t-50" status="noMore" :content-text="{'contentnomore': '暂无数据，请切换类型查看~'}" />
+          <uni-load-more class="ss-m-t-50" :color="textColor" status="noMore" :content-text="{'contentnomore': '暂无数据，请切换类型查看~'}" />
         </view>
       </view>
     </scroll-view>
@@ -43,11 +44,10 @@
 
 <script setup>
 import { onLoad } from '@dcloudio/uni-app'
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
 import { dealDictObjData } from '@/utils/position'
 import { getJobFairEntJobPage, getJobFair } from '@/api/jobFair'
 import PositionList from '@/components/PositionList'
-import { getWebContent } from '@/api/common'
 import SwiperAd from '@/components/SwiperAd'
 
 const more = ref('more')
@@ -64,32 +64,42 @@ onLoad(async (options) => {
   entName.value = options.entName
   if (options?.jobFairId) {
     query.jobFairId = options.jobFairId
-    query.enterpriseId = options.enterpriseId
-    getJobFairDetail()
-	}
+    if (options.enterpriseId) query.enterpriseId = options.enterpriseId
+    if (query.enterpriseId) getData()
+    else getJobFairDetail()
+  }
+  if (options.backgroundColor) backgroundColor.value = options.backgroundColor
 })
 
-// 获取轮播图
-const swiperAdList = ref([])
-const getSystemWebContent = async () => {
-  const { data } = await getWebContent()
-  swiperAdList.value = data?.appHomeCarousel || []
-}
-getSystemWebContent()
-
 // 招聘会详情
 const tabIndex = ref(-1)
 const tabList = ref([])
+const swiperAdList = ref([])
+const backgroundColor = ref('#fff')
+const textColor = computed(() => {
+  return backgroundColor.value === '#fff' ? '#777' : '#fff'
+})
+const entNameColor = computed(() => {
+  return backgroundColor.value === '#fff' ? '#00897B' : '#fff'
+})
 const getJobFairDetail = async () => {
   if (!query.jobFairId) return
   const { data } = await getJobFair(query.jobFairId)
+  // tab
   if (data?.tag?.length) {
     tabList.value = data.tag
     tabIndex.value = 0
   }
+  // 轮播图
+  if (data?.headImg?.length) {
+    swiperAdList.value = data.headImg
+  }
+  // 背景色
+  if (data?.backgroundColour) {
+    backgroundColor.value = data.backgroundColour || '#fff'
+  }
   getData()
 }
-getJobFairDetail()
 
 // 切换类型
 const handClickTab = (index) => {
@@ -155,7 +165,6 @@ const loadingMore = () => {
   z-index: 1;
   position: sticky;
   top: 0;
-  background-color: #7ec04c;
 }
 .box {
   height: 100vh;
@@ -164,7 +173,6 @@ const loadingMore = () => {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  background-color: #7ec04c;
 }
 .listDataBox {
   // padding: 1px 0 120rpx;
@@ -178,9 +186,9 @@ const loadingMore = () => {
   box-sizing: border-box;
 }
 
-:deep(.uni-load-more__text) {
-  color: #fff !important;
-}
+// :deep(.uni-load-more__text) {
+//   color: #fff !important;
+// }
 
 :deep(.uni-card) {
   padding: 0 !important;
@@ -210,16 +218,25 @@ const loadingMore = () => {
   }
 }
 
-.titleBox {
-  text-align: center;
-  padding: 0 20rpx 15px;
-  .title {
-    font-size: 20px;
-    font-weight: 600;
-    margin-bottom: 12px;
-  }
-  .entName {
-    color: #fff;
+.enterpriseName {
+  position: relative;
+  padding: 18px 30rpx;
+  padding-left: 39px;
+  height: 24px;
+  line-height: 24px;
+  color: #fff;
+  font-size: 18px;
+  font-weight: bold;
+  &::before {
+    display: block;
+    content: '';
+    width: 4px;
+    height: 24px;
+    background-color: #fff;
+    position: absolute;
+    top: 20px;
+    left: 25px;
+    border-radius: 2px;
   }
 }
 </style>