个人物料页面完成

components/personalMaterial/PersonalMaterial.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="personal-material">
-    <a href="">&lt;返回上一层</a>
+    <a @click="goLastPage">&lt;返回上一层</a>
     <div class="personal-material-header">
       <p><i class="fa fa-exclamation-circle"></i>抱歉，您的账户未绑定企业，暂无卖家权限！</p>
       <a href="">查看申请记录</a>
@@ -11,7 +11,7 @@
         <div>
           <p>绑定企业</p>
           <div class="search-content">企业全称：<input type="text" class="form-control" placeholder="请输入企业全称"><span>检测</span></div>
-          <!--<div class="result-content">
+          <div class="result-content" v-if="showSearchResultStatus == 1">
             <p>深圳市又软科技有限公司</p>
             <div class="result-text">
               <span>管理员</span>
@@ -23,8 +23,8 @@
             </div>
             <a href="">申请绑定</a>
             <div class="result-remind">管理员审核通过后成功绑定</div>
-          </div>-->
-          <p class="no-result-content">
+          </div>
+          <p class="no-result-content" v-if="showSearchResultStatus == 2">
             深圳市优软科技有限公司 <span>(未开店)</span>
           </p>
         </div>
@@ -50,34 +50,64 @@
         </div>
       </div>
     </div>
-    <div class="modal-wrap">
-    </div>
-    <!--<div class="com-del-box">
+    <div class="modal-wrap" v-show="showRemindBox || showApplyRecord"></div>
+    <div class="com-del-box" v-if="showRemindBox">
       <div class="title">
         <i></i>
       </div>
       <p><img src="/images/material/check.png" alt="">绑定申请提交成功！</p>
       <div class="result">审批结果将以短信通知，请保持手机通畅。</div>
       <div class="remind">弹窗将在 <span>5秒</span> 后自动关闭</div>
-    </div>-->
-    <div class="apply-record">
+    </div>
+    <div class="apply-record" v-if="showApplyRecord">
       <div class="title">申请记录 <img src="/images/material/apply-close.png" alt=""></div>
-      <table>
-        <thead>
-        <tr>
-          <th>企业名称</th>
-          <th>管理员</th>
-          <th>申请时间</th>
-          <th>状态</th>
-        </tr>
-        </thead>
-        <tbody>
-
-        </tbody>
-      </table>
+      <div class="record-wrap">
+        <div class="record-title">
+          <span>企业名称</span>
+          <span>管理员</span>
+          <span>申请时间</span>
+          <span>状态</span>
+        </div>
+        <ul>
+          <li>
+            <span>深圳市哟软商城科技有限公司</span>
+            <span>哈哈哈</span>
+            <span>2018-12-12 11:11:11</span>
+            <span class="green-text">待审核</span>
+          </li>
+          <li>
+            <span>深圳市哟软商城科技有限公司</span>
+            <span>哈哈哈</span>
+            <span>2018-12-12 11:11:11</span>
+            <span class="red-text">未通过</span>
+          </li>
+          <li>
+            <span>深圳市哟软商城科技有限公司</span>
+            <span>哈哈哈</span>
+            <span>2018-12-12 11:11:11</span>
+            <span>已通过</span>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
+<script>
+  export default {
+    data () {
+      return {
+        showApplyRecord: false,
+        showRemindBox: false,
+        showSearchResultStatus: 0
+      }
+    },
+    methods: {
+      goLastPage: function () {
+        window.history.back(-1)
+      }
+    }
+  }
+</script>
 <style lang="scss" scoped>
   .personal-material {
     width: 1190px;
@@ -336,5 +366,61 @@
         }
       }
     }
+    .record-wrap {
+      padding: 0 18px;
+      .record-title {
+        height: 28px;
+        line-height: 28px;
+        background: #8eb0f5;
+        border: 1px solid #e8e8e8;
+        color: #fff;
+      }
+      ul {
+        max-height: 150px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        li {
+          border-bottom: 1px solid #e8e8e8;
+          height: 30px;
+          &:nth-child(even) {
+            background: #edf2fd;
+          }
+          &:nth-child(odd) {
+            background: #f7f9fe;
+          }
+          span {
+            line-height: 27px;
+            position: relative;
+            top: 2px;
+            &.green-text {
+              color: #379b1d;
+            }
+            &.red-text {
+              color: #f51c24;
+            }
+          }
+        }
+      }
+      span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+        text-align: center;
+        &:nth-child(1) {
+          width: 220px;
+          padding: 0 10px 0 22px;
+        }
+        &:nth-child(2) {
+          width: 68px;
+        }
+        &:nth-child(3) {
+          width: 165px;
+        }
+        &:nth-child(4) {
+          width: 82px;
+        }
+      }
+    }
   }
 </style>