|
@@ -0,0 +1,438 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <scroll-view scroll-x="true" class="topSearch">
|
|
|
+ <view class="itemBox flex">
|
|
|
+ <view class="typeTtem flex" @click="changeType(item,ind)" :key='ind' v-for="(item,ind) in workTypeList" :class="{action:typeIndex==ind}">
|
|
|
+ <text>
|
|
|
+ {{item.title}}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="itemTip flex" @click="$refs.popup.open()">
|
|
|
+ <uni-icons type="bars" size="40rpx"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <scroll-view scroll-y="true" :style="{'height':height}" class="scroll-wrap" @scrolltolower="getKcList">
|
|
|
+ <cmy-mys-list :list='navList[currentIndex].list'></cmy-mys-list>
|
|
|
+ <uni-load-more :status="navList[currentIndex].loadingType"></uni-load-more>
|
|
|
+ </scroll-view>
|
|
|
+ <uni-popup ref="popup" type="bottom">
|
|
|
+ <view class="alertBox">
|
|
|
+ <view class="flex position-relative padding-c-20">
|
|
|
+ <text class="alertTitle">全部筛选</text>
|
|
|
+ <image @click="closeAlert" class="alertClose" src="/static/icon/goodsExit.png" mode="scaleToFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="padding-t-20">
|
|
|
+ <view class="alertItemTitle">
|
|
|
+ 职业类型
|
|
|
+ </view>
|
|
|
+ <view class="flex alertTypeBox" >
|
|
|
+ <view class="alertTypeItem" @click="search.work_type_id=ltt.id" :key='inde' v-for="(ltt,inde) in workTypeList" :class="{action:search.work_type_id==ltt.id}">
|
|
|
+ <text>
|
|
|
+ {{ltt.title}}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="alertItemTitle">
|
|
|
+ 价格类型
|
|
|
+ </view>
|
|
|
+ <view class="flex alertTypeBox" >
|
|
|
+ <view class="alertTypeItem" :class="{action:search.timetype===''}" @click="search.timetype=''">
|
|
|
+ <text>
|
|
|
+ 无
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="alertTypeItem" :class="{action:search.timetype==='hour'}" @click="search.timetype='hour'">
|
|
|
+ <text>
|
|
|
+ 小时
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="alertTypeItem" :class="{action:search.timetype==='day'}" @click="search.timetype='day'">
|
|
|
+ <text>
|
|
|
+ 每天
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="alertTypeItem" :class="{action:search.timetype==='month'}" @click="search.timetype='month'">
|
|
|
+ <text>
|
|
|
+ 每月
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="alertItemTitle" v-if="search.timetype!==''">
|
|
|
+ 最低价格
|
|
|
+ </view>
|
|
|
+ <input v-if="search.timetype!==''" v-model="search.servicePrice" class="minMoney" type="number" placeholder-class="placeholderText" placeholder="自定义最低价格">
|
|
|
+ <view class="alertItemTitle">
|
|
|
+ 服务区域
|
|
|
+ </view>
|
|
|
+ <view class="flex alertTypeBox" >
|
|
|
+ <view class="alertTypeItem" :class="{action:search.is_china===''}" @click="search.is_china=''">
|
|
|
+ <text>
|
|
|
+ 全部
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="alertTypeItem" :class="{action:search.is_china===1}" @click="search.is_china=1">
|
|
|
+ <text>
|
|
|
+ 国内
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="alertTypeItem" :class="{action:search.is_china===0}" @click="search.is_china=0">
|
|
|
+ <text>
|
|
|
+ 国外
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="search.is_china===1" class="alertItemTitle">
|
|
|
+ 区域选择
|
|
|
+ </view>
|
|
|
+ <view v-if="search.is_china===1" class="right">
|
|
|
+ <view class="citylist">
|
|
|
+ <view class="">
|
|
|
+ <view class="flex margin-b-20" v-for="(item,ind) in search.service_area" :key="ind">
|
|
|
+ <view>
|
|
|
+ {{item.province+item.city+item.district}}
|
|
|
+ <text class="margin-l-10 del" @click="search.service_area.splice(ind,1)">
|
|
|
+ 删除
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex">
|
|
|
+ <pickerAddress class="buttom" @change="onCityClick">选择地区</pickerAddress>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex alertButtomBox">
|
|
|
+ <view class="cancel" @click="cancelSearch">
|
|
|
+ 清空选择
|
|
|
+ </view>
|
|
|
+ <view class="confirm" @click="confirmSearch">
|
|
|
+ 确定
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getGoodWorkerList,
|
|
|
+ getNewWorkerList
|
|
|
+ } from '@/api/index.js'
|
|
|
+ import {
|
|
|
+ getUserWorkTypeList
|
|
|
+ } from '@/api/model.js';
|
|
|
+ import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
|
|
|
+ import{mapState} from "vuex"
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ pickerAddress
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(["baseURL"])
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ typeIndex: -1,
|
|
|
+ type: 1,
|
|
|
+ workTypeList: [],
|
|
|
+ height: '',
|
|
|
+ currentIndex: 0,
|
|
|
+ navList: [{
|
|
|
+ title: '全部',
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ list: [],
|
|
|
+ loadingType: 'morde',
|
|
|
+ loaded: false
|
|
|
+ }, {
|
|
|
+ title: '视频',
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ list: [],
|
|
|
+ loadingType: 'morde',
|
|
|
+ type: 0,
|
|
|
+ loaded: false
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ alertIndex:0,
|
|
|
+ search:{
|
|
|
+ timetype:'',//hour,month,day
|
|
|
+ servicePrice:'',
|
|
|
+ work_type_id:'',
|
|
|
+ service_area:[],
|
|
|
+ is_china:'',
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.type =parseInt( opt.type)
|
|
|
+ this.currentIndex = this.type-1
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getKcList()
|
|
|
+ },
|
|
|
+ onReady(res) {
|
|
|
+ var that = this;
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: resu => {
|
|
|
+ const query = uni.createSelectorQuery();
|
|
|
+ query.select('.scroll-wrap').boundingClientRect();
|
|
|
+ query.exec(function(res) {
|
|
|
+ that.height = resu.windowHeight - res[0].top + 'px';
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: res => {}
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onCityClick({
|
|
|
+ data
|
|
|
+ }) {
|
|
|
+ let address = {};
|
|
|
+ address.province = data[0];
|
|
|
+ address.city = data[1];
|
|
|
+ address.district = data[2];
|
|
|
+ this.search.service_area.push(address)
|
|
|
+ },
|
|
|
+ cancelSearch(){
|
|
|
+ this.search = {
|
|
|
+ servicePrice:'',
|
|
|
+ work_type_id:'',
|
|
|
+ timetype:'',
|
|
|
+ service_area:[],
|
|
|
+ is_china:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ closeAlert(){
|
|
|
+ this.$refs.popup.close();
|
|
|
+ },
|
|
|
+ confirmSearch(){
|
|
|
+ this.initData()
|
|
|
+ this.closeAlert()
|
|
|
+ this.getKcList()
|
|
|
+ },
|
|
|
+ //初始化查询数据
|
|
|
+ initData(){
|
|
|
+ const data = this.navList[this.currentIndex]
|
|
|
+ data.page=1;
|
|
|
+ data.list =[];
|
|
|
+ data.loadingType='morde'
|
|
|
+ },
|
|
|
+ changeType(item,ind){
|
|
|
+ if(ind==this.typeIndex){
|
|
|
+ this.typeIndex=-1;
|
|
|
+ this.search.work_type_id = '';
|
|
|
+ }else{
|
|
|
+ this.typeIndex=ind;
|
|
|
+ this.cancelSearch();
|
|
|
+ this.search.work_type_id = item.id;
|
|
|
+ }
|
|
|
+ this.initData()
|
|
|
+ this.getKcList()
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ const that = this;
|
|
|
+ getUserWorkTypeList().then(
|
|
|
+ (res) => {
|
|
|
+ that.workTypeList = res.data.list
|
|
|
+ }
|
|
|
+ ).catch(
|
|
|
+ (res) => {
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ async getKcList(type) {
|
|
|
+ let that = this;
|
|
|
+ let item = that.navList[that.currentIndex]
|
|
|
+ if (item.loaded && type == 'tab') {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (item.loadingType == 'noMore' || item.loadingType == 'loading') {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ item.loadingType = 'loading'
|
|
|
+ let res = {}
|
|
|
+ const search= {
|
|
|
+ ...that.search
|
|
|
+ }
|
|
|
+ search.service_area = search.service_area.map(
|
|
|
+ (item) => {
|
|
|
+ return `${item.province},${item.city},${item.district}`
|
|
|
+ }
|
|
|
+ )
|
|
|
+ if (this.type === 1) {
|
|
|
+ res = await getGoodWorkerList({
|
|
|
+ ...search,
|
|
|
+ page: item.page,
|
|
|
+ pageSize: item.pageSize
|
|
|
+ })
|
|
|
+ } else if (this.type === 2) {
|
|
|
+ res = await getNewWorkerList({
|
|
|
+ ...search,
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ item.list = item.list.concat(res.data.list)
|
|
|
+ item.page++
|
|
|
+ if (item.pageSize == res.data.list.length) {
|
|
|
+ item.loadingType = 'more'
|
|
|
+ } else {
|
|
|
+ item.loadingType = 'noMore'
|
|
|
+ }
|
|
|
+ item.loaded = true
|
|
|
+ },
|
|
|
+ navClick(index) {
|
|
|
+ this.currentIndex = index
|
|
|
+ this.getKcList('tab')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .alert{
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+ .scroll-wrap{
|
|
|
+ padding: 30rpx;
|
|
|
+ }
|
|
|
+ .alertBox{
|
|
|
+ line-height: 1;
|
|
|
+ background-color: #FFF;
|
|
|
+ padding: 20rpx 0 30rpx;
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
+ .right {
|
|
|
+ color: $font-color-light;
|
|
|
+ font-size: $font-base;
|
|
|
+ flex-grow: 1;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding: 20rpx;
|
|
|
+ .timetype {
|
|
|
+ width: 100%;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .citylist {
|
|
|
+ .del {
|
|
|
+ font-size: $font-sm;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background-color: #eee;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 5rpx 15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttom {
|
|
|
+ border-radius: 10rpx;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ background-color: #eee;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .alertTitle{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ flex-grow: 1;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .alertClose{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ .alertItemTitle{
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .minMoney{
|
|
|
+ margin: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ border-bottom: 1px solid #e9e9e9;
|
|
|
+ }
|
|
|
+ .placeholderText{
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ .alertTypeBox{
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 0 20rpx 10rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .alertTypeItem{
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ background-color: #eee;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-bottom: 14rpx;
|
|
|
+ margin-right: 14rpx;
|
|
|
+ &.action{
|
|
|
+ background-color: #fee7e4;
|
|
|
+ color: #F86859;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .moneyTitle{
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .alertButtomBox{
|
|
|
+ color: #FFF;
|
|
|
+ padding: 20rpx;
|
|
|
+ border-top: 1px solid #e3e3e3;
|
|
|
+ .confirm{
|
|
|
+ background-color: #F86859;
|
|
|
+ }
|
|
|
+ .cancel{
|
|
|
+ background-color:orange;
|
|
|
+ }
|
|
|
+ .cancel,.confirm{
|
|
|
+ padding: 10rpx;
|
|
|
+ text-align: center;
|
|
|
+ width: 350rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .topSearch{
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ background-color: #FFF;
|
|
|
+ padding-right: 100rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ .itemBox{
|
|
|
+ padding-left: 30rpx;
|
|
|
+ align-items: center;
|
|
|
+ .itemTip{
|
|
|
+ background-color: #FFF;
|
|
|
+ position: fixed;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ align-items: center;
|
|
|
+ height: 80rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ }
|
|
|
+ .typeTtem {
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 80rpx;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ &.action{
|
|
|
+ color:#F86859;
|
|
|
+ border-bottom: 1px solid #F86859;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|