preview
This commit is contained in:
parent
d9eef0cc88
commit
3ac5e9147c
1
.env.development
Normal file
1
.env.development
Normal file
@ -0,0 +1 @@
|
||||
VUE_APP_publicPath=/
|
||||
1
.env.production
Normal file
1
.env.production
Normal file
@ -0,0 +1 @@
|
||||
VUE_APP_publicPath=/shop/m/
|
||||
@ -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"
|
||||
|
||||
23
src/App.vue
23
src/App.vue
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</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 {
|
||||
padding: 30px;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
}
|
||||
.van-card__thumb{
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
25
src/Layout.vue
Normal file
25
src/Layout.vue
Normal file
@ -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>
|
||||
0
src/api.js
Normal file
0
src/api.js
Normal file
BIN
src/assets/logo_128.png
Normal file
BIN
src/assets/logo_128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
0
src/components/GoodsItem.vue
Normal file
0
src/components/GoodsItem.vue
Normal file
118
src/components/GoodsList.vue
Normal file
118
src/components/GoodsList.vue
Normal file
@ -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>
|
||||
@ -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)=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
promise.then(ret=>{
|
||||
if(typeof(ret['errcode']) != 'undefined'){
|
||||
if(ret.errcode != 0){
|
||||
reject(ret.message);
|
||||
const processResponse = (promise) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
promise.then(ret => {
|
||||
if (typeof (ret['code']) != 'undefined') {
|
||||
if (ret.code != 0) {
|
||||
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')
|
||||
};
|
||||
@ -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,
|
||||
|
||||
@ -1,32 +1,56 @@
|
||||
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: '/',
|
||||
name: 'home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import( /* webpackChunkName: "about" */ './views/Login.vue')
|
||||
}
|
||||
]
|
||||
routes: [{
|
||||
|
||||
path: '/',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path: '/cate',
|
||||
name: 'Category',
|
||||
component: () => import( /* webpackChunkName: "Category" */ './views/Category.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
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)=>{
|
||||
if(to.path != '/login'){
|
||||
if(store.state.user.userId < 1){
|
||||
next({path:'/login'});
|
||||
return;
|
||||
}
|
||||
}
|
||||
next();
|
||||
router.beforeEach((to, from, next) => {
|
||||
// if(to.path != '/login'){
|
||||
// if(store.state.user.userId < 1){
|
||||
// next({path:'/login'});
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
next();
|
||||
});
|
||||
|
||||
export default router;
|
||||
76
src/views/Category.vue
Normal file
76
src/views/Category.vue
Normal file
@ -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>
|
||||
199
src/views/Detail.vue
Normal file
199
src/views/Detail.vue
Normal file
@ -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>
|
||||
115
src/views/GoodsList.vue
Normal file
115
src/views/GoodsList.vue
Normal file
@ -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>
|
||||
@ -1,87 +1,80 @@
|
||||
<style lang="less">
|
||||
.home {
|
||||
width: 1000px;
|
||||
margin: 50px auto;
|
||||
.page-container{
|
||||
margin-top: 10px;
|
||||
.my-swipe .van-swipe-item {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
height: 170px;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-home{
|
||||
background-color: #eee;
|
||||
}
|
||||
</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 class="page-home">
|
||||
<div class="swiper-wrapper">
|
||||
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
|
||||
<van-swipe-item v-for="(s, index) in swipes" :key="index">
|
||||
<img v-lazy="s.img" />
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
<div class="hot-cate"></div>
|
||||
<div class="hot-goods">
|
||||
<div class="title" style="margin:10px 0;">
|
||||
<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">
|
||||
</div>
|
||||
<GoodsList :goodsList="dataList" />
|
||||
</div>
|
||||
</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 => {
|
||||
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
|
||||
http.shop.get("/goods?list=y&page=" + page)
|
||||
.then(data => {
|
||||
this.loading = false;
|
||||
this.dataList = data.list;
|
||||
this.total = data.total;
|
||||
this.pageSize = data.size;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
})
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,93 +1,90 @@
|
||||
<style lang="less">
|
||||
.login {
|
||||
width: 400px;
|
||||
margin: 50px auto 0;
|
||||
<style lang="less" scoped>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.display-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error-notice {
|
||||
color: #f56c6c;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.block {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
</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 class="page-login" style="background:#eee; height: 100vh;">
|
||||
<van-nav-bar title="登录"
|
||||
left-text="返回"
|
||||
left-arrow
|
||||
@click-left="$router.back()" />
|
||||
<div style="padding:10px;text-align:center">
|
||||
<img src="./../assets/logo_128.png" alt="">
|
||||
</div>
|
||||
<van-form @submit="login">
|
||||
<van-field
|
||||
v-model="username"
|
||||
name="username"
|
||||
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() {
|
||||
document.title = "登录";
|
||||
|
||||
},
|
||||
data() {
|
||||
name:'Login',
|
||||
data(){
|
||||
return {
|
||||
loginForm: {
|
||||
userName: "",
|
||||
password: "",
|
||||
valicode: "m8k2"
|
||||
},
|
||||
errorMessage: "",
|
||||
loging: false,
|
||||
loginRule: {
|
||||
userName: [{
|
||||
required: true,
|
||||
message: "请输入登录用户名",
|
||||
trigger: "blur"
|
||||
}],
|
||||
password: [{
|
||||
required: true,
|
||||
message: "请输入登录密码",
|
||||
trigger: "blur"
|
||||
}]
|
||||
}
|
||||
};
|
||||
username:'',
|
||||
password:'',
|
||||
showLoading:false
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
methods:{
|
||||
login(){
|
||||
this.showLoading = true;
|
||||
http.shop.post('/login',{username:this.username,password:this.password}).then(ret=>{
|
||||
this.showLoading = false;
|
||||
window.localStorage.setItem('gg_user_token',ret.token)
|
||||
this.$router.back();
|
||||
}).catch(e=>{
|
||||
this.showLoading = false;
|
||||
Dialog.alert({
|
||||
title: '提示',
|
||||
message: e.message,
|
||||
}).then(() => {
|
||||
});
|
||||
});
|
||||
},
|
||||
resetForm() {}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
88
src/views/bak/Home.vue
Normal file
88
src/views/bak/Home.vue
Normal file
@ -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>
|
||||
93
src/views/bak/Login.vue
Normal file
93
src/views/bak/Login.vue
Normal file
@ -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>
|
||||
@ -1,5 +1,7 @@
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
publicPath:process.env.VUE_APP_publicPath,
|
||||
outputDir: 'dist',
|
||||
devServer:{
|
||||
port:3000
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user