加入vuex与路由鉴权

assets/a.scss

@@ -95,7 +95,7 @@ body {
         height    : 44px;
         padding   : 7px 17px;
         background: #fff;
-        
+
         input {
             width              : 73%;
             height             : $a*60px;
@@ -108,7 +108,7 @@ body {
             background-size    : 20px;
             padding-left       : 40px;
             color              : rgba(153, 153, 153, 1);
-            outline:none;
+            outline            : none;
         }
 
         span {
@@ -192,4 +192,144 @@ table {
     word-break  : break-all;
 }
 
-$colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722
+$colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
+
+// 支付弹窗
+.payment {
+
+    position             : fixed;
+    width                : 100%;
+    left                 : 0;
+    top                  : 0;
+    height               : 100%;
+    background-color     : rgba(0, 0, 0, .5);
+    background-position-x: 20px;
+    background-size      : 50%;
+
+    div {
+        height: auto;
+    }
+
+    >div {
+        position        : absolute;
+        bottom          : 0;
+        left            : 0;
+        background-color: #fff;
+        padding         : 20px 0;
+        width           : 100%;
+        max-height      : 311px;
+
+        >p {
+            margin-bottom: 20px;
+            font-size    : 16px;
+            font-family  : PingFang-SC-Bold;
+            font-weight  : bold;
+            color        : rgba(32, 32, 32, 1);
+            padding      : 0 15px;
+        }
+
+        .auto {
+
+            overflow-x: scroll;
+
+            ul {
+                padding   : 15px;
+                overflow-x: auto;
+                width     : 390px;
+                border-top: .5px solid #afafaf;
+
+                li {
+                    width       : 107px;
+                    text-align  : center;
+                    display     : inline-block;
+                    margin-right: 10px;
+
+                    p {
+                        line-height  : 58px;
+                        width        : 100%;
+                        height       : 64px;
+                        text-align   : center;
+                        display      : inline-block;
+                        background   : rgba(255, 255, 255, 1);
+                        border       : 2px solid rgba(255, 92, 86, 1);
+                        border-radius: 16px;
+                        color        : red;
+
+
+                        span {
+                            font-size  : 18px;
+                            font-family: PingFang-SC-Bold;
+                            font-weight: bold;
+
+                            i {
+                                font-size : 14px;
+                                font-style: normal;
+                            }
+                        }
+                    }
+
+                    >span {
+                        font-size  : 22px*0.5;
+                        font-family: PingFang-SC-Medium;
+                        font-weight: 500;
+                        color      : rgba(175, 175, 175, 1);
+                    }
+
+                }
+
+                .discount {
+                    p {
+                        line-height: normal;
+                        padding-top: 8px;
+                    }
+
+
+                    .del {
+                        display        : block;
+                        font-size      : 26px*0.5;
+                        font-family    : PingFang-SC-Medium;
+                        font-weight    : 500;
+                        text-decoration: line-through;
+                        color          : rgba(204, 204, 204, 1);
+                    }
+                }
+            }
+        }
+
+        .confirm {
+            border-top: .5px solid rgba(175, 175, 175, 1);
+            ;
+            padding: 15px 15px 0 15px;
+            width  : 100%;
+
+            button {
+                width        : 90%;
+                height       : 40px;
+                background   : rgba(255, 92, 92, 1);
+                border-radius: 8px;
+                border       : none;
+                margin       : auto;
+                display      : block;
+                color        : #fff;
+                font-size    : 16px;
+                font-family  : PingFang-SC-Medium;
+                font-weight  : 500;
+            }
+
+            p {
+                font-size  : 29px*0.5;
+                font-family: PingFang-SC-Medium;
+                font-weight: 500;
+                color      : rgba(175, 175, 175, 1);
+                text-align : center;
+                margin-top : 10px;
+
+                span {
+                    color: red;
+                }
+            }
+        }
+
+    }
+
+}

components/payment.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="payment">
+    <div>
+      <p>
+        沈阳联通2019-2021年消防设备设施维护维修采
+        购项目招标公告
+      </p>
+      <div class="auto">
+        <ul>
+          <li class="discount">
+            <p>
+              <span>
+                <i>￥</i>5
+              </span>
+              <span class="del">
+                <i>￥</i>5
+              </span>
+            </p>
+            <span>查看本条消息</span>
+          </li>
+          <li class="discount">
+            <p>
+              <span>
+                <i>￥</i>5
+              </span>
+              <span class="del">
+                <i>￥</i>5
+              </span>
+            </p>
+            <span>查看本条消息</span>
+          </li>
+          <li class="discount">
+            <p>
+              <span>
+                <i>￥</i>5
+              </span>
+              <span class="del">
+                <i>￥</i>5
+              </span>
+            </p>
+            <span>查看本条消息</span>
+          </li>
+        </ul>
+      </div>
+      <div class="confirm">
+        <button>确认支付</button>
+        <p>
+          会员更划算哦！点击
+          <span>成为会员</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      selected: ['selected']
+    }
+  },
+  methods: {
+    addTodo(e) {
+      console.log(global.name)
+    }
+  },
+  watch: {}
+}
+</script>

