fix: 新增三种表现形式

src/components/category/TemplateManage.vue

@@ -216,6 +216,7 @@ export default {
       );
     } else {
       this.getFolderList();
+      if (!this.TemplateDate.index) return;
       this.switchPersonalClassification(
         this.TemplateDate.item,
         this.TemplateDate.index
@@ -380,7 +381,7 @@ export default {
         this.checkClassification = 0;
       }
     },
-    //个人模板or系统模板切换
+    //个人模板or系统模板切换 1 系统模板 0 个人模板
     SwitchTemplate(key) {
       switch (key) {
         case 0:
@@ -665,4 +666,4 @@ header {
     background: rgba(242, 244, 246, 1);
   }
 }
-</style>
+</style>
\ No newline at end of file

src/components/editTemplate/ModifyPresentation.vue

@@ -142,13 +142,50 @@
           <div class="pic-box">+</div>
         </div>
       </div>
+      <div class="optional" @click="select(PropertyType.JSON)">
+        <i
+            :class="{
+            iconfont: true,
+            'i--check': TypeNum === PropertyType.JSON,
+            iconxingzhuang2: TypeNum === PropertyType.JSON,
+            iconweixuanze: TypeNum !== PropertyType.JSON,
+          }"
+        ></i>
+        <span class="title">JSON</span>
+        <input type="text" class="half" value disabled="disabled" />
+        <input type="text" class="half" value disabled="disabled" />
+      </div>
+      <div class="optional" @click="select(PropertyType.ImageUrl)">
+        <i
+            :class="{
+            iconfont: true,
+            'i--check': TypeNum === PropertyType.ImageUrl,
+            iconxingzhuang2: TypeNum === PropertyType.ImageUrl,
+            iconweixuanze: TypeNum !== PropertyType.ImageUrl,
+          }"
+        ></i>
+        <span class="title">图片链接</span>
+        <input type="text" value disabled="disabled" />
+      </div>
+      <div class="optional" @click="select(PropertyType.TextArray)">
+        <i
+            :class="{
+            iconfont: true,
+            'i--check': TypeNum === PropertyType.TextArray,
+            iconxingzhuang2: TypeNum === PropertyType.TextArray,
+            iconweixuanze: TypeNum !== PropertyType.TextArray,
+          }"
+        ></i>
+        <span class="title">文本数组</span>
+        <input type="text" value disabled="disabled" />
+      </div>
       <div
-        class="optional"
-        @click="select(PropertyType.Editor)"
+          class="optional"
+          @click="select(PropertyType.Editor)"
       >
         <div class="left">
           <i
-            :class="{
+              :class="{
               iconfont: true,
               'i--check': TypeNum === PropertyType.Editor,
               iconxingzhuang2: TypeNum === PropertyType.Editor,
