1
2
3
4
9
10
11
12
13
{{ item.classifyCategoryName }}
14
15
16
17
18
19
20 {{ item.spaceName }}
21 {{ item.categoryName }}
22
23
24 单价:{{ item.price }}元
25 X{{ item.num }}
26
27
28 合计:{{ item.amount }}元
29
30
31
32
33
34
35
36
37
38
39 export default {
40 data() {
41 return {
42 isActive: false,
43 result: [],
44 items: [
45 {
46 'spaceName': '主卧',
47 findMaterielListVos: [
48 {
49 'classifyCategoryName': '瓷砖类-地砖/墙砖',
50 'spaceName': '主卧',
51 'price': 78.00,
52 'amount': 79.0000,
53 'brandName': '欧神诺',
54 'categoryName': '地砖/墙砖',
55 'num': 1.00
56 },
57 {
58 'classifyCategoryName': '电器类-油烟机',
59 'spaceName': '主卧',
60 'price': 2380.00,
61 'amount': 2380.0000,
62 'brandName': '美的',
63 'categoryName': '油烟机',
64 'classifyName': '电器类',
65 'num': 1.00
66 },
67 {
68 'classifyCategoryName': '开关面板类-开关面板',
69 'spaceName': '主卧',
70 'price': 2380.00,
71 'amount': 2380.0000,
72 'brandName': '美的',
73 'categoryName': '油烟机',
74 'num': 1.00
75 },
76 {
77 'classifyCategoryName': '橱柜类-柜体',
78 'spaceName': '主卧',
79 'relateCode': 'bc-cl-13773',
80 'relateName': '测试材料',
81 'brandName': 'TOTO',
82 'price': 0.00,
83 'amount': 0.0000,
84 'categoryName': '柜体',
85 'classifyName': '橱柜类',
86 'num': 1.00
87 }
88 ]
89 },
90 {
91 'spaceName': '厨房',
92 findMaterielListVos: [
93 {
94 'classifyCategoryName': '瓷砖类-地砖/墙砖',
95 'id': 39759,
96 'spaceName': '厨房',
97 'relateCode': 'cl-cz-qdz-osn-0000489',
98 'relateName': '大理石鱼肚白',
99 'price': 78.00,
100 'amount': 79.0000,
101 'remark': '额外费用:1.00元;',
102 'brandName': '欧神诺',
103 'model': 'ELX00180S',
104 'categoryName': '地砖/墙砖',
105 'classifyName': '瓷砖类',
106 'materieldetailRecordStr': '额外费用:1.00元;',
107 'num': 1.00
108 }
109 ]
110 }
111 ]
112 }
113 },
114 created() {
115 this.findMaterielListVos = this.items[0].findMaterielListVos
116 this.result = this.items
117 },
118 methods: {
119 onChange(index) {
120 this.isActive = index
121 let array = []
122 for (let i = 0; i < this.result.length; i++) {
123 if (index === i) {
124 this.items[i] = this.result[i]
125 array = this.items[i].findMaterielListVos
126 }
127 }
128 this.findMaterielListVos = array
129 }
130 }
131 }
132
133
134
135 .empty{
136 text-align: center;
137 font-size: 14px;
138 margin-top:20px;
139 color: #9c9c9c;
140 }
141 .mainMaterial{
142 display: flex;
143 height: 100vh;
144 .chooseItem{
145 background: #fff;
146 width: 30%;
147 .navMenus{
148 ul{
149 li{
150 text-align: center;
151 padding:10px 0;
152 border-bottom: 1px solid #e3e3e3;
153 &.active{
154 background: #EA5520;
155 color: #fff;
156 }
157 }
158 }
159 }
160 }
161 .content{
162 background: #fff;
163 margin-left: 6px;
164 padding-left: 10px;
165 width: 70%;
166 ul{
167 li{
168 border-bottom: 1px solid #e3e3e3;
169 padding-top: 10px;
170 padding-bottom: 10px;
171 .categoryName{
172 color: #333;
173 font-size: 16px;
174 padding-bottom: 10px;
175 }
176 .materialDetail{
177 display: flex;
178 align-items: center;
179 .detailsLeft{
180 img{
181 width: 110px;
182 height: 70px;
183 }
184 }
185 .detailsRight{
186 margin-left: 8px;
187 width: 50%;
188 p{
189 color: #333;
190 font-size: 15px;
191 line-height: 24px;
192 &.price{
193 font-size: 13px;
194 color: #666;
195 display: flex;
196 justify-content: space-between;
197 }
198 &.total{
199 color:#EA5520;
200 }
201 }
202 }
203 }
204 }
205 }
206 }
207 }
208
标签:1.00,vue,categoryName,price,item,点击,菜单,findMaterielListVos,spaceName
来源: https://www.cnblogs.com/CinderellaStory/p/12120599.html