fe / yohoblk-wap · Commits

Go to a project

Authored by 王洪广
Commit b524e9d94c57c8d1abde912fea1796fac90bd0f0 1 parent 597fa474

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

Inline Side-by-side
Showing 14 changed files with 807 additions and 7 deletions
@@ -8,6 +8,8 @@ const homeModel = require('../models/index'); @@ -8,6 +8,8 @@ const homeModel = require('../models/index');
8 const _ = require('lodash'); 8 const _ = require('lodash');
9 const helpers = global.yoho.helpers; 9 const helpers = global.yoho.helpers;
10 10
  11 +// const model_order = require('../models/order')
  12 +
11 /** 13 /**
12 * 个人中心主页 14 * 个人中心主页
13 */ 15 */
@@ -133,11 +135,11 @@ const component = { @@ -133,11 +135,11 @@ const component = {
133 data.brand_list.forEach(function(d) { 135 data.brand_list.forEach(function(d) {
134 result.push({ 136 result.push({
135 fav_id: d.brand_id, 137 fav_id: d.brand_id,
136 - link: "", // todo 138 + link: '', // todo
137 imgUrl: d.brand_ico ? helpers.image(d.brand_ico, 160, 125) : '', 139 imgUrl: d.brand_ico ? helpers.image(d.brand_ico, 160, 125) : '',
138 brandName: d.brand_name, 140 brandName: d.brand_name,
139 down: d.status == 0 141 down: d.status == 0
140 - }) 142 + });
141 }); 143 });
142 144
143 if (page < data.page_total) { 145 if (page < data.page_total) {
@@ -171,7 +173,7 @@ const component = { @@ -171,7 +173,7 @@ const component = {
171 discountPrice: (Number(d.market_price) - Number(d.sales_price) > 0) ? '¥' + Number(d.sales_price).toFixed(2) : false, 173 discountPrice: (Number(d.market_price) - Number(d.sales_price) > 0) ? '¥' + Number(d.sales_price).toFixed(2) : false,
172 sellOut: d.storage < 0, 174 sellOut: d.storage < 0,
173 invalidGoods: d.status == 0 175 invalidGoods: d.status == 0
174 - }) 176 + });
175 }); 177 });
176 178
177 if (page < data.page_total) { 179 if (page < data.page_total) {
@@ -193,14 +195,43 @@ const component = { @@ -193,14 +195,43 @@ const component = {
193 const type = req.body.type; 195 const type = req.body.type;
194 homeModel.favoriteDelete(uid, favId, type).then(data => { 196 homeModel.favoriteDelete(uid, favId, type).then(data => {
195 return res.json(data); 197 return res.json(data);
196 - }) 198 + });
197 }, 199 },
  200 +
198 // 关于我们 201 // 关于我们
199 - aboutUs: (req, res, next) => { 202 + aboutUs: (req, res) => {
200 res.render('about-us', { 203 res.render('about-us', {
201 module: 'home', 204 module: 'home',
202 page: 'index' 205 page: 'index'
203 }); 206 });
  207 + },
  208 + order: (req, res) => {
  209 + let type = req.query.type;
  210 +
  211 + res.render('order', {
  212 + module: 'home',
  213 + page: 'order',
  214 + type: type
  215 + });
  216 + },
  217 + orderDetail: (req, res) => {
  218 + let orderCode = req.query.ordercode;
  219 +
  220 + res.render('order-detail', {
  221 + module: 'home',
  222 + page: 'order',
  223 + orderCode: orderCode
  224 + });
  225 + },
  226 + getOrderData: (req, res) => {
  227 + //let param = Object.assign({uid: req.user.uid}, req.query);
  228 + res.json({});
  229 + },
  230 + coin: (req, res) => {
  231 + res.render('coin', {
  232 + module: 'home',
  233 + page: 'order'
  234 + });
204 } 235 }
205 }; 236 };
206 237
  1 +/**
  2 + * 订单.
  3 + * @author hgwang
  4 + * @date 2016-07-20
  5 + */
  6 +'use strict';
  7 +
  8 +const api = global.yoho.ServiceAPI;
  9 +const Promise = require('bluebird');
  10 +const co = Promise.coroutine;
  11 +
