kun 19/10/11 17

src/views/project/Project.vue

@@ -5,7 +5,7 @@
       <!-- 公告 -->
       <div class="top">
         <img :src="imgUrl.xlb" alt />
-        <div>
+        <div v-if="bgValue.announcement">
           <span>{{bgValue.announcement.name + bgValue.announcement.pro_content}}</span>
           <time>{{bgValue.announcement.protime}}</time>
         </div>
@@ -43,21 +43,33 @@
         </div>
         <!-- 下拉框 -->
         <div class="select">
-          <select class="one" name="date">
+          <div class="block">
+            <el-date-picker
+              v-model="value_date"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </div>
+          <!-- <select class="one" name="date">
             <option value>2017/10/14 至 2017/10/15</option>
             <option value>2017/10/14 至 2017/10/15</option>
-          </select>
-          <select class="two" name="type">
+          </select>-->
+          <select class="two" v-model="type_value" name="type">
+            <option>全部</option>
             <template v-for="(type,index) in bgValue.type">
               <option :key="index" :value="index">{{type}}</option>
             </template>
           </select>
-          <select class="two" name="type">
+          <select class="two" v-model="status_value" name="status">
+            <option>全部</option>
             <template v-for="(status,index) in bgValue.status">
               <option :key="index" :value="index">{{status}}</option>
             </template>
           </select>
-          <select class="three" name="area">
+          <select class="three" v-model="area_value" name="area">
+            <option>全部</option>
             <template v-for="(area,index) in bgValue.area">
               <option :key="index" :value="index">{{area}}</option>
             </template>
@@ -117,7 +129,7 @@
             @current-change="handleCurrentChange"
             :current-page="currentPage"
             :page-size="pageSize"
-            :pager-count="7"
+            :pager-count="5"
             background
             layout="prev, pager, next"
             :total="totalCount"
@@ -157,12 +169,17 @@ export default {
       text: ["全部"],
       sub: 0,
       bgData: [],
-      bgValue: []
+      bgValue: [],
+      type_value: '全部',
+      status_value: '全部',
+      area_value: '全部',
+      value_date: ''
     };
   },
   computed: {},
   watch: {},
   methods: {
+    /** 获取下拉框数据 */
     getDataOne() {
       let _this = this
       this.$http({
@@ -183,20 +200,20 @@ export default {
         })
 
     },
+    /** 获取项目列表 */
     getDataTwo() {
       let _this = this
       this.$http({
         method: 'get',
         url: 'v1/project/list',
         params: {
-          page: _this.currentPage
+          page: _this.currentPage,
+          num: 6
         }
       }).then(res => {
         if (res.data.code === 200) {
           _this.bgData = res.data.data.data
-          _this.totalCount = _this.bgData.allNum
-          _this.pageSize = _this.bgData.info.length
-          console.log(_this.bgData)
+          _this.totalCount = _this.bgData.allPage
         } else {
           _this.$message.error('请求数据有问题！')
         }
@@ -274,7 +291,7 @@ export default {
       */
     },
     handleSizeChange(val) {
-      this.pageNum = val;
+      this.pageSize = val;
       this.getPackData();
     },
     handleCurrentChange(val) {
@@ -298,10 +315,16 @@ export default {
     getPackData() { }
   },
   created() {
-    this.currentPage = Number(localStorage.getItem("pagination")) || 1;
+    this.currentPage = Number(localStorage.getItem("page")) || 1;
     this.handleCurrentChange(this.currentPage);
     this.getDataOne()
-    this.getDataTwo()
+  },
+   beforeUpdate() {
+    localStorage.setItem('page', this.currentPage)
+  },
+  beforeDestroy() {
+    // localStorage.clear()
+    localStorage.setItem('page',1)
   },
   mounted() { }
 };
@@ -533,6 +556,43 @@ export default {
         margin-top: 50px;
         margin-bottom: 50px;
 
+        .block {
+          /deep/.el-range-editor.el-input__inner {
+            width: 325px;
+            background: url("../../../static/img/xa.png") 280px center no-repeat;
+            background-color: #f9f8f8;
+          }
+
+          /deep/.el-date-editor .el-range-input {
+            background-color: #f9f8f8;
+            font-family: "MicrosoftYaHei";
+            font-size: 18px;
+            font-weight: normal;
+            font-stretch: normal;
+            line-height: 33px;
+            letter-spacing: 0px;
+            color: #666666;
+          }
+
+          /deep/.el-input__inner {
+            border: 1px solid #c7c7c7;
+          }
+
+          /deep/.el-date-editor .el-range-separator {
+            font-family: "MicrosoftYaHei";
+            font-size: 18px;
+            font-weight: normal;
+            font-stretch: normal;
+            line-height: 33px;
+            letter-spacing: 0px;
+            color: #666666;
+          }
+
+          /deep/ .el-input__icon {
+            width: 0px;
+          }
+        }
+
         .one {
           padding-left: 30px;
           box-sizing: border-box;