1 <template> 2 <div class="mainMaterial"> 3 <div class="chooseItem"> 4 <div class="navMenus"> 5 <ul> 6 <li v-for="(item,index) in items" :key="index" :class="{active:index==isActive}" @click="onChange(index)">{{ item.spaceName }}</li> 7 </ul> 8 </div> 9 </div> 10 <div class="content"> 11 <ul> 12 <li v-for="(item,index) in findMaterielListVos" :key="index"> 13 <p class="categoryName">{{ item.classifyCategoryName }}</p> 14 <div class="materialDetail"> 15 <div class="detailsLeft"> 16 <img src="./../../assets/business/material.jpg" alt=""> 17 </div> 18 <div class="detailsRight"> 19 <p> 20 <span>{{ item.spaceName }}</span> 21 <span>{{ item.categoryName }}</span> 22 </p> 23 <p class="price"> 24 <span>单价:{{ item.price }}元</span> 25 <span>X{{ item.num }}</span> 26 </p> 27 <p class="total"> 28 <span>合计:{{ item.amount }}元</span> 29 </p> 30 </div> 31 </div> 32 </li> 33 </ul> 34 </div> 35 </div> 36 </template> 37 38 <script> 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 </script> 133 134 <style scoped lang="less"> 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 </style>
原文地址:https://www.cnblogs.com/CinderellaStory/p/12120599.html
时间: 2024-10-15 22:04:07