fix: 图片链接支持多个链接

src/components/editTemplate/form/ImageUrlForm.vue

 <template>
-  <base-form
-      :label="property.label"
-      :watchValue="property.value"
-      @changeValue="change"
-  ></base-form>
+  <div class="array-form">
+    <div class="label">
+      <img class="pre-tag" src="../../../assets/images/template/pre-tag.png" />
+      <div class="label-text" :title="property.label">{{ property.label }}</div>
+    </div>
+    <div class="lists">
+      <div
+          class="list"
+          v-for="(item, index) in array"
+          :key="index"
+      >
+        <input
+            @change="change"
+            class="input"
+            type="text"
+            v-model="item.value"
+            :placeholder="'请输入' + property.label"
+        >
+        <div class="del" @click="del(index)">
+          <i class="iconfont iconshanchu-"></i>
+        </div>
+      </div>
+
+      <div class="add" @click="add">
+        <i class="iconfont icontianjia"></i>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue} from "vue-property-decorator";
-import BaseForm from "./BaseForm.vue";
+import {Component, Prop, Vue, Watch} from "vue-property-decorator";
 import {Property} from "@/plugins/types2";
 
-@Component({
-  components: {
-    BaseForm
-  }
-})
-
+@Component
 export default class ImageUrlForm extends Vue {
   @Prop() property!: Property;
 
+  public array = [{
+    value: ''
+  }];
+
+  @Watch('array')
+  public arrayChange() {
+    this.property.value = this.array.map(item => String(item.value));
+  }
+
+  mounted() {
+    if (!Array.isArray(this.property.value)) return;
+    this.array = this.property.value.map((value: string) => {
+      return {value};
+    })
+  }
+
   public change(inputValue: string) {
-    this.property.value = inputValue;
+    this.property.value = this.array.map(item => String(item.value));
+  }
+
+  public add() {
+    this.array.push({
+      value: ''
+    })
+  }
+
+  public del(index:number) {
+    if (this.array.length <= 1) return;
+    this.array.splice(index, 1);
   }
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+.label {
+  display: inline-block;
+  width: 150px; /* 104 - 18 */
+  flex-shrink: 0;
+  height: 44px;
+  cursor: pointer;
+  line-height: 44px;
+  color: #797d84; /* todo ui图颜色不一致 */
+  font-size: 14px;
+  font-weight: 300;
+  position: relative;
+}
+.pre-tag {
+  position: absolute;
+  left: -30px;
+  top: 14px;
+  display: none;
+}
+.array-form {
+  flex-shrink: 0;
+  padding-left: 18px;
+  line-height: 65px;
+  height: auto;
+  font-size: 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.list {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+}
+.input {
+  margin-right: 10px;
+  margin-top: 0;
+  flex-shrink: 0;
+  height: 44px;
+  width: 770px;
+  box-sizing: border-box;
+  min-height: 44px;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6; /* todo 边框、背景色ui图颜色不一致 */
+  outline: none;
+  padding-left: 24px;
+  font-size: 14px;
+  font-weight: 300;
+  &::-webkit-input-placeholder {
+    color: #bababa;
+  }
+  &::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: #bababa;
+  }
+
+  &:-ms-input-placeholder {
+    /* Internet Explorer 10+ */
+    color: #bababa;
+  }
+}
 
+.del {
+  height: 34px;
+  display: flex;
+  color: #eaeaea;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  .iconfont {
+    font-size: 20px;
+  }
+}
+
+
+
+.add {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  color: white;
+  display: flex;
+  background-color: #3f79fe;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  margin: 10px 0;
+}
 </style>

src/config/UrlPrefix.js

 const configModules = {
   // 溯源>测试环境
   "sy_test": {
-    CHAIN_BROWSER_URL_PREFIX: '/llq',
+    CHAIN_BROWSER_URL_PREFIX: '/llq/',
     INERFACE_URL_PREFIX: '/api',
     /**
      * 网站入口配置
@@ -17,7 +17,7 @@ const configModules = {
   },
   // 溯源>正式环境
   "sy_prod": {
-    CHAIN_BROWSER_URL_PREFIX: '/llq',
+    CHAIN_BROWSER_URL_PREFIX: '/llq/',
     INERFACE_URL_PREFIX: '/api',
     // CHAIN_BROWSER_URL_PREFIX: 'http://121.40.18.70:8995/',
     // INERFACE_URL_PREFIX: 'http://172.16.101.87:46789',

src/plugins/Template.ts

@@ -125,7 +125,7 @@ function formatProperty2Api(property: Property): TemplateProperty | TmplSelectPr
       key: property.parent.title === 'ext' ? property.label : property.key,
       label: property.label
     };
-  } else if (property.type === PropertyType.JSON || property.type === PropertyType.ImageUrl) {
+  } else if (property.type === PropertyType.JSON ) {
     return {
       data: {
         format: 'string',
@@ -196,7 +196,7 @@ function formatProperty2Api(property: Property): TemplateProperty | TmplSelectPr
       label: property.label
     };
   }
-  else if (property.type === PropertyType.TextArray) {
+  else if (property.type === PropertyType.TextArray || property.type === PropertyType.ImageUrl) {
     let data = property.value === '' ? [{
       format: "string",
       type: "text",
@@ -210,7 +210,7 @@ function formatProperty2Api(property: Property): TemplateProperty | TmplSelectPr
     });
     return {
       key: property.key,
-      type: (property.type as PropertyType.TextArray),
+      type: (property.type as (PropertyType.TextArray | PropertyType.ImageUrl)),
       data: data,
       label: property.label
     };
@@ -278,7 +278,7 @@ function formatApiProperty2Local(property: any, parent: Unit): Property {
     local.value = property.data
   } else if (property.type === PropertyType.Audio) {
     local.value = property.data
-  } else if (property.type === PropertyType.TextArray) {
+  } else if (property.type === PropertyType.TextArray || property.type === PropertyType.ImageUrl) {
     local.value = property.data.map((item: {value: string}) => item.value);
   }
   return local;

src/utils/app/common.ts

@@ -3,6 +3,7 @@ import { Message } from 'element-ui';
 import { CHAIN_BROWSER_URL } from "@/config/URLS";
 
 function getChainBrowserUrl(hash: string): string {
+  console.log(`${CHAIN_BROWSER_URL}${hash}`);
   return `${CHAIN_BROWSER_URL}${hash}`;
 }
 

src/views/template/readOnly.vue

@@ -90,12 +90,9 @@
           </div>
           <!-- 图片链接 -->
           <div class="info-content" v-if="item2.type === 13">
-            <div
-                v-if="item2.data.value"
-                class="imgbox"
-            >
-              <img :src="item2.data.value"  />
-              <div class="ibox" @click="displayPicture(item2.data.value)">
+            <div class="imgbox" v-for="(item3, index) in item2.data" :key="index">
+              <img :src="item3.value"  />
+              <div class="ibox" @click="displayPicture(item3.value)">
                 <i class="iconfont iconfangda"></i>
               </div>
             </div>
@@ -254,6 +251,10 @@ export default {
           element.data = list;
           // this.$forceUpdate();
 
+        } else if (element.type === 13) {
+          if (Array.isArray(element.data)) {
+            element.data = element.data.filter(item => item.value !== '');
+          }
         }
       }
     },

vue.config.js

@@ -10,7 +10,7 @@ module.exports = {
         open: true,
         proxy: {
             '^/api': {
-                target: 'http://172.16.101.87:46789',
+                target: 'http://172.16.101.87:46789/',
                 pathRewrite: {
                     '^/api': '',
                 },