<template>
|
<view class="index">
|
<view class="zhezhao" v-show="view" @click="view = null"></view>
|
<view class="head">
|
<view class="head-title">
|
<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>
|
</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_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>
|
<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" @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" 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>
|
</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 list" :key="index" @click="jump(item)">
|
<view class="item-tx">
|
<image :src="item.fullImgurl" mode="widthFix"></image>
|
</view>
|
<view class="item-info">
|
<view class="item-info-a">
|
<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" 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">{{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">{{item.serveNum}}个</view>
|
</view>
|
</view>
|
<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" v-if="item.fee">
|
<text>标准收费</text>
|
<text>{{item.fee}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
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: []
|
}
|
},
|
async onLoad() {
|
await this.$onLaunched;
|
this.getCategary()
|
this.getList()
|
},
|
onReachBottom() {
|
this.getList()
|
},
|
methods: {
|
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?id=' + item.id
|
})
|
},
|
jumpList() {
|
uni.navigateTo({
|
url: '/pages/ranking-list/ranking-list'
|
})
|
},
|
zhankai(item) {
|
item.zhankai = !item.zhankai
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background-color: #f7f7f7;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.index {
|
width: 100%;
|
.list {
|
width: 100%;
|
padding: 20rpx 30rpx;
|
box-sizing: border-box;
|
.item {
|
width: 100%;
|
background: #FFFFFF;
|
border-radius: 8rpx;
|
padding: 24rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.item-tx {
|
flex-shrink: 0;
|
width: 128rpx;
|
height: 168rpx;
|
border-radius: 8rpx;
|
overflow: hidden;
|
margin-right: 20rpx;
|
image {
|
width: 100%;
|
}
|
}
|
.item-info {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
position: relative;
|
.item-info-price {
|
position: absolute;
|
right: 0;
|
top: 0;
|
display: flex;
|
align-items: flex-end;
|
flex-direction: column;
|
text {
|
&:nth-child(1) {
|
font-weight: 400;
|
font-size: 22rpx;
|
color: #FF7000;
|
}
|
&:nth-child(2) {
|
font-weight: 600;
|
font-size: 30rpx;
|
color: #FF7000;
|
&::after {
|
content: "元/周";
|
font-weight: 600;
|
font-size: 20rpx;
|
color: #FF7000;
|
}
|
}
|
}
|
}
|
.item-info-a {
|
display: flex;
|
align-items: center;
|
text {
|
&:nth-child(1) {
|
font-weight: 600;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #777777;
|
margin-left: 10rpx;
|
}
|
}
|
}
|
.item-info-b {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
margin-top: 8rpx;
|
.item-info-b-row {
|
padding: 0 8rpx;
|
box-sizing: border-box;
|
height: 40rpx;
|
line-height: 40rpx;
|
border-radius: 8rpx;
|
border: 1rpx solid #2E68C4;
|
font-weight: 400;
|
font-size: 22rpx;
|
color: #2E68C4;
|
margin-right: 8rpx;
|
&:last-child {
|
margin: 0;
|
}
|
}
|
}
|
.item-info-c {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 20rpx;
|
.item-info-c-item {
|
display: flex;
|
align-items: center;
|
.item-info-c-item-label {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #777777;
|
}
|
.item-info-c-item-val {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #333333;
|
}
|
}
|
}
|
.item-info-d {
|
width: 100%;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #333333;
|
margin-top: 20rpx;
|
text {
|
color: #2E68C4;
|
margin-left: 10rpx;
|
}
|
}
|
}
|
}
|
}
|
.zhezhao {
|
width: 100vw;
|
height: 100vh;
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 5;
|
background-color: rgba(0,0,0,.5);
|
}
|
.head {
|
width: 100%;
|
height: 260rpx;
|
position: sticky;
|
top: 0;
|
left: 0;
|
z-index: 9;
|
background-color: #ffffff;
|
.head-title {
|
width: 100%;
|
height: 88rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.head-title-left {
|
display: flex;
|
align-items: center;
|
image {
|
width: 40rpx;
|
height: 40rpx;
|
}
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #2E68C4;
|
margin-left: 8rpx;
|
}
|
}
|
.head-title-name {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #111111;
|
}
|
}
|
.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%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
border-radius: 0 0 30rpx 30rpx;
|
background-color: #ffffff;
|
.sou-cate {
|
width: 100%;
|
max-height: 480rpx;
|
padding: 0 0 30rpx 0;
|
box-sizing: border-box;
|
.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 {
|
width: 100%;
|
height: 96rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #EEEEEE;
|
text {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #222222;
|
}
|
image {
|
width: 24rpx;
|
height: 18rpx;
|
}
|
}
|
}
|
}
|
.cate {
|
width: 100%;
|
height: 88rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
.cate-item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #777777;
|
margin-right: 8rpx;
|
}
|
image {
|
width: 20rpx;
|
height: 20rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
