item.vue
3.45 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<template>
<div class="product clearfix">
<div class="checkbox" v-if="product.is_limit_skn !== 'Y'">
<input type="checkbox" v-model="product.checked" id="checkbox-{{product.goods_id}}">
<label for="checkbox-{{product.goods_id}}"></label>
</div>
<img class="image" :src="product.goods_image | resize 100 130">
<div class="info">
<div class="p-title">
{{product.product_name}}
</div>
<div class="meta">
<span class="color">颜色: {{product.color_name}}</span>
<span class="size">尺码: {{product.size_name}}</span>
</div>
</div>
<div class="price">
¥{{product.last_price}}
<p class="num">
x1
</p>
</div>
<div v-if="product.is_limit_skn === 'Y'" @click="showTip" class="tip">
<span class="icon icon-question"></span><span>不支持7天无理由退换货</span>
</div>
</div>
</template>
<script>
const modal = require('common/modal');
module.exports = {
props: {
product: Object
},
created() {
// 经过该组件， 给product 添加 checked属性
if (!this.product.hasOwnProperty('checked')) {
this.$set('product.checked', false);
}
},
methods: {
showTip() {
modal.alert('该商品非质量问题不支持退换货，如有疑问请联系在线客服', '不支持无理由退换');
}
},
};
</script>
<style>
.product {
position: relative;
padding: 0 30px;
min-height: 170px;
font-size: 24px;
line-height: 1.5;
background: #fff;
&:after {
content: "";
position: absolute;
left: 30px;
bottom: -1px;
width: 690px;
height: 0;
border-bottom: 1px solid #eee;
z-index: 1;
}
.checkbox {
float: left;
margin-top: 67px;
label:before {
border-radius: 100%;
}
}
.image {
float: left;
margin: 0 20px;
margin-top: 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;
}
}
.tip {
position: relative;
height: 70px;
padding: 10px 22px;
font-size: 26px;
background: #fff;
.icon {
margin-right: 15px;
}
&:after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 690px;
height: 0;
border-bottom: 1px solid #eee;
}
}
}
</style>