proginn-frontend/pages/kaifain/index.vue

<template>
  <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="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 class="contentArea">
        <div class="selectArea" v-if="!isSeoList">
          <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="changeIndexSeo(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">
          <h1 class="sTitle">{{head.h1 || '解决方案'}}</h1>
          <div class="list" v-loading="loading">
            <nuxt-link class="cell"
              v-for="item in dataList"
              :key="item.id"
              :to="`/kaifain/s/${item.id}.html`"
              target="_blank"
              :title="item.name"
            >
              <div class="left">
                <img :src="item.images" alt="解决方案images">
              </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">
                  <div class="icon">
                    <img :src="item.company_logo" alt="" onerror="this.src='https://stacdn.proginn.com/image/uCenter/company_logo.png'">
                  </div>
                  <p class="word">{{item.company_name || '' }}</p>
                  <p class="status" v-if="item.company_verify_status == 2">{{"已认证"}}</p>
                </div>
              </div>
            </nuxt-link>
            <div v-if="dataList.length === 0" class="noneData">
              <p>没有数据</p>
            </div>
          </div>
        </div>
        <div class="pagination">
          <el-pagination v-if="!isSeoList" background layout="prev, pager, next" :total="page.total"
            :page-size="page.size" @current-change="pageChange"></el-pagination>
          <div v-else>
            <div class="list">
              <nuxt-link v-for="(item,index) in new Array(Math.ceil(page.total / page.size))"
                :to="`/kaifain/s/?page=${index+1}`"
                :key="(page)+index"
              >
                {{index+1}}
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="kaifainMobile" v-else>
      <div class="topSelect" v-if="!isSeoList">
        <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>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="listArea" :class="{noneInWx: !$deviceType.app}">
        <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"
        >
          <nuxt-link class="cell"
            v-for="item in dataList"
            :key="item.id"
            :to="`/kaifain/s/${item.id}.html`"
            target="_blank"
          >
            <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="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>
          </nuxt-link>
        </van-list>
      </van-pull-refresh>
    </div>
    <ConnectUs :source="'开发屋'" :isShowToast="isShowToast" @close="isShowToast=false" v-if="!isSeoList"></ConnectUs>
    <BindMobile ref="bindMobile" v-if="!isSeoList"></BindMobile>
    <KaifainFooter style="margin-top: 30px;" :data="footer"/>
  </div>
</template>

<script>
  import ConnectUs from "@/components/common/connectUs"
  import BindMobile from "@/components/common/bindMobile"
  import DealSeoData from "@/components/kaifain/dealSeoIndex"
  import DealSeoFooter from "@/components/kaifain/dealSeoFooter"
  import KaifainFooter from "@/components/SeoFooter"

  export default {
    layout: "opacity_header",
    showCommonFooter: false,
    components: { ConnectUs, BindMobile, KaifainFooter },
    head() {
      let { title = "", keyword = "", descrption = "", h1 = "", canonical="", metaLocation } = this.head || {}
      if (this.$deviceType.app) {
        title = "开发屋-解决方案"
      }
      let obj = {
        title: title,
        meta: [
          {
            'name': 'keywords',
            'content': keyword
          }, {
            'name': 'descrption',
            'content': descrption
          }, {
            'name': 'h1',
            'content': h1
          }
        ],
        link: [
          { rel: 'canonical', href: canonical },
        ]
      }
      if (metaLocation) {
        obj.meta.push({'name': 'location', 'content': metaLocation })
      }
      return obj
    },
    async asyncData({ ...params }) {
      try {
        params.store.commit("updateNoneCommonFooter", true)
      } catch (e) {
        console.log("updateNoneCommonFooter", e)
      }
      let dealDataObj = new DealSeoData(params)
      let ans = await dealDataObj.dealData()

      let dealSeoFooterObj = new DealSeoFooter(params)
      let footer = await dealSeoFooterObj.dealData()

      return {
        ...ans,
        ...footer
      }
    },
    data() {
      return {
        expansion: {
          city: 0,
          industry: 0,
          techType: 0,
        },
        isShowToast: false,
        name: '',
        phone: '',
        loading: false,
        refreshing: false,
        firstLoading: false, //移动端加载loading
      }
    },
    created() {
      // this.firstLoading = true
    },
    mounted() {
      if (this.mobile) {
        document.body.style = "overflow:hidden;"
      }
      console.log(this.dataList)
    },
    methods: {
      changeIndex(key, item) {
        this.page.page = 1
        this.page.total = 0
        this.firstLoading = true
        if (item) {
          this.selected[ key ] = item.id
          this.getList()
        } else {
          this.getList()
        }
      },
      changeIndexSeo(key, item) {
        console.log("key:", key, "item:", item, "selected:", this.selected)

        this.selected[ key ] = item.id
        this.selected[key + 'Slug'] = item.slug
        let {citySlug, industrySlug, techTypeSlug} = this.selected
        let url = "/kaifain/"
        if (citySlug) {
          url += citySlug + '/'
        }
        if (industrySlug) {
          url += industrySlug + '/'
        }
        if (techTypeSlug) {
          url += techTypeSlug + '/'
        }
        location.href = url
      },
      changeExpansion(key) {
        this.expansion[ key ] = !this.expansion[ key ]
      },
      getList() {
        const { page, selected } = this
        let p = {
          city: selected.city,
          tech_type: selected.techType,
          industry: selected.industry,
          ...page
        }
        this.loading = true
        // let params = new URLSearchParams(p).toString()
        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' ] = ''
              if (Array.isArray(item.successful_case)) {
                let tem = item.successful_case.map(item => item.title)
                item[ 'successCase' ] = tem.join('、')
              }
            })
            if (this.page.page === 1 || !this.mobile) {
              this.dataList = [...dataList]
            } else {
              this.dataList = [ ...this.dataList, ...dataList]
            }
            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) {
        this.page.page = i
        this.getList()
      },
      handleApplyBtnClick() {
        const { userinfo } = this.$store.state || {}
        //检查登录
        if (!userinfo || !userinfo.uid) {
          this.$message.info('请先登录！')
          location.href = '/?loginbox=show'
          return
        }
        //去绑定手机号
        if (!userinfo.mobile) {
          this.$message.info('请先绑定手机号')
          this.$refs.bindMobile.open()
          return
        }
        //判断是否是首次入驻 非首次入驻 跳转到企业主页
        if (Number(userinfo.has_attend_service_provider) !== 0) {
          location.href = "/company/" + userinfo.uid
          return
        }
        location.href = "/otherpage/companyComplete";
      },
      /** 移动端下拉刷新 **/
      onRefresh() {
        // 清空列表数据
        this.finished = false;
        this.loading = true;
        this.onLoad();
      },
      onLoad() {
        this.getList()
      },
    }
  }
</script>

<style scope lang="scss">
  @import "../../assets/css/kaifain/index.scss";
</style>
<style lang="scss">
  .van-dropdown-menu__title {
    color: #666;
  }
</style>