验收调整1121

components/product/component/ComponentDetail.vue

@@ -31,22 +31,27 @@
               <div class="colon">:</div>
               <div class="message-body">{{list.reserve || '暂无库存'}}</div>
             </div>
-            <div class="message-detail" v-if="store.description">
+            <div class="message-detail">
               <div class="message-item">产品描述</div>
               <div class="colon">:</div>
-              <div class="description" @click="showMoreDesc = true" v-if="!showMoreDesc">{{store.description | descriptionFilter}}
-                <span @click="showMoreDesc = false" ><i class="iconfont icon-shouqi1"></i><span>展开</span></span>
-              </div>
-              <div class="description more-description" v-else>{{store.description}}
-                <span @click="showMoreDesc = false" ><i class="iconfont icon-shouqi"></i><span>收起</span></span>
+              <div class="description"
+                   :class="{'more-description':showMoreDesc}"
+                   v-if="store.description">
+                {{[store.description, showMoreDesc] | descriptionFilter}}
+                <span @click="showMoreDesc = !showMoreDesc" >
+                  <img :src="!showMoreDesc?'/images/component/circle-arrow-down.png':'/images/component/circle-arrow-up.png'" alt="">
+                  <!--<i class="iconfont" :class="{'icon-shouqi':showMoreDesc,'icon-shouqi1':!showMoreDesc}"></i>-->
+                  <span v-text="showMoreDesc ? '收起' : '展开'"></span>
+                </span>
               </div>
+              <div class="description" v-if="!store.description">-</div>
             </div>
             <div class="message-detail">
               <div class="message-item">规格书</div>
               <div class="colon">:</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>
+                <span v-if="!list.attach">暂无</span>
               </div>
             </div>
             <div class="message-detail"></div>
@@ -61,12 +66,19 @@
         <p class="product-params-header">产品参数<span>（仅供参考，以实际产品为准）</span>
           <span v-if="list.properties && list.properties.length > 6" 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>
+        <ul v-if="list.properties && (list.properties.length > 1 || (list.properties.length == 1 && list.properties[0].value))">
           <li v-for="prop in properties">
             <span>{{prop.property.labelCn || '-'}}</span>
             <span>{{prop.value || '-'}}</span>
           </li>
+          <li v-if="!isEven(list.properties.length)">
+            <span>-</span>
+            <span>-</span>
+          </li>
         </ul>
+        <div class="empty-param" v-else>
+          <img src="/images/all/empty-cart.png" alt="">该产品暂无参数
+        </div>
       </div>
     </div>
     <!--关注-->
@@ -100,7 +112,6 @@
         return this.$store.state.componentDetail.detail
       },
       list () {
-        console.log(this.lists.data)
         return this.lists.data
       },
       properties () {
@@ -126,18 +137,18 @@
         }
       },
       stores () {
-        return this.$store.state.componentStore.store
+        return this.$store.state.componentStore.store.data
       },
       store () {
-        return this.stores.data ? this.stores.data[0] : []
+        return this.stores[0] ? this.stores[0] : []
       }
     },
 //    components: {
 //      ComponentMenu
 //    },
     filters: {
-      descriptionFilter: function (str) {
-        return str.length > 30 ? str.substring(0, 30) : str
+      descriptionFilter: function ([str, type]) {
+        return !type ? str.length > 30 ? str.substring(0, 30) : str : str
       },
       lifecycleFilter: function (code) {
         if (code === 815) {
@@ -154,6 +165,9 @@
       }
     },
     methods: {
+      isEven: function (num) {
+        return num % 2 === 0
+      },
       collect (id) {
         if (this.user.logged) {
           this.dialogVisible = true
@@ -271,7 +285,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    width: 50px;
+    width: 93px;
   }
   .componentDetail .container .component-message .message-body >img {
     cursor: pointer;
@@ -284,19 +298,20 @@
     display: inline-block;
     float: right;
   }
-  .componentDetail .container .component-message .description >span >i {
-    color: #5078cb;
+  .componentDetail .container .component-message .description >span >img {
+    vertical-align: middle;
   }
   .componentDetail .container .component-message .description >span >span {
     color: #5078cb;
+    vertical-align: middle;
   }
   .componentDetail .container .component-message .description.more-description {
     padding: 13px 13px 30px 13px;
     border: 1px solid #e5e5e5;
     border-top: none;
     position: absolute;
-    right: 137px;
-    width: 500px;
+    right: 95px;
+    width: 514px;
     background: #f5f6f8;
     z-index: 1;
     line-height: 22.7px;
@@ -433,7 +448,7 @@
     border-right: 1px solid #e5e5e5;
   }
   .component-message .message-detail:nth-child(odd) {
-    width: 157px;
+    width: 200px;
   }
   .component-message .message-detail:nth-child(1),.component-message .message-detail:nth-child(2) {
     border-top: 1px solid #e5e5e5;
@@ -441,4 +456,13 @@
   .component-message .message-detail:nth-child(4n),.component-message .message-detail:nth-child(4n-1) {
     background: #f5f6f8;
   }
+  .empty-param {
+    text-align: center;
+    padding: 20px 0;
+    color: #999;
+    font-size: 12px;
+  }
+  .empty-param:hover{
+    background: #f1f5ff;
+  }
 </style>