starter
/
starter-vant
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

git

Browse Source
master
wangbing 6 years ago
parent b234caefa5
commit b73c59e642
10 changed files with 207 additions and 380 deletions
Show Stats Download Patch File Download Diff File

6
.idea/encodings.xml
Unescape View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="Encoding" defaultCharsetForPropertiesFiles="UTF-8">
<file url="PROJECT" charset="UTF-8" />
</component>
</project>

6
.idea/jsLibraryMappings.xml
Unescape View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<includedPredefinedLibrary name="ECMAScript 6" />
</component>
</project>

57
src/App.vue
Unescape View File

@ -1,13 +1,52 @@
<template> <template>
<div id="app"> <div id="app">
<router-view /> <transition :name="transitionName">
</div> <router-view class="child-view" />
</transition>
</div>
</template> </template>
<script>
export default {
data() {
return {
transitionName: 'slide-right'
};
},
watch: {
'$route' (to, from) {
if(to.path == '/'){
this.transitionName = 'slide-right';
}else{
this.transitionName = 'slide-left';
}
}
}
};
<style> </script>
body { <style lang="less">
font-size: 16px; body {
background-color: #f8f8f8; font-size: 16px;
-webkit-font-smoothing: antialiased; background-color: #f8f8f8;
} -webkit-font-smoothing: antialiased;
}
.child-view {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all 0.5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(50px, 0);
transform: translate(50px, 0);
}
.slide-left-leave-active, .slide-right-enter {
opacity: 0;
-webkit-transform: translate(-50px, 0);
transform: translate(-50px, 0);
}
</style> </style>

8
src/main.js
Unescape View File

@ -1,10 +1,10 @@
import Vue from 'vue'; import Vue from 'vue';
import App from './App'; import App from './App';
import { router } from './router'; import {router} from './router';
import './style/index.less'; import './style/index.less';
new Vue({ new Vue({
router, router,
el: '#app', el: '#app',
render: h => h(App) render: h => h(App)
}); });

26
src/router.js
Unescape View File

@ -6,36 +6,22 @@ Vue.use(Router);
const routes = [ const routes = [
{ {
path: '*', path: '*',
redirect: '/nav' redirect: '/'
}, },
{ {
name: 'nav', name: '/',
component: () => import('./view/nav'), component: () => import('./view/nav'),
meta: { meta: {
title: '会员中心' title: '主页'
} }
}, },
{ {
name: 'user', name: 'set',
component: () => import('./view/user'), component: () => import('./view/set'),
meta: { meta: {
title: '会员中心' title: '设置中心'
} }
}, },
{
name: 'cart',
component: () => import('./view/cart'),
meta: {
title: '购物车'
}
},
{
name: 'goods',
component: () => import('./view/goods'),
meta: {
title: '商品详情'
}
}
]; ];
// add route path // add route path

119
src/view/cart/index.vue
Unescape View File

@ -1,119 +0,0 @@
<template>
<div>
<van-checkbox-group class="card-goods" v-model="checkedGoods">
<van-checkbox
class="card-goods__item"
v-for="item in goods"
:key="item.id"
:name="item.id"
>
<van-card
:title="item.title"
:desc="item.desc"
:num="item.num"
:price="formatPrice(item.price)"
:thumb="item.thumb"
/>
</van-checkbox>
</van-checkbox-group>
<van-submit-bar
:price="totalPrice"
:disabled="!checkedGoods.length"
:button-text="submitBarText"
@submit="onSubmit"
/>
</div>
</template>
<script>
import { Checkbox, CheckboxGroup, Card, SubmitBar, Toast } from 'vant';
export default {
components: {
[Card.name]: Card,
[Checkbox.name]: Checkbox,
[SubmitBar.name]: SubmitBar,
[CheckboxGroup.name]: CheckboxGroup
},
data() {
return {
checkedGoods: ['1', '2', '3'],
goods: [{
id: '1',
title: '进口香蕉',
desc: '约250g，2根',
price: 200,
num: 1,
thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg'
}, {
id: '2',
title: '陕西蜜梨',
desc: '约600g',
price: 690,
num: 1,
thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg'
}, {
id: '3',
title: '美国伽力果',
desc: '约680g/3个',
price: 2680,
num: 1,
thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
}]
};
},
computed: {
submitBarText() {
const count = this.checkedGoods.length;
return '结算' + (count ? `(${count})` : '');
},
totalPrice() {
return this.goods.reduce((total, item) => total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price : 0), 0);
}
},
methods: {
formatPrice(price) {
return (price / 100).toFixed(2);
},
onSubmit() {
Toast('点击结算');
}
}
};
</script>
<style lang="less">
.card-goods {
padding: 10px 0;
background-color: #fff;
&__item {
position: relative;
background-color: #fafafa;
.van-checkbox__label {
width: 100%;
height: auto; // temp
padding: 0 10px 0 15px;
box-sizing: border-box;
}
.van-checkbox__icon {
top: 50%;
left: 10px;
z-index: 1;
position: absolute;
margin-top: -10px;
}
.van-card__price {
color: #f44;
}
}
}
</style>

