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" :key="key" 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"
                :key="item.id"
                :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" v-if="!page.keyword">{{head.h1 || '解决方案'}}</h1>
          <h1 class="sTitle" v-else>搜索包含"{{page.keyword}}"的解决方案</h1>
          <div class="list" v-loading="loading">
            <nuxt-link
              class="cell"
              v-for="item in dataList"
              :key="item.id"
              :to="`/s/${item.hash_id}`"
              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="`/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>
      <h1>{{head.h1 || '解决方案'}}</h1>
      <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="`/s/${item.hash_id}`"
            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>

<!--      <a v-if="!deviceType.app && mobile" class="downapp" href="">下载APP</a>-->
    </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";
  import {mapState, mapMutations} from "vuex";
  import deviceType from "../../plugins/deviceType";

  export default {
    layout: "opacity_header_kf_tmp",
    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();
      let domainConfig = params.store.state.domainConfig;

      return {
        ...domainConfig,
        ...ans,
        ...footer,
      };
    },
    data() {
      return {
        kaifainUrl: "",
        expansion: {
          city: 0,
          industry: 0,
          techType: 0,
        },
        isShowToast: false,
        name: "",
        phone: "",
        loading: false,
        refreshing: false,
        firstLoading: false, //移动端加载loading
      };
    },
    created() {
      const {kaifainUrl, siteUrl} = this.$store.state.domainConfig;
      this.kaifainUrl = kaifainUrl;
      this.siteUrl = siteUrl;
    },
    computed: {
      ...mapState(["isPC", "isWeixin", "deviceType", "noneCommonFooter"]),
    },
    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 = this.kaifainUrl + "/";
        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&next=" + encodeURIComponent(location.href);
          return;
        }
        //去绑定手机号
        if (!userinfo.mobile) {
          this.$message.info("请先绑定手机号");
          this.$refs.bindMobile.open();
          return;
        }
        //判断是否是首次入驻 非首次入驻 跳转到企业主页
        if (Number(userinfo.has_attend_service_provider) !== 0) {
          location.href = this.siteUrl + "/company/" + userinfo.uid;
          return;
        }
        location.href = this.siteUrl + "/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;
  }

  .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>