提交验收

components/product/component/ComponentDetail.vue

@@ -14,38 +14,60 @@
           </div>
           <div class="hr-grey"></div>
           <div class="row">
-            <div class="form-group row" v-if="list.kind">
-              <div class="message-item">类目</div>
-              <div class="colon">:</div>
-              <div><a class="message-body blue" target="_blank" :href="`/product/kind/${list.kindid}`">{{list.kind.nameCn}}</a></div>
-            </div>
-            <div class="form-group row" v-if="list.brand">
+            <div class="message-detail" v-if="list.brand">
               <div class="message-item">品牌</div>
               <div class="colon">:</div>
               <div><a class="message-body blue" target="_blank" :href="`/product/brand/${list.brand.uuid}`">{{list.brand.nameCn}}</a></div>
             </div>
-            <div class="form-group row">
+            <div class="message-detail">
+              <div class="message-item">供货状态</div>
+              <div class="colon">:</div>
+              <div class="message-body">
+                {{list.lifecycle | lifecycleFilter}}
+              </div>
+            </div>
+            <div class="message-detail">
               <div class="message-item">总库存量</div>
               <div class="colon">:</div>
               <div class="message-body">{{list.reserve || '暂无库存'}}</div>
             </div>
-            <div class="form-group row">
-              <div class="message-item">封装</div>
+            <div class="message-detail" v-if="store.description">
+              <div class="message-item">产品描述</div>
               <div class="colon">:</div>
-              <div class="message-body">{{list.encapsulation || '暂无信息'}}</div>
+              <div class="description" @click="showMoreDesc = true" v-if="!showMoreDesc">{{store.description | descriptionFilter}}
+                <span @click="showMoreDesc = false" ><i class="fa fa-angle-down"></i><span>展开</span></span>
+              </div>
+              <div class="description more-description" v-else>{{store.description}}
+                <span @click="showMoreDesc = false" ><i class="fa fa-angle-up"></i><span>收起</span></span>
+              </div>
             </div>
-            <div class="form-group row">
-              <div class="message-item">下载</div>
+            <div class="message-detail">
+              <div class="message-item">规格书</div>
               <div class="colon">:</div>
-              <div class="message-body"><a @click="toAttach(list.attach)" v-if="list.attach">规格书</a><span v-if="!list.attach">暂无规格书</span></div>
+              <div class="message-body">
+                <img src="/images/all/pdf.png" alt="" @click="toAttach(list.attach)" v-if="list.attach">
+                <span v-if="!list.attach">暂无规格书</span>
+              </div>
             </div>
+            <div class="message-detail"></div>
             <div class="form-group">
-               <button type="text" v-if="!collectList" @click="collect(list.id)" class="btn btn-default btn-stroe" style="line-height: 26px;">加入收藏</button>
-               <button class="btn btn-default btn-stroe" v-if="collectList" disabled="disabled">已收藏</button>
+               <button type="text" v-if="!collectList" @click="collect(list.id)" class="btn btn-default btn-store">加入收藏</button>
+               <button class="btn btn-default btn-store" v-if="collectList" disabled="disabled">已收藏</button>
             </div>
           </div>
         </div>
       </div>
+      <div class="product-params">
+        <p class="product-params-header">产品参数<span>（仅供参考，以实际产品为准）</span>
+          <span class="show-more-param" @click="showMoreParam = !showMoreParam"><span>{{showMoreParam?'收起':'更多'}}</span><i class="fa" :class="{'fa fa-angle-down': !showMoreParam,'fa fa-angle-up': showMoreParam }"></i></span>
+        </p>
+        <ul>
+          <li v-for="prop in properties" v-if="prop.value">
+            <span>{{prop.property.labelCn}}</span>
+            <span>{{prop.value}}</span>
+          </li>
+        </ul>
+      </div>
     </div>
     <!--关注-->
     <el-dialog
@@ -68,7 +90,9 @@
     name: 'ComponentDetail',
     data () {
       return {
-        dialogVisible: false
+        dialogVisible: false,
+        showMoreDesc: false,
+        showMoreParam: false
       }
     },
     computed: {
@@ -78,6 +102,9 @@
       list () {
         return this.lists.data
       },
+      properties () {
+        return this.list.properties && this.list.properties.length > 6 ? this.showMoreParam ? this.list.properties : this.list.properties.slice(0, 6) : this.list.properties
+      },
       user () {
         return this.$store.state.option.user
       },
@@ -96,11 +123,35 @@
         } else {
           return false
         }