148
src/view/goods/index.vue
Unescape View File

@ -1,148 +0,0 @@
<template>
<div class="goods">
<van-swipe class="goods-swipe" :autoplay="3000">
<van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
<img :src="thumb">
</van-swipe-item>
</van-swipe>
<van-cell-group>
<van-cell>
<div class="goods-title">{{ goods.title }}</div>
<div class="goods-price">{{ formatPrice(goods.price) }}</div>
</van-cell>
<van-cell class="goods-express">
<van-col span="10">运费：{{ goods.express }}</van-col>
<van-col span="14">剩余：{{ goods.remain }}</van-col>
</van-cell>
</van-cell-group>
<van-cell-group class="goods-cell-group">
<van-cell value="进入店铺" icon="shop-o" is-link @click="sorry">
<template slot="title">
<span class="van-cell-text">有赞的店</span>
<van-tag class="goods-tag" type="danger">官方</van-tag>
</template>
</van-cell>
<van-cell title="线下门店" icon="location-o" is-link @click="sorry"/>
</van-cell-group>
<van-cell-group class="goods-cell-group">
<van-cell title="查看商品详情" is-link @click="sorry"/>
</van-cell-group>
<van-goods-action>
<van-goods-action-icon icon="chat-o" @click="sorry">
客服
</van-goods-action-icon>
<van-goods-action-icon icon="cart-o" @click="onClickCart">
购物车
</van-goods-action-icon>
<van-goods-action-button type="warning" @click="sorry">
加入购物车
</van-goods-action-button>
<van-goods-action-button type="danger" @click="sorry">
立即购买
</van-goods-action-button>
</van-goods-action>
</div>
</template>
<script>
import {
Tag,
Col,
Icon,
Cell,
CellGroup,
Swipe,
Toast,
SwipeItem,
GoodsAction,
GoodsActionIcon,
GoodsActionButton
} from 'vant';
export default {
components: {
[Tag.name]: Tag,
[Col.name]: Col,
[Icon.name]: Icon,
[Cell.name]: Cell,
[CellGroup.name]: CellGroup,
[Swipe.name]: Swipe,
[SwipeItem.name]: SwipeItem,
[GoodsAction.name]: GoodsAction,
[GoodsActionIcon.name]: GoodsActionIcon,
[GoodsActionButton.name]: GoodsActionButton
},
data() {
return {
goods: {
title: '美国伽力果（约680g/3个）',
price: 2680,
express: '免运费',
remain: 19,
thumb: [
'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
]
}
};
},
methods: {
formatPrice() {
return '¥' + (this.goods.price / 100).toFixed(2);
},
onClickCart() {
this.$router.push('cart');
},
sorry() {
Toast('暂无后续逻辑~');
}
}
};
</script>
<style lang="less">
.goods {
padding-bottom: 50px;
&-swipe {
img {
width: 100%;
display: block;
}
}
&-title {
font-size: 16px;
}
&-price {
color: #f44;
}
&-express {
color: #999;
font-size: 12px;
padding: 5px 15px;
}
&-cell-group {
margin: 15px 0;
.van-cell__value {
color: #999;
}
}
&-tag {
margin-left: 5px;
}
}
</style>

16
src/view/nav/index.vue
Unescape View File

@ -1,12 +1,12 @@
<template> <template>
<div class="layout"> <div class="layout">
<van-nav-bar class="layout-bar" <van-nav-bar class="layout-bar"
title="应用导航"
left-text="退出"
right-text="设置"
left-arrow
@click-left="onClickLeft" @click-left="onClickLeft"
@click-right="onClickRight"/> @click-right="onClickRight"
title="应用导航">
<van-icon name="home-o" slot="left"/>
<van-icon name="ellipsis" slot="right"/>
</van-nav-bar>
<van-swipe class="layout-swipe" :autoplay="3000"> <van-swipe class="layout-swipe" :autoplay="3000">
<van-swipe-item> <van-swipe-item>
@ -37,6 +37,7 @@
SwipeItem, SwipeItem,
Toast, Toast,
NoticeBar, NoticeBar,
Icon,
} from 'vant'; } from 'vant';
export default { export default {
@ -47,6 +48,7 @@
[Swipe.name]: Swipe, [Swipe.name]: Swipe,
[SwipeItem.name]: SwipeItem, [SwipeItem.name]: SwipeItem,
[NoticeBar.name]: NoticeBar, [NoticeBar.name]: NoticeBar,
[Icon.name]: Icon,
}, },
data() { data() {
@ -102,10 +104,10 @@
}, },
methods: { methods: {
onClickLeft() { onClickLeft() {
Toast('返回'); this.$router.push('nav');
}, },
onClickRight() { onClickRight() {
Toast('按钮'); this.$router.push('set');
} }
} }
}; };

