init

client/src/components/Modal.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+      <!-- 登录框 -->
+      <div class="md-modal modal-msg md-modal-transition" :class="{'md-show':mdShow}">
+        <div class="md-modal-inner">
+          <div class="md-top">
+            <div class="md-title">信息展示</div>
+            <button class="md-close">Close</button>
+          </div>
+          <div class="md-content">
+            <div class="confirm-tips">
+                <slot name="message"> </slot>
+            </div>
+            <div class="btn-wrap">
+                <slot name="btnGroup"> </slot>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="md-overlay" v-if="mdShow">
+      </div>
+
+  </div>
+</template>
+<script>
+export default {
+  props:['mdShow']
+}
+</script>

client/src/router/index.js

@@ -2,13 +2,19 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Hello from '@/components/Hello'
 import GoodsList from '@/view/GoodsList'
+import User from '@/view/user/index'
 
 Vue.use(Router)
 
 export default new Router({
     routes: [{
-        path: '/',
-        name: 'GoodsList',
-        component: GoodsList
-    }]
+            path: '/',
+            name: 'GoodsList',
+            component: GoodsList
+        },
+        {
+            path: '/user/:stark?/:xiaorong?', //?代表可写，也可以不写 /user/1
+            component: User
+        },
+    ]
 })

client/src/view/GoodsList.vue

@@ -48,12 +48,36 @@
         </div>
     </div>
   <FooterNav/>
+
+    <!-- 在未登录的情况下 -->
+    <modal :mdShow="mdShow">
+        <p slot="message">请先登陆，否则无法加入购物车</p>
+        <div slot="btnGroup">
+            <a href="javascipt:;" class="btn-login" @click="mdShow = false">
+                关闭</a>
+        </div>
+    </modal>
+
+    <!-- 在登录的情况下 -->
+    <modal :mdShow="mdShowCart">
+        <p slot="message">加入购物车成功</p>
+        <div slot="btnGroup">
+            <a href="javascipt:;" class="btn--m" @click="mdShow = false">
+                继续购物</a>
+            <router-link class="btn btn-m" to="/cart">
+            查看购物车</router-link>
+        </div>
+    </modal>
+
   </div>
 </template>
 <script>
 import HeadNav from '@/components/Head'
 import NavBread from '@/components/NavBread'
 import FooterNav from '@/components/Footer'
+import Modal from '@/components/Modal'
+import jsonp from 'jsonp'
+
 // import axios from 'axios'
 export default {
     data(){
@@ -65,6 +89,8 @@ export default {
             page:1,
             pagesize:8,
             flag:false,
+            mdShow:false,
+            mdShowCart:false,
             priceFilter:[
                 {
                     startPrice:'0',
@@ -88,10 +114,12 @@ export default {
     components:{
         HeadNav,
         NavBread,
-        FooterNav
+        FooterNav,
+        Modal
     },
     created(){
         this.getGoods();
+        this.jsonps();
     },
     methods:{
         // getGoodsList(){
@@ -156,11 +184,18 @@ export default {
             }).then((result)=>{
                 let res = result.data;
                 if(res.status == 1){
-                     alert('加入购物车失败！')
+                    this.mdShow = true;
+                    //  alert('加入购物车失败！')
                 }else{
-                    alert('加入购物车成功！')
+                    // alert('加入购物车成功！')
+                    this.mdShowCart = true;
                 }
             })
+        },
+        jsonps:function(){
+            jsonp('https://api-m.mtime.cn/PageSubArea/HotPlayMovies.api?locationId=290',{param:'cb'},function(data){
+                console.log(data);
+            })
         }
   
     }

client/src/view/user/index.vue

@@ -0,0 +1,92 @@
+<template>
+    <div>
+        <!-- user 页面 -->
+        <router-link :to="'/user/' + item.id" :key='index' v-for="(item,index) in userList"> {{item.userName}}</router-link>
+        <div class="" v-if="userInfo.userName">
+            <p> 姓名：{{userInfo.userName}}</p>
+            <p> 性别：{{userInfo.sex}}</p>
+            <p> 爱好：{{userInfo.hobby}}</p>
+        </div>
+        <!-- 他的关注， 他的分享 -->
+        <div v-if="userInfo.userName">
+            <router-link exact to="?info=follow" > 他的关注 </router-link>
+            <router-link exact to="?info=share" > 他的分享 </router-link>
+
+            <div>
+                {{$route.query}}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    // import $ from 'jquery'
+
+    let data = [
+      {
+        id: 1,
+        tip: 'vip',
+        userName: 'lishuang',
+        sex: '男',
+        hobby: 'coding'
+      },
+      {
+        id: 2,
+        tip: 'vip',
+        userName: 'stark',
+        sex: '男',
+        hobby: 'readbook'
+      },
+      {
+        id: 3,
+        tip: 'common',
+        userName: 'xiaorong',
+        sex: '男',
+        hobby: '女'
+      }
+    ]
+    export default {
+        data () {
+            return {
+              userList:data,
+              userInfo:{}
+            }
+        },
+        watch:{
+            // 因为 created 只调用一次所有在这监听
+            // 当url 变化后，这可以实时监听
+            $route() {
+                this.getData()
+            }
+        },
+        created () {
+            // 渲染这个组件会调用一次这个生命周期函数
+            // 复用这个组件，这个函数就不会再次调用了，
+            this.getData()
+            this.useJq()
+        },
+        methods:{
+            getData(){
+                let id = this.$route.params.stark;
+                console.log(this.$route)
+
+                if(id){
+                    this.userInfo = this.userList.filter((item)=>{
+                        return item.id == id
+                    })[0];
+                }else{
+                    this.userInfo = {}
+                }
+
+                console.log(this.userInfo);
+            },
+            useJq(){
+            //    let html =  $('#stark').val()
+                console.log(html)
+            }
+        }
+    }
+</script>
+
+<style>
+</style>