@@ -229,10 +266,14 @@ input {
   text-indent: 12px;
   color: #d8d8d8;
   margin-left: 8px;
+
+  &.half {
+    width: 66px;
+  }
 }
 .box {
   width: 549px;
-  height: 514px;
+  height: 610px;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 20px 0px rgba(61, 118, 249, 0.18);
   padding: 0 50px;
@@ -248,7 +289,7 @@ input {
   }
   .center {
     width: 494px;
-    height: 274px;
+    height: 370px;
     background: rgba(251, 251, 251, 1);
     border: 1px solid rgba(240, 240, 240, 1);
     margin: 0 auto;

src/components/editTemplate/PropertyItem.vue

@@ -56,6 +56,18 @@
       @changeValue="changeValue"
       :isDisabled="isDisabled"
     ></link-form>
+    <json-form
+        v-else-if="property.type === PropertyType.JSON"
+        :property="property"
+    />
+    <image-url-form
+        v-else-if="property.type === PropertyType.ImageUrl"
+        :property="property"
+    />
+    <text-array-form
+        v-else-if="property.type === PropertyType.TextArray"
+        :property="property"
+    />
   </div>
 </template>
 
@@ -73,6 +85,9 @@ import EditorForm from "@/components/editTemplate/form/EditorForm.vue";
 import AudioForm from "@/components/editTemplate/form/AudioForm.vue";
 import TextAreaForm from "@/components/editTemplate/form/TextAreaForm.vue";
 import LinkForm from "@/components/editTemplate/form/LinkForm.vue";
+import JsonForm from "@/components/editTemplate/form/JSONForm.vue";
+import ImageUrlForm from "@/components/editTemplate/form/ImageUrlForm.vue";
+import TextArrayForm from "@/components/editTemplate/form/TextArrayForm.vue";
 @Component({
   components: {
     BaseForm,
@@ -85,6 +100,9 @@ import LinkForm from "@/components/editTemplate/form/LinkForm.vue";
     AudioForm,
     TextAreaForm,
     LinkForm,
+    JsonForm,
+    ImageUrlForm,
+    TextArrayForm
   },
 })
 export default class PropertyItem extends Vue {

src/components/editTemplate/form/ImageUrlForm.vue

+<template>
+  <base-form
+      :label="property.label"
+      :watchValue="property.value"
+  ></base-form>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue} from "vue-property-decorator";
+import BaseForm from "./BaseForm.vue";
+import {Property} from "@/plugins/types2";
+
+@Component({
+  components: {
+    BaseForm
+  }
+})
+
+export default class ImageUrlForm extends Vue {
+  @Prop() property!: Property;
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/editTemplate/form/JSONForm.vue

+<template>
+  <base-form
+      :label="property.label"
+      :watchValue="property.value"
+      :showInput="false"
+      class="json-form"
+  >
+    <div class="lists">
+      <div class="list" v-for="(i, index) in jsons" :key="index">
+        <input
+            class="input"
+            v-model="i.key"
+            @input="change"
+            type="text"
+            placeholder="key"
+        />
+        <input
+            class="input"
+            v-model="i.value"
+            @input="change"
+            type="text"
+            placeholder="value"
+        />
+        <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>
+  </base-form>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import BaseForm from "./BaseForm.vue";
+import {Property} from "@/plugins/types2";
+
+@Component({
+  components: {
+    BaseForm
+  }
+})
+
+export default class JsonForm extends Vue {
+  @Prop() property!: Property;
+  public jsons = [{
+    key: '',
+    value: ''
+  }];
+  mounted() {
+    console.log(this.property);
+  }
+  public change() {
+
+  }
+  public add() {
+    this.jsons.push({
+      key: '',
+      value: ''
+    })
+  }
+  public del(index:number) {
+    if (this.jsons.length <= 1) return;
+    this.jsons.splice(index,1);
+  }
+
+}
+</script>
+
+<style scoped lang="less">
+.json-form {
+  height: auto;
+}
+.list {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+}
+.input {
+  width: 380px;
+  margin-right: 10px;
+  margin-top: 0;
+  flex-shrink: 0;
+  height: 44px;
+}
+
+.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/components/editTemplate/form/TextArrayForm.vue

+<template>
+  <base-form
+      :label="property.label"
+      :watchValue="property.value"
+      :showInput="false"
+      class="array-form"
+  >
+    <div class="lists">
+      <div
+          class="list"
+          v-for="(item, index) in array"
+          :key="index"
+      >
+        <input
+            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>
+  </base-form>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue} from "vue-property-decorator";
+import BaseForm from "./BaseForm.vue";
+import {Property} from "@/plugins/types2";
+@Component({
+  components: {
+    BaseForm
+  }
+})
+export default class TextArray extends Vue {
+  @Prop() property!: Property;
+  public array = [{
+    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 lang="less">
+.array-form {
+  height: auto;
+}
+.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;
+}
+
+.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

@@ -2,7 +2,7 @@ const configModules = {
   // 溯源>测试环境
   "sy_test": {
     CHAIN_BROWSER_URL_PREFIX: 'http://120.26.174.69:9032/',
-    INERFACE_URL_PREFIX: 'http://172.16.101.87:46790',
+    INERFACE_URL_PREFIX: 'http://172.16.101.87:46789',
     /**
      * 网站入口配置
      */
@@ -17,10 +17,10 @@ const configModules = {
   },
   // 溯源>正式环境
   "sy_prod": {
-    CHAIN_BROWSER_URL_PREFIX: 'https://cx.chain33.pro/',
-    INERFACE_URL_PREFIX: 'https://sy.chain33.pro/api',
-    // CHAIN_BROWSER_URL_PREFIX: 'http://172.16.101.87:8995/',
-    // INERFACE_URL_PREFIX: 'http://172.16.101.87:8994/',
+    // CHAIN_BROWSER_URL_PREFIX: 'https://cx.chain33.pro/',
+    // INERFACE_URL_PREFIX: 'https://sy.chain33.pro/api',
+    CHAIN_BROWSER_URL_PREFIX: 'http://172.16.101.87:8995/',
+    INERFACE_URL_PREFIX: 'http://172.16.101.87:8994/',
     INDEX: {
       entry: './src/entry/sy/main.ts',
       template: './public/sy/index.html',

src/entry/gs/views/categoryManage/categoryManage.vue

@@ -192,6 +192,6 @@ export default class Template extends Vue {
 }
 .col_right--show {
   display: block;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 </style>

src/entry/sy/views/Main.vue

@@ -44,7 +44,6 @@ export default class Main extends Vue {}
 .main_wrapper {
   flex: 1;
   min-height: 0;
-  overflow-y: scroll;
   background: white;
   height: 100%;
 }

src/plugins/types.ts

@@ -17,10 +17,13 @@ export enum PropertyType {
   Video = 8, //视频
   Audio = 9, // 音频
   TextArea = 10, // 多行文本输入
-  Link = 11 //外部链接
+  Link = 11, //外部链接
+  JSON = 12,
+  ImageUrl = 13, // 图片链接
+  TextArray = 14, // 单行文本的数组
 }
 
-//to showstatus 
+//to showstatus
 interface Property {
   key: string;
   type: PropertyType;

src/store/state.ts

@@ -15,7 +15,7 @@ const state: StateTypes = {
   templateNum: 0, //模板数量
   theAnchor: -1,
   chainStatus: '',
-  templateType: 0,
+  templateType: 0, // 0 系统模板 1 个人模板
   templateData: {},
   currentRoute: Number(sessionStorage.getItem("currentRoute")) || 0
 };

src/views/template/editTemplate.vue

 <template>
   <div class="add_template">
-    <!-- 提示用语 -->
-    <!-- <div class="add-template__confirm" v-if="returnConfirm">
-      <div class="template-confirm__center">
-        <div class="confirm-left">
-          <i class="iconfont icongantanhao-xianxingyuankuang"></i>
-          <p>您还未保存，返回后信息不会保存。</p>
-        </div>
-        <div class="confirm-btn" @click="gogo">继续返回</div>
-      </div>
-      <i class="iconfont iconjiufuqianbaoicon08" @click="backCancel"></i>
-    </div>-->
-    <!-- end -->
     <div class="add_template__center">
       <div
         class="col_left"
@@ -112,7 +100,7 @@
                 }"
               >
                 <i class="iconfont iconbaocun-"></i>
-                保存模板
+                保存模板{{TemplateType}}
               </div>
             </div>
           </div>
@@ -399,7 +387,6 @@ export default class editTemplate extends Vue {
   // 更新个人模板
   public async updateCustomize() {
     await this.fileHandler();
-
     const res = await this.$ajax({
       type: "put",
       url: GO_URLS.updateCustomize,