fe / yohoblk-wap · Commits

Go to a project

Authored by 王洪广
Commit a7fc2705a7ed2430b2aa24e62e16f75cadfb8ee4 2 parents aca22f0f b524e9d9

增加订单、yoho币、订单详情页面

Inline Side-by-side
Showing 14 changed files with 808 additions and 8 deletions
... ... @@ -8,6 +8,8 @@ const homeModel = require('../models/index');
const _ = require('lodash');
const helpers = global.yoho.helpers;
// const model_order = require('../models/order')
/**
* 个人中心主页
*/
... ... @@ -133,11 +135,11 @@ const component = {
data.brand_list.forEach(function(d) {
result.push({
fav_id: d.brand_id,
link: "", // todo
link: '', // todo
imgUrl: d.brand_ico ? helpers.image(d.brand_ico, 160, 125) : '',
brandName: d.brand_name,
down: d.status == 0
})
});
});
if (page < data.page_total) {
... ... @@ -171,7 +173,7 @@ const component = {
discountPrice: (Number(d.market_price) - Number(d.sales_price) > 0) ? '¥' + Number(d.sales_price).toFixed(2) : false,
sellOut: d.storage < 0,
invalidGoods: d.status == 0
})
});
});
if (page < data.page_total) {
... ... @@ -193,15 +195,44 @@ const component = {
const type = req.body.type;
homeModel.favoriteDelete(uid, favId, type).then(data => {
return res.json(data);
})
});
},
// 关于我们
aboutUs: (req, res, next) => {
aboutUs: (req, res) => {
res.render('about-us', {
module: 'home',
page: 'index'
});
},
order: (req, res) => {
let type = req.query.type;
res.render('order', {
module: 'home',
page: 'order',
type: type
});
},
orderDetail: (req, res) => {
let orderCode = req.query.ordercode;
res.render('order-detail', {
module: 'home',
page: 'order',
orderCode: orderCode
});
},
getOrderData: (req, res) => {
// let param = Object.assign({uid: req.user.uid}, req.query);
res.json({});
},
coin: (req, res) => {
res.render('coin', {
module: 'home',
page: 'order'
});
}
};
module.exports = component;
\ No newline at end of file
module.exports = component;
... ...
/**
* 订单.
* @author hgwang
* @date 2016-07-20
*/
'use strict';
const api = global.yoho.ServiceAPI;
const Promise = require('bluebird');
const co = Promise.coroutine;
... ...
... ... @@ -15,6 +15,9 @@ const router = expressRouter();
// Your controller here
router.get('/', home.index); // 个人中心主页
router.get('/orders', home.order); // 订单
router.get('/mycurrency', home.coin); // yoho币
router.get('/orderDetail', home.orderDetail); // yoho币
router.get('/help', home.help); // 帮助中心列表页
router.get('/helpDetail', home.helpDetail); // 帮助中心详情页
... ...
<div class="yoho-coin">
<div class="coin-total">
<p>您目前拥有</p>
<p><b>123</b></p>
<p>个有货币</p>
</div>
<div class="coin-detail">
<p>明细列表</p>
<ul class="coin-detail-list">
<li>
<div class="coin-source">
<p>签到奖励</p>
<time>2016.1.23 12:31:00</time>
</div>
<div class="coin-num">+5</div>
</li>
<li>
<div class="coin-source">
<p>签到奖励</p>
<time>2016.1.23 12:31:00</time>
</div>
<div class="coin-num">+118</div>
</li>
</ul>
</div>
</div>
\ No newline at end of file
... ...
<div class="order-detail">
<div class="order-status">
<p>待收货</p>
</div>
<!--<div class="order-status">-->
<!--<p>待收货</p>-->
<!--<p>订单将被取消</p>-->
<!--</div>-->
<div class="order-address">
<p><span>Daisuke Obana</span><span>13160071768</span></p>
<p>江苏省南京市建邺区 <br>嘉陵江东街18号国家广告产业园5栋18楼产品部</p>
</div>
<div class="order-code">
<p>订单号:523243435</p>
<p>下单时间:2016.1.23 12:31:00</p>
</div>
<div class="order-goods">
<ul>
<li class="goods-info">
<div class="img-box">
<img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
<label>赠品</label>
</div>
<div class="goods-detail">
<p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
<p class="size">
<span>颜色:黑色</span>
<span>尺码:XL</span>
</p>
</div>
<div class="goods-price">
<p>&yen;6289.00</p>
<p>×1</p>
</div>
</li>
<li class="goods-info">
<div class="img-box">
<img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
</div>
<div class="goods-detail">
<p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
<p class="size">
<span>颜色:黑色</span>
<span>尺码:XL</span>
</p>
</div>
<div class="goods-price">
<p>&yen;6289.00</p>
<p>×1</p>
</div>
</li>
<li class="goods-info">
<div class="img-box">
<img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
</div>
<div class="goods-detail">
<p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
<p class="size">
<span>颜色:黑色</span>
<span>尺码:XL</span>
</p>
</div>
<div class="goods-price">
<p>&yen;6289.00</p>
<p>×1</p>
</div>
</li>
</ul>
</div>
<div class="order-amount">
<ul>
<li><label>商品：</label><span>&yen;20676.00</span></li>
<li><label>YOHO币：</label><span>&yen;32.12</span></li>
<li><label>运费：</label><span>&yen;0</span></li>
<li><label>总计：</label><span>&yen;20808.12</span></li>
</ul>
</div>
<div class="order-button">
<button>查看物流</button>
<button class="black">确认收货</button>
<button class="normal">确认收货</button>
</div>
</div>
\ No newline at end of file
... ...
<div class="order-wrapper" id="home-order-list">
<Order></Order>
<input type="hidden" value="{{type}}">
</div>
... ...
<div class="order-wrapper return-goods">
<ul>
<li class="order-item">
<div class="order-detail">
<div class="order-code">
<div class="code-time">
<p>订单号:523243435</p>
<p>申请时间：2016.1.23 12:31:00</p>
</div>
<p>通过审核</p>
</div>
<div class="order-goods">
<div class="goods-info">
<div class="img-box">
<img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
</div>
<div class="goods-detail">
<p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
<p class="size">
<span>颜色:黑色</span>
<span>尺码:XL</span>
</p>
</div>
<div class="goods-price">
<p>&yen;6289.00</p>
<p>×1</p>
</div>
</div>
<div class="goods-info">
<div class="img-box">
<img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
</div>
<div class="goods-detail">
<p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
<p class="size">
<span>颜色:黑色</span>
<span>尺码:XL</span>
</p>
</div>
<div class="goods-price">
<p>&yen;6289.00</p>
<p>×1</p>
</div>
</div>
</div>
<div class="order-option">
<div class="goods-total"></div>
<div class="options">
<button class="normal">取消申请</button>
</div>
</div>
</div>
</li>
<li class="order-item">
<div class="order-detail">
<div class="order-code">
<div class="code-time">
<p>订单号:523243435</p>
<p>申请时间：2016.1.23 12:31:00</p>
</div>
<p>商品寄回</p>
</div>
<div class="order-goods">
<div class="goods-info">
<div class="img-box">
<img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
</div>
<div class="goods-detail">
<p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
<p class="size">
<span>颜色:黑色</span>
<span>尺码:XL</span>
</p>
</div>
<div class="goods-price">
<p>&yen;6289.00</p>
<p>×1</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
\ No newline at end of file
... ...
/**
* order.page.js.
* @author hgwang
* @date 2016-07-20
*/
'use strict';
const Vue = require('yoho-vue');
const Order = require('home/order.vue');
new Vue({
el: '#home-order-list',
components: {
Order
}
});
... ...
... ... @@ -37,7 +37,6 @@ a {
margin-right: auto;
margin-left: auto;
width: 100%;
<<<<<<< HEAD
max-width: 750px;
min-height: 100%;
}
... ... @@ -46,6 +45,14 @@ a {
text-align: center;
}
ol, ul {
list-style: none
}
.hide {
display: none;
}
.overflow-hidden {
overflow: hidden;
height: 100%;
... ...
.yoho-coin{
background: #f6f6f6;
padding-top: 20px;
.coin-total{
padding: 35px 0;
background: $white;
text-align: center;
p:first-child{
font-size: 34px;
}
p:nth-child(2){
font-size: 78px;
color: #4a90e2;
line-height: 80px;
}
p:last-child{
color: #b0b0b0;
font-size: 28px;
}
}
.coin-detail{
margin-top: 40px;
>p:first-child{
padding: 0 30px;
font-size: 28px;
color: #b0b0b0;
}
.coin-detail-list{
padding: 0 30px;
background: $white;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
li{
display: flex;
padding: 20px 0;
border-bottom: 1px solid #eee;
&:last-child{
border-bottom: 0 none;
}
}
.coin-source{
flex: 1;
p{
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
height: 1.2em;
line-height: 1.25;
overflow: hidden;
font-size: 34px;
margin-right: 60px;
}
time{
display: block;
margin-top: 5px;
font-size: 28px;
color: #b0b0b0;
}
}
.coin-num{
font-size: 34px;
line-height: 92px;
}
}
}
}
\ No newline at end of file
... ...
... ... @@ -3,7 +3,6 @@
@import "feedback";
@import "fav";
@import "about-us";
.my-page {
color: #444;
background: #f0f0f0;
... ... @@ -165,3 +164,6 @@
}
}
}
@import "order";
@import "coin";
/*@import "order-detail";*/
\ No newline at end of file
... ...
$black: #000;
$white: #fff;
.order-detail{
background: #f6f6f6;
>div{
background: $white;
padding: 0 30px;
}
.order-status{
display: flex;
height: 80px;
line-height: 80px;
color: $white;
background: $black;
p:first-of-type{
flex: 1;
font-size: 34px;
}
}
.order-code{
padding: 20px 30px;
margin-bottom: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
p:first-of-type{
font-size: 34px;
font-weight: 700;
}
p:last-of-type{
font-size: 28px;
color: #b0b0b0;
}
}
.order-address{
position: relative;
padding: 20px 30px 27px;
margin-bottom: 20px;
border-top: 1px solid #eee;
word-wrap: break-word;
p:first-of-type{
font-size: 32px;
font-weight: 700;
span{
margin-right: 40px;
}
}
p:last-of-type{
font-size: 28px;
color: #b0b0b0;
}
&:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 12px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAMBAMAAAAHcycSAAAAElBMVEXu7u7lnJrbSUbkm5qqqqpmZmaVABiUAAAAKUlEQVR4AWNAACElIDBgQAGuoUDggCrGCFKnjCrGAlIXAmINWgNHDQQAWjsd42E4szoAAAAASUVORK5CYII=") repeat-x;
border-bottom: 1px solid #eee;
}
}
.order-goods{
padding-top: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
.goods-info{
display: flex;
padding: 20px 0;
border-bottom: 1px solid #eee;
&:last-child{
border-bottom: 0 none;
}
}
.img-box{
position: relative;
width: 98px;
height: 130px;
overflow: hidden;
label{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
background: rgba(0, 0, 0, .2);
color: $white;
text-align: center;
}
img{
width: 100%;
height: 100%;
}
}
.goods-detail{
flex: 1;
margin: 0 20px;
font-size: 24px;
span{
margin-right: 40px;
}
.name{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
height: 2.4em;
line-height: 1.25;
overflow: hidden;
font-size: 28px;
}
.size{
color: #b0b0b0;
}
}
.goods-price{
text-align: right;
p:first-of-type{
font-size: 28px;
}
p:last-of-type{
font-size: 30px;
color: #b0b0b0;
}
}
}
.order-amount{
padding: 30px 20px;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
text-align: right;
li{
font-size: 28px;
label{
display: inline-block;
width: 150px;
text-align: left;
color: #b0b0b0;
}
span{
display: inline-block;
width:200px;
text-align: left;
}
&:last-of-type{
font-size: 34px;
label{
color: $black;
}
}
}
}
.order-button{
padding: 30px 20px;
border-top: 1px solid #eee;
text-align: right;
button{
padding: 0 20px;
height: 68px;
line-height: 68px;
color: $black;
text-align: center;
-webkit-appearance: none;
border: 0 none;
background: $white;
font-size: 28px;
&.black{
width: 192px;
color: $white;
background: $black;
}
&.countdown{
color: $white;
background: $black;
}
&.normal{
width: 188px;
padding: 0;
border: 1px solid $black;
color: $black;
}
&:focus{
outline: none;
}
}
}
}
\ No newline at end of file
... ...
$black: #000;
$white: #fff;
.order-wrapper{
background: #f6f6f6;
padding-top: 20px;
.order-item{
background: $white;
margin-top: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
&:first-child{
margin-top: 0;
}
}
.order-detail{
padding: 0 30px;
.order-code,.order-option,.goods-info{
display: flex;
>div{
box-sizing: border-box;
}
}
}
.order-code{
height: 88px;
font-size: 34px;
border-bottom: 1px solid #eee;
line-height: 88px;
>p:first-child{
flex: 1;
}
}
.order-goods{
.goods-info{
padding: 20px 0;
border-bottom: 1px solid #eee;
&:last-child{
border-bottom: 0 none;
}
}
.img-box{
width: 98px;
height: 130px;
overflow: hidden;
img{
width: 100%;
height: 100%;
}
}
.goods-detail{
flex: 1;
margin: 0 20px;
font-size: 24px;
span{
margin-right: 40px;
}
.name{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
height: 2.4em;
line-height: 1.25;
overflow: hidden;
font-size: 28px;
}
.size{
color: #b0b0b0;
}
}
.goods-price{
text-align: right;
p:first-of-type{
font-size: 28px;
}
p:last-of-type{
font-size: 30px;
color: #b0b0b0;
}
}
}
.order-option{
padding: 30px 0;
border-top: 1px solid #eee;
.goods-total{
flex: 1;
font-size: 28px;
line-height: 68px;
}
.options{
button{
padding: 0 20px;
height: 68px;
line-height: 68px;
color: $black;
text-align: center;
-webkit-appearance: none;
border: 0 none;
background: $white;
font-size: 28px;
&.black{
width: 192px;
color: $white;
background: $black;
}
&.countdown{
color: $white;
background: $black;
}
&.normal{
width: 188px;
padding: 0;
border: 1px solid $black;
color: $black;
}
&:focus{
outline: none;
}
}
}
}
}
.return-goods{
.order-code{
height: 128px;
.code-time{
flex: 1;
p:first-child{
margin-top: 8px;
line-height: 60px;
}
p:nth-child(2){
font-size: 28px;
line-height: 30px;
color: #b0b0b0;
}
}
>p:last-child{
line-height: 128px;
color: #4a90e2;
}
}
}
\ No newline at end of file
... ...
<template>
<ul>
<li class="order-item">
<div class="order-detail">
<div class="order-code">
<p>订单号:523243435</p>
<p>待付款</p>
</div>
<div class="order-goods">
<div class="goods-info">
<div class="img-box">
<img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
</div>
<div class="goods-detail">
<p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
<p class="size">
<span>颜色:黑色</span>
<span>尺码:XL</span>
</p>
</div>
<div class="goods-price">
<p>&yen;6289.00</p>
<p>×1</p>
</div>
</div>
<div class="goods-info">
<div class="img-box">
<img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
</div>
<div class="goods-detail">
<p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
<p class="size">
<span>颜色:黑色</span>
<span>尺码:XL</span>
</p>
</div>
<div class="goods-price">
<p>&yen;6289.00</p>
<p>×1</p>
</div>
</div>
</div>
<div class="order-option">
<div class="goods-total">合计: <b>&yen;15677.00</b></div>
<div class="options">
<button>取消订单</button>
<button class="countdown">去支付 11:58:12</button>
</div>
</div>
</div>
</li>
</ul>
</template>
<script>
const $ = require('yoho-jquery');
module.exports = {
data() {
return {
page: 0,
limit: 10,
type: document.getElementById('')
};
},
ready(){
this.getOrderData();
},
methods:{
getOrderData(){
$.ajax({
url: '/home/favorite/favpaging',
data: {
page : ++ this.page,
limit : this.page,
type: this.type
}
}).then(result => {
if(result){
} else {
}
}).fail(() => {
tip('网络错误');
});
},
cancelOrder(id){
},
deleteOrder(id){
},
rebuy(id){
},
confirmGoods(){
},
goBuy(){
}
}
};
</script>
<style>
html,body{height:100%;}
</style>
\ No newline at end of file
... ...