+      },
+      stores () {
+        return this.$store.state.componentStore.store
+      },
+      store () {
+        return this.stores.data ? this.stores.data[0] : []
       }
     },
 //    components: {
 //      ComponentMenu
 //    },
+    filters: {
+      descriptionFilter: function (str) {
+        return str.length > 30 ? str.substring(0, 30) : str
+      },
+      lifecycleFilter: function (code) {
+        if (code === 815) {
+          return '正常'
+        } else if (code === 816) {
+          return '即将停产'
+        } else if (code === 817) {
+          return '停产'
+        } else if (code === 818) {
+          return '新品'
+        } else {
+          return '-'
+        }
+      }
+    },
     methods: {
       collect (id) {
         if (this.user.logged) {
@@ -200,8 +251,7 @@
   }
   .componentDetail .container .component-message .row {
     margin: 12px 0;
-    width: 890px;
-    height: 16px;
+    position: relative;
   }
   .componentDetail .container .component-message .message-item {
     float:left;
@@ -218,6 +268,46 @@
     float: left;
     font-size: 14px;
   }
+  .componentDetail .container .component-message .message-body >img {
+    cursor: pointer;
+  }
+  .componentDetail .container .component-message .description {
+    position: relative;
+  }
+  .componentDetail .container .component-message .description >span {
+    cursor: pointer;
+    display: inline-block;
+    float: right;
+  }
+  .componentDetail .container .component-message .description >span >i {
+    margin-left: 5px;
+    font-size: 16px;
+    color: #5078cb;
+    width: 15px;
+    height: 15px;
+    border: 1px solid #5078cb;
+    line-height: 13px;
+    border-radius: 100%;
+    text-align: center;
+  }
+  .componentDetail .container .component-message .description >span >span {
+    color: #5078cb;
+  }
+  .componentDetail .container .component-message .description.more-description {
+    padding: 13px 13px 30px 13px;
+    border: 1px solid #e5e5e5;
+    position: absolute;
+    right: 137px;
+    width: 500px;
+    background: #f5f6f8;
+    z-index: 1;
+    line-height: 22.7px;
+  }
+  .componentDetail .container .component-message .description.more-description >span {
+    position: absolute;
+    right: 10px;
+    bottom: 7px;
+  }
   .componentDetail .container .component-message .message-body a {
     color: #337ab7;
   }
@@ -272,4 +362,79 @@
     max-width: 95px;
     max-height: 46px;
   }
+  .componentDetail .btn-store {
+    width: 82px;
+    height: 30px;
+    color: #fff;
+    background: #5078cb;
+    border: 1px solid #5078cb;
+  }
+  .product-params {
+    width: 100%;
+  }
+  .product-params .product-params-header {
+    height: 34px;
+    line-height: 34px;
+    background: #d8e5ff;
+  }
+  .product-params p.product-params-header {
+    margin-bottom: 0;
+    padding-left: 9px;
+    font-weight: bold;
+  }
+  .product-params p.product-params-header span {
+    font-size: 12px;
+  }
+  .product-params p.product-params-header .show-more-param {
+    float: right;
+    font-weight: normal;
+    font-size: 14px;
+    margin-right: 16px;
+    cursor: pointer;
+  }
+  .product-params >ul {
+    background: #fff;
+    border-left: 1px solid #e5e5e5;
+    border-top: 1px solid #e5e5e5;
+    margin-bottom: 37px;
+  }
+  .product-params >ul li {
+    display: inline-block;
+    border-bottom: 1px solid #e5e5e5;
+  }
+  .product-params >ul li span {
+    display: inline-block;
+    width: 297px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    border-right: 1px solid #e5e5e5;
+  }
+  .product-params >ul li:nth-child(4n), .product-params >ul li:nth-child(4n-1) {
+    background: #f5f6f8;
+  }
+  .component-message .message-detail {
+    display: inline-block;
+    height: 48px;
+    line-height: 48px;
+    border-left: 1px solid #e5e5e5;
+    border-bottom: 1px solid #e5e5e5;
+    width: 300px;
+    overflow: hidden;
+    padding: 0 11px;
+    vertical-align: middle;
+  }
+  .component-message .message-detail:nth-child(even) {
+    width: 596px;
+    border-right: 1px solid #e5e5e5;
+  }
+  .component-message .message-detail:nth-child(odd) {
+    width: 157px;
+  }
+  .component-message .message-detail:nth-child(1),.component-message .message-detail:nth-child(2) {
+    border-top: 1px solid #e5e5e5;
+  }
+  .component-message .message-detail:nth-child(4n),.component-message .message-detail:nth-child(4n-1) {
+    background: #f5f6f8;
+  }
 </style>