|
|
@@ -1,86 +1,134 @@
|
|
|
<template>
|
|
|
- <div class="kaifain" :class="{isMobile: mobile}">
|
|
|
- <div class="topArea">
|
|
|
- <div class="bgImage">
|
|
|
- <img src="~@/assets/img/kaifain/banner_bj@2x.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="topContent">
|
|
|
- <div class="wordImg">
|
|
|
- <img src="~@/assets/img/kaifain/top_name@2x.png" alt="">
|
|
|
+ <div :class="{isMobile: mobile}">
|
|
|
+ <div v-if="!mobile" class="kaifain">
|
|
|
+ <div class="topArea">
|
|
|
+ <div class="bgImage">
|
|
|
+ <img src="~@/assets/img/kaifain/banner_bj@2x.png" alt="">
|
|
|
</div>
|
|
|
- <div class="btnList">
|
|
|
- <div class="freeSubmit" @click="isShowToast = true"><p>免费发布需求</p></div>
|
|
|
- <div class="bePartner" @click="handleApplyBtnClick"><p>申请入驻</p></div>
|
|
|
+ <div class="topContent">
|
|
|
+ <div class="wordImg">
|
|
|
+ <img src="~@/assets/img/kaifain/top_name@2x.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="btnList">
|
|
|
+ <div class="freeSubmit" @click="isShowToast = true"><p>免费发布需求</p></div>
|
|
|
+ <div class="bePartner" @click="handleApplyBtnClick"><p>申请入驻</p></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="contentArea">
|
|
|
- <div class="selectArea">
|
|
|
- <div class="content" v-for="(key, i) in Object.keys(typeList)" >
|
|
|
- <div class="left"><p>{{typeList[key].title}}</p></div>
|
|
|
- <div class="right">
|
|
|
+ <div class="contentArea">
|
|
|
+ <div class="selectArea">
|
|
|
+ <div class="content" v-for="(key, i) in Object.keys(typeList)">
|
|
|
+ <div class="left"><p>{{typeList[key].title}}</p></div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="cell"
|
|
|
+ v-for="(item, ii) in typeList[key].list"
|
|
|
+ :class="{selected: item.id === selected[key]}"
|
|
|
+ @click="changeIndex(key, item)"
|
|
|
+ v-if="ii < 8 || expansion[key]"
|
|
|
+ >
|
|
|
+ <p>{{item.name}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="more" @click="changeExpansion(key)" v-if="typeList[key].list.length > 8">
|
|
|
+ {{expansion[key] ? "收起" : "更多"}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="listArea">
|
|
|
+ <div class="sTitle">解决方案</div>
|
|
|
+ <div class="list" v-loading="loading">
|
|
|
<div class="cell"
|
|
|
- v-for="(item, ii) in typeList[key].list"
|
|
|
- :class="{selected: item.id === selected[key]}"
|
|
|
- @click="changeIndex(key, item)"
|
|
|
- v-if="ii < 8 || expansion[key]"
|
|
|
+ v-for="item in dataList"
|
|
|
+ :key="item.id"
|
|
|
+ @click="jumpToDetail(item)"
|
|
|
>
|
|
|
- <p>{{item.name}}</p>
|
|
|
+ <div class="left">
|
|
|
+ <img :src="item.images" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="top">
|
|
|
+ <div class="titleA">
|
|
|
+ <div class="title">{{item.title}}</div>
|
|
|
+ <div class="tips" v-if="item.city_op_name">{{item.city_op_name}}</div>
|
|
|
+ <div class="tips" v-if="item.industry_name">{{item.industry_name}}</div>
|
|
|
+ <div class="tips" v-if="item.tech_type_name">{{item.tech_type_name}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="intro">
|
|
|
+ <p class="tt">介绍：</p>
|
|
|
+ <p class="value">{{item.description}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="ep">
|
|
|
+ <p class="tt">案例：</p>
|
|
|
+ <p class="value">
|
|
|
+ <span>{{item.successCase || '暂未提供'}}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <p class="icon" v-if="item.company_name"></p>
|
|
|
+ <p class="word" v-if="item.company_name ">{{item.company_name || '' }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="more" @click="changeExpansion(key)" v-if="typeList[key].list.length > 8">
|
|
|
- {{expansion[key] ? "收起" : "更多"}}
|
|
|
- </div>
|
|
|
</div>
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="page.total"
|
|
|
+ :page-size="page.size"
|
|
|
+ @current-change="pageChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="kaifainMobile">
|
|
|
+ <div class="topSelect">
|
|
|
+ <van-dropdown-menu>
|
|
|
+ <van-dropdown-item v-for="(key, i) in Object.keys(typeList)" v-model="selected[key]"
|
|
|
+ :options="typeList[key].list" :key="key+i" @change="changeIndex"/>
|
|
|
+ </van-dropdown-menu>
|
|
|
</div>
|
|
|
- <div class="listArea">
|
|
|
- <div class="sTitle">解决方案</div>
|
|
|
- <div class="list" v-loading="loading">
|
|
|
+ <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="listArea">
|
|
|
+ <div style="text-align: center" v-if="firstLoading">
|
|
|
+ <van-loading size="24px">加载中...</van-loading>
|
|
|
+ </div>
|
|
|
+ <van-list
|
|
|
+ v-else
|
|
|
+ v-model="loading"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ @load="onLoad"
|
|
|
+ :immediate-check="false"
|
|
|
+ >
|
|
|
<div class="cell"
|
|
|
v-for="item in dataList"
|
|
|
:key="item.id"
|
|
|
@click="jumpToDetail(item)"
|
|
|
>
|
|
|
- <div class="left">
|
|
|
- <img :src="item.images" alt="">
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <div class="top">
|
|
|
- <div class="titleA">
|
|
|
- <div class="title">{{item.title}}</div>
|
|
|
+ <div class="bodyCont">
|
|
|
+ <div class="left">
|
|
|
+ <img :src="item.images" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="cellTitle">{{item.title}}</div>
|
|
|
+ <div class="spanList">
|
|
|
<div class="tips" v-if="item.city_op_name">{{item.city_op_name}}</div>
|
|
|
<div class="tips" v-if="item.industry_name">{{item.industry_name}}</div>
|
|
|
<div class="tips" v-if="item.tech_type_name">{{item.tech_type_name}}</div>
|
|
|
</div>
|
|
|
- <div class="intro">
|
|
|
- <p class="tt">介绍：</p>
|
|
|
- <p class="value">{{item.description}}</p>
|
|
|
- </div>
|
|
|
- <div class="ep">
|
|
|
- <p class="tt">案例：</p>
|
|
|
- <p class="value">
|
|
|
- <span>{{item.successCase || '暂未提供'}}</span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="bottom">
|
|
|
- <p class="icon" v-if="item.company_name"></p>
|
|
|
- <p class="word" v-if="item.company_name ">{{item.company_name || '' }}</p>
|
|
|
+ <div class="desc">{{item.description}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="bottomCont">
|
|
|
+ <p class="icon" v-if="item.company_name"></p>
|
|
|
+ <p class="word" v-if="item.company_name ">{{item.company_name || '' }}</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="pagination">
|
|
|
- <el-pagination
|
|
|
- background
|
|
|
- layout="prev, pager, next"
|
|
|
- :total="page.total"
|
|
|
- :page-size="page.size"
|
|
|
- @current-change="pageChange"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
- </div>
|
|
|
+ </van-list>
|
|
|
+ </van-pull-refresh>
|
|
|
</div>
|
|
|
<ConnectUs :source="'开发屋'" :isShowToast="isShowToast" @close="isShowToast=false"></ConnectUs>
|
|
|
<BindMobile ref="bindMobile"></BindMobile>
|
|
|
@@ -90,9 +138,10 @@
|
|
|
<script>
|
|
|
import ConnectUs from "@/components/common/connectUs"
|
|
|
import BindMobile from "@/components/common/bindMobile"
|
|
|
+
|
|
|
export default {
|
|
|
layout: "opacity_header",
|
|
|
- components: {ConnectUs, BindMobile},
|
|
|
+ components: { ConnectUs, BindMobile },
|
|
|
head() {
|
|
|
return {
|
|
|
title: '程序员客栈技术信用-程序员技术开发能力认证，企业程序员背调专用数据平台',
|
|
|
@@ -118,7 +167,7 @@
|
|
|
typeList: {
|
|
|
city: {
|
|
|
title: '地区',
|
|
|
- list: []
|
|
|
+ list: []
|
|
|
},
|
|
|
industry: {
|
|
|
title: '行业领域',
|
|
|
@@ -139,46 +188,71 @@
|
|
|
industry: 0,
|
|
|
techType: 0,
|
|
|
},
|
|
|
- loading: false,
|
|
|
+
|
|
|
dataList: [],
|
|
|
page: {
|
|
|
- page:1,
|
|
|
- size:10,
|
|
|
+ page: 1,
|
|
|
+ size: 10,
|
|
|
total: 0
|
|
|
},
|
|
|
isShowToast: false,
|
|
|
name: '',
|
|
|
- phone: ''
|
|
|
+ phone: '',
|
|
|
+ loading: false,
|
|
|
+ finished: false,
|
|
|
+ refreshing: false,
|
|
|
+ firstLoading: false, //移动端加载loading
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
+ this.firstLoading = true
|
|
|
this.getTypeLisst()
|
|
|
this.getList()
|
|
|
},
|
|
|
mounted() {
|
|
|
+ if (this.mobile) {
|
|
|
+ document.body.style = "overflow:hidden;"
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
changeIndex(key, item) {
|
|
|
- this.selected[key] = item.id
|
|
|
- this.getList()
|
|
|
+ this.page.page = 1
|
|
|
+ this.page.total = 0
|
|
|
+ this.firstLoading = true
|
|
|
+ if (item) {
|
|
|
+ this.selected[ key ] = item.id
|
|
|
+ this.getList()
|
|
|
+ } else {
|
|
|
+ this.getList()
|
|
|
+ }
|
|
|
},
|
|
|
changeExpansion(key) {
|
|
|
- this.expansion[key] = !this.expansion[key]
|
|
|
+ this.expansion[ key ] = !this.expansion[ key ]
|
|
|
},
|
|
|
getTypeLisst() {
|
|
|
- this.$axios.get('/api/kaifawu/get_options').then(res=>{
|
|
|
+ this.$axios.get('/api/kaifawu/get_options').then(res => {
|
|
|
if (Number(res.data.status) === 1) {
|
|
|
- res.data.data.cities.unshift({id:0, name:"全部"})
|
|
|
- res.data.data.industries.unshift({id:0, name:"全部"})
|
|
|
- res.data.data.tech_types.unshift({id:0, name:"全部"})
|
|
|
- this.typeList.city.list = res.data.data.cities
|
|
|
- this.typeList.industry.list = res.data.data.industries
|
|
|
- this.typeList.techType.list = res.data.data.tech_types
|
|
|
+ res.data.data.cities.unshift({ id: 0, name: "全部地区" })
|
|
|
+ res.data.data.industries.unshift({ id: 0, name: "全部行业" })
|
|
|
+ res.data.data.tech_types.unshift({ id: 0, name: "全部分类" })
|
|
|
+ Object.keys(res.data.data).forEach(key => {
|
|
|
+ let item = res.data.data[ key ]
|
|
|
+ if (Array.isArray(item)) {
|
|
|
+ item.forEach(ii => {
|
|
|
+ ii.text = ii.name
|
|
|
+ ii.value = ii.id
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log('list', res.data.data)
|
|
|
+ this.typeList.city.list = [ ...res.data.data.cities ]
|
|
|
+ this.typeList.industry.list = [ ...res.data.data.industries ]
|
|
|
+ this.typeList.techType.list = [ ...res.data.data.tech_types ]
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
getList() {
|
|
|
- const {page, selected} = this
|
|
|
+ const { page, selected } = this
|
|
|
let p = {
|
|
|
city: selected.city,
|
|
|
tech_type: selected.techType,
|
|
|
@@ -187,22 +261,33 @@
|
|
|
}
|
|
|
this.loading = true
|
|
|
// let params = new URLSearchParams(p).toString()
|
|
|
- this.$axios.post('/api/kaifawu/index', p).then(res=>{
|
|
|
+ this.$axios.post('/api/kaifawu/index', p).then(res => {
|
|
|
if (Number(res.data.status) === 1) {
|
|
|
let data = res.data.data
|
|
|
this.page.total = data.total
|
|
|
let dataList = data.providers || []
|
|
|
- dataList.forEach(item=>{
|
|
|
- item['successCase'] = ''
|
|
|
+ dataList.forEach(item => {
|
|
|
+ item[ 'successCase' ] = ''
|
|
|
if (Array.isArray(item.successful_case)) {
|
|
|
- let tem = item.successful_case.map(item => item.title)
|
|
|
- item['successCase'] = tem.join('、')
|
|
|
+ let tem = item.successful_case.map(item => item.title)
|
|
|
+ item[ 'successCase' ] = tem.join('、')
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
- this.dataList = data.providers
|
|
|
+ if (this.page.page === 1) {
|
|
|
+ this.dataList = data.providers
|
|
|
+ } else {
|
|
|
+ this.dataList = [...this.dataList, ...data.providers]
|
|
|
+ }
|
|
|
+ this.page.page += 1
|
|
|
+ if (this.page.total <= this.dataList.length) {
|
|
|
+ this.finished = true
|
|
|
+ }
|
|
|
}
|
|
|
+ }).finally(()=>{
|
|
|
+ this.firstLoading = false
|
|
|
+ this.refreshing = false
|
|
|
this.loading = false
|
|
|
+ console.log("this.finished", this.finished )
|
|
|
})
|
|
|
},
|
|
|
pageChange(i) {
|
|
|
@@ -210,7 +295,7 @@
|
|
|
this.getList()
|
|
|
},
|
|
|
handleApplyBtnClick() {
|
|
|
- const {userinfo} = this.$store.state || {}
|
|
|
+ const { userinfo } = this.$store.state || {}
|
|
|
//检查登录
|
|
|
if (!userinfo || !userinfo.uid) {
|
|
|
this.$message.info('请先登录！')
|
|
|
@@ -232,13 +317,23 @@
|
|
|
},
|
|
|
/** 跳转到详情 **/
|
|
|
jumpToDetail(item) {
|
|
|
- const {id} = item
|
|
|
+ const { id } = item
|
|
|
if (!id) {
|
|
|
this.$message.info('参数异常')
|
|
|
return
|
|
|
}
|
|
|
location.href = `./kaifain/${id}`
|
|
|
- }
|
|
|
+ },
|
|
|
+ /** 移动端下拉刷新 **/
|
|
|
+ onRefresh() {
|
|
|
+ // 清空列表数据
|
|
|
+ this.finished = false;
|
|
|
+ this.loading = true;
|
|
|
+ this.onLoad();
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -246,3 +341,8 @@
|
|
|
<style scope lang="scss">
|
|
|
@import "../../assets/css/kaifain/index.scss";
|
|
|
</style>
|
|
|
+<style lang="scss">
|
|
|
+ .van-dropdown-menu__title {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+</style>
|
xinfeng