web-mobile/src/pages/index/views/home.vue

<template>
  <div id="home">
    <!-- <test-user></test-user> -->
    <el-image style="width: 100%; height: 10rem" :src="url"></el-image>
    <el-row align="middle" class="menu_list">
      <!-- drawerTalk = true" -->
      <el-col :span="6" class="list_border" @click.native="toHtml('talkList.html#/')">
        <el-col :span="24"><div class="el-icon-school icon_zoom"></div></el-col>
        <el-col :span="24">
          <el-link type="info" :underline="false">宣讲会</el-link>
        </el-col>
      </el-col>
      <el-col :span="6" class="list_border" @click.native="toHtml('jobfairList.html#/')">
        <el-col :span="24"><div class="el-icon-s-custom icon_zoom"></div></el-col>
        <el-col :span="24">
          <el-link type="info" :underline="false">招聘会</el-link>
        </el-col>
        <el-drawer :visible.sync="drawerJobfair" direction="btt">
          <template #title>
            <el-row>
              <el-col :span="20">选择查看类型</el-col>
            </el-row>
          </template>
          <el-row class="drawer__row">
            <el-col :span="24" @click.native="toHtml('jobfairList.html#/?type=in')">
              <el-button type="text">校内招聘会</el-button>
            </el-col>
            <el-col :span="24" @click.native="toHtml('jobfairList.html#/?type=out')">
              <el-button type="text">校外招聘会</el-button>
            </el-col>
          </el-row>
        </el-drawer>
      </el-col>
      <el-col :span="6" class="list_border">
        <el-col :span="24"><div class="el-icon-s-platform icon_zoom"></div></el-col>
        <el-col :span="24"><el-link type="info" :underline="false" href="jobinfoList.html">在线招聘</el-link></el-col>
      </el-col>
      <el-col :span="6" class="list_border" @click.native="toHtml('jobsList.html#/')">
        <el-col :span="24"><div class="el-icon-school icon_zoom"></div></el-col>
        <el-col :span="24">
          <el-link type="info" :underline="false">招聘职位</el-link>
        </el-col>
      </el-col>
      <el-col :span="6" class="list_border" @click.native="toHtml('', 'check')">
        <el-col :span="24"><div class="el-icon-user icon_zoom"></div></el-col>
        <el-col :span="24"><el-link type="info" :underline="false">个人中心</el-link></el-col>
      </el-col>
    </el-row>
    <!-- list部分 -->
    <div class="list">
      <el-row class="tip" type="flex">
        <el-col :span="16">
          {{ news.title }}<b class="tip_en">{{ news.title }}</b>
        </el-col>
        <el-col :span="8" class="more" @click.native="toHtml(`newsList.html#/${news.id}?title=${news.title}`)">
          查看更多
        </el-col>
      </el-row>
      <el-row type="flex" v-for="(item, index) in news.infoList" :key="index" class="data_list">
        <el-col :span="6"> 【{{ news.title }}】 </el-col>
        <el-col :span="18">{{ item.title }}</el-col>
      </el-row>
    </div>
    <div class="list">
      <el-row class="tip" type="flex">
        <el-col :span="16">
          {{ notice.title }}<b class="tip_en">{{ notice.title }}</b>
        </el-col>
        <el-col :span="8" class="more" @click.native="toHtml(`newsList.html#/${notice.id}?title=${notice.title}`)">
          查看更多
        </el-col>
      </el-row>
      <el-row type="flex" v-for="(item, index) in notice.infoList" :key="index" class="data_list">
        <el-col :span="6"> 【{{ notice.title }}】 </el-col>
        <el-col :span="18">{{ item.title }}</el-col>
      </el-row>
    </div>
    <div class="list">
      <el-row class="tip" type="flex">
        <el-col :span="24"> 联系我们<b class="tip_en">CONTACT</b> </el-col>
      </el-row>
      <el-row style="font-size: 0.85rem;padding: 0 0.6rem;">
        <el-col :span="24" v-html="site.content"></el-col>
      </el-row>
    </div>
    <div class="list">
      <el-row class="tip" type="flex">
        <el-col :span="24"> 关注我们<b class="tip_en">WECHAT</b> </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="text-align:center">
          <canvas id="canvas"></canvas>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode';