128
src/view/set/index.vue
Unescape View File

@ -0,0 +1,128 @@
<template>
<div class="layout">
<van-nav-bar class="layout-bar"
title="设置"
@click-left="onClickLeft"
left-arrow/>
<van-swipe class="layout-swipe" :autoplay="3000">
<van-swipe-item>
<img src="../../assets/bar1.jpg" class="" width="100%"/>
</van-swipe-item>
</van-swipe>
<van-notice-bar
text="连云港警方“快递哥消防宣传公益使者”行动"
left-icon="volume-o" :scrollable="false"/>
<van-grid>
<van-grid-item
v-for="g in grids"
:key="g.key"
:icon="g.icon"
:text="g.text"
/>
</van-grid>
</div>
</template>
<script>
import {
NavBar,
Grid,
GridItem,
Swipe,
SwipeItem,
Toast,
NoticeBar,
Icon,
} from 'vant';
export default {
components: {
[NavBar.name]: NavBar,
[Grid.name]: Grid,
[GridItem.name]: GridItem,
[Swipe.name]: Swipe,
[SwipeItem.name]: SwipeItem,
[NoticeBar.name]: NoticeBar,
[Icon.name]: Icon,
},
data() {
return {
grids: [
{
key: "1",
text: "地址管理",
icon: "photo-o"
},
{
key: "2",
text: "房屋管理",
icon: "photo-o"
},
{
key: "3",
text: "人口管理",
icon: "photo-o"
},
{
key: "4",
text: "单位管理",
icon: "photo-o"
},
{
key: "5",
text: "综合查询",
icon: "photo-o"
},
{
key: "6",
text: "综合查询",
icon: "photo-o"
},
{
key: "7",
text: "情报线索",
icon: "photo-o"
},
{
key: "8",
text: "入户访查",
icon: "photo-o"
},
{
key: "9",
text: "发案回访",
icon: "photo-o"
}
]
};
},
methods: {
onClickLeft() {
this.$router.go(-1)
},
}
};
</script>
<style lang="less">
.layout {
padding-top: 50px;
padding-bottom: 50px;
&-bar {
position: fixed;
width: 100%;
top: 0px;
}
&-swipe {
img {
width: 100%;
display: block;
}
}
}
</style>

73
src/view/user/index.vue
Unescape View File

@ -1,73 +0,0 @@
<template>
<div>
<img class="user-poster" src="https://img.yzcdn.cn/public_files/2017/10/23/8690bb321356070e0b8c4404d087f8fd.png">
<van-row class="user-links">
<van-col span="6">
<van-icon name="pending-payment" />
待付款
</van-col>
<van-col span="6">
<van-icon name="records" />
待接单
</van-col>
<van-col span="6">
<van-icon name="tosend" />
待发货
</van-col>
<van-col span="6">
<van-icon name="logistics" />
已发货
</van-col>
</van-row>
<van-cell-group class="user-group">
<van-cell icon="records" title="全部订单" is-link />
</van-cell-group>
<van-cell-group>
<van-cell icon="points" title="我的积分" is-link />
<van-cell icon="gold-coin-o" title="我的优惠券" is-link />
<van-cell icon="gift-o" title="我收到的礼物" is-link />
</van-cell-group>
</div>
</template>
<script>
import { Row, Col, Icon, Cell, CellGroup } from 'vant';
export default {
components: {
[Row.name]: Row,
[Col.name]: Col,
[Icon.name]: Icon,
[Cell.name]: Cell,
[CellGroup.name]: CellGroup
}
};
</script>
<style lang="less">
.user {
&-poster {
width: 100%;
height: 53vw;
display: block;
}
&-group {
margin-bottom: 15px;
}
&-links {
padding: 15px 0;
font-size: 12px;
text-align: center;
background-color: #fff;
.van-icon {
display: block;
font-size: 24px;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.