优化

MrShi

2026-01-30 bf42cd15dc7a71ebf7aa5242ad5c29414df27be9

 mini-program/pages/index/index.vue

@@ -1,6 +1,6 @@
<template>
   <view class="index">
      <!-- <view class="zhezhao"></view> -->
      <view class="zhezhao" v-show="view" @click="view = null"></view>
      <view class="head">
         <view class="head-title">
            <view class="head-title-left" @click="jumpList">
@@ -15,71 +15,86 @@
         </view>
         <view class="head-search">
            <view class="head-search-input">
               <u-search placeholder="请输入老师姓名" height="36" :showAction="false"></u-search>
               <u-search placeholder="请输入老师姓名" height="36" v-model="form.name" :showAction="false" @search="search"></u-search>
            </view>
            <view class="cate">
               <view class="cate-item">
                  <text>商业化类型</text>
                  <image src="/static/ar_open7@2x.png" mode="widthFix"></image>
               <view class="cate-item" @click="clickRow(1)">
                  <text :style="{ fontWeight: (view === 1 || form.bustypeIds) ? 'bold' : '', color: (view === 1 || form.bustypeIds) ? '#222222' : '' }">{{form.bustypeIds ? form.bustypeName : '商业化类型'}}</text>
                  <image src="/static/ar_open_sel8@2x.png" mode="widthFix" v-if="view === 1"></image>
                  <image src="/static/ar_open7@2x.png" mode="widthFix" v-else></image>
               </view>
               <view class="cate-item">
                  <text>擅长领域</text>
                  <image src="/static/ar_open7@2x.png" mode="widthFix"></image>
               <view class="cate-item" @click="clickRow(2)">
                  <text :style="{ fontWeight: (view === 2 || form.fieldIds) ? 'bold' : '', color: (view === 2 || form.fieldIds) ? '#222222' : '' }">擅长领域</text>
                  <image src="/static/ar_open_sel8@2x.png" mode="widthFix" v-if="view === 2"></image>
                  <image src="/static/ar_open7@2x.png" mode="widthFix" v-else></image>
               </view>
               <view class="cate-item">
                  <text>默认排序</text>
                  <image src="/static/ar_open7@2x.png" mode="widthFix"></image>
               <view class="cate-item" @click="clickRow(3)">
                  <text :style="{ fontWeight: (view === 3 || form.orderByType) ? 'bold' : '', color: (view === 3 || form.orderByType) ? '#222222' : '' }">{{form.orderByType ? form.orderByName : '默认排序'}}</text>
                  <image src="/static/ar_open_sel8@2x.png" mode="widthFix" v-if="view === 3"></image>
                  <image src="/static/ar_open7@2x.png" mode="widthFix" v-else></image>
               </view>
            </view>
            <!-- <view class="sou">
               <view class="sou-cate">
                  <view class="sou-cate-item active">培训提成</view>
                  <view class="sou-cate-item">谈单成交</view>
                  <view class="sou-cate-item">主动营销</view>
               </view>
               <view class="sou-list">
                  <view class="sou-list-item">
                     <text :style="{ color: '#2E68C4' }">获客类</text>
                     <image src="/static/ic_selete@2x.png" mode="widthFix"></image>
            <view class="sou" v-if="view">
               <scroll-view scroll-y class="sou-list" v-show="view === 1">
                  <view class="sou-list-item" v-for="(item, index) in list1" :key="index" @click="clickSearch(index, 1)">
                     <text :style="{ color: item.active ? '#2E68C4' : '' }">{{item.name}}</text>
                     <image src="/static/ic_selete@2x.png" mode="widthFix" v-if="item.active"></image>
                  </view>
                  <view class="sou-list-item"><text>市场类</text></view>
                  <view class="sou-list-item"><text>设计类</text></view>
                  <view class="sou-list-item"><text>培训类</text></view>
               </view>
            </view> -->
               </scroll-view>
               <scroll-view scroll-y class="sou-cate" v-show="view === 2">
                  <view class="sou-cate-list">
                     <view :class="{'sou-cate-item': true, 'active': item.active}" v-for="(item, index) in list2" :key="index" @click="clickSearch(index, 2)">{{item.name}}</view>
                  </view>
               </scroll-view>
               <scroll-view scroll-y class="sou-list" v-show="view === 3">
                  <view class="sou-list-item" v-for="(item, index) in list3" :key="index" @click="clickSearch(index, 3)">
                     <text :style="{ color: item.active ? '#2E68C4' : '' }">{{item.name}}</text>
                     <image src="/static/ic_selete@2x.png" mode="widthFix" v-if="item.active"></image>
                  </view>
               </scroll-view>
            </view>
         </view>
      </view>
      <view class="list">
         <view class="item" v-for="(item, index) in 10" :key="index" @click="jump">
         <view class="item" v-for="(item, index) in list" :key="index" @click="jump(item)">
            <view class="item-tx">
               <image src="/static/logo.png" mode="widthFix"></image>
               <image :src="item.fullImgurl" mode="widthFix"></image>
            </view>
            <view class="item-info">
               <view class="item-info-a">
                  <text>刘永慧</text>
                  <text>P6｜销售培训师</text>
                  <text>{{item.name}}</text>
                  <template v-if="item.levelName && item.positon">
                     <text>{{item.levelName}}｜{{item.positon}}</text>
                  </template>
                  <template v-if="item.levelName && !item.positon">
                     <text>{{item.levelName}}</text>
                  </template>
                  <template v-if="!item.levelName && item.positon">
                     <text>{{item.positon}}</text>
                  </template>
               </view>
               <view class="item-info-b">
                  <view class="item-info-b-row">市场类</view>
                  <view class="item-info-b-row">获客类</view>
                  <view class="item-info-b-row">培训类</view>
               <view class="item-info-b" v-if="item.typeList && item.typeList.length > 0">
                  <view class="item-info-b-row" v-for="(child, i) in item.typeList" :key="i">{{child.name}}</view>
               </view>
               <view class="item-info-c">
                  <view class="item-info-c-item">
                     <view class="item-info-c-item-label">从业年限：</view>
                     <view class="item-info-c-item-val">10年</view>
                     <view class="item-info-c-item-val">{{item.workYears}}年</view>
                  </view>
                  <view class="item-info-c-item">
                     <view class="item-info-c-item-label">近半年服务商场数：</view>
                     <view class="item-info-c-item-val">38个</view>
                     <view class="item-info-c-item-val">{{item.serveNum}}个</view>
                  </view>
               </view>
               <view class="item-info-d">
                  从事设计商业化已有多年，擅长各种风格，服务大客户超过50户…<text>更多</text>
               <view class="item-info-d" v-if="item.isShow">
                  {{item.zhankai ? item.content : item.contentCopy}}<text @click.stop="zhankai(item)">{{item.zhankai ? '收起' : '更多'}}</text>
               </view>
               <view class="item-info-d" v-else>
                  {{item.content}}
               </view>
               <view class="item-info-price">
                  <text>标准收费</text>
                  <text>2900</text>
                  <text>{{item.fee}}</text>
               </view>
            </view>
         </view>
