基本功能

assets/a.scss

@@ -7,16 +7,23 @@ $z2   :50;
 $z3   :100;
 
 body {
-    padding-bottom   : $table;
-    font-size        : 1.5rem;
-    height           : 100%;
-    position         : relative;
-    max-width        : 500px;
-    margin           : auto;
-    div{
+    padding-bottom: $table;
+    font-size     : 1.5rem;
+    height        : 100%;
+    position      : relative;
+    max-width     : 500px;
+    margin        : auto;
+
+    div {
         height: 100%;
     }
 
+    //区域
+    .regions {
+        position: fixed;
+        z-index: 100050;
+    }
+    //底部导航
     .table {
         position        : fixed;
         bottom          : 0;
@@ -24,7 +31,7 @@ body {
         height          : $table;
         margin          : 0;
         background-color: #fff;
-        padding     : 5px 0;
+        padding         : 5px 0;
         z-index         : 10000;
         max-width       : 500px;
 
@@ -65,18 +72,19 @@ body {
             }
 
             li {
-                width          : 24%;
-                height         : 100%;
-                display        : inline-block;
-                text-align     : center;
-                background-size: 22px !important;
-                background     : no-repeat center top;
+                width              : 24%;
+                height             : 100%;
+                display            : inline-block;
+                text-align         : center;
+                background-size    : 22px !important;
+                background         : no-repeat center top;
                 background-position: center 2px;
+
                 span {
                     margin-top: 24px;
                     display   : inline-block;
                     color     : rgba(175, 175, 175, 1);
-                    font-size: 10px;
+                    font-size : 10px;
                 }
 
             }
@@ -237,14 +245,15 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
 
         .auto {
 
-            overflow-x: scroll;
-            border-top: .5px solid #f0f0f0;
+            overflow-x   : scroll;
+            border-top   : .5px solid #f0f0f0;
             border-bottom: .5px solid #f0f0f0;
+
             ul {
-                text-align: center;
-                padding: 20px 0;
-                overflow-x: auto;
-                width     : 390px;
+                text-align   : center;
+                padding      : 20px 0;
+                overflow-x   : auto;
+                width        : 390px;
                 // border-top: .5px solid #afafaf;
 
                 li {
@@ -306,7 +315,7 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
         }
 
         .confirm {
-           
+
             padding: 20px 15px 0 15px;
             width  : 100%;
 
@@ -370,23 +379,26 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
     .add {
         padding-left: 15px;
         border-top  : 1px solid #f0f0f0;
+
         li {
-            padding: 35px*0.5 0;
+            padding : 35px*0.5 0;
             position: relative;
-            &::after{
-                position: absolute;
-                content: '';
-                display: block;
-                width: 100%;
-                height: 1px;
-                left: 0;
-                bottom: 0;
-                right: 0;
-                // margin-left: -1.5rem;
-                // margin-right: -1.5rem;
-                padding-right: 1.5rem;
+
+            &::after {
+                position        : absolute;
+                content         : '';
+                display         : block;
+                width           : 100%;
+                height          : 1px;
+                left            : 0;
+                bottom          : 0;
+                right           : 0;
+                // margin-left  : -1.5rem;
+                // margin-right : -1.5rem;
+                padding-right   : 1.5rem;
                 background-color: #f0f0f0;
             }
+
             .title {
                 font-size  : 16px;
                 font-family: PingFang-SC-Medium;

components/areaSelect.vue

@@ -6,8 +6,8 @@
         v-for="(item,index) in areaone"
         :key="index"
         @click="addClass(index)"
-        :class="{active:index==current}"
-      >{{ item.text }}</li>
+        :class="{active:index+1==current}"
+      >{{ item.name }}</li>
     </ul>
     <!-- end：选择大区 -->
 
@@ -16,9 +16,9 @@
       <li
         v-for="(item,index) in areatwo"
         :key="index"
-        @click="choose(index)"
-        :class="current2[index]"
-      >{{ item.text }}</li>
+        @click="choose(item.id)"
+        :class="current2[item.id]"
+      >{{ item.name }}</li>
     </ul>
     <!-- end：选择省份 -->
 
@@ -29,178 +29,49 @@
 export default {
   data() {
     return {
-      current: '0',
+      current: '1',
       current2: [],
-      areaone: [
-        {
-          text: '全国',
-          province: [
-            { text: '全部' },
-            { text: '北京' },
-            { text: 'assa' },
-            { text: '上海' },
-            { text: '湖北' },
-            { text: '河南' },
-            { text: '山西' },
-            { text: '新疆' },
-            { text: '各小区' }
-          ]
-        },
-        {
-          text: '西北',
-          province: [
-            { text: '全部' },
-            { text: '北京' },
-            { text: '2' },
-            { text: '上海' },
-            { text: '湖北' },
-            { text: '河南' },
-            { text: '山西' },
-            { text: '新疆' },
-            { text: '各小区' }
-          ]
-        },
-        {
-          text: '西南',
-          province: [
-            { text: '全部' },
-            { text: '北京' },
-            { text: '3' },
-            { text: '上海' },
-            { text: '湖北' },
-            { text: '河南' },
-            { text: '山西' },
-            { text: '新疆' },
-            { text: '各小区' }
-          ]
-        },
-        {
-          text: '东北',
-          province: [
-            { text: '全部' },
-            { text: '北京' },
-            { text: '4' },
-            { text: '上海' },
-            { text: '湖北' },
-            { text: '河南' },
-            { text: '山西' },
-            { text: '新疆' },
-            { text: '各小区' }
-          ]
-        },
-        {
-          text: '东南',
-          province: [
-            { text: '全部' },
-            { text: '北京' },
-            { text: '5' },
-            { text: '上海' },
-            { text: '湖北' },
-            { text: '河南' },
-            { text: '山西' },
-            { text: '新疆' },
-            { text: '各小区' }
-          ]
-        },
-        {
-          text: '华中',
-          province: [
-            { text: '全部' },
-            { text: '北京' },
-            { text: '6' },
-            { text: '上海' },
-            { text: '湖北' },
-            { text: '河南' },
-            { text: '山西' },
-            { text: '新疆' },
-            { text: '各小区' }
-          ]
-        },
-        {
-          text: '华北',
-          province: [
-            { text: '全部' },
-            { text: '北京' },
-            { text: '天津' },
-            { text: '7' },
-            { text: '湖北' },
-            { text: '河南' },
-            { text: '山西' },
-            { text: '新疆' },
-            { text: '各小区' }
-          ]
-        },
-        {
-          text: '华南',
-          province: [
-            { text: '全部' },
-            { text: '北京' },
-            { text: '天津' },
-            { text: '8' },
-            { text: '湖北' },
-            { text: '河南' },
-            { text: '山西' },
-            { text: '新疆' },
-            { text: '各小区' }
-          ]
-        }
-      ],
-      areatwo: [],
-      a: true //true为为全部选中
+      areaone: [{ id: '1', name: '全国' }],
+      areatwo: [{ id: '1', name: '全国' }]
     }
   },
+  props: ['regiont'],
   created() {
-    this.areatwo = this.areaone[0].province
+    this.areaone = this.areaone.concat(this.regiont)
   },
   methods: {
     addClass: function(index) {
-      this.areatwo = this.areaone[index].province
-      this.current = index
+      if (index > 0) {
+        this.areatwo = [{ id: this.areaone[index].id, name: '全部' }]
+        this.areatwo = this.areatwo.concat(this.areaone[index].province)
+      } else {
+        this.areatwo = [{ id: '1', name: '全国' }]
+      }
+      this.current = this.areaone[index].id
     },
     choose: function(index) {
-      var current = this.current2
-      //判断点击的是否为全选
-      if (index == 0) {
-        //判断是否以及全选
-        console.log(this.a)
-        if (this.a) {
-          //如果未全部选中则全部选中
-          for (var i = 0; i < this.areatwo.length; i++) {
-            current[i] = ['active']
+      if (index == '1') {
+        this.current2 = []
+        this.current2[index] = 'active'
+      } else {
+        if (index == this.current) {
+          for (var i = 0; i < this.areaone[index - 1].province.length; i++) {
+            this.current2[this.areaone[index - 1].province[i].id] = ''
           }
-          this.a = false
         } else {
-          //如果已经全部选中则初始化
-          current = []
-          this.a = true
+          this.current2[this.current] = ''
         }
-      } else {      
-        if (current[index] == 'active') {
-          //如果当前数组的这个值为已选中
-          current[index] = ['']
+        if (this.current2[index] == 'active') {
+          this.current2[index] = ''
         } else {
-          //如果未选中
-          current[index] = ['active']
-        }
-        var k = 1;//设置初始值
-        for (var i = 0; i < current.length; i++) {
-          //循环整个数组看看有多少已选中
-          if (current[i] == 'active') {
-            //赋值k的值为已选中的数量
-            k++
-          }
+          this.current2[index] = 'active'
         }
-        if (k == current.length) {
-          //如果k（已选中的数量）等于数组全部的数量
-          this.a = false
-          //设置当前已经全部选中
-        }
-      }
-      if(current.length>0){
-         this.$set(this.current2, current)
-      }else{
-         this.current2=current
+         this.current2[1] = ''
       }
+      this.current2 = [].concat(this.current2)
+    },
+    coolse:function(){
+       this.$emit('province','4545454456456');
     }
   }
 }
@@ -246,6 +117,7 @@ export default {
   padding-left: 30%;
   height: 100%;
   padding-right: 1.5rem;
+  overflow-y: scroll;
 }
 .area_province li {
   padding-left: 30px;

components/select.vue

@@ -1,65 +0,0 @@
-<template>
-  <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>
-    <div id="region" v-if="region[0]">
-      <ul class="left">
-        <li>全国</li>
-        <li>华北</li>
-        <li>华北</li>
-        <li>华北</li>
-        <li>华北</li>
-        <li>华北</li>
-        <li>东北</li>
-      </ul>
-      <ul class="right">
-        <li>全部</li>
-        <li>辽宁省</li>
-        <li>辽宁省</li>
-        <li>辽宁省</li>
-        <li>辽宁省</li>
-        <li>辽宁省</li>
-        <li>辽宁省</li>
-        <li>辽宁省</li>
-      </ul>
-    </div>
-    <ul id="category" v-if="region[1]">
-      <li>535656</li>
-      <li>535656</li>
-      <li>535656</li>
-      <li>535656</li>
-      <li>535656</li>
-    </ul>
-    <div class="bg" v-if="region[0]||region[1]"></div>
-  </div>
-</template>
-<script>
-import '~/assets/select.scss'
-export default {
-  data() {
-    return {
-      region: [false, false],
-      img: ['open', 'hide']
-    }
-  },
-  created: function() {},
-  methods: {
-    regions(e) {
-      const region = [false, false]
-      region[e] = true
-      const img = ['open', 'hide']
-      img[e] = 'hide'
-      this.img = img
-      this.region = region
-    }
-  }
-}
-</script>

components/select2.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="select2">
-    <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>
-    <div class="region" @click="regions(2)">
-      阶段
-      <img src="../static/img/open.png" v-if="!region[2]" alt>
-      <img src="../static/img/hide.png" v-else alt>
-    </div>
-    <div id="region" v-if="region[0]">
-      <ul class="left">
-        <li>全国</li>
-        <li>华北</li>
-        <li>华北</li>
-        <li>华北</li>
-        <li>华北</li>
-        <li>华北</li>
-        <li>东北</li>
-      </ul>
-      <ul class="right">
-        <li>全部</li>
-        <li>辽宁省</li>
-        <li>辽宁省</li>
-        <li>辽宁省</li>
-        <li>辽宁省</li>
-        <li>辽宁省</li>
-        <li>辽宁省</li>
-        <li>辽宁省</li>
-      </ul>
-    </div>
-    <ul  class="categorys" v-if="region[1]">
-      <li>办公展览停车场</li>
-      <li>办公展览停车场</li>
-      <li>办公展览停车场</li>
-      <li>办公展览停车场</li>
-      <li>办公展览停车场</li>
-      <li>办公展览停车场</li>
-    </ul>
-    <ul  class="categorys" v-if="region[2]">
-      <li>工程筹备</li>
-      <li>工程筹备</li>
-      <li>工程筹备</li>
-      <li>工程筹备</li>
-      <li>工程筹备</li>
-      <li>工程筹备</li>
-    </ul>
-    <div class="bg" v-if="region[0]||region[1]||region[2]"></div>
-  </div>
-</template>
-<script>
-import '~/assets/select.scss'
-export default {
-  data() {
-    return {
-      region: [false, false,false],
-     
-    }
-  },
-  created: function() {},
-  methods: {
-    regions(e) {
-      const region = [false, false,false]
-      region[e] = true
-      this.region = region
-    }
-  }
-}
-</script>

pages/index.vue

@@ -4,9 +4,29 @@
       <input type="text" placeholder="请输入搜索内容">
       <span @click="Subscribe">我的订阅</span>
     </div>
-    <sel/>
+    <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>535656</li>
+        <li>535656</li>
+        <li>535656</li>
+        <li>535656</li>
+        <li>535656</li>
+      </ul>
+      <div class="bg" v-if="region[0]||region[1]"></div>
+    </div>
     <ul class="bidlist">
-      <nuxt-link to="/bidding">
+      <nuxt-link to="/me/chooseArea">
         <li>
           <h2>喷口内径测量规招标公告</h2>
           <p class="p1">
@@ -81,21 +101,25 @@
 </template>
 
 <script>
-import sel from '~/components/select.vue'
+import '~/assets/select.scss'
+import areaone from '~/components/areaSelect.vue'
 export default {
   components: {
-    sel
+    areaone
   },
   data() {
     return {
       author: '微信公众号 jinkey-love',
-      http:{}
+      region: [false, false],
+      img: ['open', 'hide'],
+      name: '选择区域',
+      regiont: []
     }
   },
-   fetch ({ app }) {
+  fetch({ app }) {
     //console.log(app.$axios)
   },
-  asyncData ({ app }) {
+  asyncData({ app }) {
     //this.http=app
     // app.$axios.get('/province.html').then((response)=>{
     //     console.log(response)
@@ -103,14 +127,27 @@ export default {
     //     //console.log(response.response);
     //   })
   },
-  created () {
-   this.$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) {
+      console.log(somedata)
+    },
     Subscribe(e) {
       this.$router.push({ path: '/bidding/subList' })
     }

pages/me/chooseArea.vue

@@ -22,13 +22,6 @@ export default {
   components: {
     areaone,
     tit
-  },
-  created() {
-    // this.$axios.get('/province.html').then((response)=>{
-    //     console.log(response)
-    //   }).catch((response)=>{
-    //     //console.log(response.response);
-    //   })
   }
 }
 </script>

pages/project/index.vue

@@ -2,11 +2,36 @@
   <section class="bid">
     <div class="search">
       <input type="text" placeholder="请输入搜索内容">
-      <span>我的订阅</span>
+      <span @click="Subscribe">我的订阅</span>
+    </div>
+    <div class="select2">
+      <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>
+      <div class="region" @click="regions(2)">
+        阶段
+        <img src="../../static/img/open.png" v-if="!region[2]" 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>535656</li>
+        <li>535656</li>
+        <li>535656</li>
+        <li>535656</li>
+        <li>535656</li>
+      </ul>
+      <div class="bg" v-if="region[0]||region[1]||region[2]"></div>
     </div>
-    <sel/>
     <ul class="bidlist">
-      <nuxt-link to="/project/details">
+      <nuxt-link to="/me/chooseArea">
         <li>
           <h2>喷口内径测量规招标公告</h2>
           <p class="p1">
@@ -20,7 +45,7 @@
           </p>
         </li>
       </nuxt-link>
-      <nuxt-link to="/project/details">
+      <nuxt-link to="/bidding">
         <li>
           <h2>喷口内径测量规招标公告</h2>
           <p class="p1">
@@ -34,7 +59,7 @@
           </p>
         </li>
       </nuxt-link>
-      <nuxt-link to="/project/details">
+      <nuxt-link to="/bidding">
         <li>
           <h2>喷口内径测量规招标公告</h2>
           <p class="p1">
@@ -48,7 +73,7 @@
           </p>
         </li>
       </nuxt-link>
-      <nuxt-link to="/project/details">
+      <nuxt-link to="/bidding">
         <li>
           <h2>喷口内径测量规招标公告</h2>
           <p class="p1">
@@ -62,7 +87,7 @@
           </p>
         </li>
       </nuxt-link>
-      <nuxt-link to="/project/details">
+      <nuxt-link to="/bidding">
         <li>
           <h2>喷口内径测量规招标公告</h2>
           <p class="p1">
@@ -81,25 +106,73 @@
 </template>
 
 <script>
-import sel from '~/components/select2.vue'
+import '~/assets/select.scss'
+import areaone from '~/components/areaSelect.vue'
 export default {
   components: {
-    sel
+    areaone
   },
   data() {
     return {
-      author: '微信公众号 jinkey-love'
+      author: '微信公众号 jinkey-love',
+      region: [false, false, false],
+      img: ['open', 'hide'],
+      name: '选择区域',
+      regiont: []
     }
   },
+  fetch({ app }) {
+    
+  },
+  asyncData({ app }) {
+   app.$axios.post('/project.html',{openid:45454545,p:1,pagenum:2}).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)
+      })
+      .catch(response => {})
+  },
   methods: {
-    addTodo(e) {
-      this.$store.commit('todos/add', e.target.value)
-      e.target.value = ''
+    regions(e) {
+      const region = [false, false, false]
+      region[e] = true
+      const img = ['open', 'hide']
+      img[e] = 'hide'
+      this.img = img
+      this.region = [].concat(region)
+    },
+    province: function(somedata) {
+      const region =[false, false, false]
+      this.region = [].concat(region)
+      console.log(somedata)
+    },
+    Subscribe(e) {
+      this.$router.push({ path: '/bidding/subList' })
     }
   }
 }
 </script>
 
-<style scoped>
-
+<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>