|
|
@@ -0,0 +1,335 @@
|
|
|
+<template>
|
|
|
+ <div :class="{ isMobile: mobile }">
|
|
|
+ <!-- web -->
|
|
|
+ <div v-if="!mobile">
|
|
|
+ <div class="companyList">
|
|
|
+ <div class="contentArea">
|
|
|
+ <div class="filter-box">
|
|
|
+ <h3 class="filter-title">国内地区</h3>
|
|
|
+ <div class="filter-content">
|
|
|
+ <a href="/company/list" :class="currentCity === undefined ? 'on' : 'notOn'">全部</a>
|
|
|
+ <a
|
|
|
+ :href="`/company/list/${item.slug}`"
|
|
|
+ v-for="item in cityList"
|
|
|
+ :key="'city' + item.id"
|
|
|
+ :class="currentCity === item.slug ? 'on' : 'notOn'"
|
|
|
+ :title="item.name">
|
|
|
+ {{ item.name }}
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="company-list-wrapper" v-loading="loading">
|
|
|
+ <a
|
|
|
+ v-for="item in companyList"
|
|
|
+ :key="'company' + item.uid"
|
|
|
+ :href="`${siteUrl}/company/${item.uid}`"
|
|
|
+ class="company-item">
|
|
|
+ <img :src="item.logo" alt="logo" class="logo">
|
|
|
+ <div class="company-info">
|
|
|
+ <div class="name">{{ item.name }}</div>
|
|
|
+ <div class="intro">{{ item.brief_introduction }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="recruit-info">
|
|
|
+ <span class="num">{{ item.recruit_num || 0 }}</span>
|
|
|
+ <span class="title">在招职位</span>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ v-if="!isSeoList"
|
|
|
+ background
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="page.total"
|
|
|
+ :page-size="page.pageSize"
|
|
|
+ @current-change="pageChange"
|
|
|
+ :current-page="Number(page.current)">
|
|
|
+ </el-pagination>
|
|
|
+ <div v-else>
|
|
|
+ <div class="list">
|
|
|
+ <nuxt-link
|
|
|
+ v-for="(item, index) in new Array(Math.ceil(page.total / page.size))"
|
|
|
+ :to="`/?page=${index + 1}`"
|
|
|
+ :key="page + index">
|
|
|
+ {{ index + 1 }}
|
|
|
+ </nuxt-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- mobile -->
|
|
|
+ <div v-else class="jobListMobile">
|
|
|
+ 公司列表 mobile
|
|
|
+ <a v-if="!deviceType.app && mobile && !isBaiduxapp && !isWxapp" :class="{'downapp':isShowDownLoad}" :href="downloadhref">下载APP</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {mapState, mapMutations} from "vuex";
|
|
|
+ import deviceType from "../../../plugins/deviceType";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "CompanyList",
|
|
|
+ showCommonFooter: false,
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isShowToast: false,
|
|
|
+ name: "",
|
|
|
+ loading: false,
|
|
|
+ refreshing: false,
|
|
|
+ firstLoading: false, //移动端加载loading
|
|
|
+ isLoading: false,
|
|
|
+ selected: {},
|
|
|
+ downloadhref: "",
|
|
|
+ type: "",
|
|
|
+ isShowDownLoad: false,
|
|
|
+ isBaiduxapp: false,
|
|
|
+ isWxapp: true,
|
|
|
+ siteUrl: "",
|
|
|
+ jobUrl:"",
|
|
|
+ isSeoList: false,
|
|
|
+ currentCity: undefined,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ head() {
|
|
|
+ const {
|
|
|
+ title = "",
|
|
|
+ keyword = "",
|
|
|
+ description = "",
|
|
|
+ h1 = "",
|
|
|
+ canonical = "",
|
|
|
+ metaLocation
|
|
|
+ } = this.head || {};
|
|
|
+ let obj = {
|
|
|
+ title: title || '企业列表 - 程序员客栈',
|
|
|
+ meta: [
|
|
|
+ {
|
|
|
+ name: "keywords",
|
|
|
+ content: keyword
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "description",
|
|
|
+ content: description
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "h1",
|
|
|
+ content: h1
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ link: [{rel: "canonical", href: canonical}]
|
|
|
+ };
|
|
|
+ if (metaLocation) {
|
|
|
+ obj.meta.push({name: "location", content: metaLocation});
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
+ async asyncData({...params}) {
|
|
|
+ console.log("*********params:", params);
|
|
|
+ // return {
|
|
|
+ // mobile: params.app.$deviceType.isMobile(),
|
|
|
+ // cityList: [],
|
|
|
+ // companyList: [],
|
|
|
+ // page: {
|
|
|
+ // current: 1,
|
|
|
+ // pageSize: 20,
|
|
|
+ // total: 100
|
|
|
+ // },
|
|
|
+ // currentCity: undefined
|
|
|
+ // }
|
|
|
+ try {
|
|
|
+ params.store.commit("updateNoneCommonFooter", false);
|
|
|
+ } catch (e) {
|
|
|
+ console.log("updateNoneCommonFooter", e);
|
|
|
+ }
|
|
|
+ // 提前获取 route.params
|
|
|
+ const { city } = params.app.context.params
|
|
|
+ // 获取城市列表
|
|
|
+ let cityList = []
|
|
|
+ let cityOpId = ''
|
|
|
+ const cityRes = await params.$axios.$post('/api/CompanyInfo/getCity')
|
|
|
+ if (Number(cityRes.status) === 1) {
|
|
|
+ cityList = cityRes.data || []
|
|
|
+ // let cityObject = cityRes.data || {}
|
|
|
+ // cityList = Object.values(cityObject)
|
|
|
+ // 还需要过滤 is_hot = 0 的城市
|
|
|
+ // cityList = Object.values(cityObject).filter(item => item.is_hot > 0)
|
|
|
+
|
|
|
+ // url 中的 city slug 换取 cityOpId
|
|
|
+ if (city && cityList && cityList.length) {
|
|
|
+ for (let i = 0; i < cityList.length; i++) {
|
|
|
+ if (cityList[i].slug === city) {
|
|
|
+ cityOpId = cityList[i].id
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 获取公司列表
|
|
|
+ let companyList = []
|
|
|
+ let page = {
|
|
|
+ total: 0,
|
|
|
+ pageSize: 20,
|
|
|
+ current: 1,
|
|
|
+ cityOpId: cityOpId || ''
|
|
|
+ }
|
|
|
+ let getCompanyListParams = {}
|
|
|
+ if (cityOpId) {
|
|
|
+ getCompanyListParams.city_op_id = cityOpId
|
|
|
+ }
|
|
|
+ const companyRes = await params.$axios.$post('/api/CompanyInfo/getCompanyList', getCompanyListParams)
|
|
|
+ if (Number(companyRes.status) === 1) {
|
|
|
+ companyList = companyRes.data.list || []
|
|
|
+ page.total = Number(companyRes.data.total) || 0
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(companyRes)
|
|
|
+
|
|
|
+ return {
|
|
|
+ mobile: params.app.$deviceType.isMobile(),
|
|
|
+ cityList: cityList,
|
|
|
+ companyList: companyList,
|
|
|
+ page: page,
|
|
|
+ currentCity: city || undefined
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ computed: {
|
|
|
+ ...mapState(["isPC", "isWeixin", "deviceType", "noneCommonFooter"]),
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ console.log("created................");
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log("mounted................");
|
|
|
+ if (this.mobile) {
|
|
|
+ document.body.style = "overflow:hidden;";
|
|
|
+ }
|
|
|
+
|
|
|
+ let UA = navigator.userAgent;
|
|
|
+ console.log("-------------", UA);
|
|
|
+ this.isWxapp = UA.indexOf('miniProgram') > -1;
|
|
|
+ console.error(this.isWxapp ? "是微信" : "不是微信");
|
|
|
+ this.isBaiduxapp = navigator.userAgent.indexOf('swan/') > -1;
|
|
|
+ console.log(this.$route.params);
|
|
|
+ var isAndroid = UA.indexOf("Android") > -1 || UA.indexOf("Adr") > -1; //android终端
|
|
|
+ console.error(isAndroid ? "是安卓" : "不是安卓");
|
|
|
+ var isiOS = !!UA.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
|
|
|
+ console.error(isiOS ? "是IOS" : "不是IOS");
|
|
|
+
|
|
|
+ if (this.isWxapp) {
|
|
|
+ this.downloadhref =
|
|
|
+ "http://a.app.qq.com/o/simple.jsp?pkgname=com.proginn";
|
|
|
+ } else if (isAndroid) {
|
|
|
+ this.downloadhref =
|
|
|
+ "http://inncms.storage.proginn.com/android/proginn-v4.10.0.apk";
|
|
|
+ } else if (isiOS) {
|
|
|
+ this.downloadhref =
|
|
|
+ "https://itunes.apple.com/cn/app/cheng-xu-yuan-ke-zhan/id979914687";
|
|
|
+ }
|
|
|
+ console.log("this.downloadhref =", this.downloadhref);
|
|
|
+
|
|
|
+ this.type = deviceType.app ? "APP" : "浏览器";
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isShowDownLoad = true;
|
|
|
+ console.log("this.isShowDownload=", this.isShowDownLoad);
|
|
|
+ }, 500)
|
|
|
+
|
|
|
+ let ua = navigator.userAgent;
|
|
|
+
|
|
|
+ this.isBaiduxapp = navigator.userAgent.indexOf('swan/') > -1;
|
|
|
+ console.log(this.$route.params);
|
|
|
+ // this.isWxapp = this.$route.query.isWxMini && this.$route.query.isWxMini == 1;
|
|
|
+
|
|
|
+ this.siteUrl = this.$store.state.domainConfig.siteUrl
|
|
|
+ this.jobUrl = this.$store.state.domainConfig.jobUrl
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 获取公司列表
|
|
|
+ */
|
|
|
+ _getCompanyList () {
|
|
|
+ const { page } = this
|
|
|
+ let params = {
|
|
|
+ page: Number(page.current),
|
|
|
+ size: page.pageSize
|
|
|
+ }
|
|
|
+ if (page.cityOpId) {
|
|
|
+ params.city_op_id = page.cityOpId
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isLoading) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.loading = true;
|
|
|
+ this.isLoading = true;
|
|
|
+
|
|
|
+ this.$axios.$post('/api/CompanyInfo/getCompanyList', params).then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ if (Number(res.status) === 1) {
|
|
|
+ let data = res.data
|
|
|
+ this.page.total = Number(data.total) || 0
|
|
|
+ if (this.page.page === 1 || !this.mobile) {
|
|
|
+ this.companyList = [...data.list]
|
|
|
+ } else {
|
|
|
+ this.companyList = [...this.companyList, ...data.list]
|
|
|
+ }
|
|
|
+ if (this.page.total <= this.companyList.length) {
|
|
|
+ this.finished = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.firstLoading = false;
|
|
|
+ this.refreshing = false;
|
|
|
+ this.isLoading = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ console.log(
|
|
|
+ "this.finished................................",
|
|
|
+ this.finished
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+ pageChange(i) {
|
|
|
+ this.page.current = i;
|
|
|
+ this._getCompanyList();
|
|
|
+ },
|
|
|
+ /** 移动端下拉刷新 **/
|
|
|
+ onRefresh() {
|
|
|
+ // 清空列表数据
|
|
|
+ this.finished = false;
|
|
|
+ console.log("onRefresh");
|
|
|
+ this.onLoad();
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ console.log("onLoad");
|
|
|
+ this.getList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scope lang="scss">
|
|
|
+@import "../../../assets/css/company/index.scss";
|
|
|
+.main {
|
|
|
+ margin-top: 20px !important;
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.downapp {
|
|
|
+position: absolute;
|
|
|
+bottom: 0;
|
|
|
+z-index: 1000;
|
|
|
+width: 100vw;
|
|
|
+height: 50px;
|
|
|
+background: cornflowerblue;
|
|
|
+color: white;
|
|
|
+font-size: 15px;
|
|
|
+text-align: center;
|
|
|
+line-height: 50px;
|
|
|
+}
|
|
|
+</style>
|
huan-jie