@@ -15,6 +15,9 @@ const router = expressRouter(); @@ -15,6 +15,9 @@ const router = expressRouter();
15 15
16 // Your controller here 16 // Your controller here
17 router.get('/', home.index); // 个人中心主页 17 router.get('/', home.index); // 个人中心主页
  18 +router.get('/orders', home.order); // 订单
  19 +router.get('/mycurrency', home.coin); // yoho币
  20 +router.get('/orderDetail', home.orderDetail); // yoho币
18 21
19 router.get('/help', home.help); // 帮助中心列表页 22 router.get('/help', home.help); // 帮助中心列表页
20 router.get('/helpDetail', home.helpDetail); // 帮助中心详情页 23 router.get('/helpDetail', home.helpDetail); // 帮助中心详情页
  1 +<div class="yoho-coin">
  2 + <div class="coin-total">
  3 + <p>您目前拥有</p>
  4 + <p><b>123</b></p>
  5 + <p>个有货币</p>
  6 + </div>
  7 + <div class="coin-detail">
  8 + <p>明细列表</p>
  9 + <ul class="coin-detail-list">
  10 + <li>
  11 + <div class="coin-source">
  12 + <p>签到奖励</p>
  13 + <time>2016.1.23 12:31:00</time>
  14 + </div>
  15 + <div class="coin-num">+5</div>
  16 + </li>
  17 + <li>
  18 + <div class="coin-source">
  19 + <p>签到奖励</p>
  20 + <time>2016.1.23 12:31:00</time>
  21 + </div>
  22 + <div class="coin-num">+118</div>
  23 + </li>
  24 + </ul>
  25 + </div>
  26 +</div>
  1 +<div class="order-detail">
  2 + <div class="order-status">
  3 + <p>待收货</p>
  4 + </div>
  5 + <!--<div class="order-status">-->
  6 + <!--<p>待收货</p>-->
  7 + <!--<p>订单将被取消</p>-->
  8 + <!--</div>-->
  9 + <div class="order-address">
  10 + <p><span>Daisuke Obana</span><span>13160071768</span></p>
  11 + <p>江苏省南京市建邺区 <br>嘉陵江东街18号国家广告产业园5栋18楼产品部</p>
  12 + </div>
  13 + <div class="order-code">
  14 + <p>订单号:523243435</p>
  15 + <p>下单时间:2016.1.23 12:31:00</p>
  16 + </div>
  17 + <div class="order-goods">
  18 + <ul>
  19 + <li class="goods-info">
  20 + <div class="img-box">
  21 + <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
  22 + <label>赠品</label>
  23 + </div>
  24 + <div class="goods-detail">
  25 + <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
  26 + <p class="size">
  27 + <span>颜色:黑色</span>
  28 + <span>尺码:XL</span>
  29 + </p>
  30 + </div>
  31 + <div class="goods-price">
  32 + <p>&yen;6289.00</p>
  33 + <p>×1</p>
  34 + </div>
  35 + </li>
  36 + <li class="goods-info">
  37 + <div class="img-box">
  38 + <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
  39 + </div>
  40 + <div class="goods-detail">
  41 + <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
  42 + <p class="size">
  43 + <span>颜色:黑色</span>
  44 + <span>尺码:XL</span>
  45 + </p>
  46 + </div>
  47 + <div class="goods-price">
  48 + <p>&yen;6289.00</p>
  49 + <p>×1</p>
  50 + </div>
  51 + </li>
  52 + <li class="goods-info">
  53 + <div class="img-box">
  54 + <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
  55 + </div>
  56 + <div class="goods-detail">
  57 + <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
  58 + <p class="size">
  59 + <span>颜色:黑色</span>
  60 + <span>尺码:XL</span>
  61 + </p>
  62 + </div>
  63 + <div class="goods-price">
  64 + <p>&yen;6289.00</p>
  65 + <p>×1</p>
  66 + </div>
  67 + </li>
  68 + </ul>
  69 + </div>
  70 + <div class="order-amount">
  71 + <ul>
  72 + <li><label>商品：</label><span>&yen;20676.00</span></li>
  73 + <li><label>YOHO币：</label><span>&yen;32.12</span></li>
  74 + <li><label>运费：</label><span>&yen;0</span></li>
  75 + <li><label>总计：</label><span>&yen;20808.12</span></li>
  76 + </ul>
  77 + </div>
  78 + <div class="order-button">
  79 + <button>查看物流</button>
  80 + <button class="black">确认收货</button>
  81 + <button class="normal">确认收货</button>
  82 + </div>
  83 +</div>
  1 +<div class="order-wrapper" id="home-order-list">
  2 + <Order></Order>
  3 + <input type="hidden" value="{{type}}">
  4 +</div>
  1 +<div class="order-wrapper return-goods">
  2 + <ul>
  3 + <li class="order-item">
  4 + <div class="order-detail">
  5 + <div class="order-code">
  6 + <div class="code-time">
  7 + <p>订单号:523243435</p>
  8 + <p>申请时间：2016.1.23 12:31:00</p>
  9 + </div>
  10 + <p>通过审核</p>
  11 + </div>
  12 + <div class="order-goods">
  13 + <div class="goods-info">
  14 + <div class="img-box">
  15 + <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
  16 + </div>
  17 + <div class="goods-detail">
  18 + <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
  19 + <p class="size">
  20 + <span>颜色:黑色</span>
  21 + <span>尺码:XL</span>
  22 + </p>
  23 + </div>
  24 + <div class="goods-price">
  25 + <p>&yen;6289.00</p>
  26 + <p>×1</p>
  27 + </div>
  28 + </div>
  29 + <div class="goods-info">
  30 + <div class="img-box">
  31 + <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
  32 + </div>
  33 + <div class="goods-detail">
  34 + <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
  35 + <p class="size">
  36 + <span>颜色:黑色</span>
  37 + <span>尺码:XL</span>
  38 + </p>
  39 + </div>
  40 + <div class="goods-price">
  41 + <p>&yen;6289.00</p>
  42 + <p>×1</p>
  43 + </div>
  44 + </div>
  45 + </div>
  46 + <div class="order-option">
  47 + <div class="goods-total"></div>
  48 + <div class="options">
  49 + <button class="normal">取消申请</button>
  50 + </div>
  51 + </div>
  52 + </div>
  53 + </li>
  54 + <li class="order-item">
  55 + <div class="order-detail">
  56 + <div class="order-code">
  57 + <div class="code-time">
  58 + <p>订单号:523243435</p>
  59 + <p>申请时间：2016.1.23 12:31:00</p>
  60 + </div>
  61 + <p>商品寄回</p>
  62 + </div>
  63 + <div class="order-goods">
  64 + <div class="goods-info">
  65 + <div class="img-box">
  66 + <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
  67 + </div>
  68 + <div class="goods-detail">
  69 + <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
  70 + <p class="size">
  71 + <span>颜色:黑色</span>
  72 + <span>尺码:XL</span>
  73 + </p>
  74 + </div>
  75 + <div class="goods-price">
  76 + <p>&yen;6289.00</p>
  77 + <p>×1</p>
  78 + </div>
  79 + </div>
  80 + </div>
  81 + </div>
  82 + </li>
  83 + </ul>
  84 +</div>
  1 +/**
  2 + * order.page.js.
  3 + * @author hgwang
  4 + * @date 2016-07-20
  5 + */
  6 +'use strict';
  7 +
  8 +const Vue = require('yoho-vue');
  9 +const Order = require('home/order.vue');
  10 +
  11 +new Vue({
  12 + el: '#home-order-list',
  13 + components: {
  14 + Order
  15 + }
  16 +});
