item.vue
2.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<template>
<div class="return-form exchange-form">
<product :product="product"></product>
<div class="field" @click="openFeatureSelector(product.productId)">
换货的颜色尺码
<div class="right">
<span class="change" v-if="product.change">颜色:{{product.change.color}} 尺码:{{product.change.size}}</span>
<i class="icon icon-right"></i>
</div>
</div>
<reason :product="product">
<span slot="type">换货原因</span>
</reason>
</div>
</template>
<script>
/**
* exchange form
* 1. 产品信息
* 2. 更换产品 款式
* 3. 换货 原因
*/
const product = require('me/return/item.vue');
const reason = require('me/return/reason.vue');
const bus = require('common/vue-bus');
module.exports = {
props: {
product: Object,
readyonly: Boolean,
reasons: Array,
specialReason: Array
},
components: {
product,
reason
},
methods: {
openFeatureSelector(pid) {
bus.$emit('open.featureSelector', {
pid,
uid: this._uid
});
}
},
created() {
this.$set('product.change', {
color: this.product.colorName,
size: this.product.sizeName,
goodsId: this.product.goodsId,
sku: this.product.productSku
});
}
};
</script>
<style>
.return-form {
.field {
position: relative;
height: 90px;
line-height: 90px;
padding: 0 30px;
background-color: #fff;
font-size: 32px;
&:after {
position: absolute;
z-index: 1;
content: "";
display: block;
right: 30px;
bottom: -1px;
left: 30px;
border-bottom: 1px solid #eee;
}
}
.field .right {
color: #b0b0b0;
}
.change {
display: inline-block;
margin-right: 14px;
}
}
</style>