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

<template>
  <div id="header">
    <div>
      <h5>导航效果预览</h5>
      <div class="topSty_home">
        <el-row :gutter="20">
          <el-col :span="6" style="display: flex; flex-direction: row-reverse">
            <div v-if="!listData.companyLogo" class="noLogoImg">logo图片</div>
            <img
              v-else
              style="width: 216px; height: 46px"
              :src="$methodsTools.splitImgHost(listData.companyLogo)"
              alt="加载失败"
            />
          </el-col>
          <el-col
            :span="12"
            style="display: flex; flex-direction: column; align-items: center"
          >
            <div>
              <input class="dzStyInput" type="text" />
              <div class="btnSty">搜索</div>
            </div>
            <div>
              <ul class="ul_styLI">
                <li
                  v-for="(item, index) in compyList(listData.Nav)"
                  :key="index"
                >
                  {{ item.name }}
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="6" class="flex_sty" style="font-size: 14px">
            <img
              style="width: 66px; height: 54px"
              src="@/assets/images/telPhoto.png"
              alt=""
            />
            <div style="flex: 1">
              <h4 style="margin: 6px 0px">{{ listData.serviceTel.tel }}</h4>
              <div>服务时间：{{ listData.serviceTel.time }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div>
      <h5>企业标识</h5>
      <ul style="margin-left: 20px">
        <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>
        <li class="liSty">
          <span>公司名称</span>
          <div>
            <el-input v-model="listData.companyName" :size="size"></el-input>
          </div>
        </li>
        <li class="liSty">
          <span>客服电话是否显示</span>
          <div>
            <el-radio-group v-model="listData.serviceTel.status">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
        </li>
        <li class="liSty">
          <span>电话号码</span>
          <div>
            <el-input v-model="listData.serviceTel.tel" :size="size"></el-input>
          </div>
        </li>
        <li class="liSty">
          <span>客服时间</span>
          <div>
            <el-input
              v-model="listData.serviceTel.time"
              :size="size"
            ></el-input>
          </div>
        </li>
      </ul>
    </div>
    <div>
      <h5>导航栏菜单设置</h5>
      <el-table
        :data="listData.Nav"
        style="width: 800px; 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>
    <div style="text-align: center; margin-top: 20px">
      <el-button :size="size" type="primary" @click="submit">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { listConfig, updateConfig } from "@/api/system/config";
export default {
  data() {
    return {
      size: "mini",
      listData: {
        serviceTel: {},
        templateStatus: 1,
      },
      tableSet: [
        {
          label: "排序",
          prop: "sort",
          scope: "input",
        },
        {
          label: "导航菜单名称",
          prop: "name",
        },
        {
          label: "状态",
          prop: "status",
          scope: "status",
        },
      ],
      initData: {},
    };
  },
  computed: {
    compyList: function () {
      return function (arr) {
        let ary = [];
        if (arr) {
          ary = arr.filter((item) => {
            return item.status === 1;
          });
        }
        return ary;
      };
    },
  },
  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.Nav.length; i++) {
          if (
            this.listData.Nav[i].name !== row.name &&
            this.listData.Nav[i].sort == row.sort
          ) {
            this.$message.warning("检测到重复值，已自动赋值为0");
            row.sort = 0;
          }
        }
      }
      this.listData.Nav.sort(this.sort);
    },
    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("保存成功");
      });
    },
    sort(a, b) {
      return a.sort - b.sort;
    },
    init() {
      listConfig({ configKey: "home.header" }).then((res) => {
        if (res.rows.length) {
          this.initData = res.rows[0];
          let A = JSON.parse(res.rows[0].configValue);
          A.undertone = A.undertone || "";
          A.templateStatus = A.templateStatus || 1;
          this.listData = A;
          if (!this.listData.Nav.some((i) => i.name === "讲义资料")) {
            this.listData.Nav.push({
              name: "讲义资料",
              sort: 6,
              status: 0,
            });
          }
          if (!this.listData.Nav.some((i) => i.name === "积分商城")) {
            this.listData.Nav.push({
              name: "积分商城",
              sort: 7,
              status: 0,
            });
          }
        }
      });
    },
    getImgFile() {
      var self = this;
      var file = self.$refs.file.files[0];
      if (file === undefined) {
        self.$set(self.listData, "companyLogo", "");
        return;
      }
      if (file.size > 0.3 * 1024 * 1024) {
        self.$message.error("图片不得大于300kb");
        return;
      }
      var type = self.$refs.file.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "gif"
      ) {
        self.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
        self.$refs.file.value = "";
        return;
      }
      this.$upload.upload(file, 0).then((res) => {
        self.listData.companyLogo = res;
      });
    },
    getImgFile1() {
      var self = this;
      var file = self.$refs.file1.files[0];
      if (file === undefined) {
        self.$set(self.listData, "undertone", "");
        return;
      }
      if (file.size > 0.3 * 1024 * 1024) {
        self.$message.error("图片不得大于300kb");
        return;
      }
      var type = self.$refs.file1.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "gif"
      ) {
        self.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
        self.$refs.file1.value = "";
        return;
      }
      this.$upload.upload(file, 0).then((res) => {
        self.listData.undertone = res;
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-input--mini .el-input__inner {
  max-width: 300px;
}
h5 {
  font-weight: bold;
}
.liSty {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 20px;
  span {
    width: 140px;
    text-align: right;
    margin-right: 10px;
  }
}
.disflex_sty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex_sty {
  display: flex;
  align-items: center;
}
.iconStsz {
  font-size: 20px;
  color: #67c23a;
  cursor: pointer;
}
.topSty_home {
  border-radius: 14px;
  padding: 10px;
  border: 1px solid #666;
}
.dzStyInput {
  width: 400px;
  height: 34px;
  outline: none;
  padding-left: 10px;
  font-size: 14px;
  border: 1px solid #666;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-color: rgb(65, 140, 251);
}
.btnSty {
  display: inline-block;
  height: 34px;
  padding: 0px 6px;
  border: 1px solid #666;
  line-height: 32px;
  border-left: none;
  background-color: rgb(65, 140, 251);
  color: #fff;
  font-size: 14px;
  border-color: rgb(65, 140, 251);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.noLogoImg {
  border: 1px solid #666;
  width: 216px;
  height: 46px;
  text-align: center;
  font-size: 14px;
  line-height: 46px;
}
.ul_styLI {
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 14px;
  user-select: none;
}
</style>