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

<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>