@@ -37,7 +37,6 @@ a { @@ -37,7 +37,6 @@ a {
37 margin-right: auto; 37 margin-right: auto;
38 margin-left: auto; 38 margin-left: auto;
39 width: 100%; 39 width: 100%;
40 -<<<<<<< HEAD  
41 max-width: 750px; 40 max-width: 750px;
42 min-height: 100%; 41 min-height: 100%;
43 } 42 }
@@ -46,6 +45,14 @@ a { @@ -46,6 +45,14 @@ a {
46 text-align: center; 45 text-align: center;
47 } 46 }
48 47
  48 +ol, ul {
  49 + list-style: none
  50 +}
  51 +
  52 +.hide {
  53 + display: none;
  54 +}
  55 +
49 .overflow-hidden { 56 .overflow-hidden {
50 overflow: hidden; 57 overflow: hidden;
51 height: 100%; 58 height: 100%;
  1 +.yoho-coin{
  2 + background: #f6f6f6;
  3 + padding-top: 20px;
  4 +
  5 + .coin-total{
  6 + padding: 35px 0;
  7 + background: $white;
  8 + text-align: center;
  9 +
  10 + p:first-child{
  11 + font-size: 34px;
  12 + }
  13 + p:nth-child(2){
  14 + font-size: 78px;
  15 + color: #4a90e2;
  16 + line-height: 80px;
  17 + }
  18 + p:last-child{
  19 + color: #b0b0b0;
  20 + font-size: 28px;
  21 + }
  22 + }
  23 + .coin-detail{
  24 + margin-top: 40px;
  25 +
  26 + >p:first-child{
  27 + padding: 0 30px;
  28 + font-size: 28px;
  29 + color: #b0b0b0;
  30 + }
  31 + .coin-detail-list{
  32 + padding: 0 30px;
  33 + background: $white;
  34 + border-top: 1px solid #eee;
  35 + border-bottom: 1px solid #eee;
  36 +
  37 + li{
  38 + display: flex;
  39 + padding: 20px 0;
  40 + border-bottom: 1px solid #eee;
  41 + &:last-child{
  42 + border-bottom: 0 none;
  43 + }
  44 + }
  45 + .coin-source{
  46 + flex: 1;
  47 + p{
  48 + display: -webkit-box;
  49 + -webkit-line-clamp: 1;
  50 + -webkit-box-orient: vertical;
  51 + text-overflow: ellipsis;
  52 + height: 1.2em;
  53 + line-height: 1.25;
  54 + overflow: hidden;
  55 + font-size: 34px;
  56 + margin-right: 60px;
  57 + }
  58 + time{
  59 + display: block;
  60 + margin-top: 5px;
  61 + font-size: 28px;
  62 + color: #b0b0b0;
  63 + }
  64 + }
  65 + .coin-num{
  66 + font-size: 34px;
  67 + line-height: 92px;
  68 + }
  69 + }
  70 + }
  71 +}
@@ -3,7 +3,6 @@ @@ -3,7 +3,6 @@
3 @import "feedback"; 3 @import "feedback";
4 @import "fav"; 4 @import "fav";
5 @import "about-us"; 5 @import "about-us";
6 -  
7 .my-page { 6 .my-page {
8 color: #444; 7 color: #444;
9 background: #f0f0f0; 8 background: #f0f0f0;
@@ -165,3 +164,6 @@ @@ -165,3 +164,6 @@
165 } 164 }
166 } 165 }
167 } 166 }
  167 +@import "order";
  168 +@import "coin";
  169 +/*@import "order-detail";*/
  1 +$black: #000;
  2 +$white: #fff;
  3 +.order-detail{
  4 + background: #f6f6f6;
  5 + >div{
  6 + background: $white;
  7 + padding: 0 30px;
  8 + }
  9 + .order-status{
  10 + display: flex;
  11 + height: 80px;
  12 + line-height: 80px;
  13 + color: $white;
  14 + background: $black;
  15 +
  16 + p:first-of-type{
  17 + flex: 1;
  18 + font-size: 34px;
  19 + }
  20 + }
  21 +
  22 + .order-code{
  23 + padding: 20px 30px;
  24 + margin-bottom: 20px;
  25 + border-top: 1px solid #eee;
  26 + border-bottom: 1px solid #eee;
  27 +
  28 + p:first-of-type{
  29 + font-size: 34px;
  30 + font-weight: 700;
  31 + }
  32 + p:last-of-type{
  33 + font-size: 28px;
  34 + color: #b0b0b0;
  35 + }
  36 + }
  37 +
  38 + .order-address{
  39 + position: relative;
  40 + padding: 20px 30px 27px;
  41 + margin-bottom: 20px;
  42 + border-top: 1px solid #eee;
  43 + word-wrap: break-word;
  44 +
  45 + p:first-of-type{
  46 + font-size: 32px;
  47 + font-weight: 700;
  48 + span{
  49 + margin-right: 40px;
  50 + }
  51 + }
  52 + p:last-of-type{
  53 + font-size: 28px;
  54 + color: #b0b0b0;
  55 + }
  56 + &:after{
  57 + content: '';
  58 + position: absolute;
  59 + left: 0;
  60 + bottom: 0;
  61 + width: 100%;
  62 + height: 12px;
  63 + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAMBAMAAAAHcycSAAAAElBMVEXu7u7lnJrbSUbkm5qqqqpmZmaVABiUAAAAKUlEQVR4AWNAACElIDBgQAGuoUDggCrGCFKnjCrGAlIXAmINWgNHDQQAWjsd42E4szoAAAAASUVORK5CYII=") repeat-x;
  64 + border-bottom: 1px solid #eee;
  65 + }
  66 + }
  67 + .order-goods{
  68 + padding-top: 20px;
  69 + border-top: 1px solid #eee;
  70 + border-bottom: 1px solid #eee;
  71 +
  72 + .goods-info{
  73 + display: flex;
  74 + padding: 20px 0;
  75 + border-bottom: 1px solid #eee;
  76 + &:last-child{
  77 + border-bottom: 0 none;
  78 + }
  79 + }
  80 + .img-box{
  81 + position: relative;
  82 + width: 98px;
  83 + height: 130px;
  84 + overflow: hidden;
  85 +
  86 + label{
  87 + position: absolute;
  88 + left: 0;
  89 + bottom: 0;
  90 + width: 100%;
  91 + height: 30px;
  92 + line-height: 30px;
  93 + background: rgba(0, 0, 0, .2);
  94 + color: $white;
  95 + text-align: center;
  96 + }
  97 + img{
  98 + width: 100%;
  99 + height: 100%;
  100 + }
  101 + }
  102 + .goods-detail{
  103 + flex: 1;
  104 + margin: 0 20px;
  105 + font-size: 24px;
  106 + span{
  107 + margin-right: 40px;
  108 + }
  109 + .name{
  110 + display: -webkit-box;
  111 + -webkit-line-clamp: 2;
  112 + -webkit-box-orient: vertical;
  113 + text-overflow: ellipsis;
  114 + height: 2.4em;
  115 + line-height: 1.25;
  116 + overflow: hidden;
  117 + font-size: 28px;
  118 + }
  119 + .size{
  120 + color: #b0b0b0;
  121 + }
  122 + }
  123 + .goods-price{
  124 + text-align: right;
  125 + p:first-of-type{
  126 + font-size: 28px;
  127 + }
  128 + p:last-of-type{
  129 + font-size: 30px;
  130 + color: #b0b0b0;
  131 + }
  132 + }
  133 + }
  134 + .order-amount{
  135 + padding: 30px 20px;
  136 + margin-bottom: 20px;
  137 + border-bottom: 1px solid #eee;
  138 + text-align: right;
  139 +
  140 + li{
  141 + font-size: 28px;
  142 +
  143 + label{
  144 + display: inline-block;
  145 + width: 150px;
  146 + text-align: left;
  147 + color: #b0b0b0;
  148 + }
  149 + span{
  150 + display: inline-block;
  151 + width:200px;
  152 + text-align: left;
  153 + }
  154 + &:last-of-type{
  155 + font-size: 34px;
  156 + label{
  157 + color: $black;
  158 + }
  159 + }
  160 + }
  161 + }
  162 + .order-button{
  163 + padding: 30px 20px;
  164 + border-top: 1px solid #eee;
  165 + text-align: right;
  166 +
  167 + button{
  168 + padding: 0 20px;
  169 + height: 68px;
  170 + line-height: 68px;
  171 + color: $black;
  172 + text-align: center;
  173 + -webkit-appearance: none;
  174 + border: 0 none;
  175 + background: $white;
  176 + font-size: 28px;
  177 +
  178 + &.black{
  179 + width: 192px;
  180 + color: $white;
  181 + background: $black;
  182 + }
  183 + &.countdown{
  184 + color: $white;
  185 + background: $black;
  186 + }
  187 + &.normal{
  188 + width: 188px;
  189 + padding: 0;
  190 + border: 1px solid $black;
  191 + color: $black;
  192 + }
  193 + &:focus{
  194 + outline: none;
  195 + }
  196 + }
  197 + }
  198 +}
  1 +$black: #000;
  2 +$white: #fff;
  3 +
  4 +.order-wrapper{
  5 + background: #f6f6f6;
  6 + padding-top: 20px;
  7 +
  8 + .order-item{
  9 + background: $white;
  10 + margin-top: 20px;
  11 + border-top: 1px solid #eee;
  12 + border-bottom: 1px solid #eee;
  13 +
  14 + &:first-child{
  15 + margin-top: 0;
  16 + }
  17 + }
  18 + .order-detail{
  19 + padding: 0 30px;
  20 +
  21 + .order-code,.order-option,.goods-info{
  22 + display: flex;
  23 + >div{
  24 + box-sizing: border-box;
  25 + }
  26 + }
  27 + }
  28 + .order-code{
  29 + height: 88px;
  30 + font-size: 34px;
  31 + border-bottom: 1px solid #eee;
  32 + line-height: 88px;
  33 +
  34 + >p:first-child{
  35 + flex: 1;
  36 + }
  37 + }
  38 + .order-goods{
  39 + .goods-info{
  40 + padding: 20px 0;
  41 + border-bottom: 1px solid #eee;
  42 +
  43 + &:last-child{
  44 + border-bottom: 0 none;
  45 + }
  46 + }
  47 + .img-box{
  48 + width: 98px;
  49 + height: 130px;
  50 + overflow: hidden;
  51 + img{
  52 + width: 100%;
  53 + height: 100%;
  54 + }
  55 + }
  56 + .goods-detail{
  57 + flex: 1;
  58 + margin: 0 20px;
  59 + font-size: 24px;
  60 +
  61 + span{
  62 + margin-right: 40px;
  63 + }
  64 + .name{
  65 + display: -webkit-box;
  66 + -webkit-line-clamp: 2;
  67 + -webkit-box-orient: vertical;
  68 + text-overflow: ellipsis;
  69 + height: 2.4em;
  70 + line-height: 1.25;
  71 + overflow: hidden;
  72 + font-size: 28px;
  73 + }
  74 + .size{
  75 + color: #b0b0b0;
  76 + }
  77 + }
  78 + .goods-price{
  79 + text-align: right;
  80 + p:first-of-type{
  81 + font-size: 28px;
  82 + }
  83 + p:last-of-type{
  84 + font-size: 30px;
  85 + color: #b0b0b0;
  86 + }
  87 + }
  88 + }
  89 + .order-option{
  90 + padding: 30px 0;
  91 + border-top: 1px solid #eee;
  92 +
  93 + .goods-total{
  94 + flex: 1;
  95 + font-size: 28px;
  96 + line-height: 68px;
  97 + }
  98 + .options{
  99 + button{
  100 + padding: 0 20px;
  101 + height: 68px;
  102 + line-height: 68px;
  103 + color: $black;
  104 + text-align: center;
  105 + -webkit-appearance: none;
  106 + border: 0 none;
  107 + background: $white;
  108 + font-size: 28px;
  109 +
  110 + &.black{
  111 + width: 192px;
  112 + color: $white;
  113 + background: $black;
  114 + }
  115 + &.countdown{
  116 + color: $white;
  117 + background: $black;
  118 + }
  119 + &.normal{
  120 + width: 188px;
  121 + padding: 0;
  122 + border: 1px solid $black;
  123 + color: $black;
  124 + }
  125 + &:focus{
  126 + outline: none;
  127 + }
  128 + }
  129 + }
  130 + }
  131 +}
  132 +.return-goods{
  133 + .order-code{
  134 + height: 128px;
  135 +
  136 + .code-time{
  137 + flex: 1;
  138 + p:first-child{
  139 + margin-top: 8px;
  140 + line-height: 60px;
  141 + }
  142 + p:nth-child(2){
  143 + font-size: 28px;
  144 + line-height: 30px;
  145 + color: #b0b0b0;
  146 + }
  147 + }
  148 + >p:last-child{
  149 + line-height: 128px;
  150 + color: #4a90e2;
  151 + }
  152 + }
  153 +}
  1 +<template>
  2 + <ul>
  3 + <li class="order-item">
  4 + <div class="order-detail">
  5 + <div class="order-code">
  6 + <p>订单号:523243435</p>
  7 + <p>待付款</p>
  8 + </div>
  9 + <div class="order-goods">
  10 + <div class="goods-info">
  11 + <div class="img-box">
  12 + <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
  13 + </div>
  14 + <div class="goods-detail">
  15 + <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
  16 + <p class="size">
  17 + <span>颜色:黑色</span>
  18 + <span>尺码:XL</span>
  19 + </p>
  20 + </div>
  21 + <div class="goods-price">
  22 + <p>&yen;6289.00</p>
  23 + <p>×1</p>
  24 + </div>
  25 + </div>
  26 + <div class="goods-info">
  27 + <div class="img-box">
  28 + <img src="//img01.static.yohobuy.com/cms/2016/05/30/15/019bb70cdee6e05ee51eb062c009d49796.jpg" alt="">
  29 + </div>
  30 + <div class="goods-detail">
  31 + <p class="name">Supreme Mendini work jacket 2016年新品黑色手枪图案短2016年新品黑色手枪图案短</p>
  32 + <p class="size">
  33 + <span>颜色:黑色</span>
  34 + <span>尺码:XL</span>
  35 + </p>
  36 + </div>
  37 + <div class="goods-price">
  38 + <p>&yen;6289.00</p>
  39 + <p>×1</p>
  40 + </div>
  41 + </div>
  42 + </div>
  43 + <div class="order-option">
  44 + <div class="goods-total">合计: <b>&yen;15677.00</b></div>
  45 + <div class="options">
  46 + <button>取消订单</button>
  47 + <button class="countdown">去支付 11:58:12</button>
  48 + </div>
  49 + </div>
  50 + </div>
  51 + </li>
  52 + </ul>
  53 +</template>
  54 +
  55 +<script>
  56 + const $ = require('yoho-jquery');
  57 +
  58 + module.exports = {
  59 + data() {
  60 + return {
  61 + page: 0,
  62 + limit: 10,
  63 + type: document.getElementById('')
  64 + };
  65 + },
  66 + ready(){
  67 + this.getOrderData();
  68 + },
  69 + methods:{
  70 + getOrderData(){
  71 +
  72 + $.ajax({
  73 + url: '/home/favorite/favpaging',
  74 + data: {
  75 + page : ++ this.page,
  76 + limit : this.page,
  77 + type: this.type
  78 + }
  79 + }).then(result => {
  80 + if(result){
  81 +
  82 + } else {
  83 +
  84 + }
  85 + }).fail(() => {
  86 + tip('网络错误');
  87 + });
  88 + },
  89 + cancelOrder(id){
  90 +
  91 + },
  92 + deleteOrder(id){
  93 +
  94 + },
  95 + rebuy(id){
  96 +
  97 + },
  98 + confirmGoods(){
  99 +
  100 + },
  101 + goBuy(){
  102 +
  103 + }
  104 + }
  105 + };
  106 +
  107 +</script>
  108 +
  109 +<style>
  110 +html,body{height:100%;}
  111 +</style>