@@ -91,22 +106,124 @@
   export default {
      data() {
         return {
				
            form: {
               orderByType: '',
               orderByName: '',
               fieldIds: '',
               bustypeIds: '',
               bustypeName: '',
               name: ''
            },
            list1: [],
            list2: [],
            list3: [
               { name: '收费从高到低', id: '0', active: false },
               { name: '收费从低到高', id: '1', active: false },
               { name: '等级从高到低', id: '2', active: false },
               { name: '等级从低到高', id: '3' , active: false},
               { name: '服务数从高到低', id: '4', active: false }
            ],
            view: null,
            page: 1,
            next: true,
            list: []
         }
      },
      onLoad() {

         this.getCategary()
         this.getList()
      },
      onReachBottom() {
         this.getList()
      },
      methods: {
         jump() {
         getList() {
            if (!this.next) return
            this.$u.api.memberPage({
               capacity: 10,
               page: this.page,
               model: this.form
            }).then(res => {
               if (res.code === 200) {
                  res.data.records.forEach(item => {
                     item.isShow = false
                     if (item.content && item.content.length > 30) {
                        item.isShow = true
                        item.zhankai = false
                        item.contentCopy = item.content.substring(0, 30) + '...'
                     }
                  })
                  this.page++
                  this.list.push(...res.data.records)
                  if (res.data.total === this.list.length) {
                     this.next = false
                  }
               }
            })
         },
         search() {
            this.next = true
            this.page = 1
            this.list = []
            this.getList()
         },
         clickSearch(i, type) {
            if (type === 1) {
               this.form.bustypeIds = this.list1[i].id
               this.form.bustypeName = this.list1[i].name
               this.list1.forEach((item, index) => {
                  item.active = index === i
               })
               this.view = null
            } else if (type === 2) {
               this.list2[i].active = !this.list2[i].active
               this.form.fieldIds = this.list2.filter(item => item.active).map(item => item.id).join(',')
               this.$forceUpdate()
            } else {
               this.form.orderByType = this.list3[i].id
               this.form.orderByName = this.list3[i].name
               this.list3.forEach((item, index) => {
                  item.active = index === i
               })
               this.view = null
            }
            this.search()
         },
         clickRow(view) {
            if (view === this.view) {
               this.view = null
            } else {
               this.view = view
            }
         },
         getCategary() {
            this.$u.api.categoryList({ type: 1 })
               .then(res => {
                  if (res.code === 200) {
                     res.data.active = false
                     this.list1 = res.data
                  }
               })
            this.$u.api.categoryList({ type: 2 })
               .then(res => {
                  if (res.code === 200) {
                     res.data.active = false
                     this.list2 = res.data
                  }
               })
         },
         jump(item) {
            uni.navigateTo({
               url: '/pages/details/details'
               url: '/pages/details/details?id=' + item.id
            })
         },
         jumpList() {
            uni.navigateTo({
               url: '/pages/ranking-list/ranking-list'
            })
         },
         zhankai(item) {
            item.zhankai = !item.zhankai
         }
      }
   }
@@ -246,6 +363,7 @@
                  margin-top: 20rpx;
                  text {
                     color: #2E68C4;
                     margin-left: 10rpx;
                  }
               }
            }
