退货商品列表

+/**
+ * 退换货
+ * @type {Object}
+ */
+const refundModel = require('../models/refund');
+
+const refund = {
+    refund(req, res) {
+        res.render('refund');
+    },
+    order(req, res, next) {
+        const uid = 8050560;
+        const orderId = 160192757;
+
+        refundModel.getOrderData(uid, orderId).then(result => {
+            res.json(result);
+        }).catch(next);
+    }
+};
+
+module.exports = refund;

+/**
+ * 退换货 Model
+ * @type {Object}
+ */
+const api = global.yoho.API;
+
+const refund = {
+    getOrderData(uid, orderId) {
+        return api.get('', {
+            method: 'app.refund.goodsList',
+            uid: uid,
+            order_code: orderId
+        }, {
+            cache: true,
+            code: 200
+        }).then(global.yoho.camelCase);
+    }
+};
+
+module.exports = refund;

@@ -6,9 +6,12 @@
 
 'use strict';
 
-const router = require('express').Router();
+const expressRouter = require('express').Router;
 const cRoot = './controllers';
 const home = require(cRoot);
+const refund = require(cRoot + '/refund');
+
+const router = expressRouter();
 
 // Your controller here
 router.get('/', home.index); // 个人中心主页
@@ -21,4 +24,7 @@ router.get('/favorite', home.favorite); // 个人中心 - 收藏
 router.get('/favorite/favpaging', home.favpaging); // 个人中心 - 收藏商品/品牌(翻页)
 router.post('/favorite/favdel', home.favdel); // 个人中心 - 收藏商品/品牌(刪除)
 
-module.exports = router;
\ No newline at end of file
+router.get('/refund', refund.refund);
+router.get('/refund/order', refund.order);
+
+module.exports = router;

+<div id="refund">
+    <refund></refund>
+</div>

+const Vue = require('yoho-vue');
+const lazyload = require('yoho-vue-lazyload');
+
+const refund = require('home/refund.vue');
+
+require('common/vue-filter');
+
+Vue.use(lazyload);
+
+new Vue({
+    el: '#refund',
+    components: {
+        refund
+    }
+});

@@ -7,6 +7,8 @@
 *,
 *:before,
 *:after {
+    margin: 0;
+    padding: 0;
     box-sizing: border-box;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
@@ -14,6 +16,7 @@
 html,
 body {
     width: 100%;
+    height: 100%;
     font-size: 24px;
     font-family: Helvetica, Roboto, "Heiti SC", "黑体", Arial;
     line-height: 1.4;
@@ -33,8 +36,9 @@ a {
     position: relative;
     margin-right: auto;
     margin-left: auto;
-    max-width: 750px;
     width: 100%;
+    max-width: 750px;
+    min-height: 100%;
 }
 
 .text-center {

@@ -8,7 +8,7 @@
 
         &:before {
             z-index: 8;
-            border: 2px solid $black;
+            border: 2PX solid $black;
             content: "";
         }
 
@@ -20,7 +20,7 @@
             display: none;
             width: 8px;
             height: 16px;
-            border: 2px solid $white;
+            border: 2PX solid $white;
             border-top: 0;
             border-left: 0;
             content: "";

+<template>
+    <div class="refund">
+        <product-list :title="title" :list="list"></product-list>
+    </div>
+</template>
+
+<script>
+    const $ = require('yoho-jquery');
+    const productList = require('home/refund/product-list.vue');
+
+    module.exports = {
+        data() {
+            return {
+                title: '请选择退货商品',
+                list: []
+            };
+        },
+        created() {
+            $.ajax({
+                url: '/home/refund/order'
+            }).then(res => {
+                if (res.data && res.data.goodsList) {
+                    res.data.goodsList.forEach(product => {
+                        product.checked = false;
+                    });
+                    this.list = res.data.goodsList;
+                }
+            });
+        },
+        methods: {},
+        components: {
+            productList
+        }
+    };
+</script>
+
+<style>
+    .main-wrap {
+        background: #f6f6f6;
+    }
+</style>

+<template>
+    <div class="title">
+        {{title}}
+    </div>
+    <div v-show="checkedList.length" class="product-list product-list-checked">
+        <pruduct v-for="product in list" v-if="product.checked" v-bind:product="product"></pruduct>
+    </div>
+    <div v-show="checkedList.length !== list.length" class="product-list">
+        <pruduct v-for="product in list" v-if="!product.checked" v-bind:product="product"></pruduct>
+    </div>
+</template>
+
+<script>
+    const pruduct = require('./product.vue');
+
+    module.exports = {
+        props: ['title', 'list'],
+        computed: {
+            checkedList() {
+                return this.list.filter(product => {
+                    return product.checked;
+                });
+            }
+        },
+        components: {
+            pruduct
+        }
+    };
+</script>
+
+<style>
+    .title {
+        padding: 30px 30px 0;
+        color: #b0b0b0;
+        font-size: 28px;
+        line-height: 60px;
+    }
+
+    .product-list {
+        margin-bottom: 30px;
+        background: #fff;
+        border-top: 1px solid #eee;
+        border-bottom: 1px solid #eee;
+    }
+</style>

+<template>
+    <div class="product clearfix">
+        <div class="checkbox">
+            <input type="checkbox" checked="{{product.checked}}" v-on:change="checkboxChange" id="checkbox-{{product.goodsId}}">
+            <label for="checkbox-{{product.goodsId}}"></label>
+        </div>
+        <img class="image" v-lazy="product.goodsImage | resize 100 130">
+        <div class="info">
+            <div class="p-title">
+                {{product.productName}}{{product.productName}}{{product.productName}}{{product.productName}}
+            </div>
+            <div class="meta">
+                <span class="color">颜色: {{product.colorName}}</span>
+                <span class="size">尺码: {{product.sizeName}}</span>
+            </div>
+        </div>
+        <div class="price">
+            &yen;{{product.lastPrice}}
+            <p class="num">
+                x1
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+    module.exports = {
+        props: ['product'],
+        methods: {
+            checkboxChange(e) {
+                this.product.checked = e.target.checked;
+            }
+        }
+    };
+</script>
+
+<style>
+    .product {
+        position: relative;
+        padding: 0 30px;
+        height: 170px;
+        font-size: 24px;
+        line-height: 1.5;
+
+        &:after {
+            content: "";
+            position: absolute;
+            left: 30px;
+            bottom: -1px;
+            width: 690px;
+            height: 0;
+            border-bottom: 1px solid #eee;
+        }
+
+        .checkbox {
+            float: left;
+            margin-top: 67px;
+
+            label:before {
+                border-radius: 100%;
+            }
+        }
+
+        .image {
+            float: left;
+            margin: 20px;
+            width: 100px;
+            height: 130px;
+        }
+
+        .info {
+            padding: 15px 0;
+            width: 520px;
+
+            .p-title {
+                color: #000;
+                font-size: 24px;
+                height: 72px;
+                overflow: hidden;
+            }
+
+            .meta {
+                margin-top: 10px;
+                color: #b0b0b0;
+            }
+
+            .color {
+                margin-right: 30px;
+            }
+        }
+
+        .price {
+            position: absolute;
+            top: 15px;
+            right: 30px;
+            text-align: right;
+
+            .num {
+                color: #b0b0b0;
+            }
+        }
+    }
+</style>