| | |
| | | <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"> |
| | |
| | | </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> |
| | |
| | | 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 |
| | | } |
| | | } |
| | | } |
| | |
| | | margin-top: 20rpx; |
| | | text { |
| | | color: #2E68C4; |
| | | margin-left: 10rpx; |
| | | } |
| | | } |
| | | } |
| | |
| | | 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 { |