微信模板编辑前端界面（记录）

 

<div>
      <div style="float: left;margin-top: 20px;width: 30%;min-width: 400px;">
        <div class="elRow">
          <div class="elCol">
            <label>模板名称：</label>
            <el-select v-model="info.templateNo" placeholder="全部" @change="selectTemplate">
              <el-option v-for="(item,index) in templateData" :key="item.template_id" :label="item.title" :value="item.template_id"
                v-if="index!=0">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="elRow">
          <div class="elCol">
            <label>任务名称：</label>
            <el-input placeholder="任务名称仅后台查看记录，不会发给粉丝" v-model="info.taskName" clearable></el-input>
          </div>
        </div>
        <div class="elRow">
          <div class="elCol">
            <label>查看详情：</label>
            <el-input placeholder="" v-model="info.detail" clearable></el-input>
          </div>
          <label v-if="ketWordData.length>0" style="color: #05A1EC;">以下内容填写{{replaceStr}},发送时可自动替换为用户昵称</label>
        </div>
        <div v-for="(item,index) in ketWordData" :key="index">
          <div class="elRow">
            <div class="elCol">
              <label>{{item.lable}}：</label>
              <el-input placeholder="" v-model="item.value" :name="item.key" @change="changContent()" clearable></el-input>
              <el-color-picker style="border: none;" v-model="item.color" @change="changContent()"></el-color-picker>
            </div>
          </div>
        </div>
        <!-- 清除浮动-->
        <div style="clear: both;"></div>
        <p style="margin-top: 28px;text-align: center;">
          <el-button size="small" @click="$router.go(-1)" icon="el-icon-circle-close">取 消</el-button>
          <el-button size="small" type="primary" @click="setTime()" icon="el-icon-search">确 定</el-button>
        </p>
      </div>
      <div style="float: left;width: 40%;">
        <div class="imgBox" style="position: relative;left: 0px;;">
          <el-image :src="imgUrl" class="imgBag"></el-image>
          <div style="position: absolute;top:15%;margin: 0 10%;padding: 2px; width: 80%;background-color: white;" v-if="title!=''"
            @click="details()">
            <div style="white-space: pre-wrap;font-size: 14px;font-weight: bold;">{{title}}</div>
            <div v-html="content1" style="white-space: pre-wrap;"></div>
            <hr>
            </hr>
            <div>
              <div style="float: left;font-weight: bold;">查看详情</div>
              <div style="float: right;">></div>
            </div>
          </div>
        </div>
      </div>
    </div>










//选择模板后处理数据
      selectTemplate(value) {
        this.ketWordData = [];
        this.templateData.forEach((item, index) => {
          if (item.template_id == value) {
            this.title = item.title;
            this.content = item.content.trim();
            this.content1 = item.content.trim();
            let strArr = this.content.split("}}");
            strArr.forEach((item, index) => {
              if (item.length != 0) {
                let key = item.substring(item.indexOf("{{") + 2, item.indexOf("."));
                let lable = "{{" + key + ".DATA}}"
                let json = {
                  'lable': lable,
                  'key': key,
                  'value': "",
                  'color': "#333333"
                }
                this.ketWordData.push(json);
              }
            });
          }
        })
      },
      //颜色改变
      changContent() {
        let str = this.content;
        this.ketWordData.forEach((item, index) => {
          if (item.value.length != 0) {
            str = str.replace(item.lable, '<label style="color: ' + item.color + '">' + item.value + "</label>");
          }
        })
        this.content1 = str;
      },