components/table.vue

@@ -49,6 +49,15 @@ export default {
       }
       this.selected = selected
     }
+  },
+  watch: {
+    $route: {
+      handler: function(val, oldVal) {
+        this.addTodo()
+      },
+      // 深度观察监听
+      deep: true
+    }
   }
 }
 </script>

layouts/default.vue

@@ -15,6 +15,7 @@ export default {
       author: '微信公众号 jinkey-love'
     }
   },
+  
   methods: {
     addTodo(e) {
       this.$store.commit('todos/add', e.target.value)

nuxt.config.js

@@ -30,7 +30,7 @@ export default {
    ** Plugins to load before mounting the App
    */
   plugins: [
-    { src: '~plugins/axios', ssr: true }
+    { src: '~plugins/axios', ssr: true },
   ],
 
   /*

pages/bidding/index.vue

@@ -186,18 +186,53 @@
           </tr>
           <tr>
             <td class="t">设备名称:</td>
-            <td class="con">电风扇</td>
+            <td class="con">{{$store.state.info}}</td>
           </tr>
         </tbody>
       </table>
     </div>
-    <div class="money">查看详情</div>
+    <div class="money" v-if="!payment" @click="payments">查看详情</div>
+    <payment v-else/>
   </section>
 </template>
-
 <script>
 import '~/assets/details.scss'
-export default {}
+import payment from '~/components/payment.vue'
+import { mapMutations } from 'vuex'
+export default {
+  components: {
+    payment
+  },
+  computed: {
+    todos() {
+      return this.$store.state.todos.list
+    }
+  },
+  data() {
+    return {
+      payment: false,
+      url: this.$route.path
+    }
+  },
+  created: function() {
+    console.log(this.$store.state.counter)
+    this.$store.commit('equal',30)
+  },
+  mounted() {
+    console.log(this.$store.state.counter)
+  },
+  beforeDestroy: function() {
+    if (this.payment) {
+      this.$router.push({ path: this.url })
+      this.payment = false
+    }
+  },
+  methods: {
+    payments(e) {
+      this.payment = true
+    }
+  }
+}
 </script>
 
 <style>

plugins/auth.js

@@ -0,0 +1,7 @@
+export default ({ app }) => {
+  console.log($store)
+  app.router.beforeEach((to, from, next) => {
+      console.log(this)
+      next();
+  });
+};

store/index.js

@@ -0,0 +1,9 @@
+export const state = () => ({
+  counter: 0
+})
+
+export const mutations = {
+  equal (state,val) {
+    state.counter=val
+  }
+}

store/todos.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+    list: []
+  })
+  
+  export const mutations = {
+    add (state, text) {
+      state.list.push({
+        text: text,
+        done: false
+      })
+    },
+    remove (state, { todo }) {
+      state.list.splice(state.list.indexOf(todo), 1)
+    },
+    toggle (state, todo) {
+      todo.done = !todo.done
+    }
+  }