fe / yohoblk-wap · Commits

Go to a project

Authored by ccbikai
Commit 217246ee78f1ebb1d18e76f188c0c430cbd97781 2 parents 03f3e3ab 36f398c4 master ... feature/blk-miniapp feature/brand-multi-shops feature/change feature/context feature/context-and-tracking feature/docker feature/hotfix feature/leftScrollMore feature/listGoodsList feature/style feature/tracking feature/webpack-hash feature/webpack2 gray hotfix/moreGoods hotfix/ssr release/0725 release/5.8 2017.09.01 fix-cant-loadmore

Merge branch 'feature/home' of git.yoho.cn:fe/yohoblk-wap into feature/home

Inline Side-by-side
Showing 22 changed files with 867 additions and 513 deletions
... ... @@ -29,67 +29,16 @@ const fav = {
const tab = req.query.tab;
const page = req.query.page;
const result = [];
let isend = true;
if (tab === 'brand') {
const gender = '1,2,3'; // todo 获取频道的性别
favModel.getFavBrandData(uid, gender, page, 10).then(data => {
if (data && page <= data.page_total) {
data.brand_list.forEach(function(d) {
result.push({
fav_id: d.brand_id,
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) {
isend = false;
}
}
return res.json({
isend: isend,
list: result
});
return res.json(data);
});
} else {
favModel.getFavProductData(uid, page, 10).then(data => {
if (data && page <= data.page_total) {
data.product_list.forEach(function(d) {
if (!d.product_skn) {
return;
}
let link = '';
if (d.goodsId && d.cnAlphabet) {
link = helpers.urlFormat(`/product/pro_${d.product_id}_${d.goodsId}/${d.cnAlphabet}.html`);
}
result.push({
fav_id: d.product_id,
link: link,
imgUrl: d.image ? helpers.image(d.image) : '',
title: d.product_name,
price: '¥' + Number(Math.max(d.market_price, 0)).toFixed(2),
discountPrice: (Number(d.market_price) - Number(d.sales_price) > 0) ? '¥' + Number(Math.max(d.sales_price, 0)).toFixed(2) : false,
sellOut: d.storage < 0,
invalidGoods: d.status === 0
});
});
if (page < data.page_total) {
isend = false;
}
}
return res.json({
isend: isend,
list: result
});
return res.json(data);
}).catch(next);
}
},
... ...
... ... @@ -8,8 +8,6 @@ const homeModel = require('../models/index');
const _ = require('lodash');
const helpers = global.yoho.helpers;
// const model_order = require('../models/order')
/**
* 个人中心主页
*/
... ... @@ -113,34 +111,6 @@ const component = {
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'
});
}
};
... ...
/**
* 订单相关操作.
* @author hgwang
* @date 2016-07-22
*/
'use strict';
const orderModel = require('../models/order');
const notLoginCode = 400;
const notLoginTip = '抱歉，您暂未登录！';
const testUid = 8050378;// 测试uid
const isBLK = 1;
const order = {
orders: (req, res) => {
let type = req.query.type;
res.render('order', {
module: 'home',
page: 'order',
type: type
});
},
orderDetail: (req, res) => {
let orderCode = req.query.orderCode;
let uid = req.user.uid;
uid = testUid; // 测试uid
if (!uid && req.xhr) {
return res.json({
code: notLoginCode,
message: notLoginTip
});
}
res.render('order-detail', {
module: 'home',
page: 'order-detail',
orderCode: orderCode
});
},
getOrderData: (req, res) => {
let uid = req.query.id;
let page = req.query.page;
let type = req.query.type;
let limit = req.query.limit;
let isend = true;
uid = testUid;
if (!uid && req.xhr) {
return res.json({
code: notLoginCode,
message: notLoginTip
});
}
let param = {
uid: uid,
page: page,
type: type,
limit: limit,
app_type: isBLK
};
orderModel.getOrders(param).then(result => {
if (result && page < result.page_total) {
isend = false;
}
return res.json(Object.assign({isend: isend}, result));
});
},
getOrderDetailData: (req, res) => {
let orderCode = req.query.orderCode;
let uid = req.user.uid;
uid = testUid; // 测试uid
if (!uid && req.xhr) {
return res.json({
code: notLoginCode,
message: notLoginTip
});
}
orderModel.getOrderDetail(uid, orderCode).then(result => {
return res.json(result);
});
},
cancelOrder: (req, res) => {
let orderCode = req.query.orderCode;
let reasonId = req.query.reasonId;
let reason = req.query.reason;
orderModel.cancelOrder(orderCode, reasonId, reason).then(result => {
return res.json(result);
});
},
confirmOrder: (req, res) => {
let orderode = req.query.orderCode;
orderModel.confirmOrder(orderode).then(result => {
return res.json(result);
});
},
deleteOrder: (req, res) => {
let orderCode = req.query.orderCode;
let uid = req.user.uid;
uid = testUid; // 测试uid
if (!uid && req.xhr) {
return res.json({
code: notLoginCode,
message: notLoginTip
});
}
orderModel.deleteOrder(orderCode, uid).then(result => {
return res.json(result);
});
},
coin: (req, res) => {
res.render('coin', {
module: 'home',
page: 'order'
});
}
};
module.exports = order;
\ No newline at end of file
... ...
'use strict';
const api = global.yoho.API;
const helpers = global.yoho.helpers;
/**
* 处理用户收藏的商品数据
... ... @@ -16,7 +17,47 @@ exports.getFavProductData = (uid, page, limit) => {
page: page,
limit: limit
}).then(result => {
return result.data;
var isend = true,
list = [],
data = result.data;
if (data && page <= data.page_total) {
data.product_list.forEach(function(d) {
if (!d.product_skn) {
return;
}
let link = '';
let discountPrice = false;
if (d.goodsId && d.cnAlphabet) {
link = helpers.urlFormat(`/product/pro_${d.product_id}_${d.goodsId}/${d.cnAlphabet}.html`);
}
if (Number(d.market_price) - Number(d.sales_price) > 0) {
discountPrice = '¥' + Number(Math.max(d.sales_price, 0)).toFixed(2);
}
list.push({
fav_id: d.product_id,
link: link,
imgUrl: d.image ? helpers.image(d.image) : '',
title: d.product_name,
price: '¥' + Number(Math.max(d.market_price, 0)).toFixed(2),
discountPrice: discountPrice,
sellOut: d.storage < 0,
invalidGoods: d.status === 0
});
});
if (page < data.page_total) {
isend = false;
}
}
return {
isend: isend,
list: list
};
});
};
... ... @@ -37,7 +78,30 @@ exports.getFavBrandData = (uid, gender, page, limit) => {
page: page,
limit: limit
}).then(result => {
return result.data;
var isend = true,
list = [],
data = result.data;
if (data && page <= data.page_total) {
data.brand_list.forEach(function(d) {
list.push({
fav_id: d.brand_id,
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) {
isend = false;
}
}
return {
isend: isend,
list: list
};
});
};
... ...
... ... @@ -5,7 +5,87 @@
*/
'use strict';
const api = global.yoho.ServiceAPI;
const Promise = require('bluebird');
const co = Promise.coroutine;
const api = global.yoho.API;
//const serviceAPI = global.yoho.ServiceAPI;
const camelCase = global.yoho.camelCase;
/**
* 获取订单列表数据
* @param param
* uid uid,
* page 页数
* type 订单类型 1:全部订单,2:待付款,3:待发货,4:待收货,5:待评论/成功订单,7:失败/取消
* limit 每页大小
* app_type 0:yohobuy,1:blk
* @returns {Promise.<T>|*}
*/
exports.getOrders = (param) => {
param = Object.assign({method: 'app.SpaceOrders.get'}, param);
return api.get('', param).then(camelCase);
};
/**
* 获取订单详情
* @param uid
* @param orderCode
* @returns {Promise.<T>|*}
*/
exports.getOrderDetail = (uid, orderCode) => {
return api.get('', {
method: 'app.SpaceOrders.detail',
order_code: orderCode,
uid: uid
}).then(camelCase);
};
/**
* 取消订单
* @param orderCode
* @param reasonId
* @param reason
* @returns {Promise.<T>|*}
*/
exports.cancelOrder = (orderCode, reasonId, reason) => {
return api.get('', {
method: 'app.SpaceOrders.close',
order_code: orderCode,
reason_id: reasonId,
reason: reason
}).then(result => {
return result;
});
};
/**
* 确认订单
* @param orderCode 订单号
* @returns {Promise.<T>|*}
*/
exports.confirmOrder = (orderCode) => {
return api.get('', {
method: 'app.SpaceOrders.confirm',
order_code: orderCode
}).then(result => {
return result;
});
};
/**
* 删除订单
* @param orderCode 订单号
* @param uid uid
* @returns {Promise.<T>|*}
*/
exports.deleteOrder = (orderCode, uid) => {
return api.get('', {
method: 'app.SpaceOrders.delOrderByCode',
order_code: orderCode,
uid: uid
}).then(result => {
return result;
});
};
... ...
... ... @@ -11,14 +11,22 @@ const cRoot = './controllers';
const home = require(cRoot);
const favorite = require(cRoot + '/favorite');
const refund = require(cRoot + '/refund');
const order = require(cRoot + '/order');
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('/orders', order.orders); // 订单
router.get('/mycurrency', order.coin); // yoho币
router.get('/order-detail', order.orderDetail); // 订单详情
router.get('/get-orders', order.getOrderData); // 获取订单数据
router.get('/get-order', order.getOrderDetailData); // 获取订单详情数据
router.get('/order-detail', order.orderDetail); // 订单详情
router.post('/cancel-order', order.cancelOrder); // 取消订单
router.post('/delete-order', order.deleteOrder); // 删除订单
router.post('/confirm-order', order.confirmOrder); // 确认订单
router.get('/help', home.help); // 帮助中心列表页
router.get('/help-detail', home.helpDetail); // 帮助中心详情页
... ...
<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 class="order-detail" id="order-detail">
<order-detail></order-detail>
<input type="hidden" id="order-code" value="{{orderCode}}">
</div>
\ No newline at end of file
... ...
<div class="order-wrapper" id="home-order-list">
<Order></Order>
<input type="hidden" value="{{type}}">
<input type="hidden" value="{{type}}" id="order-type">
</div>
... ...
... ... @@ -53,3 +53,60 @@ Vue.filter('clothingGenderIdentity', (value)=> {
Vue.filter('brandUrl', (value)=> {
return `/brand?domain=${value}`;
});
/**
* 订单状态
* @example
* {value | order}
* 状态 0:待付款,1-3:待发货,4-5:待收货(0:未付款,1:已付款,2:备货中,3:配货中,4:已发货,5:运输中,6:已完成)
*/
Vue.filter('convertOrderState', (value) => {
let stateTxt = '';
if (value !== undefined) {
value = parseInt(value);
}
switch (value) {
case 0:
stateTxt = '待付款';
break;
case 1:
stateTxt = '待发货';
break;
case 2:
stateTxt = '待发货';
break;
case 3:
stateTxt = '待发货';
break;
case 4:
stateTxt = '待收货';
break;
case 5:
stateTxt = '待发货';
break;
case 6:
stateTxt = '已完成';
break;
}
return stateTxt;
});
/**
* 转换时间
* yyyy-MM-dd hh:mm:ss
*/
Vue.filter('convertTime', (value) => {
if (value === undefined) {
return;
}
let date = new Date(parseFloat(value) * 1000);
let Y = date.getFullYear() + '-';
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
let D = date.getDate() + ' ';
let h = date.getHours() + ':';
let m = date.getMinutes() + ':';
let s = date.getSeconds();
return Y + M + D + h + m + s;
});
\ No newline at end of file
... ...
/**
* order-detail.page.js.
* @author hgwang
* @date 2016-07-23
*/
'use strict';
const Vue = require('yoho-vue');
const OrderDetail = require('home/order-detail.vue');
require('common/vue-filter');
new Vue({
el: '#order-detail',
data: {
orderCode: document.getElementById('order-code').value
},
components: {
OrderDetail
}
});
\ No newline at end of file
... ...
... ... @@ -7,9 +7,17 @@
const Vue = require('yoho-vue');
const Order = require('home/order.vue');
const infiniteScroll = require('yoho-vue-infinite-scroll');
Vue.use(infiniteScroll);
require('common/vue-filter');
new Vue({
el: '#home-order-list',
data: {
type: document.getElementById('order-type').value
},
components: {
Order
}
... ...
.yoho-coin{
.yoho-coin {
background: #f6f6f6;
padding-top: 20px;
.coin-total{
.coin-total {
padding: 35px 0;
background: $white;
text-align: center;
p:first-child{
p:first-child {
font-size: 34px;
}
p:nth-child(2){
p:nth-child(2) {
font-size: 78px;
color: #4a90e2;
line-height: 80px;
}
p:last-child{
p:last-child {
color: #b0b0b0;
font-size: 28px;
}
}
.coin-detail{
.coin-detail {
margin-top: 40px;
>p:first-child{
padding: 0 30px;
font-size: 28px;
color: #b0b0b0;
> p:first-child {
padding: 0 30px;
font-size: 28px;
color: #b0b0b0;
}
.coin-detail-list{
.coin-detail-list {
padding: 0 30px;
background: $white;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
li{
li {
display: flex;
padding: 20px 0;
border-bottom: 1px solid #eee;
&:last-child{
border-bottom: 0 none;
&:last-child {
border-bottom: 0 none;
}
}
.coin-source{
.coin-source {
flex: 1;
p{
p {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
... ... @@ -55,17 +57,18 @@
font-size: 34px;
margin-right: 60px;
}
time{
time {
display: block;
margin-top: 5px;
font-size: 28px;
color: #b0b0b0;
}
}
.coin-num{
.coin-num {
font-size: 34px;
line-height: 92px;
}
}
}
}
\ No newline at end of file
}
... ...
... ... @@ -3,8 +3,5 @@
@import "feedback";
@import "fav";
@import "about-us";
@import "order";
@import "coin";
@import "logistics";
/* @import "order-detail"; */
... ...
$black: #000;
$white: #fff;
.order-detail{
.main-wrap {
background: #f6f6f6;
>div{
background: $white;
padding: 0 30px;
}
.order-detail {
> div {
background: $white;
padding: 0 30px;
}
.order-status{
.order-status {
display: flex;
height: 80px;
line-height: 80px;
color: $white;
background: $black;
p:first-of-type{
p:first-of-type {
flex: 1;
font-size: 34px;
}
}
.order-code{
.order-code {
padding: 20px 30px;
margin-bottom: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
p:first-of-type{
p:first-of-type {
font-size: 34px;
font-weight: 700;
}
p:last-of-type{
p:last-of-type {
font-size: 28px;
color: #b0b0b0;
}
}
.order-address{
.order-address {
position: relative;
padding: 20px 30px 27px;
margin-bottom: 20px;
border-top: 1px solid #eee;
word-wrap: break-word;
p:first-of-type{
p:first-of-type {
font-size: 32px;
font-weight: 700;
span{
span {
margin-right: 40px;
}
}
p:last-of-type{
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;
&: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{
.order-goods {
padding-top: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
.goods-info{
.goods-info {
display: flex;
padding: 20px 0;
border-bottom: 1px solid #eee;
&:last-child{
border-bottom: 0 none;
&:last-child {
border-bottom: 0 none;
}
}
.img-box{
.img-box {
position: relative;
width: 98px;
height: 130px;
overflow: hidden;
label{
label {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
background: rgba(0, 0, 0, .2);
background: rgba(0, 0, 0, 0.2);
color: $white;
text-align: center;
}
img{
img {
width: 100%;
height: 100%;
}
}
.goods-detail{
.goods-detail {
flex: 1;
margin: 0 20px;
font-size: 24px;
span{
span {
margin-right: 40px;
}
.name{
.name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
... ... @@ -116,55 +125,63 @@ $white: #fff;
overflow: hidden;
font-size: 28px;
}
.size{
.size {
color: #b0b0b0;
}
}
.goods-price{
.goods-price {
text-align: right;
p:first-of-type{
p:first-of-type {
font-size: 28px;
}
p:last-of-type{
p:last-of-type {
font-size: 30px;
color: #b0b0b0;
}
}
}
.order-amount{
.order-amount {
padding: 30px 20px;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
text-align: right;
li{
li {
font-size: 28px;
label{
label {
display: inline-block;
width: 150px;
text-align: left;
color: #b0b0b0;
}
span{
span {
display: inline-block;
width:200px;
width: 200px;
text-align: left;
}
&:last-of-type{
&:last-of-type {
font-size: 34px;
label{
label {
color: $black;
}
}
}
}
.order-button{
.order-button {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
padding: 30px 20px;
border-top: 1px solid #eee;
text-align: right;
button{
button {
padding: 0 20px;
height: 68px;
line-height: 68px;
... ... @@ -175,24 +192,24 @@ $white: #fff;
background: $white;
font-size: 28px;
&.black{
width: 192px;
color: $white;
background: $black;
&.black {
width: 192px;
color: $white;
background: $black;
}
&.countdown{
color: $white;
background: $black;
&.countdown {
color: $white;
background: $black;
}
&.normal{
width: 188px;
padding: 0;
border: 1px solid $black;
color: $black;
&.normal {
width: 188px;
padding: 0;
border: 1px solid $black;
color: $black;
}
&:focus{
outline: none;
&:focus {
outline: none;
}
}
}
}
\ No newline at end of file
}
... ...
$black: #000;
$white: #fff;
.order-wrapper{
.order-wrapper {
background: #f6f6f6;
padding-top: 20px;
.order-item{
.order-item {
background: $white;
margin-top: 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
&:first-child{
margin-top: 0;
&:first-child {
margin-top: 0;
}
}
.order-detail{
.order-detail {
padding: 0 30px;
.order-code,.order-option,.goods-info{
display: flex;
>div{
box-sizing: border-box;
.order-code,
.order-option,
.goods-info {
display: flex;
> div {
box-sizing: border-box;
}
}
}
.order-code{
.order-code {
height: 88px;
font-size: 34px;
border-bottom: 1px solid #eee;
line-height: 88px;
>p:first-child{
flex: 1;
> p:first-child {
flex: 1;
}
}
.order-goods{
.goods-info{
.order-goods {
.goods-info {
position: relative;
padding: 20px 0;
border-bottom: 1px solid #eee;
&:last-child{
border-bottom: 0 none;
&:last-child {
border-bottom: 0 none;
}
> a {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
opacity: 0;
}
}
.img-box{
.img-box {
width: 98px;
height: 130px;
overflow: hidden;
img{
img {
width: 100%;
height: 100%;
}
}
.goods-detail{
.goods-detail {
flex: 1;
margin: 0 20px;
font-size: 24px;
span{
span {
margin-right: 40px;
}
.name{
.name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
height: 2.4em;
/* height: 2.4em; */
line-height: 1.25;
overflow: hidden;
font-size: 28px;
}
.size{
.size {
color: #b0b0b0;
}
}
.goods-price{
.goods-price {
text-align: right;
p:first-of-type{
p:first-of-type {
font-size: 28px;
}
p:last-of-type{
p:last-of-type {
font-size: 30px;
color: #b0b0b0;
}
}
}
.order-option{
.order-option {
padding: 30px 0;
border-top: 1px solid #eee;
.goods-total{
.goods-total {
flex: 1;
font-size: 28px;
line-height: 68px;
}
.options{
button{
.options {
button {
padding: 0 20px;
height: 68px;
line-height: 68px;
... ... @@ -107,47 +127,50 @@ $white: #fff;
background: $white;
font-size: 28px;
&.black{
width: 192px;
color: $white;
background: $black;
&.black {
width: 192px;
color: $white;
background: $black;
}
&.countdown{
color: $white;
background: $black;
&.countdown {
color: $white;
background: $black;
}
&.normal{
width: 188px;
padding: 0;
border: 1px solid $black;
color: $black;
&.normal {
width: 188px;
padding: 0;
border: 1px solid $black;
color: $black;
}
&:focus{
outline: none;
&:focus {
outline: none;
}
}
}
}
}
.return-goods{
.order-code{
.return-goods {
.order-code {
height: 128px;
.code-time{
.code-time {
flex: 1;
p:first-child{
p:first-child {
margin-top: 8px;
line-height: 60px;
}
p:nth-child(2){
p:nth-child(2) {
font-size: 28px;
line-height: 30px;
color: #b0b0b0;
}
}
>p:last-child{
line-height: 128px;
color: #4a90e2;
> p:last-child {
line-height: 128px;
color: #4a90e2;
}
}
}
\ No newline at end of file
}
... ...
... ... @@ -41,9 +41,7 @@
productList: [],
// state:
inSearching: false,
brand: require('product/filter/brand-group-mock')
inSearching: false
};
},
watch: {
... ...
<template>
<div class="order-status">
<p>{{order.status | convertOrderState}}</p>
<p v-if="order.status == 0">剩余: 订单将被取消</p>
</div>
<div class="order-address">
<p><span>{{order.userName}}</span><span>{{order.phone}}</span></p>
<p>{{order.area}} <br>{{order.address}}</p>
</div>
<div class="order-code">
<p>订单号:{{order.orderCode}}</p>
<p>下单时间:{{order.createTime | convertTime}}</p>
</div>
<div class="order-goods">
<ul>
<li class="goods-info" v-for="product in order.orderGoods">
<div class="img-box">
<img v-bind:src="product.goodsImage | resize 49 65" alt="">
<!--<label>赠品</label>-->
</div>
<div class="goods-detail">
<p class="name">{{product.productName}}</p>
<p class="size">
<span>颜色:{{product.colorName}}</span>
<span>尺码:{{product.sizeName}}</span>
</p>
</div>
<div class="goods-price">
<p>&yen;{{product.goodsPrice}}</p>
<p>×{{product.buyNumber}}</p>
</div>
</li>
</ul>
</div>
<div class="order-amount">
<ul>
<li><label>商品：</label><span>{{order.goodsTotalAmount}}</span></li>
<li><label>YOHO币：</label><span>{{order.yohoCoinNum}}</span></li>
<li><label>运费：</label><span>{{order.shippingCost}}</span></li>
<li><label>总计：</label><span>&yen;{{order.paymentAmount}}</span></li>
</ul>
</div>
<div class="order-button">
<button v-if="order.status == 0" @click="cancelOrder(order.orderCode)">取消订单</button>
<button v-if="order.status == 0 " class="countdown" @click="goBuy()">去支付 11:58:12</button>
<button v-if="order.status == 4 || order.status == 5 ">查看物流</button>
<button v-if="order.status == 4 || order.status == 5 " class="black" @click="confirmGoods(order.orderCode)">确认收货</button>
<button v-if="order.status == 6" @click="deleteOrder(order,index)">删除订单</button>
<button v-if="order.status == 6" class="normal">再次购买</button>
</div>
</template>
<script>
'use strict';
const $ = require('yoho-jquery');
const tip = require('common/tip');
const modal = require('common/modal');
const overlay = require('common/overlay');
module.exports = {
data() {
return {
order:{}
};
},
ready(){
this.getOrderData();
},
methods:{
getOrderData(){
// let _that = this;
$.ajax({
url: '/home/get-order',
data: {
orderCode: this.$parent.$data.orderCode
}
}).then(result => {
if(result){
this.$set('order', result.data);
//_that.orderList = result.data.orderList;
} else {
}
}).fail(() => {
tip('网络错误');
});
},
cancelOrder(code){
$.modal.confirm('', '订单取消后不能恢复,确认取消订单吗？', function() {
$.ajax({
url: '/home/cancel-order',
type: 'post',
data: {
orderCode: code
}
}).then(result => {
if(result.code === 200 ){
location.href = '/home/orders';
} else {
tip(result.message);
}
}).fail(() => {
tip('操作失敗');
});
});
},
deleteOrder(code){
$.modal.confirm('', '确认删除订单？', function() {
$.ajax({
url: '/home/delete-order',
type: 'post',
data: {
orderCode: code
}
}).then(result => {
if(result.code === 200 ){
location.href = '/home/orders';
} else {
tip(result.message);
}
}).fail(() => {
tip('操作失敗');
});
});
},
confirmGoods(code){
$.ajax({
url: '/home/confirm-order',
type: 'post',
data: {
orderCode: code
}
}).then(result => {
if(result.code === 200 ){
location.reload();
} else {
tip(result.message);
}
}).fail(() => {
tip('操作失敗');
});
},
goBuy(){
},
see(){
}
}
};
</script>
<style>
@import "../../scss/home/_order-detail.css";
</style>
\ No newline at end of file
... ...
<template>
<ul>
<li class="order-item">
<ul v-infinite-scroll="getOrderData()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<li class="order-item" v-for="(index, order) in orderList">
<div class="order-detail">
<div class="order-code">
<p>订单号:523243435</p>
<p>待付款</p>
<p>订单号:{{order.orderCode}}</p>
<p>{{order.status | convertOrderState}}</p>
</div>
<div class="order-goods">
<div class="goods-info">
<div class="order-goods" >
<div class="goods-info" v-for="goods in order.orderGoods">
<div class="img-box">
<img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
<img v-bind:src="goods.goodsImage | resize 49 65" alt="{{goods.productName}}">
</div>
<div class="goods-detail">
<p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
<p class="name">{{goods.productName}}</p>
<p class="size">
<span>颜色:黑色</span>
<span>尺码:XL</span>
<span>颜色:{{goods.colorName}}</span>
<span>尺码:{{goods.sizeName}}</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>
<p>&yen; {{goods.goodsPrice}}</p>
<p>×{{goods.buyNumber}}</p>
</div>
<a href="/home/order-detail?orderCode={{order.orderCode}}"></a>
</div>
</div>
<div class="order-option">
<div class="goods-total">合计: <b>&yen;15677.00</b></div>
<div class="goods-total">合计: <b>&yen;{{order.amount}}</b></div>
<div class="options">
<button>取消订单</button>
<button class="countdown">去支付 11:58:12</button>
<button v-if="order.status === 0" @click="cancelOrder(order.orderCode)">取消订单</button>
<button v-if="order.status === 0 " class="countdown" @click="goBuy()">去支付 11:58:12</button>
<button v-if="order.status === 4 || order.status === 5 ">查看物流</button>
<button v-if="order.status === 4 || order.status === 5 " class="black" @click="confirmGoods(order.orderCode)">确认收货</button>
<button v-if="order.status === 6" @click="deleteOrder(order,index)">删除订单</button>
<button v-if="order.status === 6" class="normal">再次购买</button>
</div>
</div>
</div>
... ... @@ -53,14 +42,21 @@
</template>
<script>
'use strict';
const $ = require('yoho-jquery');
const tip = require('common/tip');
const modal = require('common/modal');
const overlay = require('common/overlay');
module.exports = {
data() {
return {
page: 0,
limit: 10,
type: document.getElementById('')
type: this.$parent.$data.type,
orderList: [],
busy: false,
};
},
ready(){
... ... @@ -68,37 +64,94 @@
},
methods:{
getOrderData(){
let _that = this;
this.busy = true;
$.ajax({
url: '/home/favorite/favpaging',
url: '/home/get-orders',
data: {
page : ++ this.page,
limit : this.page,
limit : this.limit,
type: this.type
}
}).then(result => {
if(result){
} else {
if(result.code === 200){
if (result.isend) {
_that.busy = true;
} else {
_that.busy = false;
}
if(result.data.orderList.length > 0){
this.$set('orderList', result.data.orderList);
//_that.orderList = result.data.orderList;
} else {
}
}
}).fail(() => {
tip('网络错误');
tip('网络错误');
});
},
cancelOrder(id){
cancelOrder(code){
$.modal.confirm('', '订单取消后不能恢复,确认取消订单吗？', function() {
$.ajax({
url: '/home/cancel-order',
type: 'post',
data: {
orderCode: code
}
}).then(result => {
if(result.code === 200 ){
location.reload();
} else {
tip(result.message);
}
}).fail(() => {
tip('操作失敗');
});
});
},
deleteOrder(id){
deleteOrder(order, index){
var that = this;
$.modal.confirm('', '确认删除订单？', function() {
$.ajax({
url: '/home/delete-order',
type: 'post',
data: {
orderCode: order.orderCode
}
}).then(result => {
if(result.code === 200 ){
//location.reload();
that.$el.querySelectorAll('.order-item')[index].remove()
} else {
tip(result.message);
}
}).fail(() => {
tip('操作失敗');
});
});
},
rebuy(id){
confirmGoods(code){
$.ajax({
url: '/home/confirm-order',
type: 'post',
data: {
orderCode: code
}
}).then(result => {
if(result.code === 200 ){
location.reload();
} else {
tip(result.message);
}
}).fail(() => {
tip('操作失敗');
});
},
confirmGoods(){
goBuy(){
},
goBuy(){
see(){
}
}
... ... @@ -108,4 +161,14 @@
<style>
html,body{height:100%;}
.order-wrapper {
height: 100%;
ul {
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
@import "../../scss/home/_order.css";
</style>
\ No newline at end of file
... ...
... ... @@ -25,23 +25,11 @@ module.exports = {
},
data: function() {
return {
// mock data
params: {
color: [{
colorId: 11,
colorName: '红色',
colorCode: 'ee0000'
}],
gender: [{
genderName: 'BOYS',
genderId: '1,3'
}],
size: [{
sizeName: '100',
sizeId: 255
}]
// 选择的值
params: {},
}
// 确定的值
selected: {}
};
},
watch: {},
... ... @@ -66,7 +54,6 @@ module.exports = {
});
},
entrySub: function(key) {
console.log(this.config[key]);
bus.$emit('filter.sub.show', {
val: key,
ref: this._uid
... ...
module.exports = {
A: [{
id: 5,
type: '0',
hotKeyword: 'AAAA 葛民辉',
isShowNew: 'N',
domain: 'aaaa',
alif: 'A',
isHot: 'N',
ico: 'http://img10.static.yhbimg.com/logo/2012/04/12/13/013c4f832d97df25ce9f79a294d5e05d6b.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
name: 'AAAA',
keyword: '街头,嘻哈,创意,潮流,AAAA,TEE,扭蛋',
nameEn: 'AAAA',
nameCn: 'AAAA'
}, {
id: 862,
type: '0',
hotKeyword: '',
isShowNew: 'N',
domain: 'aape',
alif: 'A',
isHot: 'N',
ico: 'http://img13.static.yhbimg.com/logo/2015/12/03/15/02a0c256f3a75784fbcaa7d37715fcfa00.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
name: 'Aape',
keyword: '',
nameEn: 'Aape',
nameCn: 'Aape'
}, {
type: '0',
id: 1209,
alif: 'A',
ico: 'http://img13.static.yhbimg.com/logo/2016/01/04/10/02c340899abe71a7ee1cfeb7591b6b96c0.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
name: 'AAVA Lifestyle',
keyword: '香薰，首饰，手表，围巾',
nameEn: 'AAVA Lifestyle',
nameCn: '爱瓦生活',
hotKeyword: '创意 品质 居家',
shelvestime: 1451877790,
isShowNew: 'N',
domain: 'aavalifestyle',
isHot: 'N'
}, {
id: 536,
type: '0',
hotKeyword: '',
isShowNew: 'N',
domain: 'ablejeans',
alif: 'A',
isHot: 'Y',
ico: 'http://img13.static.yhbimg.com/logo/2014/05/08/12/0241b56aa9407b25d60b8d6c03ad6396c6.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
name: 'ABLE JEANS',
keyword: 'ABLE JEANS',
nameEn: 'ABLE JEANS',
nameCn: '欧帛牛仔'
}, {
id: 262,
type: '0',
hotKeyword: '',
isShowNew: 'N',
domain: 'absurdlogic',
alif: 'A',
isHot: 'Y',
ico: 'http://img12.static.yhbimg.com/logo/2015/11/02/16/026f093fae4c9e3c7788508be9d109fc39.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
name: 'ABSURD LOGIC',
keyword: '',
nameEn: 'ABSURD LOGIC',
nameCn: '荒诞逻辑'
}],
B: [{
id: 373,
type: '0',
hotKeyword: '',
isShowNew: 'N',
domain: 'babyghost',
alif: 'B',
isHot: 'Y',
ico: 'http://img12.static.yhbimg.com/logo/2015/12/09/14/020b4cfa2aa3fb66642259f2be63780cc3.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
name: 'BABYGHOST',
keyword: '',
nameEn: 'BABYGHOST',
nameCn: '北北高斯'
}, {
id: 1039,
type: '0',
hotKeyword: '',
isShowNew: 'N',
domain: 'backbone',
alif: 'B',
isHot: 'N',
ico: 'http://img11.static.yhbimg.com/logo/2015/12/03/16/01c06f7a1524a2a9052350a8c03c2475d7.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
name: 'BACK BONE',
keyword: '',
nameEn: 'backbone',
nameCn: 'BACK BONE'
}, {
type: '0',
id: 980,
alif: 'B',
ico: 'http://img10.static.yhbimg.com/logo/2015/09/29/17/0173fd258619dc31c9a659b5be0507eeb1.jpg?imageMogr2/thumbnail/{width}x{height}/extent/{width}x{height}/background/d2hpdGU=/position/center/quality/80',
name: 'B+ by Beautyberry',
keyword: '原创,设计',
nameEn: 'B+ by Beautyberry',
nameCn: 'B+ by Beautyberry',
hotKeyword: '原创,设计',
shelvestime: 1448608361,
isShowNew: 'N',
domain: 'beautyberry',
isHot: 'N'
}]
};
... ... @@ -12,19 +12,40 @@
</div>
</template>
<script>
/**
* 数据结构:
* {
* index: [brandObj, brandObj],
* index: [{}....]
* }
*/
module.exports = {
props: ['data', 'val'],
methods: {
select: function(val) {
this.val = val;
/**
* 数据结构:
* {
* index: [brandObj, brandObj],
* index: [{}....]
* }
*/
const $ = require('yoho-jquery');
module.exports = {
props: {
val: Number,
data: {
coerce: (data) => {
// 以brand.alif 分组
const res = {};
$.each(data, brand => {
let groupName = brand.alif;
if (!res.hasOwnProperty(groupName)) {
res[groupName] = [];
}
res[groupName].push(brand);
});
}
}
},
methods: {
select: function(val) {
this.val = val;
}
}
}
};
};
</script>
... ...
<template>
<div>
<filter-sub :data="brand" :value="3" type="brand"></filter-sub>
<!--<filter-sub :data="brand" :value="3" type="brand"></filter-sub>-->
<Sort :config="sortConfig" :val="sort">
</Sort>
<List :data="productList"></List>
... ... @@ -44,9 +44,7 @@
productList: [],
// state
inSearching: false, // 请求中
brand: require('product/filter/brand-group-mock')
inSearching: false // 请求中
};
},
components: {
... ... @@ -90,8 +88,8 @@
});
},
openFilterSub: function() {
console.log('TODO: open filter sub');
openFilterSub: function(classify) {
console.log('TODO: open filter sub', classify);
},
/**
... ... @@ -147,9 +145,7 @@
* 1. 打开view
* 2. 监听 router.back ，重新设置 筛选值
*/
bus.$on('filter.sub.show', function({
val
}) {
bus.$on('filter.sub.show', function({val}) {
self.openFilterSub(val);
});
... ... @@ -159,6 +155,4 @@
</script>
<style>
</style>
... ...