瀏覽代碼

bug修复,新品信息 产品详情 图片放大镜

chenrui 3 年之前
父節點
當前提交
fc8f380d1f
共有 3 個文件被更改,包括 415 次插入107 次删除
  1. 359 99
      package-lock.json
  2. 3 0
      package.json
  3. 53 8
      src/views/productManagement/newProduct/detail.vue

文件差異過大導致無法顯示
+ 359 - 99
package-lock.json


+ 3 - 0
package.json

@@ -34,9 +34,11 @@
     "vue-cookies": "^1.6.1",
     "vue-cropper": "0.4.9",
     "vue-ls": "^3.2.1",
+    "vue-piczoom": "^1.0.6",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.1.2",
     "vue-svg-component-runtime": "^1.0.1",
+    "vue2.0-zoom": "^2.1.1",
     "vuex": "^3.1.1",
     "wangeditor": "^3.1.1"
   },
@@ -61,6 +63,7 @@
     "less-loader": "4.1.0",
     "opencollective": "^1.0.3",
     "opencollective-postinstall": "^2.0.2",
+    "postcss-url": "^10.1.3",
     "vue-svg-icon-loader": "^2.1.1",
     "vue-template-compiler": "^2.6.10",
     "webpack-theme-color-replacer": "^1.2.17"

+ 53 - 8
src/views/productManagement/newProduct/detail.vue

@@ -30,11 +30,16 @@
             </div>
           </div>
         </div>
-        <div class="productImg" v-if="detailsData && detailsData.productMsg">
-          <a-carousel arrows>
-            <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1"><a-icon type="left-circle" /></div>
-            <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px"><a-icon type="right-circle" /></div>
-            <div><img :src="detailsData.productMsg" /></div>
+        <div class="productImg" v-if="detailsData && detailsData.productPicList && detailsData.productPicList.length>0">
+          <a-carousel arrows dots-class="slick-dots slick-thumb">
+            <a slot="customPaging" slot-scope="props">
+              <img :src="detailsData.productPicList[props.i].imageUrl" />
+            </a>
+            <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1"><a-icon type="left-circle" style="color: #314659;" /></div>
+            <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px"><a-icon type="right-circle" style="color: #314659;" /></div>
+            <div v-for="(item, index) in detailsData.productPicList" :key="index">
+              <img-zoom :src="item.imageUrl" width="100%" height="100%" :bigsrc="item.imageUrl" :configs="configs"></img-zoom>
+            </div>
           </a-carousel>
         </div>
       </div>
@@ -43,9 +48,11 @@
 </template>
 
 <script>
+import imgZoom from 'vue2.0-zoom'
 import { productSnDetail } from '@/api/product.js'
 export default {
   name: 'ProductInfoDetail',
+  components: { imgZoom },
   computed: {
     productTypeName () {
       const productTypeName1 = this.detailsData && this.detailsData.productTypeName1 ? this.detailsData.productTypeName1 : ''
@@ -58,7 +65,15 @@ export default {
     return {
       itemId: null,
       detailsData: null, //  详情数据
-      prevPageInfo: null
+      prevPageInfo: null,
+      configs: {
+        width: 600,
+        height: 350,
+        maskWidth: 80,
+        maskHeight: 80,
+        maskColor: 'red',
+        maskOpacity: 0.2
+      }
     }
   },
   methods: {
@@ -100,11 +115,13 @@ export default {
 </script>
 
 <style lang="less">
+#_magnifier_layer{
+  left: 500px!important;
+}
 /* For demo */
 .ant-carousel .slick-slide {
   text-align: center;
   overflow: hidden;
-  border: 1px solid #eee;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -126,12 +143,40 @@ export default {
   width: 100%;
   max-height: 100%;
 }
+
+.ant-carousel{
+  border: 1px solid #e8e8e8;
+}
+.ant-carousel .slick-dots {
+  height: auto;
+}
+.ant-carousel .slick-slide img {
+  border: 5px solid #fff;
+  display: block;
+  margin: auto;
+  max-width: 90%;
+}
+.ant-carousel .slick-thumb {
+  bottom: -40px;
+}
+.ant-carousel .slick-thumb li {
+  width: 40px;
+  height: 35px;
+}
+.ant-carousel .slick-thumb li img {
+  width: 100%;
+  height: 100%;
+  filter: grayscale(100%);
+}
+.ant-carousel .slick-thumb li.slick-active img {
+  filter: grayscale(0%);
+}
 .newProductDetail-back {
   margin-bottom: 10px;
 }
 .newProductDetail-modal {
   background-color: #fff;
-  padding: 15px;
+  padding: 15px 15px 55px;
   h4 {
     font-size: 18px;
   }

部分文件因文件數量過多而無法顯示