preview

.env.development

@@ -0,0 +1 @@
+VUE_APP_publicPath=/

.env.production

@@ -0,0 +1 @@
+VUE_APP_publicPath=/shop/m/

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "element-ui": "^2.4.11",
     "qs": "^6.6.0",
+    "vant": "^2.11.2",
     "vue": "^2.5.21",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"

src/App.vue

@@ -1,7 +1,7 @@
 <template>
-<div id="app">
+    <div id="app">
          <router-view />
-</div>
+    </div>
 </template>
 
 <style lang="less">
@@ -9,20 +9,13 @@
     font-family: "Avenir", Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    text-align: center;
     color: #2c3e50;
 }
 
-#nav {
+.van-card__thumb{
-    padding: 30px;
+    width: 100px !important;
-
+    height: 100px !important;
-    a {
-        font-weight: bold;
-        color: #2c3e50;
-
-        &.router-link-exact-active {
-            color: #42b983;
-        }
-    }
 }
 </style>
+
+

src/Layout.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <div id="app-content" style="padding-bottom:50px;">
+            <keep-alive>
+                <!-- 缓存加载过的界面 -->
+                <router-view />
+            </keep-alive>
+        </div>
+        <van-tabbar v-model="active">
+            <van-tabbar-item name="home" replace to="/" icon="home-o">首页</van-tabbar-item>
+            <van-tabbar-item name="cate" replace to="/cate" icon="apps-o">分类</van-tabbar-item>
+            <van-tabbar-item name="cart" replace to="/cart" icon="chat-o">购物车</van-tabbar-item>
+            <van-tabbar-item name="my" replace to="/my" icon="user-o">我的</van-tabbar-item>
+        </van-tabbar>
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return {
+            active: 'home',
+        }
+    }
+}
+</script>

src/components/GoodsList.vue

@@ -0,0 +1,118 @@
+<template>
+    <div class="goods-list">
+        <div v-if="goodsList.length >0" class="goods-list-wrapper list-wrapper row">
+            <slot name="before_list"></slot>
+            <div v-for="g in goodsList" :key="g.id" class="list-item">
+                <router-link :to="'/goods-detail?id='+g.id" class="goods-item ">
+                    <div class="p">
+                        <a href="#" title=""><img class="p-pic" :src="g.picture"></a>
+                    </div>
+                    <div class="desc">
+                        <a href="" class="p-title" v-text="g.title">...</a>
+                        <div class="p-info">
+                            <div class="p-price">¥ <strong>{{g.sell_price}}</strong></div>
+                            <div class="p-ext">
+                                <span class="d-num">
+                                    <span class="font-num" v-text="g.sell_count"></span>人购买
+                                </span>
+                                <!-- <span class="d-area">杭州</span> -->
+                            </div>
+                        </div>
+                    </div>
+                </router-link>
+            </div>
+            <slot name="end_list"></slot>
+        </div>
+        <div class="list-is-empty" v-else>
+            <span>没有商品哟~</span>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name:'GoodsList',
+    props:{
+        goodsList:{
+            type:Array,
+            default(){
+                return []
+            }
+        }
+    },
+    data(){
+        return {}
+    }
+}
+</script>
+<style lang="less">
+
+.clear-float{
+    &:after{
+        content: ' ';
+        display: block;
+        clear: both;
+    }
+}
+.goods-list-wrapper{
+    padding: 0 10px;
+    .clear-float;
+    .list-item{
+        width: 50%;
+        float:left;
+        
+        &:nth-child(2n){
+            .goods-item{
+                margin-right:0px;
+                margin-left:5px;
+            }
+        }
+    }
+    .goods-item{
+        display: block;
+        background-color: #ffffff;
+        margin-bottom: 10px;
+        margin-right:5px;
+        border-radius: 5px;
+        overflow: hidden;
+    }
+    .p{
+        a,img{
+            display: block;
+            width: 100%;
+        }
+    }
+    .desc{
+        padding: 6px 7px 7px 6px;
+    }
+    .p-title{
+        text-decoration: none;
+        display: block;
+        font-size: 13px;
+        overflow: hidden;
+        height: 40px;
+        line-height: 20px;
+        color: #1a1a1a;
+        text-align: left;
+        margin-bottom: 5px;
+        text-overflow: ellipsis;
+    }
+    .p-info{
+        line-height: 20px;
+        display: flex;
+        color:#999;
+    }
+    .p-price{
+        color: rgb(255, 80, 0);
+        font-family: helvetica;
+        font-size: 14px;
+        strong{
+            font-size:16px;
+        }
+    }
+    .p-ext{
+        flex: 1;
+        text-align: right;
+        font-size: 12px;
+    }
+}
+</style>

