oneos-v5/backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clone 开源的 Shopping

Browse Source
This commit is contained in:
sin
2019-03-04 15:28:16 +08:00
parent 78945c61a7
commit c9d71726fa
83 changed files with 9774 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
mobile-web/src/page/user/address/edit.vue Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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>