item.vue 1.98 KB
<template>
    <div class="return-form exchange-form">
        <product :product="product"></product>
        <reason :product="product">
            <span slot="type">换货原因</span>
        </reason>
        <div class="field" @click="openFeatureSelector(product)">
            换货的颜色尺码
            <i class="icon iconfont">&#xe604;</i>
            <span class="change" v-if="product.change">颜色:{{product.change.color}} 尺码:{{product.change.size}}</span>
            <span class="change" v-else>请选择</span>
        </div>
    </div>
</template>
<script>
    /**
     *   exchange form
     *   1. 产品信息
     *   2. 更换产品 款式
     *   3. 换货 原因
     */
    const product = require('home/return/item.vue');
    const reason = require('home/return/reason.vue');
    const bus = require('plugin/vue-bus');

    module.exports = {
        props: {
            product: Object,
            readyonly: Boolean,
            reasons: Array,
            specialReason: Array
        },
        components: {
            product,
            reason
        },
        methods: {
            openFeatureSelector(info) {
                bus.$emit('open.featureSelector', {
                    pid: info.product_id,
                    rid: info.reason.id,
                    sku: info.productSku,
                    uid: this._uid
                });
            }
        }
    };

</script>
<style>
    .return-form {
        .reason:after {
            display: none;
        }

        .field {
            position: relative;
            height: 90px;
            line-height: 90px;
            padding: 0 30px;
            background-color: #fff;
            font-size: 32px;
            margin-bottom: 30px;

            .change,
            .icon {
                color: #b0b0b0;
                float: right;
                line-height: 90px;
            }
        }

        .change {
            display: inline-block;
            margin-right: 6px;
        }
    }
</style>