zc_saas_admin/src/views/2Cport/pageSettings/H5_small.vue

<template>
  <div id="">
    <el-form
      :model="moveInfo"
      status-icon
      :rules="rulesMove"
      ref="moveInfo"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="H5-logo" prop="h5Logo">
        <div class="imageStyBox" v-if="!moveInfo.h5Logo">
          <label for="uplose1"><i class="btn_upload">上传图片</i></label>
          <input
            type="file"
            style="display: none"
            id="uplose1"
            @change="getImgFile($event, 'h5Logo')"
          />
        </div>
        <div v-else>
          <el-image
            class="imageStyBoxShow"
            :src="$methodsTools.splitImgHost(moveInfo.h5Logo)"
            :preview-src-list="[$methodsTools.splitImgHost(moveInfo.h5Logo)]"
          >
          </el-image>
          <el-button
            style="margin-left: 20px"
            type="danger"
            size="mini"
            @click="moveInfo.h5Logo = ''"
            >删除</el-button
          >
        </div>
      </el-form-item>
      <el-form-item label="Small-logo" prop="smallLogo">
        <div class="imageStyBox" v-if="!moveInfo.smallLogo">
          <label for="uplose2"><i class="btn_upload">上传图片</i></label>
          <input
            type="file"
            style="display: none"
            id="uplose2"
            @change="getImgFile($event, 'smallLogo')"
          />
        </div>
        <div v-else>
          <el-image
            class="imageStyBoxShow"
            :src="$methodsTools.splitImgHost(moveInfo.smallLogo)"
            :preview-src-list="[$methodsTools.splitImgHost(moveInfo.smallLogo)]"
          >
          </el-image>
          <el-button
            style="margin-left: 20px"
            type="danger"
            size="mini"
            @click="moveInfo.smallLogo = ''"
            >删除</el-button
          >
        </div>
      </el-form-item>
      <el-form-item label="H5域名" prop="hostH5">
        <el-input v-model="moveInfo.hostH5" disabled></el-input>
      </el-form-item>
      <el-form-item label="Live域名" prop="hostLive">
        <el-input v-model="moveInfo.hostLive" disabled></el-input>
      </el-form-item>
      <el-form-item label="Pc域名" prop="hostPc">
        <el-input v-model="moveInfo.hostPc" disabled></el-input>
      </el-form-item>
      <el-form-item label="PC小程序" prop="smallQrCodeShow">
        <el-switch
          v-model="moveInfo.smallQrCodeShow"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="PC移动二维码" prop="mobileImage">
        <div class="imageStyBox" v-if="!moveInfo.mobileImage">
          <label for="uplose3"><i class="btn_upload">上传图片</i></label>
          <input
            type="file"
            style="display: none"
            id="uplose3"
            @change="getImgFile($event, 'mobileImage')"
          />
        </div>
        <div v-else>
          <el-image
            class="imageStyBoxShow"
            :src="$methodsTools.splitImgHost(moveInfo.mobileImage)"
            :preview-src-list="[
              $methodsTools.splitImgHost(moveInfo.mobileImage),
            ]"
          >
          </el-image>
          <el-button
            style="margin-left: 20px"
            type="danger"
            size="mini"
            @click="moveInfo.mobileImage = ''"
            >删除</el-button
          >
        </div>
      </el-form-item>
      <el-form-item label="公众号二维码" prop="gzhImage">
        <div class="imageStyBox" v-if="!moveInfo.gzhImage">
          <label for="uplose4"><i class="btn_upload">上传图片</i></label>
          <input
            type="file"
            style="display: none"
            id="uplose4"
            @change="getImgFile($event, 'gzhImage')"
          />
        </div>
        <div v-else>
          <el-image
            class="imageStyBoxShow"
            :src="$methodsTools.splitImgHost(moveInfo.gzhImage)"
            :preview-src-list="[
              $methodsTools.splitImgHost(moveInfo.gzhImage),
            ]"
          >
          </el-image>
          <el-button
            style="margin-left: 20px"
            type="danger"
            size="mini"
            @click="moveInfo.gzhImage = ''"
            >删除</el-button
          >
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          @click="submitFormRight('moveInfo')"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { listConfig, updateConfig } from "@/api/system/config";
export default {
  data() {
    return {
      moveDuan: {},
      moveInfo: {},
      rulesMove: {
        h5Logo: [
          {
            required: true,
            message: "请上传h5Logo",
            trigger: ["blur", "change"],
          },
        ],
        smallLogo: [
          {
            required: true,
            message: "请上传smallLogo",
            trigger: ["blur", "change"],
          },
        ],
        mobileImage: [
          {
            required: false,
            message: "请上传PC移动二维码",
            trigger: ["blur", "change"],
          },
        ],
        gzhImage: [
          {
            required: false,
            message: "请上传公众号二维码",
            trigger: ["blur", "change"],
          },
        ],
        hostH5: [{ required: false, message: "请输入hostH5", trigger: "blur" }],
        hostLive: [
          { required: false, message: "请输入hostLive", trigger: "blur" },
        ],
        hostPc: [{ required: false, message: "请输入hostPc", trigger: "blur" }],
      },
    };
  },
  created() {
    listConfig({ configKey: "home.mobile" }).then((res) => {
      if (res.rows.length) {
        this.moveDuan = res.rows[0];
        this.moveInfo = JSON.parse(res.rows[0].configValue);
        console.log(this.moveInfo);
      }
    });
  },
  methods: {
    submitFormRight(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.moveInfo.h5Logo || !this.moveInfo.smallLogo) {
            this.$message.error("请上传Logo图片");
            return;
          }
          let data = JSON.parse(JSON.stringify(this.moveInfo));
          let copySubmitData = JSON.parse(JSON.stringify(this.moveDuan));
          copySubmitData.configValue = JSON.stringify(data);
          updateConfig(copySubmitData).then((res) => {
            this.$message.success("保存成功");
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    /**
     * 上传图片
     */
    getImgFile(e, name) {
      var self = this;
      var file = e.target.files[0];
      if (file === undefined) {
        return;
      }
      if (file.size > 0.3 * 1024 * 1024) {
        self.$message.error("图片不得大于300kb");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (type[0] != "jpg" && type[0] != "png" && type[0] != "jpeg") {
        self.$message.error("上传格式需为：.jpg/.png/.jpeg");
        e.target.value = "";
        return;
      }
      this.$upload
        .upload(file, 0)
        .then((res) => {
          self.$set(self.moveInfo, name, res);
        })
        .finally(() => {
          e.target.value = "";
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.imageStyBoxShow {
  max-width: 200px;
}
.btn_upload {
  font-style: normal;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-color: #dcdfe6;
  color: #606266;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 400;
  user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
</style>