完善图片上传

@@ -15,8 +15,8 @@ module.exports = {
     port: 6004,
     siteUrl: '//m.yohoblk.com',
     domains: {
-        api: 'http://api.yoho.cn/',
-        service: 'http://service.yoho.cn/'
+        api: 'http://192.168.102.202:8080/gateway/',
+        service: 'http://192.168.102.202:8080/gateway/'
     },
     subDomains: {
         host: '.m.yohoblk.com',

 <template>
     <div class="upload">
         <form v-on:change="upload">
-            <label class="label-input" for="{{inputId}}">
+            <label class="label-input icon" for="{{inputId}}">
                 <input id="{{inputId}}" type="file" name="filename">
             </label>
         </form>
@@ -28,6 +28,8 @@
                     processData: false,  // 告诉jQuery不要去处理发送的数据
                     contentType: false   // 告诉jQuery不要去设置Content-Type请求头
                 }).then(res => {
+                    e.target.value = '';
+
                     if (res.code === 200) {
                         res.data.imagesList.forEach(imagesPath => {
                             this.imageList.push(imagesPath);

@@ -167,6 +167,7 @@
 
     .refund {
         .return-amount {
+            margin: 30px 0;
             padding: 0 30px;
             font-size: 32px;
             line-height: 90px;

@@ -37,8 +37,7 @@
     }
 
     .product-list {
-        margin-bottom: 30px;
-        background: #fff;
+        margin-top: -4px;
         border-top: 1px solid #eee;
         border-bottom: 1px solid #eee;
     }

@@ -42,6 +42,7 @@
         height: 170px;
         font-size: 24px;
         line-height: 1.5;
+        background: #fff;
 
         &:after {
             content: "";
@@ -51,6 +52,7 @@
             width: 690px;
             height: 0;
             border-bottom: 1px solid #eee;
+            z-index: 1;
         }
 
         .checkbox {

@@ -12,7 +12,16 @@
                 <option v-for="reason in returnReason" v-bind:value="reason.id" selected="{{reason.id === product.reason.id}}">{{reason.name}}</option>
             </select>
         </div>
-        <upload v-bind:image-list="product.imageList"></upload>
+        <div class="remark">
+            <textarea v-model="product.remark" rows="3" max-length="100" placeholder="退货原因说明"></textarea>
+        </div>
+        <div class="image-list clearfix">
+            <div class="image-item" v-for="image in imageListForShow">
+                <span v-on:click="deleteImage(image.index)" class="icon icon-close"></span>
+                <img v-bind:src="image.path">
+            </div>
+            <upload v-show="imageListForShow.length < 4" class="image-item" v-bind:image-list="product.imageList"></upload>
+        </div>
     </div>
 </template>
 
@@ -25,7 +34,7 @@
             domain = 'static.yhbimg.com/goodsimg';
 
         url = domain + url;
-        if (num === 2) {
+        if (num === '1') {
             return '//img11.' + url;
         } else {
             return '//img12.' + url;
@@ -40,11 +49,26 @@
                     id: 0,
                     name: '请选择'
                 }].concat(this.refundData.returnReason);
+            },
+            imageListForShow() {
+                const list = [];
+
+                this.product.imageList.forEach((path, index) => {
+                    list.push({
+                        index: index,
+                        path: getImgHost(path) + '?imageView2/2/w/160/h/160'
+                    });
+                });
+
+                return list;
             }
         },
         methods: {
             showTip() {
                 alert(this.refundData.specialNotice.remark);
+            },
+            deleteImage(index) {
+                this.product.imageList.splice(index, 1);
             }
         },
         components: {
@@ -55,13 +79,24 @@
 
 <style>
     .reason {
-        padding: 0 30px;
         font-size: 32px;
         line-height: 90px;
+        background: #f6f6f6;
+
+        &:after {
+            content: "";
+            display: block;
+            width: 100%;
+            height: 30px;
+            border-top: 1px solid #eee;
+            border-bottom: 1px solid #eee;
+        }
 
         .tip {
             position: relative;
+            padding: 0 30px;
             font-size: 26px;
+            background: #fff;
 
             .icon {
                 margin-right: 5px;
@@ -80,8 +115,10 @@
 
         .select-reason {
             position: relative;
+            padding: 0 30px;
             width: 100%;
             height: 90px;
+            background: #fff;
 
             &:after {
                 content: "";
@@ -102,5 +139,73 @@
                 color: #b0b0b0;
             }
         }
+
+        .remark {
+            margin-top: 20px;
+            padding: 0 30px;
+            background: #fff;
+            border-top: 1px solid #eee;
+
+            textarea {
+                margin-top: 30px;
+                width: 100%;
+                font-size: 24px;
+                line-height: 40px;
+                resize: none;
+            }
+        }
+
+        .image-list {
+            padding: 30px;
+            background: #fff;
+
+            .image-item {
+                position: relative;
+                float: left;
+                margin-right: 20px;
+                width: 150px;
+                height: 150px;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+
+                .icon-close {
+                    position: absolute;
+                    right: -20px;
+                    top: -20px;
+                    font-size: 40px;
+                    color: #fff;
+                    background: #b0b0b0;
+                    border-radius: 100%;
+                    z-index: 2;
+                }
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .label-input {
+                position: relative;
+                width: 150px;
+                height: 150px;
+                font-size: 150px;
+
+                &:before {
+                    content: "\e604";
+                }
+
+                input {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    width: 0;
+                    height: 0;
+                    opacity: 0;
+                }
+            }
+        }
     }
 </style>