Browse Source

Merge branch 'master' of https://git.citupro.com/zhengnaiwen_citu/menduner-uniapp

zhengnaiwen_citu 8 months ago
parent
commit
0e2df4bb2e
3 changed files with 109 additions and 96 deletions
  1. 30 29
      components/FilterList/index.vue
  2. 69 63
      components/PositionList/index.vue
  3. 10 4
      pages/index/position.vue

+ 30 - 29
components/FilterList/index.vue

@@ -1,30 +1,31 @@
 <template>
   <view class="labelColor itemBox" style="height: 45px;">
-    <view class="item" v-for="item in filterList" :key="item[props.idValue]">
+    <view class="item" v-for="(item, index) in filterList" :key="item[props.idValue]">
+      <!-- v-slot:default="{ data, error }" -->
       <uni-data-picker
-        ref="picker"
-        v-slot:default="{ data, error }"
-        :localdata="item.array" 
-        :clear-icon="true"
+        ref="pickerRef"
+        v-model="item.value"
+        v-slot:default="{ error }"
+        :localdata="item.array"
         :popup-title="'请选择' + item[labelValue]" 
         :map="item.map || { text: 'label', value: 'value' }"
-         @change="e => handleClick(e, item)"
-         @nodeclick="handleChange"
+        @change="e => handleClick(e, item)"
       >
         <view v-if="error" class="error">
           <text>{{error}}</text>
         </view>
-        <view v-else-if="data.length" class="selected">
-          <view class="selected-item d-flex align-center">
-            <view class="ellipsis" style="max-width: 100rpx;">{{ data.length > 1 ? data[data.length - 1].text : data[0].text }}</view>
-            <uni-icons type="closeempty" size="18" @click="data = [], handleClear"></uni-icons>
+        <view v-else class="d-flex">
+          <view
+            class="selectText"
+            :style="`color: ${item.value? '#008978' : ''}`"
+          >
+            {{ item[labelValue] }}
+            <!-- {{ item.text || item[labelValue] }} -->
           </view>
-        </view>
-        <view v-else>
-          {{ item[labelValue] }}
-          <uni-icons type="icon-arrow-sortdown-smal" custom-prefix="iconfont" color="#999"/>
+          <uni-icons v-if="!item.value" type="icon-arrow-sortdown-smal" custom-prefix="iconfont" color="#999"/>
         </view>
       </uni-data-picker>
+      <uni-icons v-if="item.value" class="marginT2" type="closeempty" size="16" color="#999" @click="handleClear(item, index)"></uni-icons>
     </view>
   </view>
 </template>
@@ -44,19 +45,22 @@ const props = defineProps({
   lazy: { type: Boolean, default: false },
 })
 
-const picker = ref()
+const pickerRef = ref()
 const handleClick = (e, item) => {
-  const obj = e.detail.value
-  item.value = obj.length && obj.length === 1 ? obj[0].value : obj[obj.length - 1].value
+  const obj = e.detail.value?.length ? e.detail.value[e.detail.value.length-1] : {}
+  //
+  item.value = obj.value
+  item.text = obj.text || ''
   emit('change', item.key, item.value)
 }
 
