clone 开源的 Shopping
This commit is contained in:
sin
67
mobile-web/src/page/account/login.vue
Normal file
67
mobile-web/src/page/account/login.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="m-logo" style="background:url(//haitao.nos.netease.com/f866dd18-12f0-4bb2-be6d-5cac85cf2627.png) center 73px no-repeat;background-size:161px; text-align: center;
|
||||
padding: 130px 0 0;
|
||||
margin: 15px 0;"></div>
|
||||
<div style="margin:0 10px;font-size: 14px;">
|
||||
<router-link to="/login/phone">
|
||||
<van-button size="large" style="font-size: 14px;height: 42px;line-height: 42px;margin-bottom: 15px;">手机号登录</van-button>
|
||||
</router-link>
|
||||
<router-link to="/login/password">
|
||||
<van-button size="large" style="font-size: 14px;height: 42px;line-height: 42px;margin-bottom: 15px;">密码登录</van-button>
|
||||
</router-link>
|
||||
<router-link to="/login/register">
|
||||
<van-button size="large" type="primary" style="font-size: 14px;height: 42px;line-height: 42px;">手机号一键注册</van-button>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="m-thirdpart">
|
||||
<p class="tit"><span class="txt">或用以下方式登录</span></p>
|
||||
<div class="lnk">
|
||||
<van-icon name="wechat" color="#1AAD16" />
|
||||
<van-icon name="alipay" color="#7dcbeb"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.m-thirdpart{
|
||||
padding: 40px 20px 50px;
|
||||
font-size: 12px;
|
||||
.tit{
|
||||
position: relative;
|
||||
width: 215px;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.txt{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -12px;
|
||||
margin: 0 0 0 -57px;
|
||||
width: 114px;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.lnk{
|
||||
position: relative;
|
||||
padding: 27px 0 0;
|
||||
width: 280px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
.van-icon{
|
||||
font-size: 31px;
|
||||
margin: 0 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
31
mobile-web/src/page/account/password.vue
Normal file
31
mobile-web/src/page/account/password.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<headerNav title="登录"/>
|
||||
<div style="background:url(https://haitao.nos.netease.com/f866dd18-12f0-4bb2-be6d-5cac85cf2627.png) center 18px no-repeat;background-size:161px;">
|
||||
<div style="padding-top: 70px;">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
<van-field
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div style="margin: 10px;">
|
||||
<van-button size="large" type="primary" style="height: 45px;line-height:45px;">登录</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
34
mobile-web/src/page/account/phonelogin.vue
Normal file
34
mobile-web/src/page/account/phonelogin.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div>
|
||||
<headerNav title="手机号登录"/>
|
||||
<div style="background:url(https://haitao.nos.netease.com/f866dd18-12f0-4bb2-be6d-5cac85cf2627.png) center 18px no-repeat;background-size:161px;">
|
||||
<div style="padding-top: 70px;">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
<van-field
|
||||
center
|
||||
clearable
|
||||
placeholder="请输入短信验证码"
|
||||
>
|
||||
<van-button slot="button" size="small" type="primary">发送验证码</van-button>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
<div style="margin: 10px;">
|
||||
<van-button size="large" type="primary" style="height: 45px;line-height:45px;">登录</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
38
mobile-web/src/page/account/register.vue
Normal file
38
mobile-web/src/page/account/register.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<headerNav title="注册"/>
|
||||
<div style="background:url(https://haitao.nos.netease.com/f866dd18-12f0-4bb2-be6d-5cac85cf2627.png) center 18px no-repeat;background-size:161px;">
|
||||
<div style="padding-top: 70px;">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
<van-field
|
||||
center
|
||||
clearable
|
||||
placeholder="请输入短信验证码"
|
||||
>
|
||||
<van-button slot="button" size="small" type="primary">发送验证码</van-button>
|
||||
</van-field>
|
||||
<van-field
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div style="margin: 10px;">
|
||||
<van-button size="large" type="primary" style="height: 45px;line-height:45px;">注册</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
20
mobile-web/src/page/activity/index.vue
Normal file
20
mobile-web/src/page/activity/index.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<page/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import page from './page/page.vue'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
page
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
205
mobile-web/src/page/cart/index.vue
Normal file
205
mobile-web/src/page/cart/index.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<headerNav title="购物车"/>
|
||||
<van-cell value="编辑商品" class="head">
|
||||
<template slot="title">
|
||||
<van-checkbox v-model="checkedAll" >全选</van-checkbox>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
<van-checkbox-group class="card-goods" v-model="checkedGoods">
|
||||
|
||||
<div class="promotion-group">
|
||||
<div v-for="(item,index) in goods"
|
||||
:key="index" class="card-goods__item">
|
||||
<van-checkbox :name="item.id"></van-checkbox>
|
||||
|
||||
<product-card :product='item' :iscard='true' >
|
||||
<template slot>
|
||||
<van-cell value="修改" >
|
||||
<template slot="title">
|
||||
<van-tag type="danger">促销</van-tag>
|
||||
<span class="van-cell-text" >满60元减5元</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
</template>
|
||||
</product-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="promotion-group">
|
||||
|
||||
<van-cell is-link class="head">
|
||||
<template slot="title">
|
||||
<van-checkbox v-model="checkedAll" >京东自营</van-checkbox>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
|
||||
<div v-for="(item,index) in goods"
|
||||
:key="index+10" class="card-goods__item">
|
||||
<van-checkbox :name="item.id"></van-checkbox>
|
||||
|
||||
<product-card :product='item' :iscard='true' >
|
||||
<template slot>
|
||||
<van-cell value="修改" >
|
||||
<template slot="title">
|
||||
<van-tag type="danger">促销</van-tag>
|
||||
<span class="van-cell-text" >满60元减5元</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
</template>
|
||||
</product-card>
|
||||
</div>
|
||||
<van-cell value="去凑单" is-link class="promotion">
|
||||
<template slot="title">
|
||||
<p><van-tag type="danger">满减</van-tag>购满60元，可减5元</p>
|
||||
</template>
|
||||
</van-cell>
|
||||
<div v-for="(item,index) in goods"
|
||||
:key="index+20" class="card-goods__item">
|
||||
<van-checkbox :name="item.id"></van-checkbox>
|
||||
|
||||
<product-card :product='item' :iscard='true' >
|
||||
<template slot>
|
||||
<van-cell value="修改" >
|
||||
<template slot="title">
|
||||
<van-tag type="danger">促销</van-tag>
|
||||
<span class="van-cell-text" >满60元减5元</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
</template>
|
||||
</product-card>
|
||||
</div>
|
||||
</div>
|
||||
</van-checkbox-group>
|
||||
|
||||
<div style="height:50px;"></div>
|
||||
<van-submit-bar
|
||||
:price="totalPrice"
|
||||
:disabled="!checkedGoods.length"
|
||||
:button-text="submitBarText"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<template slot>
|
||||
<van-checkbox v-model="checkedAll" >全选</van-checkbox>
|
||||
</template>
|
||||
</van-submit-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkedAll:true,
|
||||
checkedGoods: ['1', '2', '3'],
|
||||
goods: [{
|
||||
id: '1',
|
||||
title: '星巴克(Starbucks)星冰乐 轻盈香草味 咖啡饮料 281ml*6瓶礼盒装低脂减糖',
|
||||
desc: '3.18kg/件',
|
||||
price: '200.00',
|
||||
quantity: 1,
|
||||
imageURL: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg',
|
||||
imageTag:'比加入时降5元',
|
||||
}, {
|
||||
id: '2',
|
||||
title: '陕西蜜梨',
|
||||
desc: '约600g',
|
||||
price: '690.00',
|
||||
quantity: 1,
|
||||
imageURL: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg',
|
||||
gift: [
|
||||
{
|
||||
title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
|
||||
quantity: 2
|
||||
},
|
||||
{
|
||||
title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
|
||||
quantity: 1
|
||||
}
|
||||
]
|
||||
}, {
|
||||
id: '3',
|
||||
title: '美国伽力果',
|
||||
desc: '约680g/3个',
|
||||
price: '2680.00',
|
||||
quantity: 1,
|
||||
imageURL: '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 ? parseFloat(item.price): 0), 0);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
|
||||
this.$router.push('/order')
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.card-goods {
|
||||
font-size: 12px;
|
||||
&__item {
|
||||
position: relative;
|
||||
.van-checkbox{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 40px;
|
||||
left: 5px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
}
|
||||
.additional{
|
||||
width: 100%;
|
||||
padding-left: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
.head{
|
||||
padding-left: 5px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.card{
|
||||
background: #f7f7f7;
|
||||
.van-submit-bar__bar {
|
||||
border-top: 1px solid #f7f7f7;
|
||||
.van-checkbox{
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
.promotion{
|
||||
.van-tag {
|
||||
line-height: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.van-cell__title{
|
||||
|
||||
flex: 4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.promotion-group{
|
||||
margin-top: 10px;
|
||||
box-shadow: 5px 5px 5px #e5e5e5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
180
mobile-web/src/page/category/index.vue
Normal file
180
mobile-web/src/page/category/index.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-search
|
||||
v-model="value"
|
||||
placeholder="请输入搜索关键词"
|
||||
show-action
|
||||
@search="onSearch"
|
||||
>
|
||||
<div slot="action" @click="onSearch">搜索</div>
|
||||
</van-search>
|
||||
<van-badge-group :active-key="activeKey" class="tab" :style="'height:'+fullHeight+'px'">
|
||||
<van-badge title="热门推荐" @click="onClick" />
|
||||
<van-badge title="手机数码" @click="onClick" />
|
||||
<van-badge title="家用电器" @click="onClick" />
|
||||
<van-badge title="电脑办公" @click="onClick" />
|
||||
<van-badge title="美妆护肤" @click="onClick" />
|
||||
<van-badge title="个护清洁" @click="onClick" />
|
||||
<van-badge title="汽车用品" @click="onClick" />
|
||||
<van-badge title="男装" @click="onClick" />
|
||||
<van-badge title="男鞋" @click="onClick" />
|
||||
<van-badge title="女装" @click="onClick" />
|
||||
<van-badge title="女鞋" @click="onClick" />
|
||||
<van-badge title="母婴童装" @click="onClick" />
|
||||
<van-badge title="图书音像" @click="onClick" />
|
||||
<van-badge title="运动户外" @click="onClick" />
|
||||
<van-badge title="食品生鲜" @click="onClick" />
|
||||
</van-badge-group>
|
||||
<div class="content" :style="'width:'+fullWidth+'px;height:'+(fullHeight-7)+'px'" >
|
||||
<img src="https://img11.360buyimg.com/mcoss/jfs/t1/1072/23/3672/95463/5b9a0813E175891fa/e38fc2f7c2ddfec2.jpg" />
|
||||
<div class="category-div">
|
||||
<h4>常用分类</h4>
|
||||
<ul >
|
||||
<li>
|
||||
<router-link to="/search?keyword=xxxx">
|
||||
<img src="//img12.360buyimg.com/focus/jfs/t11824/150/2263801190/3392/8e69e1b3/5a167b8cNdcf71ae5.jpg">
|
||||
<span>蓝牙耳机</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<a >
|
||||
<img src="//img20.360buyimg.com/focus/jfs/t13759/194/897734755/2493/1305d4c4/5a1692ebN8ae73077.jpg">
|
||||
<span>iPhone</span>
|
||||
</a>
|
||||
</li>
|
||||
<div style="clear:both"></div>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="category-div">
|
||||
<h4>热门分类</h4>
|
||||
<ul>
|
||||
<li><a ><img src="//img11.360buyimg.com/focus/s140x140_jfs/t21388/146/237407622/26923/221da1b3/5b054fedN2ba90518.jpg"><span>手机</span></a></li>
|
||||
<li><a ><img src="//img20.360buyimg.com/focus/s140x140_jfs/t20128/208/216721929/9242/472993da/5b05522dNa2aae1bb.png"><span>耳机</span></a></li>
|
||||
<li><a ><img src="//img30.360buyimg.com/focus/s140x140_jfs/t21655/83/2186874549/15932/c273d29b/5b48802aN13fe73de.png"><span>剃须刀</span></a></li>
|
||||
<li><a ><img src="//img20.360buyimg.com/focus/s140x140_jfs/t21715/149/246679831/16257/ddbf2036/5b0565a7N8dbc0017.png"><span>路由器</span></a></li>
|
||||
<li><a ><img src="//img14.360buyimg.com/focus/s140x140_jfs/t1/4478/16/633/36008/5b923503E39b9dfa9/13b099f187576d8c.png"><span>月饼</span></a></li>
|
||||
<li><a ><img src="//img10.360buyimg.com/focus/s140x140_jfs/t1/1410/32/643/38009/5b9236b2Eb02fbf02/1e7de6987578dcdd.jpg" ><span>牛奶</span></a></li>
|
||||
<li><a ><img src="//img20.360buyimg.com/focus/s140x140_jfs/t1/4674/14/665/25245/5b9236bbE088d5efb/6c7c2f9857736c65.jpg"><span>男士内裤</span></a></li>
|
||||
<li><a ><img src="//img20.360buyimg.com/focus/s140x140_jfs/t1/1710/26/666/26147/5b9236c3E5fd1cd42/86c6bca8f4fe1efa.png"><span>小米8</span></a></li>
|
||||
<li><a ><img src="//img11.360buyimg.com/focus/s140x140_jfs/t1/3653/6/655/42593/5b9236caEfef6235b/9e118f12705f52bb.png"><span>大闸蟹</span></a></li>
|
||||
<li><a ><img src="//img20.360buyimg.com/focus/s140x140_jfs/t23881/349/2204372862/9923/4c62864a/5b7693eeNf6883734.png"><span>三只松鼠</span></a></li>
|
||||
<li><a ><img src="//img20.360buyimg.com/focus/s140x140_jfs/t24253/294/2182777138/4059/429945c9/5b76990bNde226fbc.png"><span>充电宝</span></a></li>
|
||||
<li><a ><img src="//img30.360buyimg.com/focus/s140x140_jfs/t22051/318/235303191/9297/c5ea2761/5b055000N410a7553.png"><span>空调</span></a></li>
|
||||
<li><a ><img src="//img10.360buyimg.com/focus/s140x140_jfs/t19960/243/653029866/38879/91bb398b/5b055555N9245f8aa.jpg"><span>电饭煲</span></a></li>
|
||||
<li><a ><img src="//img12.360buyimg.com/focus/s140x140_jfs/t1/345/33/944/5582/5b9236d2E62d8da2e/99f72d51b8f195ed.jpg"><span>电话手表</span></a></li>
|
||||
<li><a ><img src="//img30.360buyimg.com/focus/s140x140_jfs/t1/1446/14/631/8500/5b9237e5E0d1f9e16/b1a627b92323b5ed.png"><span>华为</span></a></li>
|
||||
<div style="clear:both">
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<navigate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Search } from "vant";
|
||||
|
||||
export default {
|
||||
name: "userindex",
|
||||
components: {
|
||||
[Search.name]: Search
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: "",
|
||||
activeKey: 0,
|
||||
fullHeight: document.documentElement.clientHeight - 93,
|
||||
fullWidth: document.documentElement.clientWidth - 99
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSearch() {
|
||||
console.log(this.value);
|
||||
},
|
||||
onClick(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.tab {
|
||||
float: left;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
min-height: 100%;
|
||||
.van-badge {
|
||||
padding: 15px 12px 15px 9px;
|
||||
}
|
||||
.van-badge:not(:last-child)::after {
|
||||
height: 199%;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
float: left;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
min-height: 100%;
|
||||
margin: 7px 7px 0;
|
||||
font-size: 12px;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
.category-div {
|
||||
margin: 19px 0px 0;
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
ul{
|
||||
margin-top: 10px;
|
||||
}
|
||||
li {
|
||||
width: 32.8%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
span{
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
color: #686868;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: box;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-box;
|
||||
display: -o-box;
|
||||
line-clamp: 2;
|
||||
-webkit-line-clamp: 2;
|
||||
-moz-line-clamp: 2;
|
||||
-ms-line-clamp: 2;
|
||||
-o-line-clamp: 2;
|
||||
box-orient: vertical;
|
||||
-webkit-box-orient: vertical;
|
||||
-ms-box-orient: vertical;
|
||||
-o-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
box-align: center;
|
||||
-webkit-box-align: center;
|
||||
-moz-box-align: center;
|
||||
-ms-box-align: center;
|
||||
-o-box-align: center;
|
||||
box-pack: center;
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-box-pack: center;
|
||||
-o-box-pack: center;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
23
mobile-web/src/page/index.vue
Normal file
23
mobile-web/src/page/index.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
<page/>
|
||||
<navigate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navigate from '../components/footer/navigate.vue'
|
||||
import page from './page/page.vue'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
page,
|
||||
navigate
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
73
mobile-web/src/page/page/page.vue
Normal file
73
mobile-web/src/page/page/page.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div :style="'background-color:'+((page.BackgroundColor==undefined||page.BackgroundColor=='')?'#fff':page.BackgroundColor)">
|
||||
<div :style="'height:'+topheight+'px'" ></div>
|
||||
<div v-for="(item,index) in page.Sections" :key="index">
|
||||
<imageAd v-if="item.Code=='ImageAd'" :data="item.ParameterDictionary"></imageAd>
|
||||
|
||||
<imageText v-if="item.Code=='ImageText'" :data="item.ParameterDictionary"></imageText>
|
||||
|
||||
<pageLine v-if="item.Code=='Line'" :data="item.ParameterDictionary" ></pageLine>
|
||||
|
||||
<whitespace v-if="item.Code=='Line'" :data="item.ParameterDictionary" />
|
||||
|
||||
<pageText v-if="item.Code=='Text'" :data="item.ParameterDictionary" ></pageText>
|
||||
|
||||
<notice v-if="item.Code=='Notice'" :data="item.ParameterDictionary" ></notice>
|
||||
|
||||
<search v-if="item.Code=='Search'" :data="item.ParameterDictionary" v-on:settopheight="settopheight($event)" ></search>
|
||||
|
||||
<pageTitle v-if="item.Code=='Title'" :data="item.ParameterDictionary" ></pageTitle>
|
||||
|
||||
<cube v-if="item.Code=='Cube'" :data="item.ParameterDictionary" ></cube>
|
||||
|
||||
<product v-if="item.Code=='Product'" :data="item" ></product>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import "../../assets/style/index.css";
|
||||
import whitespace from "../../components/page/whitespace.vue";
|
||||
import pageLine from "../../components/page/line.vue";
|
||||
import pageText from "../../components/page/text.vue";
|
||||
import notice from "../../components/page/notice.vue";
|
||||
import search from "../../components/page/search.vue";
|
||||
import pageTitle from "../../components/page/title.vue";
|
||||
import cube from "../../components/page/cube.vue";
|
||||
import imageAd from "../../components/page/imageAd.vue";
|
||||
import imageText from "../../components/page/imageText.vue";
|
||||
import product from "../../components/page/product.vue";
|
||||
import { GetPage } from "../../api/page.js";
|
||||
|
||||
export default {
|
||||
name:"page",
|
||||
components:{
|
||||
whitespace,
|
||||
pageLine,
|
||||
pageText,
|
||||
notice,
|
||||
search,
|
||||
pageTitle,
|
||||
cube,
|
||||
[imageAd.name]:imageAd,
|
||||
imageText,
|
||||
product
|
||||
},
|
||||
data:function(){
|
||||
return{
|
||||
topheight:0,
|
||||
page:{},
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
GetPage().then(response=>{
|
||||
this.page=response;
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
settopheight:function(value){
|
||||
this.topheight=value;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
326
mobile-web/src/page/product/detail.vue
Normal file
326
mobile-web/src/page/product/detail.vue
Normal file
@@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<div class="goods">
|
||||
<headerNav title="商品详情"/>
|
||||
<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>
|
||||
<span class="goods-price">{{ formatPrice(goods.price) }}</span>
|
||||
<span class="goods-market-price">{{ formatPrice(goods.market_price) }}</span>
|
||||
<div class="goods-title">{{ goods.title }}</div>
|
||||
<div class="goods-subtit">{{goods.subtitle}}</div>
|
||||
</van-cell>
|
||||
|
||||
<van-cell @click="onClickShowTag" class="goods-tag" >
|
||||
<template slot="title" style="font-size:10px;">
|
||||
<img src="https://haitao.nos.netease.com/ba8a4c2fdaa54f82a45261293c116af61419663676663i46n3jlh10028.png"/>
|
||||
<span >挪威品牌</span>
|
||||
<img src="https://haitao.nosdn2.127.net/13bd59e6e29a4f06b278c586629e690d.png" />
|
||||
<span >跨境商品</span>
|
||||
<van-icon name="passed" color="red" />
|
||||
<span >次日达</span>
|
||||
<van-icon name="passed" color="red" />
|
||||
<span >自提</span>
|
||||
<van-icon name="passed" color="red" />
|
||||
<span >闪电退款</span>
|
||||
<van-icon name="passed" color="red" />
|
||||
<span >前海保税仓</span>
|
||||
<van-icon name="passed" color="red" />
|
||||
<span >七天无理由退货（拆封后不支持）</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group class="goods-cell-group">
|
||||
<van-cell is-link @click="showPromotion" >
|
||||
<template slot="title">
|
||||
<span style="margin-right: 10px;">领券</span>
|
||||
<van-tag type="danger" mark style="margin-right: 5px;">满180减30</van-tag>
|
||||
<van-tag type="danger" mark style="margin-right: 5px;">满300减100</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
<van-cell is-link @click="showPromotion" >
|
||||
<template slot="title">
|
||||
<span style="margin-right: 10px;">促销</span>
|
||||
<van-tag type="danger" style="margin-right: 5px;">多买优惠</van-tag>
|
||||
<van-tag type="danger" style="margin-right: 5px;">满减</van-tag>
|
||||
<van-tag type="danger" style="margin-right: 5px;">限购</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group class="goods-cell-group">
|
||||
<van-cell is-link @click="showSku" >
|
||||
<template slot="title">
|
||||
<span style="margin-right: 10px;">已选</span>
|
||||
<span >10件装</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
</van-cell-group>
|
||||
|
||||
<div class="goods-info">
|
||||
<p class="goods-info-title" >图文详情</p>
|
||||
<div v-html="goods.info"></div>
|
||||
</div>
|
||||
<van-goods-action>
|
||||
|
||||
<van-goods-action-mini-btn icon="like-o" @click="sorry">
|
||||
收藏
|
||||
</van-goods-action-mini-btn>
|
||||
<van-goods-action-mini-btn icon="cart" @click="onClickCart">
|
||||
购物车
|
||||
</van-goods-action-mini-btn>
|
||||
<van-goods-action-big-btn @click="showSku">
|
||||
加入购物车
|
||||
</van-goods-action-big-btn>
|
||||
<van-goods-action-big-btn primary @click="showSku">
|
||||
立即购买
|
||||
</van-goods-action-big-btn>
|
||||
</van-goods-action>
|
||||
<van-actionsheet v-model="show" title="促销" style="font-size:14px;">
|
||||
|
||||
<van-cell is-link @click="sorry" >
|
||||
<template slot="title">
|
||||
<van-tag type="danger">多买优惠</van-tag>
|
||||
<span> 满2件，总价打9折</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell is-link @click="sorry" >
|
||||
<template slot="title">
|
||||
<van-tag type="danger">满减</van-tag>
|
||||
<span> 满100元减50元</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell is-link @click="sorry" >
|
||||
<template slot="title">
|
||||
<van-tag type="danger">限购</van-tag>
|
||||
<span> 购买不超过5件时享受单件价￥8.00，超出数量以结算价为准</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-actionsheet>
|
||||
|
||||
<van-actionsheet v-model="showTag" title="服务说明" style="font-size:14px;">
|
||||
|
||||
<van-cell>
|
||||
<template slot="title">
|
||||
<van-icon name="passed" color="red" style="margin-right: 10px;" />
|
||||
<span >次日达</span>
|
||||
<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">指定时间前下单，次日送达</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<template slot="title">
|
||||
<van-icon name="passed" color="red" style="margin-right: 10px;" />
|
||||
<span >自提</span>
|
||||
<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">我们提供多种自提服务，包括自提点、自助提货柜、移动自提车等服务</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<template slot="title">
|
||||
<van-icon name="passed" color="red" style="margin-right: 10px;" />
|
||||
<span >闪电退款</span>
|
||||
<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">签收7天内退货的，提供先退款后退货服务。</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<template slot="title">
|
||||
<van-icon name="passed" color="red" style="margin-right: 10px;" />
|
||||
<span >七天无理由退货（拆封后不支持）</span>
|
||||
<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">七天无理由退货（拆封后不支持）</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<template slot="title">
|
||||
<van-icon name="passed" color="red" style="margin-right: 10px;" />
|
||||
<span >前海保税仓</span>
|
||||
<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">本商品由前海保税仓发货</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-actionsheet>
|
||||
<van-sku
|
||||
v-model="showBase"
|
||||
:sku="skuData.sku"
|
||||
:goods="skuData.goods_info"
|
||||
:goods-id="skuData.goods_id"
|
||||
:hide-stock="skuData.sku.hide_stock"
|
||||
:quota="skuData.quota"
|
||||
:quota-used="skuData.quota_used"
|
||||
reset-stepper-on-hide
|
||||
reset-selected-sku-on-hide
|
||||
disable-stepper-input
|
||||
:close-on-click-overlay="closeOnClickOverlay"
|
||||
:message-config="messageConfig"
|
||||
:custom-sku-validator="customSkuValidator"
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import skuData from '../../data/sku';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
this.skuData = skuData;
|
||||
return {
|
||||
show:false,
|
||||
showTag:false,
|
||||
goods: {
|
||||
title: '【每日一粒益智又长高】 Lifeline Care 儿童果冻鱼油DHA维生素D3聪明长高 软糖 30粒 2件装',
|
||||
subtitle:'【品牌直采】Q弹美味，无腥味果冻鱼油，每粒含足量鱼油DHA，帮助视网膜和大脑健康发育，让你的宝宝明眼又聪明，同时补充400国际单位维生素D3，强壮骨骼和牙齿。特含DPA，让宝宝免疫力更强，没病来扰。',
|
||||
price: 2680,
|
||||
market_price:9999,
|
||||
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'
|
||||
],
|
||||
info:'<p style="text-align:center;"><img src="https://haitao.nosdn2.127.net/ac19460151ee4d95a6657202bcfc653c1531470912089jjjq8ml410763.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/2a91cfad22404e5498d347672b1440301531470912182jjjq8mnq10764.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/caddd5a213de4c1cb1347c267e8275731531470912412jjjq8mu410765.jpg" ></p>',
|
||||
},
|
||||
showBase: false,
|
||||
showCustom: false,
|
||||
showStepper: false,
|
||||
closeOnClickOverlay: true,
|
||||
initialSku: {
|
||||
s1: '30349',
|
||||
s2: '1193'
|
||||
},
|
||||
customSkuValidator: (component) => {
|
||||
return '请选择xxx';
|
||||
},
|
||||
customStepperConfig: {
|
||||
quotaText: '单次限购100件',
|
||||
stockFormatter: (stock) => `剩余${stock}间`,
|
||||
handleOverLimit: (data) => {
|
||||
const { action, limitType, quota } = data;
|
||||
if (action === 'minus') {
|
||||
this.$toast('至少选择一件商品');
|
||||
} else if (action === 'plus') {
|
||||
if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
|
||||
this.$toast(`限购${quota}件`);
|
||||
} else {
|
||||
this.$toast('库存不够了~~');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
messageConfig: {
|
||||
uploadImg: (file, img) => {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => resolve(img), 1000);
|
||||
});
|
||||
},
|
||||
uploadMaxSize: 3
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatPrice(data) {
|
||||
return '¥' + (data / 100).toFixed(2);
|
||||
},
|
||||
onClickCart() {
|
||||
this.$router.push('/cart');
|
||||
},
|
||||
sorry() {
|
||||
Toast('暂无后续逻辑~');
|
||||
},
|
||||
showPromotion() {
|
||||
this.show=true;
|
||||
},
|
||||
showSku(){
|
||||
this.showBase=true;
|
||||
},
|
||||
onClickShowTag(){
|
||||
this.showTag=true;
|
||||
},
|
||||
onBuyClicked(data) {
|
||||
this.$toast(JSON.stringify(data));
|
||||
},
|
||||
onAddCartClicked(data) {
|
||||
this.$toast(JSON.stringify(data));
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.goods {
|
||||
padding-bottom: 50px;
|
||||
&-swipe {
|
||||
img {
|
||||
width: 7.5rem;
|
||||
height: 7.5rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&-tag{
|
||||
font-size: 12px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
span{
|
||||
margin-right: 10px;
|
||||
}
|
||||
i{
|
||||
color: red;
|
||||
margin-right: 3px;
|
||||
}
|
||||
img{
|
||||
width: 12px;
|
||||
margin-right: 3px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
&-title {
|
||||
line-height: 18px;
|
||||
padding-top: 10px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
&-subtit{
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
line-height: 21px;
|
||||
}
|
||||
&-price {
|
||||
color: #f44;font-size: 20px;
|
||||
}
|
||||
&-market-price {
|
||||
text-decoration: line-through;
|
||||
margin-left: 8px;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
&-cell-group {
|
||||
margin: 15px 0;
|
||||
.van-cell__value {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
&-info-title{
|
||||
height: 44px;line-height: 44px;text-align: center;font-size: 14px;font-weight: 700;margin: 10px;border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
&-info p{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-block-end: 0;
|
||||
margin-block-start: 0;
|
||||
display: grid;
|
||||
}
|
||||
&-info img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
404
mobile-web/src/page/product/list.vue
Normal file
404
mobile-web/src/page/product/list.vue
Normal file
@@ -0,0 +1,404 @@
|
||||
<template>
|
||||
<div class="product-list">
|
||||
<searchtop/>
|
||||
<div class="filterbar">
|
||||
<ul :class="filtersort?'show':''">
|
||||
<li :class="filterindex==0?'selected':''" v-on:click="onFilterBar(0)"><span>{{filterindex==11?'价格最低':(filterindex==12?'价格最高':'综合')}}</span><van-icon name="arrow" class="down" /></li>
|
||||
<li :class="filterindex==1?'selected':''" v-on:click="onFilterBar(1)"><span>销量</span></li>
|
||||
<li :class="filterindex==2?'selected':''" v-on:click="onFilterBar(2)"><span>上新</span></li>
|
||||
<li :class="filterindex==3?'selected':''" v-on:click="onFilterBar(3)"><span>筛选</span></li>
|
||||
</ul>
|
||||
<div :class="'item_options '+(filtersort?'show':'')">
|
||||
<ul>
|
||||
<li :class="filterindex==10?'selected':''" v-on:click="onFilterBar(10)">综合</li>
|
||||
<li :class="filterindex==11?'selected':''" v-on:click="onFilterBar(11)">价格最低</li>
|
||||
<li :class="filterindex==12?'selected':''" v-on:click="onFilterBar(12)">价格最高</li>
|
||||
</ul>
|
||||
</div>
|
||||
<van-popup v-model="filtershow" position="right" class="filterlayer" >
|
||||
<div class="filterInner" style="overflow-y: scroll;max-height: 100%;">
|
||||
<ul>
|
||||
<li>
|
||||
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||
</li>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="tags_selection">
|
||||
<div class="option">
|
||||
<a href="javascript:void 0;">牙龈护理111</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">抛光</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">清洁</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">正畸专用</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">敏感</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">亮白</a>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||
</li>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="tags_selection">
|
||||
<div class="option">
|
||||
<a href="javascript:void 0;">牙龈护理111</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">抛光</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">清洁</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">正畸专用</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">敏感</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">亮白</a>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||
</li>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="tags_selection">
|
||||
<div class="option">
|
||||
<a href="javascript:void 0;">牙龈护理111</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">抛光</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">清洁</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">正畸专用</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">敏感</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">亮白</a>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||
</li>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="tags_selection">
|
||||
<div class="option">
|
||||
<a href="javascript:void 0;">牙龈护理111</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">抛光</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">清洁</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">正畸专用</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">敏感</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">亮白</a>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||
</li>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="tags_selection">
|
||||
<div class="option">
|
||||
<a href="javascript:void 0;">牙龈护理111</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">抛光</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">清洁</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">正畸专用</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">敏感</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">亮白</a>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<div style="clear: both;"></div>
|
||||
<van-button size="large" style="height: 40px;margin-bottom: 15px;line-height: 40px;">清楚选项</van-button>
|
||||
<div style="height:50px;"></div>
|
||||
</div>
|
||||
<div class="filterlayer_bottom_buttons">
|
||||
<span class="filterlayer_bottom_button cancel">取消</span>
|
||||
<span class="filterlayer_bottom_button confirm">确认</span>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
|
||||
<div v-for="(product,i) in products" :key="i">
|
||||
<product-card :product='product' @click="showProduct(product)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import searchtop from "../../components/search/searchtop";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
searchtop
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: "",
|
||||
filterindex: 0,
|
||||
filtersort: false,
|
||||
filtershow: false,
|
||||
|
||||
products:[
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'13.00',
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499.00',
|
||||
tags:['满199减100','2件起购'],
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499.00',
|
||||
tags:['新品'],
|
||||
imageTag:'仅剩1件',
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499.00',
|
||||
tags:['赠'],
|
||||
imageTag:'预约',
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'15.00',
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'125.50',
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onFilterBar(value) {
|
||||
if (value == 0) {
|
||||
this.filtersort = !this.filtersort;
|
||||
} else if (value == 3) {
|
||||
this.filtershow = !this.filtershow;
|
||||
} else {
|
||||
this.filtersort = false;
|
||||
this.filterindex = value;
|
||||
}
|
||||
},
|
||||
showProduct(product){
|
||||
this.$router.push('/product/'+product.id);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.product-list{
|
||||
.additional .price{
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
.filterbar {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
ul {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
li {
|
||||
color: #999;
|
||||
width: 25%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #eee;
|
||||
i {
|
||||
font-size: 12px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.down {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
.selected {
|
||||
color: #e93b3d;
|
||||
}
|
||||
.show {
|
||||
.down {
|
||||
-webkit-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
.item_options {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 41px;
|
||||
background: #fff;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
li {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.item_options.show {
|
||||
display: block;
|
||||
}
|
||||
.filterlayer {
|
||||
width: 85%;
|
||||
height: 100%;
|
||||
background-color: #f7f7f7;
|
||||
&_bottom {
|
||||
&_buttons {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.cancel {
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
.confirm {
|
||||
color: #fff;
|
||||
background-color: #e93b3d;
|
||||
}
|
||||
}
|
||||
&_button {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
height: 49px;
|
||||
line-height: 49px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
height: auto;
|
||||
background: #fff;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
li {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
height: auto;
|
||||
line-height: initial;
|
||||
.van-cell{
|
||||
font-size: 16px;
|
||||
}
|
||||
.big {
|
||||
height: 25px;
|
||||
max-width: 250px;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.filterInner{
|
||||
overflow-y: scroll;
|
||||
max-height: 100%;
|
||||
.van-button{
|
||||
height: 40px;
|
||||
margin-bottom: 15px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.tags_selection {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 10px 0 0 10px;
|
||||
.option {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
padding-right: 10px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 10px;
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0 5px;
|
||||
color: #666;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
184
mobile-web/src/page/shipping/order.vue
Normal file
184
mobile-web/src/page/shipping/order.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="order">
|
||||
<headerNav title="确认订单"/>
|
||||
<van-cell
|
||||
center
|
||||
:border="false"
|
||||
class="contact-card"
|
||||
is-link
|
||||
to="/user/address?id=2"
|
||||
>
|
||||
<template v-if="type === 'add'">
|
||||
<strong>选择地址</strong>
|
||||
</template>
|
||||
<template v-else>
|
||||
<strong>张三 138****6520</strong>
|
||||
<div>广东省深圳市南山区科技园 </div>
|
||||
</template>
|
||||
</van-cell>
|
||||
<div style="height:15px;"></div>
|
||||
<div class="card" v-for="(product,i) in products" :key="i">
|
||||
<product-card :product='product' />
|
||||
</div>
|
||||
<div style="height:15px;"></div>
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
label="留言"
|
||||
type="textarea"
|
||||
placeholder="请输入留言"
|
||||
rows="1"
|
||||
autosize
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div style="height:15px;"></div>
|
||||
<van-cell-group class="total">
|
||||
<van-cell title="优惠券" is-link value="抵扣¥5.00" />
|
||||
</van-cell-group>
|
||||
|
||||
<div style="height:15px;"></div>
|
||||
<van-cell-group class="total">
|
||||
<van-cell title="商品总额" value="9.99" />
|
||||
<van-cell title="运费" value="+ 0.00" />
|
||||
<van-cell title="折扣" value="- 5.00" />
|
||||
<van-cell title="实付金额" value="4.99" style="font-weight: 700;" />
|
||||
</van-cell-group>
|
||||
|
||||
<div style="height:50px;"></div>
|
||||
<van-submit-bar
|
||||
:price="3050"
|
||||
button-text="提交订单"
|
||||
label='实付金额：'
|
||||
@submit="onSubmit"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: "add1",
|
||||
products: [
|
||||
{
|
||||
imageURL:
|
||||
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
|
||||
title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
|
||||
desc: "0.670kg/件，肉肉聚汇520g",
|
||||
price: "59.80",
|
||||
quantity: 2
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
|
||||
title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
|
||||
desc: "1.320kg/件",
|
||||
price: "65.80",
|
||||
quantity: 1,
|
||||
gift: [
|
||||
{
|
||||
title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
|
||||
quantity: 2
|
||||
},
|
||||
{
|
||||
title: "星巴克（Starbucks）星冰乐小熊吊饰星巴克（Starbucks）星冰乐小熊吊饰",
|
||||
quantity: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
|
||||
title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
|
||||
desc: "0.670kg/件，肉肉聚汇520g",
|
||||
price: "59.80",
|
||||
quantity: 2
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.$toast("点击按钮");
|
||||
},
|
||||
},
|
||||
activated(){
|
||||
//根据key名获取传递回来的参数，data就是map
|
||||
this.$on('selectAddress', function(data){
|
||||
//赋值给首页的附近医院数据模型
|
||||
console.log(1);
|
||||
}.bind(this));
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.order {
|
||||
font-size: 14px;
|
||||
background: #f7f7f7;
|
||||
.contact-card::before {
|
||||
content: "";
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
background: -webkit-repeating-linear-gradient(
|
||||
135deg,
|
||||
#ff6c6c 0,
|
||||
#ff6c6c 20%,
|
||||
transparent 0,
|
||||
transparent 25%,
|
||||
#3283fa 0,
|
||||
#3283fa 45%,
|
||||
transparent 0,
|
||||
transparent 50%
|
||||
);
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
#ff6c6c 0,
|
||||
#ff6c6c 20%,
|
||||
transparent 0,
|
||||
transparent 25%,
|
||||
#3283fa 0,
|
||||
#3283fa 45%,
|
||||
transparent 0,
|
||||
transparent 50%
|
||||
);
|
||||
background-size: 80px;
|
||||
}
|
||||
.total {
|
||||
.van-cell__value {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.van-submit-bar__bar {
|
||||
border-top: 1px solid #f7f7f7;
|
||||
}
|
||||
.additional {
|
||||
.van-cell {
|
||||
padding: 0 15px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.van-cell__title {
|
||||
flex: 11;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.van-tag {
|
||||
line-height: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #e93b3d;
|
||||
font-size: 10px;
|
||||
span {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
mobile-web/src/page/user/address/edit.vue
Normal file
64
mobile-web/src/page/user/address/edit.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div>
|
||||
<headerNav title="修改地址"/>
|
||||
<van-address-edit
|
||||
:area-list="areaList"
|
||||
:showDelete="showDelete"
|
||||
show-set-default
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
:addressInfo="info"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import areaList from '../../../data/area';
|
||||
import { GetAddressById,SaveAddress,DelAddress } from "../../../api/user.js";
|
||||
|
||||
import { AddressEdit } from 'vant';
|
||||
export default {
|
||||
components:{
|
||||
[AddressEdit.name]:AddressEdit,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
areaList,
|
||||
showDelete:false,
|
||||
info:{},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSave(data) {
|
||||
SaveAddress(data).then(response=>{
|
||||
this.$toast('保存成功');
|
||||
this.$router.go(-1);
|
||||
})
|
||||
},
|
||||
onDelete(data) {
|
||||
DelAddress(data).then(response=>{
|
||||
this.$toast('删除成功');
|
||||
this.$router.go(-1);
|
||||
})
|
||||
},
|
||||
},
|
||||
created:function(){
|
||||
var id=this.$route.query.id;
|
||||
if(id>0){
|
||||
this.showDelete=true;
|
||||
GetAddressById(id).then(response=>{
|
||||
console.log(response);
|
||||
this.info=response;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.van-picker__toolbar{
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
65
mobile-web/src/page/user/address/list.vue
Normal file
65
mobile-web/src/page/user/address/list.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<headerNav title="我的地址"/>
|
||||
<van-address-list
|
||||
v-model="chosenAddressId"
|
||||
:class="isSelect?'':'hideselect'"
|
||||
:list="list"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { GetAddressList } from "../../../api/user.js";
|
||||
import { AddressList } from 'vant';
|
||||
export default {
|
||||
components:{
|
||||
[AddressList.name]:AddressList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: '1',
|
||||
isSelect:false,
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
this.$router.push('/user/address/edit')
|
||||
},
|
||||
|
||||
onEdit(item, index) {
|
||||
this.$router.push('/user/address/edit?id='+item.id);
|
||||
},
|
||||
onSelect(item,index){
|
||||
if(!this.isSelect){
|
||||
return;
|
||||
}
|
||||
this.$emit('selectAddress',item);
|
||||
this.$router.go(-1);
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
this.chosenAddressId=this.$route.query.id;
|
||||
this.isSelect=this.$route.query.id>0;
|
||||
GetAddressList().then(response=>{
|
||||
this.list=response;
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.hideselect{
|
||||
.van-radio__input{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
143
mobile-web/src/page/user/aftersale/apply.vue
Normal file
143
mobile-web/src/page/user/aftersale/apply.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
</<template>
|
||||
<div style="font-size:12px;">
|
||||
<headerNav title="申请售后"/>
|
||||
<van-radio-group v-model="servicetype">
|
||||
<van-cell-group>
|
||||
<van-cell title="服务类型" />
|
||||
<van-cell title="退款" clickable @click="servicetype = '1'">
|
||||
<van-radio name="1" />
|
||||
</van-cell>
|
||||
<van-cell title="退货" clickable @click="servicetype = '2'">
|
||||
<van-radio name="2" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
<div style="margin-top: 10px;" >
|
||||
<product-card v-for="(product,i) in products" :key="i" :product='product' iscard ></product-card>
|
||||
</div>
|
||||
|
||||
<van-cell-group style="margin-top: 10px;">
|
||||
<van-cell title="申请原因" :label="remark" is-link @click="onClickShowPicker" />
|
||||
|
||||
<van-field label="退款金额" placeholder="请输入金额" v-model="amount" :error-message="'可退金额:'+maxamount" type='number' />
|
||||
|
||||
<van-field
|
||||
label="问题描述"
|
||||
type="textarea"
|
||||
placeholder="请您在此描述问题"
|
||||
rows="3"
|
||||
autosize
|
||||
/>
|
||||
<van-cell class="uploader" style="font-size: 16px;">
|
||||
<van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
|
||||
<van-icon name="photograph" />
|
||||
</van-uploader>
|
||||
<div v-for="(image,i) in images" :key="image" class="uploader-image" >
|
||||
<img :src="image" />
|
||||
<van-icon name="close" @click="removeImage(i,image)" />
|
||||
</div>
|
||||
</van-cell>
|
||||
|
||||
</van-cell-group>
|
||||
|
||||
|
||||
<van-cell-group style="margin-top: 10px;">
|
||||
<van-field label="联系人" />
|
||||
<van-field label="联系电话" />
|
||||
</van-cell-group>
|
||||
|
||||
<van-button size="large" type="primary" style="margin-top: 10px;" >提交</van-button>
|
||||
<van-actionsheet v-model="showPicker" >
|
||||
<van-picker show-toolbar
|
||||
title="申请原因" :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
|
||||
</van-actionsheet>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
servicetype:'1',
|
||||
showPicker:false,
|
||||
remark:'我不想要了',
|
||||
amount:'50.50',
|
||||
maxamount:'50.50',
|
||||
images:[],
|
||||
columns: ['我不想要了','退运费','少件/漏发','未按约定时间发货','发错货', '质量问题', '商品与页面描述不符', '商品损坏', '缺少件'],
|
||||
products: [
|
||||
{
|
||||
id:1,
|
||||
imageURL:
|
||||
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
|
||||
title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
|
||||
desc: "0.670kg/件，肉肉聚汇520g",
|
||||
quantity: 2,
|
||||
price:'50.5',
|
||||
max:2,
|
||||
min:0,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:
|
||||
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
|
||||
title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
|
||||
desc: "1.320kg/件",
|
||||
quantity: 1,
|
||||
price:'225.5',
|
||||
max:1,
|
||||
min:0,
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onClickShowPicker(){
|
||||
this.showPicker=true;
|
||||
},
|
||||
onCancel() {
|
||||
this.showPicker=false;
|
||||
},
|
||||
onConfirm(value, index) {
|
||||
this.remark=value;
|
||||
this.showPicker=false;
|
||||
},
|
||||
onRead(file) {
|
||||
console.log(file.length);
|
||||
if(file.length==undefined){
|
||||
this.images.push(file.content);
|
||||
}else{
|
||||
file.forEach(item => {
|
||||
this.images.push(item.content);
|
||||
});
|
||||
}
|
||||
console.log(file)
|
||||
},
|
||||
removeImage(index,image){
|
||||
this.images.splice(index,1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.uploader{
|
||||
font-size: 16px;
|
||||
.van-uploader{
|
||||
float: left;
|
||||
}
|
||||
&-image{
|
||||
margin-left: 10px;position: relative;height: 50px;width: 50px;border: 1px solid #e5e7ea;float: left;margin-top: 5px;
|
||||
img{
|
||||
width: 50px;
|
||||
}
|
||||
i{
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
mobile-web/src/page/user/aftersale/detail.vue
Normal file
60
mobile-web/src/page/user/aftersale/detail.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
</<template>
|
||||
<div>
|
||||
<headerNav title="服务单详情"/>
|
||||
<van-steps :active="active">
|
||||
<van-step>提交申请</van-step>
|
||||
<van-step>客服审核</van-step>
|
||||
<van-step>客户确认</van-step>
|
||||
<van-step>仓库收货</van-step>
|
||||
<van-step>完成</van-step>
|
||||
</van-steps>
|
||||
|
||||
<van-cell class="logistics" to="/user/aftersale/track/1" title="您的服务单435703816的商品已收到" label="2018-08-31 21:04:03" is-link />
|
||||
|
||||
<div style="height:15px;"></div>
|
||||
<div v-for="(product,i) in products" :key="i">
|
||||
<product-card :product='product' />
|
||||
</div>
|
||||
|
||||
<div style="height:15px;"></div>
|
||||
<van-cell-group>
|
||||
<van-cell title="服务单号" value="18081609422771742" />
|
||||
<van-cell title="申请时间" value="2018-08-16 09:42:27" />
|
||||
<van-cell title="服务类型" value="退货" />
|
||||
</van-cell-group>
|
||||
<div style="height:15px;"></div>
|
||||
<van-cell-group>
|
||||
<van-cell title="联系人" value="张三" />
|
||||
<van-cell title="联系电话" value="138****6514" />
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
active:0,
|
||||
|
||||
products:[
|
||||
{
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499',
|
||||
quantity:2
|
||||
},
|
||||
{
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499',
|
||||
quantity:2
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
99
mobile-web/src/page/user/aftersale/list.vue
Normal file
99
mobile-web/src/page/user/aftersale/list.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="aftersale">
|
||||
<headerNav title="售后"/>
|
||||
<van-tabs >
|
||||
<van-tab title="售后申请">
|
||||
<van-panel v-for="(order,index) in orders" :key="index" :title="'订单号：'+order.ordercode" style="margin-top:10px;">
|
||||
<div>
|
||||
<product-card v-for="(product,i) in order.products" :key="i" :product='product' >
|
||||
<div class="van-panel_product_footer">
|
||||
<van-button size="small" type="danger" tag="a" :href="'#/user/aftersale/apply?id='+product.id" >申请售后</van-button>
|
||||
</div>
|
||||
</product-card>
|
||||
</div>
|
||||
</van-panel>
|
||||
</van-tab>
|
||||
<van-tab title="申请记录">
|
||||
<van-panel v-for="(order,index) in orders" :key="index" :title="'服务单号：'+order.ordercode" style="margin-top:10px;">
|
||||
<div>
|
||||
<product-card v-for="(product,i) in order.products" :key="i" :product='product'/>
|
||||
</div>
|
||||
<div>
|
||||
<van-cell title="已完成" :to="'/user/aftersale/detail?ordercode='+order.ordercode" is-link label="服务已完成，感谢您对京东的支持" style="background-color: #f8f8f8;" />
|
||||
</div>
|
||||
</van-panel>
|
||||
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
orders:[
|
||||
{
|
||||
ordercode:'79340944225',
|
||||
products: [
|
||||
{
|
||||
id:1,
|
||||
imageURL:
|
||||
"https://img10.360buyimg.com/N2/jfs/t21733/218/377678809/177209/1b98ae56/5b0b96e1Nc0e37080.jpg",
|
||||
title: "子初婴儿手口柔湿巾90片*3包 新生儿纸巾 宝宝婴儿湿巾",
|
||||
quantity: 2
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
ordercode:'79341094465',
|
||||
products: [
|
||||
{
|
||||
id:1,
|
||||
imageURL:
|
||||
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
|
||||
title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
|
||||
desc: "1.320kg/件",
|
||||
quantity: 1,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
ordercode:'79341094462',
|
||||
products: [
|
||||
{
|
||||
id:1,
|
||||
imageURL:
|
||||
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
|
||||
title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
|
||||
desc: "0.670kg/件，肉肉聚汇520g",
|
||||
quantity: 2
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:
|
||||
"https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
|
||||
title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
|
||||
desc: "1.320kg/件",
|
||||
quantity: 1,
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.aftersale{
|
||||
font-size:12px;background: #f0f2f5;
|
||||
.van-panel{
|
||||
margin-top: 10px;
|
||||
&_product_footer{
|
||||
text-align: right;padding: 0 10px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
34
mobile-web/src/page/user/aftersale/track.vue
Normal file
34
mobile-web/src/page/user/aftersale/track.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div style="background: #f7f7f7;">
|
||||
<headerNav title="进度详情"/>
|
||||
|
||||
<van-cell-group>
|
||||
<van-cell title="服务单号" value="18081609422771742" />
|
||||
</van-cell-group>
|
||||
<van-steps direction="vertical" :active="0" active-color="#f60" style="margin-top: 15px;">
|
||||
<van-step>
|
||||
<h3>您的服务单435703816的商品已收到</h3>
|
||||
<p>2016-07-12 12:40</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>【城市】物流状态2</h3>
|
||||
<p>2016-07-11 10:00</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>快件已发货</h3>
|
||||
<p>2016-07-10 09:30</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
358
mobile-web/src/page/user/coupon/list.vue
Normal file
358
mobile-web/src/page/user/coupon/list.vue
Normal file
@@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<div>
|
||||
<headerNav title="我的优惠券"/>
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
center
|
||||
clearable
|
||||
placeholder="请输入优惠码"
|
||||
|
||||
v-model="couponCode"
|
||||
>
|
||||
<van-button slot="button" size="small" type="primary" :loading="exchangeLoading" @click="onExchange">兑换</van-button>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
<van-tabs >
|
||||
<van-tab title="未使用">
|
||||
<ul>
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
@load="onLoad"
|
||||
>
|
||||
<li v-for="(item,index) in list" :key="index" :class="'couponitem '+(item.show?'show':'') ">
|
||||
<div class="couponTop">
|
||||
<div class="cpnamount">
|
||||
<div class="amountWrap">
|
||||
<div class="amount">
|
||||
<span class="amountSign" v-if="item.SignPosition=='left'" >{{item.Sign}}</span>
|
||||
<span class="amountNum">{{item.Coupon}}</span>
|
||||
<span class="amountSign" v-if="item.SignPosition=='right'" >{{item.Sign}}</span>
|
||||
</div>
|
||||
<div class="condition">
|
||||
<span>{{item.Condition}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="couponInfoWrap">
|
||||
<div class="cpninfo">
|
||||
<div class="detail">
|
||||
<span class="name">{{item.Name}}</span></div>
|
||||
</div>
|
||||
<div class="validity">
|
||||
<span>{{item.BeginDate}}-{{item.EndDate}}
|
||||
</span>
|
||||
</div>
|
||||
<van-button type="danger" size="mini">立即使用</van-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="couponMid " v-if="item.Info!=''">
|
||||
<span>详细信息</span>
|
||||
<van-icon name="arrow" class="down" @click="onShowInfo(item.Id,index)" />
|
||||
</div>
|
||||
<div class="info" v-if="item.Info!=''" >
|
||||
<div class="text">
|
||||
{{item.Info}}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</van-list>
|
||||
</ul>
|
||||
</van-tab>
|
||||
<van-tab title="使用记录">
|
||||
<ul class="gray" >
|
||||
<van-list
|
||||
v-model="useLoading"
|
||||
:finished="useFinished"
|
||||
@load="onLoadUse"
|
||||
>
|
||||
<li v-for="(item,index) in useList" :key="index" class="couponitem">
|
||||
<div class="couponTop">
|
||||
<div class="cpnamount">
|
||||
<div class="amountWrap">
|
||||
<div class="amount">
|
||||
<span class="amountSign" v-if="item.SignPosition=='left'" >{{item.Sign}}</span>
|
||||
<span class="amountNum">{{item.Coupon}}</span>
|
||||
<span class="amountSign" v-if="item.SignPosition=='right'" >{{item.Sign}}</span>
|
||||
</div>
|
||||
<div class="condition">
|
||||
<span>{{item.Condition}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="couponInfoWrap">
|
||||
<div class="cpninfo">
|
||||
<div class="detail">
|
||||
<span class="name">{{item.Name}}</span></div>
|
||||
</div>
|
||||
<div class="validity">
|
||||
<span>{{item.BeginDate}}-{{item.EndDate}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</van-list>
|
||||
</ul>
|
||||
</van-tab>
|
||||
<van-tab title="已过期">
|
||||
<ul class="gray" >
|
||||
|
||||
<van-list
|
||||
v-model="endLoading"
|
||||
:finished="endFinished"
|
||||
@load="onLoadEnd"
|
||||
>
|
||||
<li v-for="(item,index) in endList" :key="index" class="couponitem">
|
||||
<div class="couponTop">
|
||||
<div class="cpnamount">
|
||||
<div class="amountWrap">
|
||||
<div class="amount">
|
||||
<span class="amountSign" v-if="item.SignPosition=='left'" >{{item.Sign}}</span>
|
||||
<span class="amountNum">{{item.Coupon}}</span>
|
||||
<span class="amountSign" v-if="item.SignPosition=='right'" >{{item.Sign}}</span>
|
||||
</div>
|
||||
<div class="condition">
|
||||
<span>{{item.Condition}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="couponInfoWrap">
|
||||
<div class="cpninfo">
|
||||
<div class="detail">
|
||||
<span class="name">{{item.Name}}</span></div>
|
||||
</div>
|
||||
<div class="validity">
|
||||
<span>{{item.BeginDate}}-{{item.EndDate}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</van-list>
|
||||
</ul>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetCoupon,ExchangeCoupon } from "../../../api/user.js";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
finished:false,
|
||||
list:[],
|
||||
page:0,
|
||||
|
||||
|
||||
useLoading:false,
|
||||
useFinished:false,
|
||||
useList:[],
|
||||
usePage:0,
|
||||
|
||||
|
||||
endLoading:false,
|
||||
endFinished:false,
|
||||
endList:[],
|
||||
endPage:0,
|
||||
|
||||
couponCode:'',
|
||||
exchangeLoading:false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
onLoad() {
|
||||
this.page++;
|
||||
GetCoupon({page:this.page}).then(response=>{
|
||||
response.List.forEach(item => {
|
||||
item.show=false;
|
||||
this.list.push(item);
|
||||
});
|
||||
this.loading = false;
|
||||
if(response.TotalPage<=this.page){
|
||||
this.finished = true;
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
onShowInfo(id,index){
|
||||
this.list.forEach((item,itemIndex) => {
|
||||
if(index==itemIndex){
|
||||
item.show=!item.show;
|
||||
return;
|
||||
}
|
||||
});
|
||||
},
|
||||
onLoadUse() {
|
||||
this.usePage++;
|
||||
GetCoupon({page:this.usePage}).then(response=>{
|
||||
response.List.forEach(item => {
|
||||
this.useList.push(item);
|
||||
});
|
||||
this.useLoading = false;
|
||||
if(response.TotalPage<=this.usePage){
|
||||
this.useFinished = true;
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
onLoadEnd() {
|
||||
this.endPage++;
|
||||
GetCoupon({page:this.endPage}).then(response=>{
|
||||
response.List.forEach(item => {
|
||||
this.endList.push(item);
|
||||
});
|
||||
this.endLoading = false;
|
||||
if(response.TotalPage<=this.endPage){
|
||||
this.endFinished = true;
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
onExchange(){
|
||||
if(this.exchangeLoading){
|
||||
return;
|
||||
}
|
||||
this.exchangeLoading=true;
|
||||
ExchangeCoupon(this.couponCode).then(response=>{
|
||||
this.$toast('兑换成功');
|
||||
this.exchangeLoading=false;
|
||||
this.$router.go(0);
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.couponitem {
|
||||
padding: 0 10px;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
.couponTop {
|
||||
background-color: #fcebeb;
|
||||
border-left: 1px solid #f3d4d4;
|
||||
border-right: 1px solid #f3d4d4;
|
||||
border-bottom: 1px dashed #f3d4d4;
|
||||
border-radius: 8px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
.cpnamount {
|
||||
position: relative;
|
||||
height: 90px;
|
||||
width: 34.08%;
|
||||
text-align: center;
|
||||
float: left;
|
||||
border-right: 1px dashed #f3d4d4;
|
||||
}
|
||||
.amountWrap {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
.amount {
|
||||
font-size: 15px;
|
||||
.amountSign {
|
||||
margin-right: 3px;
|
||||
}
|
||||
.amountNum {
|
||||
font-size: 39px;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.couponInfoWrap {
|
||||
position: relative;
|
||||
margin-left: 37.465%;
|
||||
height: 90px;
|
||||
.cpninfo {
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
width: 100%;
|
||||
.detail {
|
||||
padding-right: 15px;
|
||||
word-break: break-all;
|
||||
.name {
|
||||
font-size: 13px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.validity {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
font-size: 10px;
|
||||
}
|
||||
button{
|
||||
right: 16px;
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
}
|
||||
}
|
||||
.couponMid {
|
||||
position: relative;
|
||||
height: 31px;
|
||||
line-height: 31px;
|
||||
padding-left: 16px;
|
||||
font-size: 12px;
|
||||
|
||||
background-color: #fcebeb;
|
||||
border-left: 1px solid #f3d4d4;
|
||||
border-right: 1px solid #f3d4d4;
|
||||
border-bottom: 1px solid #f3d4d4;
|
||||
border-radius: 8px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
i{
|
||||
right: 16px;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.info{
|
||||
display: none;
|
||||
background-color: #fcebeb;
|
||||
border-left: 1px solid #f3d4d4;
|
||||
border-right: 1px solid #f3d4d4;
|
||||
border-bottom: 1px solid #f3d4d4;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
padding: 10px 25px 12px 15px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.show{
|
||||
|
||||
.couponMid {
|
||||
border-bottom: 1px dashed #f3d4d4;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
i{
|
||||
-webkit-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
.info{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.gray{
|
||||
-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
|
||||
}
|
||||
</style>
|
||||
87
mobile-web/src/page/user/favorite/list.vue
Normal file
87
mobile-web/src/page/user/favorite/list.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div>
|
||||
<headerNav title="我的收藏"/>
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
@load="onLoad"
|
||||
>
|
||||
<div v-for="(item,index) in list" :key="index">
|
||||
<van-swipe-cell :right-width="65" :on-close="onClose(item)">
|
||||
<product-card :product='item' />
|
||||
<span slot="right" >删除</span>
|
||||
</van-swipe-cell>
|
||||
</div>
|
||||
</van-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetFavorite ,DelFavorite} from "../../../api/user.js";
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
loading:false,
|
||||
finished:false,
|
||||
list:[],
|
||||
page:0,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onClose(item){
|
||||
return function(clickPosition, instance) {
|
||||
switch (clickPosition) {
|
||||
case 'left':
|
||||
case 'cell':
|
||||
case 'outside':
|
||||
instance.close();
|
||||
break;
|
||||
case 'right':
|
||||
this.$dialog.confirm({
|
||||
message: '确定删除吗？'
|
||||
}).then(() => {
|
||||
DelFavorite(item.id).then(response=>{
|
||||
this.$toast('删除成功');
|
||||
this.$router.go(0);
|
||||
})
|
||||
instance.close();
|
||||
}).catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.page++;
|
||||
GetFavorite().then(response=>{
|
||||
response.list.forEach(item => {
|
||||
this.list.push(item);
|
||||
});
|
||||
this.loading = false;
|
||||
if(response.TotalPage<=this.page){
|
||||
this.finished = true;
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.van-swipe-cell{
|
||||
&__left,
|
||||
&__right {
|
||||
color: #FFFFFF;
|
||||
font-size: 15px;
|
||||
width: 65px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
background-color: #F44;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
152
mobile-web/src/page/user/index.vue
Normal file
152
mobile-web/src/page/user/index.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="user-profile">
|
||||
<div class="user-profile-avatar">
|
||||
<a href="/#/user/info">
|
||||
<img :src="data.Avatar" alt="用户头像">
|
||||
</a>
|
||||
</div>
|
||||
<div class="user-profile-username">
|
||||
<a href="/#/user/info">
|
||||
<span class="m-nick">{{data.UserName}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-cell-group class="user-group">
|
||||
<van-cell title="我的订单" value="查看全部订单" is-link to="/user/order"/>
|
||||
<van-row class="user-links">
|
||||
<router-link to="/user/order/1">
|
||||
<van-col span="6">
|
||||
<van-icon name="pending-payment">
|
||||
<van-info :info="data.UnPayTotal" />
|
||||
</van-icon>
|
||||
<div>待付款</div>
|
||||
</van-col>
|
||||
</router-link>
|
||||
<router-link to="/user/order/2">
|
||||
<van-col span="6">
|
||||
<van-icon name="logistics">
|
||||
<van-info :info="data.UnRecieveTotal" />
|
||||
</van-icon>
|
||||
<div>待发货</div>
|
||||
</van-col>
|
||||
</router-link>
|
||||
<router-link to="/user/order/2">
|
||||
<van-col span="6">
|
||||
<van-icon name="point-gift">
|
||||
</van-icon>
|
||||
<div>已完成</div>
|
||||
</van-col>
|
||||
</router-link>
|
||||
<router-link to="/user/aftersale">
|
||||
<van-col span="6">
|
||||
<van-icon name="after-sale" >
|
||||
<van-info :info="data.AfterSaleTotal" />
|
||||
</van-icon>
|
||||
<div>售后</div>
|
||||
</van-col>
|
||||
</router-link>
|
||||
</van-row>
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group class="user-group">
|
||||
<van-cell title="我的服务" />
|
||||
<van-row class="user-links">
|
||||
<router-link to="/user/coupon">
|
||||
<van-col span="6">
|
||||
<van-icon name="coupon" />
|
||||
<div>我的优惠券</div>
|
||||
</van-col>
|
||||
</router-link>
|
||||
<router-link to="/user/favorite">
|
||||
<van-col span="6">
|
||||
<van-icon name="like-o" />
|
||||
<div>我的收藏</div>
|
||||
</van-col>
|
||||
</router-link>
|
||||
<router-link to="/user/address">
|
||||
<van-col span="6" >
|
||||
<van-icon name="location"/>
|
||||
<div>收货地址</div>
|
||||
</van-col>
|
||||
</router-link>
|
||||
</van-row>
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group>
|
||||
<van-cell title="切换账号" is-link to="/login" />
|
||||
</van-cell-group>
|
||||
<navigate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetUserIndex } from "../../api/user.js";
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
data:{}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
},
|
||||
created:function(){
|
||||
GetUserIndex().then(response=>{
|
||||
this.data=response;
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.user {
|
||||
&-profile {
|
||||
text-align: center;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 141px;
|
||||
background-color: #f1f5fa;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
&-avatar{
|
||||
padding-top: 23px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
img{
|
||||
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
&-username{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
&-group {
|
||||
margin-bottom: .3rem;
|
||||
|
||||
.van-cell__value{
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
&-links {
|
||||
padding: 15px 0;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
.van-icon {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
22
mobile-web/src/page/user/info/detail.vue
Normal file
22
mobile-web/src/page/user/info/detail.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<headerNav title="账号管理"/>
|
||||
<van-cell-group>
|
||||
<van-cell title="修改个人信息" is-link />
|
||||
<van-cell title="修改登录密码" is-link />
|
||||
<van-cell title="修改绑定手机" is-link />
|
||||
<van-cell title="关联账号" is-link />
|
||||
<van-cell title="切换账号" is-link to="/login" />
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
110
mobile-web/src/page/user/order/info.vue
Normal file
110
mobile-web/src/page/user/order/info.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div style="background: #f7f7f7;">
|
||||
<headerNav title="订单详情"/>
|
||||
<van-steps :active="active">
|
||||
<van-step>提交订单</van-step>
|
||||
<van-step>配送中</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
</van-steps>
|
||||
|
||||
<van-cell class="logistics" to="/user/order/logistics/1" title="您的订单已由本人签收（已在配送员处采用无纸化方式签收本订单）。感谢您在京东购物，欢迎再次光临。参加评价还能赢取京豆哟。" label="2018-08-31 21:04:03" icon="logistics" is-link />
|
||||
<div style="height:15px;"></div>
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
center
|
||||
:border="false"
|
||||
>
|
||||
<template>
|
||||
<div>张三 138****6520</div>
|
||||
<div>广东省深圳市南山区科技园 </div>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
<div style="height:15px;"></div>
|
||||
<div v-for="(product,i) in products" :key="i">
|
||||
<product-card :product='product' />
|
||||
</div>
|
||||
<div style="height:15px;"></div>
|
||||
<van-cell-group>
|
||||
<van-cell title="订单编号" value="18081609422771742" />
|
||||
<van-cell title="下单时间" value="2018-08-16 09:42:27" />
|
||||
<van-cell title="订单状态" value="配送中" />
|
||||
</van-cell-group>
|
||||
<div style="height:15px;"></div>
|
||||
<van-cell-group class="total">
|
||||
<van-cell title="商品总额" value="9.99" />
|
||||
<van-cell title="运费" value="+ 0.00" />
|
||||
<van-cell title="实付金额" value="9.99" style="font-weight: 700;" />
|
||||
</van-cell-group>
|
||||
<div class="footer">
|
||||
<div class="munu">
|
||||
<van-button size="small">确认收货</van-button>
|
||||
<van-button size="small" type="danger">支付</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
active:1,
|
||||
products:[
|
||||
{
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499',
|
||||
quantity:2
|
||||
},
|
||||
{
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499',
|
||||
quantity:2
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.logistics{
|
||||
margin-top: 15px;
|
||||
i{
|
||||
line-height: 60px; font-size: 20px;
|
||||
}
|
||||
.van-cell__title span{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.van-cell__label{
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.total{
|
||||
.van-cell__value{color: red;}
|
||||
}
|
||||
.footer{
|
||||
height:50px;
|
||||
.munu{
|
||||
position: fixed;
|
||||
height: 49px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
line-height: 24px;
|
||||
text-align: right;
|
||||
.van-button{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
176
mobile-web/src/page/user/order/list.vue
Normal file
176
mobile-web/src/page/user/order/list.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div>
|
||||
<headerNav title="我的订单"/>
|
||||
<van-tabs v-model="active">
|
||||
<van-tab title="全部">
|
||||
|
||||
<div v-for="(item,index) in list" :key="index">
|
||||
<van-cell-group class="order-item" >
|
||||
<van-panel :title="'订单：'+item.ordercode" :status="item.state" >
|
||||
<div slot="header">
|
||||
<van-cell class="title" :title="'订单：'+item.ordercode" :value="item.state" :to="'/user/order/info/'+item.orderid"/>
|
||||
</div>
|
||||
<div>
|
||||
<router-link :to="'/user/order/info/'+item.orderid">
|
||||
<div v-if="item.products.length==1" v-for="(product,i) in item.products" :key="i">
|
||||
<product-card :product='product' />
|
||||
</div>
|
||||
<div v-if="item.products.length>1" class="more" >
|
||||
<div class="item" v-for="(product,i) in item.products" :key="i">
|
||||
<div >
|
||||
<img :src="product.imageURL"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<span class="total">总价：￥8154898.89</span>
|
||||
<van-button size="small">确认收货</van-button>
|
||||
<van-button size="small" type="danger">支付</van-button>
|
||||
</div>
|
||||
</van-panel>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
|
||||
</van-tab>
|
||||
<van-tab title="待付款">内容 2</van-tab>
|
||||
<van-tab title="待收货">内容 3</van-tab>
|
||||
<van-tab title="已完成">内容 4</van-tab>
|
||||
<van-tab title="已取消">内容 5</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components:{
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
active:0,
|
||||
|
||||
list:[
|
||||
{
|
||||
orderid:1,
|
||||
ordercode:'4511248234235',
|
||||
state:'待付款',
|
||||
products:[
|
||||
{
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499',
|
||||
quantity:2
|
||||
},
|
||||
{
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499',
|
||||
quantity:2
|
||||
},
|
||||
{
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499',
|
||||
quantity:2
|
||||
},
|
||||
{
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499',
|
||||
quantity:2
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
orderid:2,
|
||||
ordercode:'4511248234235',
|
||||
state:'待收货',
|
||||
products:[
|
||||
{
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499',
|
||||
quantity:2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
orderid:3,
|
||||
ordercode:'4511248234235',
|
||||
state:'已完成',
|
||||
products:[
|
||||
{
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499',
|
||||
quantity:2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
orderid:4,
|
||||
ordercode:'4511248234235',
|
||||
state:'已取消',
|
||||
products:[
|
||||
{
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499',
|
||||
quantity:2
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
.order-item{
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
.title{
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
.van-cell__title{
|
||||
flex: 2;
|
||||
}
|
||||
.van-cell__value{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.van-panel__footer {
|
||||
text-align: right;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.total{
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.more{
|
||||
overflow-x: scroll;white-space: nowrap; -webkit-overflow-scrolling: touch; margin: 5px 0 5px 15px;
|
||||
.item{
|
||||
width: 90px; height:90px; margin-right: 10px;display: inline-block;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
44
mobile-web/src/page/user/order/logistics.vue
Normal file
44
mobile-web/src/page/user/order/logistics.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div style="background: #f7f7f7;">
|
||||
<headerNav title="订单追踪"/>
|
||||
|
||||
<van-cell-group>
|
||||
<van-cell title="订单编号" value="18081609422771742" />
|
||||
</van-cell-group>
|
||||
<van-tabs >
|
||||
<van-tab title="包裹1">
|
||||
|
||||
<van-cell-group>
|
||||
<van-cell title="快递方式" value="顺丰快递" />
|
||||
<van-cell title="快递单号" value="51234548875645645" />
|
||||
</van-cell-group>
|
||||
<van-steps direction="vertical" :active="0" active-color="#f60" style="margin-top: 15px;">
|
||||
<van-step>
|
||||
<h3>【城市】物流状态1</h3>
|
||||
<p>2016-07-12 12:40</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>【城市】物流状态2</h3>
|
||||
<p>2016-07-11 10:00</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>快件已发货</h3>
|
||||
<p>2016-07-10 09:30</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
</van-tab>
|
||||
<van-tab title="包裹2">内容 3</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user