import { mapActions, mapState } from 'vuex';
import testUser from '@/components/test-user.vue';
import _ from 'lodash';
export default {
  metaInfo() {
    return {
      title: this.siteTitle ? this.siteTitle : '就业信息网',
    };
  },
  name: 'home',
  props: {},
  components: {
    // testUser,
  },
  data: () => ({
    url: '',
    drawerTalk: false,
    drawerJobfair: false,
    drawerCenter: false,
    site: {},
    news: {},
    notice: {},
    siteTitle: '',
  }),
  async created() {
    await this.getSite();
    await this.getModule();
    this.$nextTick(() => {
      this.initQrcode();
    });
  },
  computed: {
    ...mapState({
      user: state => state.user.user,
    }),
  },
  methods: {
    ...mapActions(['siteOperation', 'moduleOperation', 'columnOperation', 'newsOperation']),
    toHtml(uri, type) {
      if (type) {
        let url = '';
        if (typeof this.user === 'object') {
          this.user.corpid === undefined ? (url = 'student.html#/') : (url = 'http://hr.smart.cc-lotus.info/mobile/');
        } else {
          url = 'register.html#/';
        }
        window.location.href = url;
      } else {
        window.location.href = uri;
      }
    },
    async getSite() {
      let site = sessionStorage.getItem('site');
      if (!site) {
        let result = await this.siteOperation({ type: 'search', data: { site: this.$site } });
        if (`${result.errcode}` === `0`) {
          sessionStorage.setItem('site', JSON.stringify(result.data));
          this.$set(this, `site`, result.data);
          this.$set(this, `siteTitle`, this.site.name);
        }
      } else {
        this.$set(this, `site`, JSON.parse(site));
        this.$set(this, `siteTitle`, this.site.name);
      }
      this.$set(this, `url`, this.site.banner);
    },
    //获取固定的4个模块
    async getModule() {
      //获取分站所有模块 TODO:site=>_tenant
      let result = await this.moduleOperation({ type: 'list' });
      if (`${result.errcode}` === '0') {
        let moduleList = result.data;
        for (let item of moduleList) {
          //item为模块信息,拿着模块信息去查该模块下有什么栏目
          if (`${item.is_use}` === '0') {
            item = await this.getColumn(item);
            await this.makeList(item);
          } // console.log(item);
        }
      }
    },
    //根据条件获取栏目
    async getColumn(item) {
      let res = await this.columnOperation({ type: 'list', data: { parent_id: item.id } });
      //查詢模块下所有的栏目(因为修改关联方是:抓取栏目和正常栏目关联,栏目类型(type)为bugList.所以bugList需要用content_id再去查下面关联的信息
      if (`${res.errcode}` === '0') {
        for (const col of res.data) {
          if (col.type === 'bugList') {
            col.path = `/info/list/${col.content_id}`;
            col.children = await this.getNewsList(col, '0');
          } else if (col.type === 'column') {
            col.path = `/info/list/${col.id}`;
            col.children = await this.getNewsList(col, '1');
          } else if (col.type === 'content') {
            col.path = `/info/detail?id=${col.content_id}`;
          }
        }
        item.children = res.data;
      }
      return item;
    },
    //根据条件获取信息
    async getNewsList(item, news_type) {
      let data = { skip: 0, limit: 4, news_type: news_type };
      data.parent_id = news_type === '1' ? item.id : item.content_id;
      let res = await this.newsOperation({ type: 'list', data: data });
      if (`${res.errcode}` === '0') {
        for (const val of res.data) {
          let result = await this.newsOperation({ type: 'search', data: { id: val.id } });
          if (`${result.errcode}` === '0') {
            val.content = result.data.content;
          } else {
            this.$message.error(result.errmsg ? result.errmsg : 'error');
          }
        }
        return res.data;
      } else {
        this.$message.error(res.errmsg ? res.errmsg : 'error');
      }
    },
    //组合数据
    makeList(item) {
      if (!item) return;
      if (item.category === 'news') {
        let arr = [];
        let colObject = {};
        for (const col of item.children) {
          if (!colObject.id) colObject = col;
          for (const news of col.children) {
            arr.push(news);
          }
        }
        let object = { ...JSON.parse(JSON.stringify(item)), infoList: arr, column: colObject };
        this.$set(this, `news`, object);
      } else if (item.category === 'notice') {
        let arr = [];
        let colObject = {};
        for (const col of item.children) {
          if (!colObject.id) colObject = col;
          for (const news of col.children) {
            arr.push(news);
          }
        }
        let object = { ...JSON.parse(JSON.stringify(item)), infoList: arr, column: colObject };
        // console.log(object);
        this.$set(this, `notice`, object);
      }
    },
    async initQrcode() {
      let url = 'http://smart.cc-lotus.info/weixin/auth?redirect_uri=http://smart.cc-lotus.info/mobile/#/';
      await QRCode.toCanvas(document.getElementById('canvas'), url, {
        width: 100,
        margin: 0,
        // color: { dark: '#ff4400' }, //{ dark: this.$route.query.type === '0' ? '#00ff14' : '#FF9900' }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  height: 3rem;
}
.menu_list {
  padding: 0.5rem 1rem;
}
.list_border {
  border: 0.0625rem solid #ebeced;
  height: 3.5rem;
  text-align: center;
  padding: 0.3rem 0;
}
.icon_zoom {
  zoom: 1.5;
}
.list_word {
  // line-height: 5rem;
  font-size: 0.625rem;
}
.list {
  margin-bottom: 0.7rem;
}
.tip {
  border-left: 0.1875rem solid #25b6ed;
  color: #000;
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
  padding: 0.5rem 0 0.5rem 0.8rem;
}
.tip_en {
  margin-left: 0.5rem;
  color: #ccc;
  font-size: 1rem;
  font-style: italic;
}
.more {
  text-align: right;
  margin-right: 0.5rem;
  color: #ccc;
  font-size: 1rem;
}
.data_list {
  font-size: 0.85rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.drawer__row {
  .el-col {
    border-bottom: 0.0625rem solid #eee;
    text-align: center;
  }
}
</style>