@@ -314,29 +432,42 @@
               background-color: #ffffff;
               .sou-cate {
                  width: 100%;
                  max-height: 480rpx;
                  padding: 0 0 30rpx 0;
                  box-sizing: border-box;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .active {
                     background: rgba(46,104,196,0.1) !important;
                     color: #2E68C4 !important;
                  }
                  .sou-cate-item {
                     width: 216rpx;
                     height: 72rpx;
                     line-height: 72rpx;
                     text-align: center;
                     background: #F7F7F7;
                     border-radius: 8rpx;
                     font-weight: 400;
                     font-size: 28rpx;
                     color: #333333;
                  .sou-cate-list {
                     width: 100%;
                     display: flex;
                     align-items: center;
                     // justify-content: space-between;
                     flex-wrap: wrap;
                     .active {
                        background: rgba(46,104,196,0.1) !important;
                        color: #2E68C4 !important;
                     }
                     .sou-cate-item {
                        padding: 0 15rpx;
                        box-sizing: border-box;
                        height: 72rpx;
                        line-height: 72rpx;
                        text-align: center;
                        background: #F7F7F7;
                        border-radius: 8rpx;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #333333;
                        margin-top: 20rpx;
                        margin-right: 15rpx;
                        &:last-child {
                           margin-right: 0 !important;
                        }
                     }
                  }
               }
               .sou-list {
                  width: 100%;
                  max-height: 480rpx;
                  overflow-y: scroll;	
                  display: flex;
                  flex-direction: column;
                  .sou-list-item {