-const handleClear = () => {
-  console.log(picker.value)
+const handleClear = (item, index) => {
+  item.value = null
+  item.text = null
+  // pickerRef.value[index]?.clear()
+  emit('change', item.key, item.value)
 }
 
-const handleChange = () => {}
-
 // 获取字典数据
 const getData = (e) => {
   getDict(e.dictType, e.map ? {} : null, e.map ? e.dictType : 'dict').then(({ data }) => {
@@ -70,10 +74,12 @@ const setItemSelectData = () => {
   })
 }
 
+// clone list
 const filterList = ref([])
 watch(() => props.list, 
   (newVal) => {
     filterList.value = newVal ? [...newVal] : []
+    filterList.value.forEach(e => e.value = null)
     if (filterList.value.length && !props.lazy) setItemSelectData()
   },
   { immediate: true }
@@ -83,19 +89,14 @@ watch(() => props.list,
 
 <style scoped lang="scss">
 .labelColor { color: #5c5c5c; }
-.marginR5 { margin-right: 5px; }
+.marginT2 { margin-top: 2px; }
 .itemBox {
-  width: 100%;
   display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
+  justify-content: space-between;
   .item {
-    width: 20%;
     display: flex;
     align-items: center;
     font-size: 14px;
-    flex-wrap: wrap;
-    // margin: 0 3px;
   }
 }
 .popup {

+ 69 - 63
components/PositionList/index.vue

@@ -1,72 +1,78 @@
 <template>
-  <view v-if="list.length > 0">
-    <view v-for="(item, index) in list" :key="index">
-      <!-- 职位信息 -->
-      <view class="list-shape" @click="toDetail(1, item)">
-        <!-- 职位 -->
-        <view class="titleBox my-5">
-          <view style="display: flex;align-items: center;">
-            <view v-if="item.job?.hire" class="iconfont icon-a-1_zhaopin ss-m-r-10" style="color: #e03506; font-size: 25px;"></view>
-            <!-- <view v-if="item.job.name.indexOf('style')" v-html="item.job.name" class="job-name" style=""></view> -->
-            <rich-text v-if="item.job?.name?.indexOf('style')" class="job-name" :nodes="item.job.name"></rich-text>
-            <view v-else class="job-name" style="">{{item.job?.name}}</view>
+  <view>
+    <view v-if="list.length > 0">
+      <view v-for="(item, index) in list" :key="index">
+        <!-- 职位信息 -->
+        <view class="list-shape" @click="toDetail(1, item)">
+          <!-- 职位 -->
+          <view class="titleBox my-5">
+            <view style="display: flex;align-items: center;">
+              <view v-if="item.job?.hire" class="iconfont icon-a-1_zhaopin ss-m-r-10" style="color: #e03506; font-size: 25px;"></view>
+              <!-- <view v-if="item.job.name.indexOf('style')" v-html="item.job.name" class="job-name" style=""></view> -->
+              <rich-text v-if="item.job?.name?.indexOf('style')" class="job-name" :nodes="item.job.name"></rich-text>
+              <view v-else class="job-name" style="">{{item.job?.name}}</view>
+            </view>
+            <span class="salary-text">{{ item.job?.payFrom }}-{{ item.job?.payTo }}{{ item.job?.payName ? '/' + item.job?.payName : '' }}</span>
+          </view>
+          <!-- 工作地 -->
+          <view style="font-size: 13px;" class="mt">
+            <span class="tag-gap">
+              <span>{{item.job?.areaName }}</span>
+              <span class="divider-mx" v-if="item.job?.areaName && item.job?.eduName">|</span>
+              <span>{{item.job?.eduName }}</span>
+              <span class="divider-mx" v-if="item.job?.expName">|</span>
+              <span>{{item.job?.expName }}</span>
+            </span>
+          </view>
+          <!-- 岗位tag  -->
+          <view class="mt" v-if="showWelfareTag">
+            <uni-tag 
+              v-for="(tag,i) in item.enterprise?.welfareList || []"
+              :key="i"
+              class="tag-gap"
+              :text="tag"
+              inverted="false"
+              size="mini"
+              custom-style="background-color: #ececec;color:#666;border-color:#ececec;display: inline-block;"
+            />
+          </view>
+          <view style="text-align: end;" v-if="item.job?.hire">
+            <uni-tag
+              class="ss-m-l-10"
+              v-if="item?.job?.hirePrice && item?.job?.hirePrice > 0" 
+              :text="`赏金:${commissionCalculation(item.job.hirePrice, 1)}元`"
+              inverted="false"
+              size="default"
+              custom-style="background-color: #e2f0ef; color:#00897B; border-color:#e2f0ef;"
+            />
           </view>
-          <span class="salary-text">{{ item.job?.payFrom }}-{{ item.job?.payTo }}{{ item.job?.payName ? '/' + item.job?.payName : '' }}</span>
-        </view>
-        <!-- 工作地 -->
-        <view style="font-size: 13px;" class="mt">
-          <span class="tag-gap">
-            <span>{{item.job?.areaName }}</span>
-            <span class="divider-mx" v-if="item.job?.areaName && item.job?.eduName">|</span>
-            <span>{{item.job?.eduName }}</span>
-            <span class="divider-mx" v-if="item.job?.expName">|</span>
-            <span>{{item.job?.expName }}</span>
-          </span>
-        </view>
-        <!-- 岗位tag  -->
-        <view class="mt" v-if="showWelfareTag">
-          <uni-tag 
-            v-for="(tag,i) in item.enterprise?.welfareList || []"
-            :key="i"
-            class="tag-gap"
-            :text="tag"
-            inverted="false"
-            size="mini"
-            custom-style="background-color: #ececec;color:#666;border-color:#ececec;display: inline-block;"
-          />
-        </view>
-        <view style="text-align: end;" v-if="item.job?.hire">
-          <uni-tag
-            class="ss-m-l-10"
-            v-if="item?.job?.hirePrice && item?.job?.hirePrice > 0" 
-            :text="`赏金:${commissionCalculation(item.job.hirePrice, 1)}元`"
-            inverted="false"
-            size="default"
-            custom-style="background-color: #e2f0ef; color:#00897B; border-color:#e2f0ef;"
-          />
-        </view>
-      </view>
-      <!-- 企业信息 -->
-      <view class="sub-li-bottom">
-        <view class="avatarBox" @click="toDetail(0, item)">
-          <image class="enterAvatar ml" :src="item.enterprise?.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
         </view>
-        <view class="ss-m-l-35">
-          <!-- 企业简称 -->
-          <span
-            class="mr"
-            style="font-weight: bold;"
-            @click="toDetail(0, item)"
-          >
-            {{ item.enterprise?.anotherName || ' -- ' }}
-          </span>
-          <span>{{ item.enterprise?.industryName || '行业未知' }}</span>
-          <span class="divider tag-gap1"> | </span>
-          <span class="mr">{{ item.enterprise?.scaleName || '规模未知' }}</span>
+        <!-- 企业信息 -->
+        <view class="sub-li-bottom">
+          <view class="avatarBox" @click="toDetail(0, item)">
+            <image class="enterAvatar ml" :src="item.enterprise?.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
+          </view>
+          <view class="ss-m-l-35">
+            <!-- 企业简称 -->
+            <span
+              class="mr"
+              style="font-weight: bold;"
+              @click="toDetail(0, item)"
+            >
+              {{ item.enterprise?.anotherName || ' -- ' }}
+            </span>
+            <span>{{ item.enterprise?.industryName || '行业未知' }}</span>
+            <span class="divider tag-gap1"> | </span>
+            <span class="mr">{{ item.enterprise?.scaleName || '规模未知' }}</span>
+          </view>
         </view>
       </view>
+      <view v-if="props.noMore" class="noMore">暂无更多数据</view>
+    </view>
+    <view v-else>
+      <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
+      <view style="color: gray; text-align: center;">暂无数据</view>
     </view>
-    <view v-if="props.noMore" class="noMore">暂无更多数据</view>
   </view>
 </template>
 <script setup>

+ 10 - 4
pages/index/position.vue

@@ -12,9 +12,11 @@
           @clear="query.content = ''; onSearch()"
         />
       </view>
-      <view class="white-bgc px-10 pb-10 mb-10">
+      <view class="white-bgc px-10 mb-10">
         <SwiperAd :list="swiperAdList"></SwiperAd>
-        <!-- <FilterList :list="filterList" idValue="label" @change="handleSearch"></FilterList> -->
+        <view class="px-5">
+          <FilterList :list="filterList" idValue="label" @change="handleSearch"></FilterList>
+        </view>
       </view>
       <PositionList class="pb-10" :list="positionListData" :noMore="noMore"></PositionList>
     </scroll-view>
@@ -23,7 +25,7 @@
 
 <script setup>
 import SwiperAd from '@/components/SwiperAd'
-// import FilterList from '@/components/FilterList'
+import FilterList from '@/components/FilterList'
 import PositionList from '@/components/PositionList'
 import { swiperAdListTest } from '@/utils/testData'
 import { dealDictObjData } from '@/utils/position'
@@ -54,6 +56,7 @@ const query = reactive({
 })
 //
 const getData = async () => {
+  // console.log('query', query)
   const res = await getJobAdvertisedSearch(query)
   const list = res?.data?.list || []
   if (list?.length) {
@@ -68,7 +71,7 @@ const getData = async () => {
 getData()
 
 const handleSearch = (key, value) => {
-  query[key][0] = value
+  query[key] = value ? [value] : []
   onSearch()
 }
 
@@ -90,7 +93,10 @@ const loadingMore = () => { // 加载更多
 .px-0 { padding-left: 0 !important; padding-right: 0 !important; }
 .pb-10 { padding-bottom: 10px; }
 .pb-20 { padding-bottom: 20px; }
+.px-5 { padding-left: 5px; padding-right: 5px; }
 .px-10 { padding-left: 10px; padding-right: 10px; }
+.mx-10 { margin-left: 10px; margin-right: 10px }
+.mx-20 { margin-left: 20px; margin-right: 20px; }
 .mb-10 { margin-bottom: 10px; }
 .box {
   height: 100vh;