fix

src/views/Marketing/clientSetup/banner/diabox.vue

@@ -0,0 +1,240 @@
+<template>
+  <div id="">
+    <el-dialog
+      :visible.sync="visible"
+      width="1200px"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :append-to-body="true"
+      @closed="close"
+    >
+      <div slot="title" class="hearders">
+        <div class="leftTitle">编辑</div>
+        <div class="rightBoxs">
+          <img
+            src="@/assets/images/Close@2x.png"
+            alt=""
+            @click="visible = false"
+          />
+        </div>
+      </div>
+      <div class="box">
+        <div class="dis_x">
+          <div>
+            Banner
+            <span style="font-weight: bold">{{ tableData.length || 0 }}</span>
+            张
+          </div>
+          <el-button size="small" @click="editList()" type="primary"
+            >新增</el-button
+          >
+        </div>
+        <el-table
+          max-height="700px"
+          :data="tableData"
+          style="width: 100%; margin-top: 10px"
+          border
+        >
+          <el-table-column
+            v-for="(item, index) in tableSet"
+            :width="item.width"
+            :key="index"
+            :prop="item.prop"
+            :label="item.label"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <div
+                v-if="item.scope === 'img'"
+                style="width: 100%; height: 100%"
+              >
+                <el-image
+                  style="width: 100%; height: 100%"
+                  :src="$methodsTools.splitImgHost(scope.row[item.prop])"
+                  :preview-src-list="[
+                    $methodsTools.splitImgHost(scope.row[item.prop]),
+                  ]"
+                >
+                </el-image>
+              </div>
+              <div v-else-if="item.scope === 'input'">
+                <el-input-number
+                  v-model="scope.row[item.prop]"
+                  :controls="false"
+                  :min="0"
+                  :precision="0"
+                  style="width: 100%"
+                ></el-input-number>
+              </div>
+              <span v-else-if="item.scope === 'status'">
+                {{
+                  scope.row[item.prop] === 1
+                    ? "启用"
+                    : scope.row[item.prop] === 0
+                    ? "关闭"
+                    : "未知"
+                }}
+              </span>
+              <div v-else>{{ scope.row[item.prop] }}</div>
+            </template></el-table-column
+          >
+          <el-table-column
+            fixed="right"
+            label="操作"
+            width="100"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <el-button type="text" size="small" @click="editList(scope.row)"
+                >修改</el-button
+              ></template
+            >
+          </el-table-column>
+        </el-table>
+      </div></el-dialog
+    >
+    <diabox_children ref="diabox_children" @backFunc="activeFunc()" />
+  </div>
+</template>
+
+<script>
+import diabox_children from "./diabox_children.vue";
+export default {
+  components: { diabox_children },
+  data() {
+    return {
+      visible: false,
+      tableSet: [
+        {
+          label: "排序",
+          prop: "sort",
+          width: "120px",
+        },
+        {
+          label: "广告标题",
+          prop: "advName",
+        },
+        {
+          label: "图片",
+          prop: "adverUrl",
+          scope: "img",
+        },
+        {
+          label: "跳转位置",
+          prop: "jumpUrl",
+        },
+        {
+          label: "发布状态",
+          prop: "status",
+          scope: "status",
+        },
+      ],
+      tableData: [],
+      activeId: null,
+    };
+  },
+  methods: {
+    openBoxs(id) {
+      this.visible = true;
+      this.activeId = id;
+      this.activeFunc();
+    },
+    activeFunc() {
+      this.$api
+        .inquirebaseadvertisinglist({ locationId: this.activeId })
+        .then((res) => {
+          this.tableData = res.rows;
+        });
+    },
+    editList(row) {
+      this.$refs.diabox_children.openBoxs(row, this.activeId);
+    },
+    close() {
+      this.visible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dis_fs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 337.5px;
+  height: 144px;
+  border: 1px solid #999;
+  .imgBoxs {
+    width: 100%;
+    height: 100%;
+  }
+}
+.styPsty {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  .btns {
+    border: 1px solid #999;
+    font-size: 12px;
+    height: 28px;
+    line-height: 28px;
+    padding: 0px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 10px;
+    flex-shrink: 0;
+  }
+}
+/deep/ .el-dialog {
+  border-radius: 8px !important;
+  .el-dialog__header {
+    padding: 0;
+    .hearders {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 18px 0px 20px;
+      border-bottom: 1px solid #e2e2e2;
+      .leftTitle {
+        font-size: 14px;
+        font-weight: bold;
+        color: #2f4378;
+      }
+      .rightBoxs {
+        display: flex;
+        align-items: center;
+        img {
+          width: 14px;
+          height: 14px;
+          margin-left: 13px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    padding: 0;
+    .dialog-footer {
+      padding: 0px 40px;
+      height: 70px;
+      border-top: 1px solid #e2e2e2;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+/deep/.el-button {
+  border-radius: 8px;
+}
+/deep/ .el-form--label-top {
+  padding: 0px;
+}
+.dis_x {
+  display: flex;
+  align-items: center;
+  margin-bottom: 14px;
+  justify-content: space-between;
+}
+</style>

src/views/Marketing/clientSetup/banner/diabox_children.vue

@@ -0,0 +1,377 @@
+<template>
+  <div id="">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      append-to-body
+      width="610px"
+      :show-close="false"
+      :close-on-click-modal="false"
+    >
+      <div slot="title" class="hearders">
+        <div class="leftTitle">
+          {{ listData.id ? "修改" : "新增" }}
+        </div>
+        <div class="rightBoxs">
+          <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
+        </div>
+      </div>
+      <div>
+        <el-form
+          label-position="right"
+          label-width="150px"
+          :model="listData"
+          :rules="rules"
+          ref="listData"
+        >
+          <el-form-item label="图片标题" prop="advName">
+            <el-input v-model="listData.advName"></el-input>
+          </el-form-item>
+          <el-form-item label="图片" prop="adverUrl">
+            <div class="dis_fs">
+              <span v-if="!listData.adverUrl">暂无图片</span>
+              <img
+                v-else
+                class="imgBoxs"
+                :src="$methodsTools.splitImgHost(listData.adverUrl)"
+                alt="加载失败"
+              />
+            </div>
+            <div class="styPsty">
+              <label class="btns"
+                >修改封面
+                <input
+                  ref="file"
+                  type="file"
+                  style="display: none"
+                  @change="editImg"
+                />
+              </label>
+              <div style="font-size: 12px; color: #999; line-height: 17px">
+                注：请上传小于300kb，尺寸为
+                <span style="color: red">390*122</span>
+                的像素图片，支持jpg、jpeg、png等类型
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item
+            label="跳转位置"
+            :required="
+              listData.jumpType === 2 ||
+              listData.jumpType === 3 ||
+              listData.jumpType === 4
+                ? true
+                : false
+            "
+          >
+            <el-select
+              v-model="listData.jumpType"
+              placeholder="请选择跳转类型"
+              clearable
+            >
+              <el-option
+                v-for="(item, index) in options"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label=""
+            v-if="
+              listData.jumpType === 2 ||
+              listData.jumpType === 3 ||
+              listData.jumpType === 4
+            "
+            :prop="
+              listData.jumpType === 2 ||
+              listData.jumpType === 3 ||
+              listData.jumpType === 4
+                ? 'jumpUrl'
+                : ''
+            "
+          >
+            <el-input
+              v-model="listData.jumpUrl"
+              :placeholder="
+                listData.jumpType === 2
+                  ? '请输入URL'
+                  : listData.jumpType === 3
+                  ? '请输入内部接口地址'
+                  : listData.jumpType === 4
+                  ? '请输入外部接口地址'
+                  : ''
+              "
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="appid"
+            prop="remarks"
+            v-if="listData.jumpType === 4"
+          >
+            <el-input
+              v-model="listData.remarks"
+              placeholder="请输入外部小程序appid"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="排序" prop="sort">
+            <el-input-number
+              :min="1"
+              v-model="listData.sort"
+              :precision="0"
+              :controls="false"
+            ></el-input-number>
+          </el-form-item>
+          <el-form-item label="发布状态" prop="status">
+            <el-radio-group v-model="listData.status">
+              <el-radio :label="1">启用</el-radio>
+              <el-radio :label="0">关闭</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button
+          @click="submitForm('listData')"
+          :loading="disabledBtn"
+          type="primary"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    var valiIcon = (rule, value, callback) => {
+      // 图片验证
+      if (!this.listData.adverUrl) {
+        callback(new Error("请上传图片"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      dialogVisible: false,
+      listData: {
+        locationId: "",
+        advName: "",
+        adverUrl: "",
+        status: 1,
+        jumpUrl: "",
+        remarks: "",
+        sort: "",
+      },
+      rules: {
+        advName: [
+          { required: true, message: "请输入广告标题", trigger: "blur" },
+        ],
+        jumpUrl: [{ required: true, message: "请输入内容", trigger: "blur" }],
+        remarks: [
+          { required: true, message: "请输入外部小程序appid", trigger: "blur" },
+        ],
+        adverUrl: [{ required: true, validator: valiIcon, trigger: "change" }],
+        status: [
+          { required: true, message: "请选择发布状态", trigger: "change" },
+        ],
+        sort: [{ required: true, message: "请输入图片排序", trigger: "blur" }],
+      },
+      options: [
+        {
+          label: "无跳转",
+          value: 1,
+        },
+        {
+          label: "URL",
+          value: 2,
+        },
+        {
+          label: "内部接口地址",
+          value: 3,
+        },
+        {
+          label: "外部接口地址",
+          value: 4,
+        },
+      ],
+    };
+  },
+  methods: {
+    openBoxs(row, id) {
+      this.dialogVisible = true;
+      if (row) {
+        this.listData = JSON.parse(JSON.stringify(row));
+      } else {
+        this.listData = {
+          locationId: id,
+          adverUrl: "oss/images/avatar/20211013/1634097664410_1397766697",
+          advName: "",
+          status: 1,
+          jumpUrl: "",
+          remarks: "",
+          sort: "",
+        };
+      }
+    },
+    close() {
+      this.dialogVisible = false;
+    },
+    /**
+     * 修改封面
+     */
+    editImg(e) {
+      var file = e.target.files[0];
+      if (file === undefined) {
+        return;
+      }
+      if (file.size > 0.3 * 1024 * 1024) {
+        this.$message.warning("图片不得大于300kb");
+        return;
+      }
+      var type = this.$refs.file.value.toLowerCase().split(".").splice(-1);
+      if (type[0] != "jpg" && type[0] != "png" && type[0] != "jpeg") {
+        this.$message.warning("上传格式需为：.jpg/.png/.jpeg");
+        this.$refs.file.value = "";
+        return;
+      }
+      this.$upload.upload(file, 0).then((res) => {
+        this.$set(this.listData, "adverUrl", res);
+      });
+    },
+    /**
+     * 提交修改/添加 表单验证
+     */
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.submit();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    submit() {
+      this.disabledBtn = true;
+      const statusNS = this.$parent.tableData.findIndex((i) => {
+        return i.sort == this.listData.sort;
+      });
+      if (statusNS != -1) {
+        if (
+          this.listData.id &&
+          this.listData.id == this.$parent.tableData[statusNS].id
+        ) {
+        } else {
+          this.$message.warning("存在相同排序，请重新设置排序");
+          this.disabledBtn = false;
+          return;
+        }
+      }
+      if (this.listData.id) {
+        this.$api
+          .editbaseadvertising(this.listData)
+          .then((res) => {
+            this.$message.success("修改成功");
+            this.dialogVisible = false;
+            this.$emit("backFunc");
+          })
+          .finally(() => {
+            this.disabledBtn = false;
+          });
+      } else {
+        this.$api
+          .appbaseadvertising(this.listData)
+          .then((res) => {
+            this.$message.success("新增成功");
+            this.dialogVisible = false;
+            this.$emit("backFunc");
+          })
+          .finally(() => {
+            this.disabledBtn = false;
+          });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dis_fs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 337.5px;
+  height: 144px;
+  border: 1px solid #999;
+  .imgBoxs {
+    width: 100%;
+    height: 100%;
+  }
+}
+.styPsty {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  .btns {
+    border: 1px solid #999;
+    font-size: 12px;
+    height: 28px;
+    line-height: 28px;
+    padding: 0px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 10px;
+    flex-shrink: 0;
+  }
+}
+/deep/ .el-dialog {
+  border-radius: 8px !important;
+  .el-dialog__header {
+    padding: 0;
+    .hearders {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 18px 0px 20px;
+      border-bottom: 1px solid #e2e2e2;
+      .leftTitle {
+        font-size: 14px;
+        font-weight: bold;
+        color: #2f4378;
+      }
+      .rightBoxs {
+        display: flex;
+        align-items: center;
+        img {
+          width: 14px;
+          height: 14px;
+          margin-left: 13px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    padding: 0;
+    .dialog-footer {
+      padding: 0px 40px;
+      height: 70px;
+      border-top: 1px solid #e2e2e2;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+/deep/.el-button {
+  border-radius: 8px;
+}
+/deep/ .el-form--label-top {
+  padding: 0px;
+}
+</style>

src/views/Marketing/clientSetup/banner/index.vue

@@ -0,0 +1,453 @@
+<template>
+  <div id="banner">
+    <table-list
+      :tableSets="tableSet"
+      :tableData="tableData"
+      :navText="navText"
+      @addClick="addClick"
+      :loading="loading"
+    >
+      <template slot="btn" slot-scope="props">
+        <el-button
+          type="text"
+          @click="addClick(props.scope.row, 0)"
+          v-if="false"
+          >修改</el-button
+        >
+        <el-button type="text" @click="del(props.scope.row)" v-if="false"
+          >删除</el-button
+        >
+        <el-button type="text" @click="edit(props.scope.row)">编辑</el-button>
+      </template>
+    </table-list>
+    <pagination
+      :total="total"
+      :pageSize="pageSize"
+      :currentPage="currentPage"
+      @handleSizeChange="handleSizeChange"
+      @handleCurrentChange="handleCurrentChange"
+    />
+    <el-dialog
+      @closed="loadingClose"
+      :visible.sync="dialogVisible"
+      width="560px"
+      :show-close="false"
+      :close-on-click-modal="false"
+    >
+      <div slot="title" class="hearders">
+        <div class="leftTitle">
+          {{ statusPop === 1 ? "添加" : statusPop === 0 ? "修改" : "详情" }}
+        </div>
+        <div class="rightBoxs">
+          <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
+        </div>
+      </div>
+      <div>
+        <el-form
+          label-position="right"
+          label-width="110px"
+          :model="listData"
+          :rules="rules"
+          ref="listData"
+        >
+          <el-form-item
+            v-for="(items, indexs) in listitem"
+            :key="indexs"
+            :label="items.label"
+            :prop="items.prop"
+          >
+            <el-radio-group
+              v-if="items.scope === 'status'"
+              v-model="listData[items.prop]"
+            >
+              <el-radio
+                v-for="(item, index) in items.options"
+                :key="index"
+                :label="item.value"
+                :disabled="statusPop === 2"
+                >{{ item.label }}</el-radio
+              >
+            </el-radio-group>
+            <el-input-number
+              :min="1"
+              :controls="false"
+              :precision="0"
+              :disabled="statusPop === 2"
+              v-else-if="items.scope === 'Number'"
+              v-model="listData[items.prop]"
+            ></el-input-number>
+            <el-input
+              :disabled="statusPop === 2"
+              v-else
+              v-model="listData[items.prop]"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button
+          type="primary"
+          :loading="disabledBtn"
+          v-if="statusPop !== 2"
+          @click="submit('listData')"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+    <diabox ref="diabox" />
+  </div>
+</template>
+
+<script>
+import tableList from "@/components/tableList";
+import pagination from "@/components/pagination";
+import diabox from "./diabox.vue"
+export default {
+  name: "Banner",
+  components: { tableList, pagination,diabox },
+  data() {
+    return {
+      disabledBtn: false,
+      loading: false, //当前表单加载是否加载动画
+      navText: {
+        title: "Banner列表",
+        index: 0,
+        ch: "条",
+        num: true,
+        choice: false,
+        addHide: true,
+        backFatherBtn: {
+          status: false,
+          title: "未定义",
+        },
+      },
+      // 表单
+      tableSet: [
+        {
+          label: "Banner名称",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "BannerKey",
+          prop: "locationKey",
+          hidden: true,
+        },
+        {
+          label: "适用端口",
+          prop: "platform",
+          hidden: true,
+          scope: "isOptions",
+          options: [
+            {
+              label: "小程序",
+              value: 1,
+            },
+            {
+              label: "PC网站",
+              value: 2,
+            },
+          ],
+        },
+        {
+          label: "轮播间隔(s)",
+          prop: "intervalTime",
+          hidden: true,
+        },
+        {
+          label: "状态",
+          prop: "status",
+          hidden: false,
+          scope: "status",
+        },
+      ],
+      tableData: [], //表单数据
+      total: 0, //一共多少条
+      pageSize: 10, //每页多少条数据
+      currentPage: 1, //当前页码
+      // 弹窗字段
+      listitem: [
+        {
+          label: "Banner名称",
+          prop: "name",
+        },
+        {
+          label: "BannerKey",
+          prop: "locationKey",
+        },
+        {
+          label: "间隔秒数",
+          prop: "intervalTime",
+          scope: "Number",
+        },
+        {
+          label: "适用区域",
+          prop: "platform",
+          scope: "status",
+          options: [
+            {
+              label: "小程序",
+              value: 1,
+            },
+            {
+              label: "PC网站",
+              value: 2,
+            },
+          ],
+        },
+        {
+          label: "状态",
+          prop: "status",
+          scope: "status",
+          options: [
+            {
+              label: "启用",
+              value: 1,
+            },
+            {
+              label: "关闭",
+              value: 0,
+            },
+          ],
+        },
+      ],
+      //   弹窗数据
+      listData: {},
+      statusPop: -1,
+      dialogVisible: false,
+      //表单验证
+      rules: {
+        name: [
+          { required: true, message: "请输入banner名称", trigger: "blur" },
+        ],
+        locationKey: [
+          { required: true, message: "请输入bannerKey", trigger: "blur" },
+        ],
+        intervalTime: [
+          { required: true, message: "请输入间隔秒数", trigger: "blur" },
+        ],
+        platform: [
+          { required: true, message: "请选择适用区域", trigger: "change" },
+        ],
+        status: [{ required: true, message: "请选择状态", trigger: "change" }],
+      },
+    };
+  },
+  mounted() {
+    this.search();
+  },
+  activated() {
+    this.search();
+  },
+  methods: {
+    edit(row) {
+        this.$refs.diabox.openBoxs(row.locationId)
+    },
+    loadingClose() {
+      this.disabledBtn = false;
+    },
+    search(v) {
+      this.loading = true;
+      var data = {
+        status: "0,1",
+        pageSize: this.pageSize,
+        pageNum: this.currentPage,
+      };
+      this.$api
+        .inquireadvlocationlist(data)
+        .then((res) => {
+          this.tableData = res.rows;
+          this.total = res.total;
+          this.navText.index = res.total;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    init() {
+      this.search();
+    },
+    del(v) {
+      this.$alert(
+        "确定删除此内容？<br />内容删除后将无法恢复，请慎重考虑",
+        "提示",
+        {
+          dangerouslyUseHTMLString: true,
+        }
+      )
+        .then(() => {
+          var data = {
+            locationId: v.locationId,
+            status: -1,
+          };
+          this.$api.editadvlocation(data).then((res) => {
+            this.$message.success("删除成功");
+            this.search();
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    addClick(v, int) {
+      if (v === undefined) {
+        this.statusPop = 1;
+        this.listData = {
+          status: 1,
+        };
+      } else {
+        this.statusPop = int;
+        this.listData = JSON.parse(JSON.stringify(v));
+      }
+      this.$nextTick(() => {
+        this.$refs.listData.clearValidate();
+      });
+      this.dialogVisible = true;
+    },
+    submit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.rulesTableSumbit();
+        } else {
+          return false;
+        }
+      });
+    },
+    rulesTableSumbit() {
+      this.disabledBtn = true;
+      if (this.statusPop === 1) {
+        this.$api
+          .appadvlocation(this.listData)
+          .then((res) => {
+            this.$message.success("新增成功");
+            this.dialogVisible = false;
+            this.search();
+          })
+          .catch(() => {
+            this.disabledBtn = false;
+          });
+      }
+      if (this.statusPop === 0) {
+        this.$api
+          .editadvlocation(this.listData)
+          .then((res) => {
+            this.$message.success("修改成功");
+            this.dialogVisible = false;
+            this.search();
+          })
+          .catch(() => {
+            this.disabledBtn = false;
+          });
+      }
+    },
+    close() {
+      this.dialogVisible = false;
+    },
+    handleSizeChange(v) {
+      this.pageSize = v;
+      this.currentPage = 1;
+      this.search();
+    },
+    handleCurrentChange(v) {
+      this.currentPage = v;
+      this.search();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-button {
+  border-radius: 8px;
+}
+/deep/.el-dialog {
+  border-radius: 8px;
+  .el-dialog__header {
+    padding: 0;
+    .hearders {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 18px 0px 20px;
+      border-bottom: 1px solid #e2e2e2;
+      .leftTitle {
+        font-size: 14px;
+        font-weight: bold;
+        color: #2f4378;
+      }
+      .rightBoxs {
+        display: flex;
+        align-items: center;
+        img {
+          width: 14px;
+          height: 14px;
+          margin-left: 13px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    padding: 0;
+    .dialog-footer {
+      padding: 0px 40px;
+      height: 70px;
+      border-top: 1px solid #e2e2e2;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+.imgBox {
+  width: 100%;
+  // height: 210px;
+  border: 1px solid #e2e2e2;
+  border-radius: 8px;
+  padding: 8px 8px 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .imgLabel {
+    flex: 1;
+    width: 100%;
+    border: 1px dotted #e2e2e2;
+    color: #999;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: 8px;
+    .msPhoto {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      max-width: 100%;
+      max-height: 270px;
+      img {
+        max-width: 100%;
+        max-height: 270px;
+      }
+    }
+    .imgbbx {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      i {
+        font-weight: bold;
+        margin: 14px 0;
+        font-size: 24px;
+      }
+    }
+  }
+  p {
+    margin: 5px 0px;
+  }
+}
+</style>

src/views/Marketing/clientSetup/consultation/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="">
+
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/Marketing/clientSetup/friendlyLink/index.vue

@@ -0,0 +1,370 @@
+<template>
+  <div id="links">
+    <div class="smallBox">
+      <div class="dis_x">
+        <div>友情链接<span>{{listData.length || 0}}条</span></div>
+        <el-button :size="size" @click="add(1)" type="primary">新增</el-button>
+      </div>
+      <el-table :data="listData" style="margin-top: 10px" border max-height="740px">
+        <el-table-column
+          v-for="(item, index) in tableSet"
+          :width="item.width"
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <div v-if="item.scope === 'input'">
+              <el-input-number
+                @blur="changeVal(scope.row)"
+                v-model="scope.row[item.prop]"
+                :controls="false"
+                :min="0"
+                :precision="0"
+                style="width: 80%"
+              ></el-input-number>
+            </div>
+            <div v-else-if="item.scope === 'set'">
+              <el-button type="text" @click="add(0, scope.row, scope.$index)"
+                >修改</el-button
+              >
+              <el-button type="text" @click="del(scope.$index)">删除</el-button>
+            </div>
+            <div v-else-if="item.scope === 'status'">
+              <el-switch
+                v-model="scope.row[item.prop]"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                :active-value="1"
+                :inactive-value="0"
+              >
+              </el-switch>
+              <span style="margin-left:10px;">{{ scope.row[item.prop] == 1 ? "开启" : "关闭" }}</span>
+            </div>
+            <div v-else>{{ scope.row[item.prop] }}</div>
+          </template></el-table-column
+        >
+      </el-table>
+      <div style="text-align: center; margin-top: 20px">
+        <el-button :size="size" type="primary" @click="submit">保 存</el-button>
+      </div>
+    </div>
+    <el-dialog
+      @closed="loadingClose"
+      :visible.sync="dialogVisible"
+      width="680px"
+      :show-close="false"
+      :close-on-click-modal="false"
+    >
+      <div slot="title" class="hearders">
+        <div class="leftTitle">
+          {{ statusPop === 1 ? "添加" : statusPop === 0 ? "修改" : "详情" }}
+        </div>
+        <div class="rightBoxs">
+          <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
+        </div>
+      </div>
+      <div>
+        <el-form
+          label-position="right"
+          label-width="170px"
+          :model="boxData"
+          :rules="rules"
+          ref="boxData"
+        >
+          <el-form-item label="名称" prop="name">
+            <el-input v-model="boxData.name"></el-input>
+          </el-form-item>
+          <el-form-item label="链接地址" prop="url">
+            <el-input v-model="boxData.url"></el-input>
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="boxData.status">
+              <el-radio :label="1">启用</el-radio>
+              <el-radio :label="0">关闭</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="close">取 消</el-button>
+        <el-button @click="submitForm('boxData')" :loading="disabledBtn"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listConfig, updateConfig } from "@/api/system/config";
+export default {
+  data() {
+    return {
+      disabledBtn: false,
+      dialogVisible: false,
+      size: "mini",
+      tableSet: [
+        {
+          label: "排序",
+          prop: "sort",
+          scope: "input",
+          width: "120px",
+        },
+        {
+          label: "名称",
+          prop: "name",
+        },
+        {
+          label: "链接地址",
+          prop: "url",
+        },
+        {
+          label: "状态",
+          prop: "status",
+          scope: "status",
+        },
+        {
+          label: "操作",
+          scope: "set",
+          width: "160px",
+        },
+      ],
+      Nav: [],
+      initData: {},
+      listData: [],
+      statusPop: "",
+      boxData: {},
+      rules: {
+        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
+        url: [{ required: true, message: "请填写链接地址", trigger: "blur" }],
+        status: [
+          {
+            required: true,
+            message: "请选择状态",
+            trigger: "change",
+          },
+        ],
+      },
+      newIndex: "",
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    changeVal(row) {
+      if (!row.sort && row.sort !== 0) {
+        this.$message.warning("检测到你没有赋值或赋值异常，已自动赋值为0");
+        row.sort = 0;
+      } else {
+        for (let i = 0; i < this.listData.length; i++) {
+          if (
+            this.listData[i].name !== row.name &&
+            this.listData[i].sort == row.sort
+          ) {
+            this.$message.warning("检测到重复值，已自动赋值为0");
+            row.sort = 0;
+          }
+        }
+      }
+      this.listData.sort(this.sort);
+    },
+    sort(a, b) {
+      return a.sort - b.sort;
+    },
+    loadingClose() {
+      this.disabledBtn = false;
+    },
+    del(index) {
+      this.listData.splice(index, 1);
+    },
+    add(int, row, index) {
+      this.statusPop = int;
+      this.newIndex = index;
+      if (int === 0) {
+        this.boxData = JSON.parse(JSON.stringify(row));
+      }
+      if (int === 1) {
+        var indexNum = 0;
+        this.listData.forEach((item) => {
+          if (item.sort >= indexNum) {
+            indexNum = item.sort + 1;
+          }
+        });
+        this.boxData = {};
+        this.boxData.sort = indexNum;
+      }
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs.boxData.clearValidate();
+      });
+    },
+    close() {
+      this.dialogVisible = false;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.statusPop === 1) {
+            this.listData.push(this.boxData);
+          } else {
+            this.listData.splice(this.newIndex, 1, this.boxData);
+          }
+          this.dialogVisible = false;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    init() {
+      listConfig({ configKey: "home.links" }).then((res) => {
+        if (res.rows.length) {
+          this.initData = res.rows[0];
+          this.listData = JSON.parse(res.rows[0].configValue);
+        }
+      });
+    },
+    submit() {
+      let data = JSON.parse(JSON.stringify(this.listData));
+      let copySubmitData = JSON.parse(JSON.stringify(this.initData));
+      copySubmitData.configValue = JSON.stringify(data);
+      updateConfig(copySubmitData).then((res) => {
+        this.$message.success("保存成功");
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.dis_x{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+.smallBox {
+  // width: 900px;
+}
+
+/deep/.el-button {
+  border-radius: 8px;
+}
+/deep/.el-dialog {
+  border-radius: 8px;
+  .el-dialog__header {
+    padding: 0;
+    .hearders {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0px 18px 0px 20px;
+      border-bottom: 1px solid #e2e2e2;
+      .leftTitle {
+        font-size: 14px;
+        font-weight: bold;
+        color: #2f4378;
+      }
+      .rightBoxs {
+        display: flex;
+        align-items: center;
+        img {
+          width: 14px;
+          height: 14px;
+          margin-left: 13px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .el-dialog__footer {
+    padding: 0;
+    .dialog-footer {
+      padding: 0px 40px;
+      height: 70px;
+      border-top: 1px solid #e2e2e2;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+.imgBox {
+  width: 100%;
+  // height: 210px;
+  border: 1px solid #e2e2e2;
+  border-radius: 8px;
+  padding: 8px 8px 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .imgLabel {
+    flex: 1;
+    width: 100%;
+    border: 1px dotted #e2e2e2;
+    color: #999;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: 8px;
+    .msPhoto {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      max-width: 100%;
+      max-height: 270px;
+      img {
+        max-width: 100%;
+        max-height: 270px;
+      }
+    }
+    .imgbbx {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      i {
+        font-weight: bold;
+        margin: 14px 0;
+        font-size: 24px;
+      }
+    }
+  }
+  p {
+    margin: 5px 0px;
+  }
+}
+.dis_fs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 337.5px;
+  height: 144px;
+  border: 1px solid #999;
+  .imgBoxs {
+    width: 100%;
+    height: 100%;
+  }
+}
+.styPsty {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  .btns {
+    border: 1px solid #999;
+    font-size: 12px;
+    height: 28px;
+    line-height: 28px;
+    padding: 0px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 10px;
+    flex-shrink: 0;
+  }
+}
+</style>

src/views/Marketing/clientSetup/pageSet/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="导航菜单" name="1">
+        <page1 v-if="activeName == '1'"/>
+      </el-tab-pane>
+      <el-tab-pane label="页头" name="2">
+        <page2 v-if="activeName == '2'"/></el-tab-pane>
+      <el-tab-pane label="页尾" name="3"></el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import page1 from "./page1.vue";
+import page2 from "./page2.vue";
+export default {
+  components: { page1,page2 },
+  data() {
+    return {
+      activeName: "2",
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/Marketing/clientSetup/pageSet/page1.vue

@@ -0,0 +1,124 @@
+<template>
+  <div id="">
+    <el-table :data="tableData" style="margin-top: 10px" border>
+      <el-table-column
+        v-for="(item, index) in tableSet"
+        :width="item.width"
+        :key="index"
+        :prop="item.prop"
+        :label="item.label"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <div v-if="item.scope === 'input'">
+            <el-input-number
+              @blur="changeVal(scope.row)"
+              v-model="scope.row[item.prop]"
+              :controls="false"
+              :min="0"
+              :precision="0"
+              style="width: 50%"
+            ></el-input-number>
+          </div>
+          <div v-else-if="item.scope === 'status'" class="disflex_sty">
+            <el-switch
+              :size="size"
+              v-if="scope.row['name'] !== '首页'"
+              :active-value="1"
+              :inactive-value="0"
+              v-model="scope.row[item.prop]"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+            >
+            </el-switch>
+            <span style="margin-left: 14px">
+              {{
+                scope.row[item.prop] === 1
+                  ? "开启"
+                  : scope.row[item.prop] === 0
+                  ? "关闭"
+                  : "未知"
+              }}
+            </span>
+          </div>
+          <div v-else>{{ scope.row[item.prop] }}</div>
+        </template></el-table-column
+      >
+    </el-table>
+    <div style="text-align:center;margin-top:20px;">
+        <el-button type="primary" @click="submit">保存</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listConfig, updateConfig } from "@/api/system/config";
+export default {
+  data() {
+    return {
+      initData: {
+        configValue:{}
+      },
+      tableData: [],
+      tableSet: [
+        {
+          label: "排序",
+          prop: "sort",
+          scope: "input",
+        },
+        {
+          label: "导航菜单名称",
+          prop: "name",
+        },
+        {
+          label: "状态",
+          prop: "status",
+          scope: "status",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      listConfig({ configKey: "home.header" }).then((res) => {
+        if (res.rows.length) {
+          this.initData = res.rows[0];
+          let A = JSON.parse(res.rows[0].configValue);
+          this.tableData = A.Nav || [];
+        }
+      });
+    },
+    changeVal(row) {
+      if (!row.sort && row.sort !== 0) {
+        this.$message.warning("检测到你没有赋值或赋值异常，已自动赋值为0");
+        row.sort = 0;
+      } else {
+        for (let i = 0; i < this.tableData.length; i++) {
+          if (
+            this.tableData[i].name !== row.name &&
+            this.tableData[i].sort == row.sort
+          ) {
+            this.$message.warning("检测到重复值，已自动赋值为0");
+            row.sort = 0;
+          }
+        }
+      }
+      this.tableData.sort(this.sort);
+    },
+    submit() {
+      let copySubmitData = JSON.parse(JSON.stringify(this.initData));
+      copySubmitData.configValue = JSON.parse(copySubmitData.configValue)
+      copySubmitData.configValue.Nav = this.tableData
+      copySubmitData.configValue = JSON.stringify(copySubmitData.configValue)
+      updateConfig(copySubmitData).then((res) => {
+        this.$message.success("保存成功");
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/Marketing/clientSetup/pageSet/page2.vue

@@ -0,0 +1,361 @@
+<template>
+  <div id="">
+    <ul style="margin-left: 20px" v-if="false">
+      <li class="liSty">
+        <span>模板启用</span>
+        <div>
+          <el-radio-group v-model="listData.templateStatus">
+            <el-radio :label="1">模板一</el-radio>
+            <el-radio :label="2">模板二</el-radio>
+          </el-radio-group>
+        </div>
+      </li>
+      <li class="liSty">
+        <span style="align-self: flex-start">LOGO图片</span>
+        <div>
+          <div
+            style="
+              width: 216px;
+              height: 46px;
+              border: 1px dashed #999;
+              border-radius: 28px;
+              line-height: 46px;
+              text-align: center;
+            "
+            v-if="!listData.companyLogo"
+          >
+            <label for="uplose">
+              <i class="el-icon-circle-plus-outline iconStsz"></i
+            ></label>
+            <input
+              ref="file"
+              type="file"
+              style="display: none"
+              id="uplose"
+              @change="getImgFile"
+            />
+          </div>
+          <div v-else class="flex_sty">
+            <el-image
+              style="width: 216px; height: 46px"
+              :src="$methodsTools.splitImgHost(listData.companyLogo)"
+              :preview-src-list="[
+                $methodsTools.splitImgHost(listData.companyLogo),
+              ]"
+            >
+            </el-image>
+            <el-button
+              @click="listData.companyLogo = ''"
+              style="margin-left: 16px"
+              type="danger"
+              icon="el-icon-delete"
+              circle
+              size="mini"
+            ></el-button>
+          </div>
+          <p style="font-size: 12px; color: #999">
+            注：建议上传logo图片是透明底色的png格式，尺寸为216px * 46px
+          </p>
+        </div>
+      </li>
+      <li class="liSty">
+        <span style="align-self: flex-start">LOGO图片-浅色</span>
+        <div>
+          <div
+            style="
+              width: 216px;
+              height: 46px;
+              border: 1px dashed #999;
+              border-radius: 28px;
+              line-height: 46px;
+              text-align: center;
+            "
+            v-if="!listData.undertone"
+          >
+            <label for="uplose1">
+              <i class="el-icon-circle-plus-outline iconStsz"></i
+            ></label>
+            <input
+              ref="file1"
+              type="file"
+              style="display: none"
+              id="uplose1"
+              @change="getImgFile1"
+            />
+          </div>
+          <div v-else class="flex_sty" style="background-color: #eee">
+            <el-image
+              style="width: 216px; height: 46px"
+              :src="$methodsTools.splitImgHost(listData.undertone)"
+              :preview-src-list="[
+                $methodsTools.splitImgHost(listData.undertone),
+              ]"
+            >
+            </el-image>
+            <el-button
+              @click="listData.undertone = ''"
+              style="margin-left: 16px"
+              type="danger"
+              icon="el-icon-delete"
+              circle
+              size="mini"
+            ></el-button>
+          </div>
+          <p style="font-size: 12px; color: #999">
+            注：建议上传logo图片是透明底色的png格式，尺寸为216px * 46px
+          </p>
+        </div>
+      </li>
+    </ul>
+    <div>
+      <h4>页头设置</h4>
+      <el-form
+        :model="listData"
+        :rules="rules"
+        ref="listData"
+        label-width="120px"
+        class="demo-ruleForm"
+      >
+        <h5>电脑端</h5>
+        <el-form-item label="模板启用：" prop="templateStatus">
+          <el-radio-group v-model="listData.templateStatus">
+            <el-radio :label="1">模板一</el-radio>
+            <el-radio :label="2">模板二</el-radio>
+          </el-radio-group></el-form-item
+        ><el-form-item label="logo(常规)：" prop="routinelogo">
+          <div class="photoBox">
+            <el-button
+              type="text"
+              v-if="!listData.routinelogo"
+              @click="upload('routinelogo')"
+              >+点击上传</el-button
+            >
+            <el-image
+              v-else
+              style="width: 100%; height: 100%"
+              :src="$methodsTools.splitImgHost(listData.routinelogo)"
+              :preview-src-list="[
+                $methodsTools.splitImgHost(listData.routinelogo),
+              ]"
+            >
+            </el-image>
+            <i
+              v-if="listData.routinelogo"
+              class="el-icon-error err_icon"
+              @click="clear('routinelogo')"
+            ></i>
+          </div>
+          <p class="photo_text">
+            注：建议上传logo图片是透明底色的png格式，尺寸为216px * 46px
+          </p> </el-form-item
+        ><el-form-item label="logo(白色)：" prop="whitelogo">
+          <div class="photoBox">
+            <el-button
+              type="text"
+              v-if="!listData.whitelogo"
+              @click="upload('whitelogo')"
+              >+点击上传</el-button
+            >
+            <el-image
+              v-else
+              style="width: 100%; height: 100%"
+              :src="$methodsTools.splitImgHost(listData.whitelogo)"
+              :preview-src-list="[
+                $methodsTools.splitImgHost(listData.whitelogo),
+              ]"
+            >
+            </el-image>
+            <i
+              v-if="listData.whitelogo"
+              class="el-icon-error err_icon"
+              @click="clear('whitelogo')"
+            ></i>
+          </div>
+          <p class="photo_text">
+            注：建议上传logo图片是透明底色的png格式，尺寸为216px * 46px
+          </p>
+        </el-form-item>
+        <h5>移动端</h5>
+        <el-form-item label="logo(H5)：" prop="h5logo">
+          <div class="photoBox">
+            <el-button
+              type="text"
+              v-if="!listData.h5logo"
+              @click="upload('h5logo')"
+              >+点击上传</el-button
+            >
+            <el-image
+              v-else
+              style="width: 100%; height: 100%"
+              :src="$methodsTools.splitImgHost(listData.h5logo)"
+              :preview-src-list="[$methodsTools.splitImgHost(listData.h5logo)]"
+            >
+            </el-image>
+            <i
+              v-if="listData.h5logo"
+              class="el-icon-error err_icon"
+              @click="clear('h5logo')"
+            ></i>
+          </div>
+          <p class="photo_text">
+            注：建议上传logo图片是透明底色的png格式，尺寸为216px * 46px
+          </p> </el-form-item
+        ><el-form-item label="logo(小程序)：" prop="wxlogo">
+          <div class="photoBox">
+            <el-button
+              type="text"
+              v-if="!listData.wxlogo"
+              @click="upload('wxlogo')"
+              >+点击上传</el-button
+            >
+            <el-image
+              v-else
+              style="width: 100%; height: 100%"
+              :src="$methodsTools.splitImgHost(listData.wxlogo)"
+              :preview-src-list="[$methodsTools.splitImgHost(listData.wxlogo)]"
+            >
+            </el-image>
+            <i
+              v-if="listData.wxlogo"
+              class="el-icon-error err_icon"
+              @click="clear('wxlogo')"
+            ></i>
+          </div>
+          <p class="photo_text">
+            注：建议上传logo图片是透明底色的png格式，尺寸为216px * 46px
+          </p>
+        </el-form-item></el-form
+      >
+      <input
+        ref="file"
+        type="file"
+        style="display: none"
+        @change="getImgFile"
+      />
+    </div>
+    <div style="text-align: center; margin-top: 20px">
+      <el-button type="primary" @click="submit">保存</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listConfig, updateConfig } from "@/api/system/config";
+export default {
+  data() {
+    return {
+      initData: {
+        configValue: {},
+      },
+      listData: {},
+      rules: {
+        templateStatus: [
+          { required: true, message: "请选择模板启用", trigger: "change" },
+        ],
+        routinelogo: [
+          { required: true, message: "请上传图片", trigger: "change" },
+        ],
+        whitelogo: [
+          { required: true, message: "请上传图片", trigger: "change" },
+        ],
+        h5logo: [{ required: true, message: "请上传图片", trigger: "change" }],
+        wxlogo: [{ required: true, message: "请上传图片", trigger: "change" }],
+      },
+      uploadProp: "",
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      listConfig({ configKey: "home.header" }).then((res) => {
+        if (res.rows.length) {
+          this.initData = res.rows[0];
+          this.listData = JSON.parse(res.rows[0].configValue);
+        }
+      });
+    },
+    upload(prop) {
+      this.uploadProp = prop;
+      this.$refs.file.click();
+    },
+    getImgFile(e) {
+      var file = e.target.files[0];
+      if (file === undefined) {
+        e.target.value = "";
+        return;
+      }
+      if (file.size > 0.3 * 1024 * 1024) {
+        this.$message.error("图片不得大于300kb");
+        e.target.value = "";
+        return;
+      }
+      var type = file.name.toLowerCase().split(".").splice(-1);
+      if (type[0] != "jpg" && type[0] != "png" && type[0] != "jpeg") {
+        this.$message.error("上传格式需为：.jpg/.png/.jpeg");
+        e.target.value = "";
+        return;
+      }
+      this.$upload
+        .upload(file, 0)
+        .then((res) => {
+          this.$set(this.listData, this.uploadProp, res);
+        })
+        .finally(() => {
+          e.target.value = "";
+          this.$refs.listData.validateField(this.uploadProp);
+        });
+    },
+    clear(prop) {
+      this.listData[prop] = "";
+      this.$refs.listData.validateField(prop);
+    },
+    submit() {
+      this.$refs["listData"].validate((valid) => {
+        if (valid) {
+          alert("submit!",this.listData);
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+      // updateConfig().then((res) => {
+      //   this.$message.success("保存成功");
+      // });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.photoBox {
+  width: 216px;
+  height: 46px;
+  text-align: center;
+  line-height: 46px;
+  border: 1px dashed #bdbdbd;
+  position: relative;
+  & > .err_icon {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    color: red;
+    font-size: 16px;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+h5 {
+  font-weight: bold;
+  padding-left: 30px;
+  margin: 10px 0px 16px;
+  font-size: 14px;
+}
+.photo_text {
+  font-size: 12px;
+  color: #aaa;
+  height: 20px;
+  line-height: 20px;
+}
+</style>