gcb_zc/pages/index.vue

<template>
  <section class="bid">
    <div class="search">
      <input type="text" placeholder="请输入搜索内容">
      <span @click="Subscribe">我的订阅</span>
    </div>
    <div class="select">
      <div class="region" @click="regions(0)">
        地区
        <img src="../static/img/open.png" v-if="!region[0]" alt>
        <img src="../static/img/hide.png" v-else alt>
      </div>
      <div class="region" @click="regions(1)">
        类别
        <img src="../static/img/open.png" v-if="!region[1]" alt>
        <img src="../static/img/hide.png" v-else alt>
      </div>
      <areaone class="regions" v-on:province="province" :regiont="regiont" v-if="region[0]"/>
      <ul id="category" v-if="region[1]">
        <li v-for="v in bid" :key="v.id" @click="biding(v.id)">{{v.name}}</li>
      </ul>
      <div class="bg" v-if="region[0]||region[1]"></div>
    </div>
    <ul class="bidlist">
      <nuxt-link to="/me/chooseArea">
        <li>
          <h2>喷口内径测量规招标公告</h2>
          <p class="p1">
            喷口内径测量规招标公告。信息来源：中国招标投标公共服务
            平台。招标信息概览占位占位占位占位，占位占位。招标信息
            概览占位占位占位占位，占位占位。
          </p>
          <p class="p2">
            <span class="label">2000万</span>
            <span class="time">2019-05-20</span>
          </p>
        </li>
      </nuxt-link>
      <nuxt-link to="/bidding">
        <li>
          <h2>喷口内径测量规招标公告</h2>
          <p class="p1">
            喷口内径测量规招标公告。信息来源：中国招标投标公共服务
            平台。招标信息概览占位占位占位占位，占位占位。招标信息
            概览占位占位占位占位，占位占位。
          </p>
          <p class="p2">
            <span class="label">2000万</span>
            <span class="time">2019-05-20</span>
          </p>
        </li>
      </nuxt-link>
      <nuxt-link to="/bidding">
        <li>
          <h2>喷口内径测量规招标公告</h2>
          <p class="p1">
            喷口内径测量规招标公告。信息来源：中国招标投标公共服务
            平台。招标信息概览占位占位占位占位，占位占位。招标信息
            概览占位占位占位占位，占位占位。
          </p>
          <p class="p2">
            <span class="label">2000万</span>
            <span class="time">2019-05-20</span>
          </p>
        </li>
      </nuxt-link>
      <nuxt-link to="/bidding">
        <li>
          <h2>喷口内径测量规招标公告</h2>
          <p class="p1">
            喷口内径测量规招标公告。信息来源：中国招标投标公共服务
            平台。招标信息概览占位占位占位占位，占位占位。招标信息
            概览占位占位占位占位，占位占位。
          </p>
          <p class="p2">
            <span class="label">2000万</span>
            <span class="time">2019-05-20</span>
          </p>
        </li>
      </nuxt-link>
      <nuxt-link to="/bidding">
        <li>
          <h2>喷口内径测量规招标公告</h2>
          <p class="p1">
            喷口内径测量规招标公告。信息来源：中国招标投标公共服务
            平台。招标信息概览占位占位占位占位，占位占位。招标信息
            概览占位占位占位占位，占位占位。
          </p>
          <p class="p2">
            <span class="label">2000万</span>
            <span class="time">2019-05-20</span>
          </p>
        </li>
      </nuxt-link>
    </ul>
  </section>
</template>

<script>
import '~/assets/select.scss'
import areaone from '~/components/areaSelect.vue'
export default {
  components: {
    areaone
  },
  data() {
    return {
      region: [false, false], //选择项切换
      img: ['open', 'hide'], //图片切换
      regiont: [], //区域列表
      bid: [
        { id: 0, name: '全部' },
        { id: 1, name: '招标预告' },
        { id: 2, name: '招标公告' },
        { id: 3, name: '招标变更' },
        { id: 4, name: '中标公告' }
      ], //类别列表
      cd: '', //区域的值
      b: '' //类别的值
    }
  },
  fetch({ app }) {
    //console.log(app.$axios)
  },
  asyncData({ app }) {
    //this.http=app
    // app.$axios.get('/province.html').then((response)=>{
    //     console.log(response)
    //   }).catch((response)=>{
    //     //console.log(response.response);
    //   })
  },
  created() {
    //获取区域列表
    this.$axios
      .get('/province.html')
      .then(response => {
        this.regiont = this.regiont.concat(response.data)
        console.log(this.regiont)
      })
      .catch(response => {})
  },
  methods: {
    regions(e) {
      //切换选择项
      const region = [false, false]
      region[e] = true
      const img = ['open', 'hide']
      img[e] = 'hide'
      this.img = img
      this.region = [].concat(region)
    },
    province: function(somedata) {
      //接收区域的值
      this.close()
    },
    Subscribe(e) {
      this.$router.push({ path: '/bidding/subList' })
    },
    close: function(e) {
      //关闭选择项
      const region = [false, false]
      this.region = [].concat(region)
    },
    biding: function(e) {
      if (e > 0) {
        this.b = 'b' + e
      } else {
        this.b = false
      }
      console.log(this.b)
      this.close()
    }
  }
}
</script>

<style>
.bid {
  height: 100%;
}
body div {
  height: 100%;
}
.p1 {
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
</style>