优化

MrShi

6 天以前 97158794d69fd2beee1bf27577aa7cadea8d847d

 mini-program/pages/index/index.vue

@@ -2,35 +2,33 @@
   <view class="index">
      <view class="zhezhao" v-show="view" @click="view = null"></view>
      <view class="head">
         <view class="head-title">
         <view class="head-search">
            <view class="head-search-input">
            <view class="head-title-left" @click="jumpList">
               <image src="/static/ic_paihang@2x.png" mode="widthFix"></image>
               <text>排行榜</text>
            </view>
            <view class="head-title-name">选择点将老师</view>
            <view class="head-title-left" style="opacity: 0;">
               <image src="/static/ic_paihang@2x.png" mode="widthFix"></image>
               <text>排行榜</text>
               <view class="head-search-input-right">
                  <u-search placeholder="请输入老师姓名" height="36" v-model="form.name" :showAction="false" @search="search" @clear="search"></u-search>
            </view>
         </view>
         <view class="head-search">
            <view class="head-search-input">
               <u-search placeholder="请输入老师姓名" height="36" v-model="form.name" :showAction="false" @search="search"></u-search>
            </view>
            <view class="cate">
               <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_open_sel@2x.png" mode="widthFix" v-else-if="view !== 1 && form.bustypeIds"></image>
                  <image src="/static/ar_open7@2x.png" mode="widthFix" v-else></image>
               </view>
               <view class="cate-item" @click="clickRow(2)">
                  <text :style="{ fontWeight: (view === 2 || form.fieldIds) ? 'bold' : '', color: (view === 2 || form.fieldIds) ? '#222222' : '' }">擅长领域</text>
                  <text :style="{ fontWeight: (view === 2 || form.fieldIdList.length > 0) ? 'bold' : '', color: (view === 2 || form.fieldIdList.length > 0) ? '#222222' : '' }">擅长领域</text>
                  <image src="/static/ar_open_sel8@2x.png" mode="widthFix" v-if="view === 2"></image>
                  <image src="/static/ar_open_sel@2x.png" mode="widthFix" v-else-if="view !== 2 && form.fieldIdList.length > 0"></image>
                  <image src="/static/ar_open7@2x.png" mode="widthFix" v-else></image>
               </view>
               <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_open_sel@2x.png" mode="widthFix" v-else-if="view !== 3 && form.orderByType"></image>
                  <image src="/static/ar_open7@2x.png" mode="widthFix" v-else></image>
               </view>
            </view>
@@ -109,7 +107,7 @@
            form: {
               orderByType: '',
               orderByName: '',
               fieldIds: '',
               fieldIdList: [],
               bustypeIds: '',
               bustypeName: '',
               name: ''
@@ -117,6 +115,7 @@
            list1: [],
            list2: [],
            list3: [
               { name: '默认排序', id: '', active: true },
               { name: '收费从高到低', id: '0', active: false },
               { name: '收费从低到高', id: '1', active: false },
               { name: '等级从高到低', id: '2', active: false },
@@ -143,7 +142,14 @@
            this.$u.api.memberPage({
               capacity: 10,
               page: this.page,
               model: this.form
               model: {
                  orderByType: this.form.orderByType ? this.form.orderByType : 3,
                  orderByName: this.form.orderByName,
                  fieldIdList: this.form.fieldIdList,
                  bustypeIds: this.form.bustypeIds,
                  bustypeName: this.form.bustypeName,
                  name: this.form.name
               }
            }).then(res => {
               if (res.code === 200) {
                  res.data.records.forEach(item => {
@@ -178,7 +184,7 @@
               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.form.fieldIdList = this.list2.filter(item => item.active).map(item => item.id)
               this.$forceUpdate()
            } else {
               this.form.orderByType = this.list3[i].id
@@ -203,6 +209,7 @@
                  if (res.code === 200) {
                     res.data.active = false
                     this.list1 = res.data
                     this.list1.unshift({ name: '全部', id: null, active: true })
                  }
               })
            this.$u.api.categoryList({ type: 2 })
@@ -246,7 +253,7 @@
            width: 100%;
            background: #FFFFFF;
            border-radius: 8rpx;
            padding: 24rpx;
            padding: 30rpx;
            box-sizing: border-box;
            display: flex;
            align-items: flex-start;
@@ -299,18 +306,21 @@
               }
               .item-info-a {
                  display: flex;
                  align-items: center;
                  align-items: flex-start;
                  text {
                     &:nth-child(1) {
                        flex-shrink: 0;
                        font-weight: 600;
                        font-size: 30rpx;
                        color: #222222;
                     }
                     &:nth-child(2) {
                        width: 280rpx;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #777777;
                        margin-left: 10rpx;
                        margin-top: 7rpx;
                     }
                  }
               }
@@ -318,7 +328,7 @@
                  display: flex;
                  flex-wrap: wrap;
                  align-items: center;
                  margin-top: 8rpx;
                  margin-top: 16rpx;
                  .item-info-b-row {
                     padding: 0 8rpx;
                     box-sizing: border-box;
@@ -330,8 +340,9 @@
                     font-size: 22rpx;
                     color: #2E68C4;
                     margin-right: 8rpx;
                     margin-bottom: 8rpx;
                     &:last-child {
                        margin: 0;
                        margin-right: 0;
                     }
                  }
               }
@@ -358,6 +369,7 @@
               }
               .item-info-d {
                  width: 100%;
                  line-height: 40rpx;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #333333;
@@ -381,23 +393,30 @@
      }
      .head {
         width: 100%;
         height: 260rpx;
         height: 172rpx;
         padding-top: 12rpx;
         box-sizing: border-box;
         position: sticky;
         top: 0;
         left: 0;
         z-index: 9;
         background-color: #ffffff;
         .head-title {
         .head-search {
            width: 100%;
            height: 88rpx;
            padding: 0 30rpx;
            box-sizing: border-box;
            height: 172rpx;
            .head-search-input {
               width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
               padding: 0 30rpx;
               box-sizing: border-box;
               height: 72rpx;
            .head-title-left {
                  flex-shrink: 0;
               display: flex;
               align-items: center;
                  margin-right: 30rpx;
               image {
                  width: 40rpx;
                  height: 40rpx;
@@ -409,21 +428,9 @@
                  margin-left: 8rpx;
               }
            }
            .head-title-name {
               font-weight: 500;
               font-size: 32rpx;
               color: #111111;
               .head-search-input-right {
                  flex: 1;
            }
         }
         .head-search {
            width: 100%;
            height: 172rpx;
            .head-search-input {
               width: 100%;
               padding: 0 30rpx;
               box-sizing: border-box;
               height: 72rpx;
               margin-top: 12rpx;
            }
            .sou {
               width: 100%;