src/components/http.js

@@ -1,30 +1,33 @@
 import qs from 'qs';
-import { async } from 'q';
+// import { async } from 'q';
 
 const baseUri = "http://127.0.0.1:8080/api";
-const processResponse = (promise)=>{
+const processResponse = (promise) => {
-    return new Promise((resolve,reject)=>{
+    return new Promise((resolve, reject) => {
-        promise.then(ret=>{
+        promise.then(ret => {
-            if(typeof(ret['errcode']) != 'undefined'){
+            if (typeof (ret['code']) != 'undefined') {
-                if(ret.errcode != 0){
+                if (ret.code != 0) {
-                    reject(ret.message);
+                    reject(new Error(ret.message));
                     return;
                 }
             }
             resolve(ret);
-        }).catch(err=>{
+        }).catch(err => {
             reject(err);
         })
     })
 }
-const http = {
+class Api {
+    constructor(baseUri) {
+        this.baseUri = baseUri;
+    }
     $getUrl(url) {
-        return baseUri + url;
+        return this.baseUri + url;
-    },
+    }
     async get(url) {
         const resp = await fetch(this.$getUrl(url));
         return processResponse(resp.json());
-    },
+    }
     async post(url, data) {
         const resp = await fetch(this.$getUrl(url), {
             body: qs.stringify(data),
@@ -36,4 +39,8 @@ const http = {
         return processResponse(resp.json());
     }
 }
-export default http;
+const http = new Api(baseUri);
+export default {
+    http,
+    shop:new Api('https://fj-server.os.wm-app.xyz/shop/api')
+};

src/main.js

@@ -3,9 +3,14 @@ import App from './App.vue'
 import 'element-ui/lib/theme-chalk/index.css'
 import ElementUI from "element-ui"
 import router from './router'
+import Vant from 'vant';
+import 'vant/lib/index.css';
+import { Lazyload } from 'vant';
 
 Vue.config.productionTip = false
 Vue.use(ElementUI)
+Vue.use(Vant);
+Vue.use(Lazyload);
 
 new Vue({
   router,

src/router.js

@@ -1,31 +1,55 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from './views/Home.vue'
+import Layout from './Layout.vue'
 import Vuex from 'vuex'
-import store from './components/Store'
+// import store from './components/Store'
 
 Vue.use(Vuex)
 Vue.use(Router)
 const router = new Router({
 	routes: [{
+
+		path: '/',
+		component: Layout,
+		children: [
+			{
 				path: '/',
 				name: 'home',
-      component: Home
+				component: Home,
+			},
+			{
+				path: '/cate',
+				name: 'Category',
+				component: () => import( /* webpackChunkName: "Category" */ './views/Category.vue')
+			}
+		]
 	},
 	{
 		path: '/login',
-      name: 'login',
+		name: 'Login',
-      component: () => import( /* webpackChunkName: "about" */ './views/Login.vue')
+		component: () => import( /* webpackChunkName: "Login" */ './views/Login.vue')
+	},
+	{
+		path: '/goods-list',
+		name: 'GoodsList',
+		component: () => import( /* webpackChunkName: "GoodsList" */ './views/GoodsList.vue')
+	},
+	{
+		path: '/goods-detail',
+		name: 'GoodsDetail',
+		component: () => import( /* webpackChunkName: "GoodsDetail" */ './views/Detail.vue')
 	}
+
 	]
 });
-router.beforeEach((to,from,next)=>{
+router.beforeEach((to, from, next) => {
-  if(to.path != '/login'){
+	// if(to.path != '/login'){
-    if(store.state.user.userId < 1){
+	//   if(store.state.user.userId < 1){
-      next({path:'/login'});
+	//     next({path:'/login'});
-      return;
+	//     return;
-    }
+	//   }
-  }
+	// }
 	next();
 });
 

src/views/Category.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="category" style="display: flex;flex-direction: column;height: calc(100vh - 50px);">
+        <van-nav-bar title="标题"
+            left-text="返回"
+            left-arrow
+            @click-left="$router.back()">
+            <template #title>
+                <van-search v-model="searchValue" placeholder="请输入搜索关键词" />
+            </template>
+        </van-nav-bar>
+        <van-tree-select style="flex:1"
+            :items="items"
+            :active-id.sync="activeId"
+            :main-active-index.sync="activeIndex"
+            @click-item="onSelect"
+        />
+    </div>
+
+</template>
+<script>
+export default {
+    name: "Category",
+    data() {
+        
+        return {
+            searchValue:'',
+            items: [
+                {
+                    text: "手机数码",
+                    children: [
+                        { text: "手机" },
+                        { text: "数据线" },
+                        { text: "充电宝" },
+                        { text: "耳机" }
+                    ]
+                },
+                {
+                    text: "女装",
+                    children: [
+                        { text: "针织衫" },
+                        { text: "连衣裙" }
+                    ]
+                },
+                {
+                    text: "电脑",
+                    children: [
+                        { text: "笔记本" },
+                        { text: "显卡" },
+                        { text: "硬盘" },
+                        { text: "SSD" }
+                    ]
+                },
+                {
+                    text: "家用电器",
+                    children: [
+                        { text: "电视" },
+                        { text: "冰箱" },
+                        { text: "洗衣机" }
+                    ]
+                }
+            ],
+            activeId: 1,
+            activeIndex: 0
+        };
+    },
+    mounted(){
+        
+        document.title = '分类'
+    },
+    methods:{
+        onSelect(data){
+            this.$router.push('/goods-list?cate=' +data.text)
+        }
+    }
+};
+</script>

src/views/Detail.vue

@@ -0,0 +1,199 @@
+<style lang="less" scoped>
+.g-info{
+    padding: 12px 18px;
+    position: relative;
+    background: #fff;
+    margin-bottom: 10px;
+}
+.g-title{
+    position: relative;
+    color: #262626;
+    overflow: hidden;
+    font-weight: 400;
+    line-height: 18px;
+    h1{
+        font-weight: 700;
+        font-size: 18px;
+        line-height: 24px;
+        padding-right: 0;
+        margin:0;
+    }
+}
+.desc{
+    color: #666;
+    padding: 18px 0 0;
+    line-height: 1.3;
+    position: relative;
+    font-size: 12px;
+    max-height: 46px;
+    overflow: hidden;
+}
+.g-price{
+    line-height: 20px;
+    margin-bottom: 5px;
+    font-size: 12px;
+    color: #f2270c;
+    span{
+        font-size: 16px;
+    }
+    .v{
+        font-size: 32px;
+        line-height: 30px;
+        display: inline-block;
+    }
+}
+.page-detail{
+    background-color: #eee;
+}
+.g-image{
+    background: #fff;
+}
+.btn-go-back{
+    border: none;
+    position: fixed;
+    left:20px;
+    top:20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    .iii{
+        color: #fff;
+        font-size: 24px;
+        left: -2px;
+        top: 1px;
+    }
+}
+</style>
+
+<template>
+    <div class="page-detail">
+        <van-button class="btn-go-back" @click="$router.back()">
+            <van-icon name="arrow-left" class="iii" />
+        </van-button>
+        <div class="goods-detail">
+            <div class="g-image">
+                 <img :src="g.picture" style="width:100%;display:block;" />
+            </div>
+            <div class="g-info">
+                <div class="g-price">
+                    <span>￥</span>
+                    <span class="v">{{g.sell_price}}</span>
+                </div>
+                <div class="g-title">
+                    <h1>{{g.title}}</h1>
+                </div>
+                <div class="desc">{{g.desc}}</div>
+                <div style="display: flex;overflow: hidden;background-color: rgb(255, 255, 255);padding-top: 10px;font-size: 14px;color: #aaa;white-space: nowrap; line-height: 17px;">
+                    <div style="flex:1;text-align:left;"><span>快递: 快递包邮</span></div>
+                    <div style="flex:1;text-align:center;"><span>销量 {{g.sell_count | fm}}</span></div>
+                    <div style="flex:1;text-align:right;"><span>上海</span></div>
+                </div>
+            </div>
+            <van-coupon-cell :coupons="c.list" :chosen-coupon="c.chosen" @click="c.show = true"/>
+                <!-- 优惠券列表 -->
+                <van-popup v-model="c.show" round position="bottom" 
+                    style="height: 90%; padding-top: 4px;">
+                <van-coupon-list :coupons="c.list" :chosen-coupon="c.chosen"
+                    :disabled-coupons="c.disabled" @change="onChange" :show-exchange-bar="false"/>
+            </van-popup>
+            <div style="height:50px;"></div>
+        </div>
+        <van-goods-action>
+            <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
+            <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" />
+            <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
+            <van-goods-action-button color="#be99ff" type="danger" text="加入购物车" @click="buy" />
+        </van-goods-action>
+    </div>
+</template>
+<script>
+import http from "../components/http";
+import {Dialog,Notify} from 'vant'
+const coupon = {
+    available: 1,
+    condition: '无使用门槛\n满21元可以使用',
+    reason: '',
+    value: 20,
+    name: '满21减20元',
+    startAt: 1489104000,
+    endAt: 1514592000,
+    valueDesc: '20',
+    unitDesc: '元',
+}
+export default {
+    name:'GoodsDetail',
+    data() {
+        return {
+            token:false,
+            id: "",
+            loading: false,
+            c:{
+                chosen: -1,
+                show:false,
+                list: [coupon],
+                disabled: [],
+            },
+            g:{
+                title:'',
+                picture:''
+            }
+        };
+    },
+    filters: {
+        fm: function (value) {
+            if (!value) return ''
+            value = parseInt(value)
+            if(value > 9999){
+                value = value / 10000
+                value = value.toFixed(1);
+                return value + '万';
+            }
+            return value
+        }
+    },
+    mounted() {
+        this.token =  window.localStorage.getItem('gg_user_token');
+        this.id = this.$route.query.id;
+        this.loadData();
+    },
+    methods:{
+        onChange(index) {
+            // this.c.list = false;
+            // this.c.chosen = index;
+        },
+        onExchange(code) {
+            // this.c.list.push(coupon);
+        },
+        loadData(){
+            http.shop.get('/goods?id=' + this.id).then(ret=>{
+                document.title = ret.title;
+                this.g = ret;
+            }).catch(e=>{
+                Dialog.alert({
+                    title: '提示',
+                    message: e.message,
+                }).then(() => {
+                    this.$router.back();
+                });
+            });
+        },
+        onClickIcon(){},
+        buy(){
+            if(!this.token){
+                this.$router.push('/login?from=' + this.$route.fullPath);
+                return;
+            }
+            http.shop.post('/cart/add',{token:this.token,goodsId:this.id,count:1}).then(ret=>{
+                Notify({message: '添加到购物车成功',duration: 3000})
+            }).catch(e=>{
+                Dialog.alert({
+                    title: '提示',
+                    message: e.message,
+                }).then(() => {
+                });
+            });
+        }
+    }
+}
+</script>

src/views/GoodsList.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="page-goods-list">
+        <van-nav-bar
+            :title="category"
+            :fixed="true"
+            :placeholder="true"
+            left-text="返回"
+            left-arrow
+            @click-left="$router.back()"
+        />
+        <div class="goods-list-wrapper">
+            <div
+                v-for="g in dataList"
+                :key="g.id"
+            >
+                <van-card
+                    class="goods-item"
+                    :desc="g.desc"
+                    :thumb="g.picture"
+                    @click="showDetail(g)"
+                >
+                    <template #title>
+                        <div class="g-title">{{g.title}}</div>
+                    </template>
+                    <template #price>
+                        <div class="g-info">
+                            <div class="price">￥<span>{{g.sell_price}}</span></div>
+                            <div class="sell-info"><span>{{g.sell_count}}</span>人已经付款购买</div>
+                        </div>
+                    </template>
+                </van-card>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import http from "../components/http";
+export default {
+    name: "GoodsList",
+    data() {
+        return {
+            category: "",
+            loading: false,
+            dataList: [],
+            total: 0,
+            pageSize: 15
+        };
+    },
+    mounted() {
+        this.category = this.$route.query.cate;
+        document.title = this.category;
+        this.loadData(1);
+    },
+    methods: {
+        onPageChange(page) {
+            this.loadData(page);
+        },
+        showDetail(g) {
+            this.$router.push("/goods-detail?id=" + g.id);
+        },
+        loadData(page) {
+            this.loading = true;
+            http.shop
+                .get(
+                    "/goods?list=y&page=" + page + "&category=" + this.category
+                )
+                .then(data => {
+                    this.loading = false;
+                    this.dataList = data.list;
+                    this.total = data.total;
+                    this.pageSize = data.size;
+                })
+                .catch(() => {
+                    this.loading = false;
+                });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.goods-list-wrapper {
+    padding: 15px 10px;
+}
+.goods-item {
+    text-align: left;
+    padding: 0px;
+    padding-bottom: 10px;
+    border-bottom: dashed 1px #eee;
+    .g-title {
+        word-break: break-all;
+        margin-top: 8px;
+        color: #333;
+        line-height: 1.36;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        font-size: 14px;
+        -webkit-box-orient: vertical;
+        height: 38px;
+    }
+    .price {
+        color: #e4393c;
+        span {
+            font-weight: 400;
+            font-size: 18px;
+        }
+    }
+    .sell-info {
+        color: #999;
+        font-size: 12px;
+    }
+}
+</style>

src/views/Home.vue

@@ -1,87 +1,80 @@
 <style lang="less">
-.home {
+  .my-swipe .van-swipe-item {
-    width: 1000px;
+    color: #fff;
-    margin: 50px auto;
+    font-size: 20px;
-    .page-container{
+    text-align: center;
-            margin-top: 10px;
+    height: 170px;
+    img{
+        width: 100%;
+        height: 170px;
+    }
+  }
+  .page-home{
+      background-color: #eee;
   }
-}
 </style>
 
 <template>
-<div class="home" v-loading="loading">
+    <div class="page-home">
-    <img alt="Vue logo" src="../assets/logo.png">
+        <div class="swiper-wrapper">
-
+            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
-    <el-table :data="userList" style="width: 100%" border>
+                <van-swipe-item v-for="(s, index) in swipes" :key="index">
-        <el-table-column prop="userId" label="用户编号" width="150">
+                    <img v-lazy="s.img" />
-        </el-table-column>
+                </van-swipe-item>
-        <el-table-column prop="userName" label="用户名" width="120">
+            </van-swipe>
-        </el-table-column>
+        </div>
-        <el-table-column prop="email" label="邮箱">
+        <div class="hot-cate"></div>
-        </el-table-column>
+        <div class="hot-goods">
-        <el-table-column prop="salt" label="加密盐" width="120">
+            <div class="title" style="margin:10px 0;">
-        </el-table-column>
+                <img class="ll_fadeIn" style="width: calc(100% - 1rem); height: 100%; opacity: 1;" src="//img12.360buyimg.com/img/s750x70_jfs/t1/148857/1/16777/13220/5fc9f9d0E734c0ee5/88c99cdbe410e58a.png">
-        <el-table-column label="操作" width="120">
+            </div>
-            <template slot-scope="scope">
+            <GoodsList :goodsList="dataList" />
-                <el-button @click.native.prevent="resetPwd(scope.$index)" type="text" size="small">
+        </div>
-                    重置密码
-                </el-button>
-            </template>
-        </el-table-column>
-    </el-table>
-    <div class="page-container">
-        <el-pagination layout="prev, pager, next" @current-change="onPageChange" :total="total" :page-size="pageSize"></el-pagination>
     </div>
-</div>
 </template>
 
 <script>
 // @ is an alias to /src
-import http from '../components/http';
+import http from "../components/http";
+import GoodsList from '../components/GoodsList'
 
 export default {
     name: "home",
+    components:{GoodsList},
     data() {
         return {
+            swipes:[
+                {name:'24期免息',img:'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/145540/4/18667/107221/5fd8c5a7Ed54a9545/14e408a6ee76c316.jpg!cr_1125x445_0_171!q70.jpg.dpg',url:'/goods-list?cate=显示器'},
+                {name:'茶油',img:'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/149172/3/18184/263815/5fd5c4d5E1740ade6/a05ecfaaa05026a4.jpg!cr_1125x445_0_171!q70.jpg.dpg',url:'/goods-list?cate=茶油'},
+                {name:'电视',img:'//m.360buyimg.com/mobilecms/s700x280_jfs/t1/135279/35/18804/134512/5fcf55a6Ebec3ea76/ce2689ee950f3627.jpg!q70.jpg.dpg',url:'/goods-list?cate=电视'},
+            ],
             loading: false,
-            userList: [],
+            dataList: [],
             total: 0,
             pageSize: 15
-        }
+        };
     },
     mounted() {
-        document.title = "用户列表";
+        document.title = "首页";
         this.loadData(1);
     },
 
     methods: {
-        onPageChange(page){
+        onPageChange(page) {
             this.loadData(page);
         },
         loadData(page) {
             this.loading = true;
-            http.get('/user/all?page=' + page).then(data => {
+            http.shop.get("/goods?list=y&page=" + page)
+                .then(data => {
                     this.loading = false;
-                this.userList = data.list;
+                    this.dataList = data.list;
                     this.total = data.total;
-                this.pageSize = data.page_size;
+                    this.pageSize = data.size;
-            }).catch(err => {
-                this.loading = false;
-                this.$message.error({
-                    title: err
-                });
                 })
-        },
+                .catch(() => {
-        resetPwd(index) {
-            this.loading = true;
-            const user = this.userList[index];
-            setTimeout(() => {
                     this.loading = false;
-                this.$notify({
-                    title: '提示',
-                    message: user.userName + '的密码重置成功'
                 });
-            }, Math.ceil(Math.random() * 500) + 500);
         }
     }
 };

src/views/Login.vue

@@ -1,93 +1,90 @@
-<style lang="less">
+<style lang="less" scoped>
-.login {
+.wrapper {
-    width: 400px;
+    display: flex;
-    margin: 50px auto 0;
+    align-items: center;
-
+    justify-content: center;
-    .display-block {
+    height: 100%;
-        display: block;
-        width: 100%;
   }
 
-    .error-notice {
+  .block {
-        color: #f56c6c;
+    width: 80px;
-        font-size: 12px;
+    height: 80px;
-        text-align: left;
   }
-}
 </style>
 
 <template>
-<div class="login">
+<div class="page-login" style="background:#eee;    height: 100vh;">
-    <el-form :model="loginForm" status-icon :rules="loginRule" ref="loginForm" label-width="0px" class="demo-ruleForm">
+    <van-nav-bar title="登录"
-        <el-form-item prop="userName">
+            left-text="返回"
-            <el-input type="text" placeholder="请输入用户名" @keyup.enter.native="submitForm('loginForm')" v-model="loginForm.userName" autocomplete="off"></el-input>
+            left-arrow
-        </el-form-item>
+            @click-left="$router.back()" />
-        <el-form-item prop="password">
+    <div style="padding:10px;text-align:center">
-            <el-input type="password" placeholder="请输入密码" @keyup.enter.native="submitForm('loginForm')" v-model="loginForm.password" autocomplete="off"></el-input>
+        <img src="./../assets/logo_128.png" alt="">
-        </el-form-item>
+    </div>
-        <el-form-item>
+    <van-form @submit="login">
-            <el-button class="display-block" :loading="loging" type="primary" @click="submitForm('loginForm')">提交</el-button>
+        <van-field
-        </el-form-item>
+            v-model="username"
-        <div class="error-notice">{{errorMessage}}</div>
+            name="username"
-    </el-form>
+            label="用户名"
+            placeholder="用户名"
+            :rules="[{ required: true, message: '请填写用户名' }]"
+        />
+        <van-field
+            v-model="password"
+            type="password"
+            name="password"
+            label="密码"
+            placeholder="密码"
+            :rules="[{ required: true, message: '请填写密码' }]"
+        />
+        <div style="margin: 16px;">
+            <van-button
+                round
+                block
+                type="info"
+                native-type="submit"
+            >
+                提交
+            </van-button>
+        </div>
+    </van-form>
+    <van-overlay :show="showLoading">
+        <div class="wrapper" @click.stop>
+            <div class="block"> <van-loading size="80" /></div>
+        </div>
+    </van-overlay>
 </div>
 </template>
 
 <script>
 import http from "../components/http";
-import store from '../components/Store';
+import {Dialog} from 'vant';
-
 export default {
-    mounted() {
+    name:'Login',
-        document.title = "登录";
+    data(){
-
-    },
-    data() {
         return {
-            loginForm: {
+            username:'',
-                userName: "",
+            password:'',
-                password: "",
+            showLoading:false
-                valicode: "m8k2"
-            },
-            errorMessage: "",
-            loging: false,
-            loginRule: {
-                userName: [{
-                    required: true,
-                    message: "请输入登录用户名",
-                    trigger: "blur"
-                }],
-                password: [{
-                    required: true,
-                    message: "请输入登录密码",
-                    trigger: "blur"
-                }]
         }
-        };
     },
-    methods: {
+    methods:{
-        submitForm() {
+        login(){
-            this.$refs.loginForm.validate(valid => {
+            this.showLoading = true;
-                if (valid) {
+            http.shop.post('/login',{username:this.username,password:this.password}).then(ret=>{
-                    this.loging = true;
+                this.showLoading = false;
-                    http
+                window.localStorage.setItem('gg_user_token',ret.token)
-                        .post("/user/login", this.loginForm)
+                this.$router.back();
-                        .then(ret => {
+            }).catch(e=>{
-                            store.commit('login', ret);
+                this.showLoading = false;
-                            this.$router.push('/');
+                Dialog.alert({
-                        })
+                    title: '提示',
-                        .catch(err => {
+                    message: e.message,
-                            this.loging = false;
+                }).then(() => {
-                            this.errorMessage = err;
-                            console.log(err);
                 });
-                } else {
-                    console.log("表单填写错误");
-                    return false;
-                }
             });
-        },
-        resetForm() {}
         }
-};
+    }
+}
 </script>
+

src/views/bak/Home.vue

@@ -0,0 +1,88 @@
+<style lang="less">
+.home {
+    width: 1000px;
+    margin: 50px auto;
+    .page-container{
+            margin-top: 10px;
+    }
+}
+</style>
+
+<template>
+<div class="home" v-loading="loading">
+    <img alt="Vue logo" src="../assets/logo.png">
+
+    <el-table :data="userList" style="width: 100%" border>
+        <el-table-column prop="userId" label="用户编号" width="150">
+        </el-table-column>
+        <el-table-column prop="userName" label="用户名" width="120">
+        </el-table-column>
+        <el-table-column prop="email" label="邮箱">
+        </el-table-column>
+        <el-table-column prop="salt" label="加密盐" width="120">
+        </el-table-column>
+        <el-table-column label="操作" width="120">
+            <template slot-scope="scope">
+                <el-button @click.native.prevent="resetPwd(scope.$index)" type="text" size="small">
+                    重置密码
+                </el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+    <div class="page-container">
+        <el-pagination layout="prev, pager, next" @current-change="onPageChange" :total="total" :page-size="pageSize"></el-pagination>
+    </div>
+</div>
+</template>
+
+<script>
+// @ is an alias to /src
+import http from '../components/http';
+
+export default {
+    name: "home",
+    data() {
+        return {
+            loading: false,
+            userList: [],
+            total: 0,
+            pageSize: 15
+        }
+    },
+    mounted() {
+        document.title = "用户列表";
+        this.loadData(1);
+    },
+
+    methods: {
+        onPageChange(page){
+            this.loadData(page);
+        },
+        loadData(page) {
+            this.loading = true;
+            http.get('/user/all?page=' + page).then(data => {
+                this.loading = false;
+                this.userList = data.list;
+                this.total = data.total;
+                this.pageSize = data.page_size;
+            }).catch(err => {
+                this.loading = false;
+                this.$message.error({
+                    title: err
+                });
+            })
+        },
+        resetPwd(index) {
+            this.loading = true;
+            const user = this.userList[index];
+            setTimeout(() => {
+                this.loading = false;
+                this.$notify({
+                    title: '提示',
+                    message: user.userName + '的密码重置成功'
+                });
+            }, Math.ceil(Math.random() * 500) + 500);
+        }
+    }
+};
+</script>

src/views/bak/Login.vue

@@ -0,0 +1,93 @@
+<style lang="less">
+.login {
+    width: 400px;
+    margin: 50px auto 0;
+
+    .display-block {
+        display: block;
+        width: 100%;
+    }
+
+    .error-notice {
+        color: #f56c6c;
+        font-size: 12px;
+        text-align: left;
+    }
+}
+</style>
+
+<template>
+<div class="login">
+    <el-form :model="loginForm" status-icon :rules="loginRule" ref="loginForm" label-width="0px" class="demo-ruleForm">
+        <el-form-item prop="userName">
+            <el-input type="text" placeholder="请输入用户名" @keyup.enter.native="submitForm('loginForm')" v-model="loginForm.userName" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+            <el-input type="password" placeholder="请输入密码" @keyup.enter.native="submitForm('loginForm')" v-model="loginForm.password" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item>
+            <el-button class="display-block" :loading="loging" type="primary" @click="submitForm('loginForm')">提交</el-button>
+        </el-form-item>
+        <div class="error-notice">{{errorMessage}}</div>
+    </el-form>
+</div>
+</template>
+
+<script>
+import http from "../components/http";
+import store from '../components/Store';
+
+export default {
+    mounted() {
+        document.title = "登录";
+
+    },
+    data() {
+        return {
+            loginForm: {
+                userName: "",
+                password: "",
+                valicode: "m8k2"
+            },
+            errorMessage: "",
+            loging: false,
+            loginRule: {
+                userName: [{
+                    required: true,
+                    message: "请输入登录用户名",
+                    trigger: "blur"
+                }],
+                password: [{
+                    required: true,
+                    message: "请输入登录密码",
+                    trigger: "blur"
+                }]
+            }
+        };
+    },
+    methods: {
+        submitForm() {
+            this.$refs.loginForm.validate(valid => {
+                if (valid) {
+                    this.loging = true;
+                    http
+                        .post("/user/login", this.loginForm)
+                        .then(ret => {
+                            store.commit('login', ret);
+                            this.$router.push('/');
+                        })
+                        .catch(err => {
+                            this.loging = false;
+                            this.errorMessage = err;
+                            console.log(err);
+                        });
+                } else {
+                    console.log("表单填写错误");
+                    return false;
+                }
+            });
+        },
+        resetForm() {}
+    }
+};
+</script>

vue.config.js

@@ -1,5 +1,7 @@
 // vue.config.js
 module.exports = {
+    publicPath:process.env.VUE_APP_publicPath,
+    outputDir: 'dist',
     devServer:{
         port:3000
     }