index.vue

<template>
  <div class="custom-page height100">
    <el-card class="height100">
      <div class="page-content">
        <div class="page-tip">
          <span class="tip-title">页面说明：</span>
          <span>可更换app目录界面及运行界面的背景图，可新增背景图，可预览背景图</span>
        </div>
        <div class="top-content">
          <div class="content-title">
            <div class="title">app目录界面设置</div>
            <div class="btn-group">
              <el-upload
                action="http://111.203.232.175:8088/mall/file/image/upload"
                :on-success="uploadPageImg"
                :before-upload="handleBeforeUpload"
                :headers ="headers"
                :file-list="dirList"
              >
                <el-button type="default">上传背景图</el-button>
              </el-upload>
            </div>
          </div>
          <div class="swiper-content top">
            <swiper class="swiper" data-title="page" :options="swiperOption">
              <swiper-slide v-for="(item, index) in pageList" :key="index">
                <div class="swiper-item">
                  <el-radio v-model="radioPage" :label="item.id"></el-radio>
                  <img :src="item.appDirPic" alt />
                </div>
              </swiper-slide>
              <div class="swiper-button-prev" slot="button-prev">
                <i class="iconfont icon-arrow-left"></i>
              </div>
              <div class="swiper-button-next" slot="button-next">
                <i class="iconfont icon-arrow-right"></i>
              </div>
            </swiper>
          </div>
        </div>
        <div class="down-content">
          <div class="content-title">
            <div class="title">app运行画面设置</div>
            <div class="btn-group">
              <el-upload
                action="http://111.203.232.175:8088/mall/file/image/upload"
                :on-success="uploadRunImg"
                :before-upload="handleBeforeUpload"
                :headers ="headers"
                :file-list="fileRunList"
              >
                <el-button type="default">上传背景图</el-button>
              </el-upload>
            </div>
          </div>
          <div class="swiper-content bottom">
            <swiper class="swiper" :options="swiperOption">
              <swiper-slide v-for="(item, index) in runList" :key="index">
                <div class="swiper-item">
                  <el-radio v-model="radioRun" :label="item.id"></el-radio>
                  <img :src="item.appRunPic" alt />
                </div>
              </swiper-slide>
              <div class="swiper-button-prev" slot="button-prev">
                <i class="iconfont icon-arrow-left"></i>
              </div>
              <div class="swiper-button-next" slot="button-next">
                <i class="iconfont icon-arrow-right"></i>
              </div>
            </swiper>
          </div>
        </div>
      </div>
      <div class="btn-group footer-btn">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm('editform')"
          >确定</el-button
        >
      </div>
    </el-card>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
var vm = {};
export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      headers:{Authorization: localStorage.getItem('backToken')},
      radioPage: "", // 选中项
      radioRun: "",
      dirList: [], // 上传列表
      fileRunList: [],
      swiperOption: {
        slideToClickedSlide: true, //点击后居中展示
        slidesPerView: 5,
        spaceBetween: 30,
        centeredSlides: true,
        observer: true,
        observerParents: true,
        // centerInsufficientSlides: true, //不够5个时居中显示
        // loop: true, // 不能同上一个属性同用
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        on: {
          click: function () {
            
            if (this.$el[0].parentNode.className.indexOf("top") > 0) {
              vm.radioPage = this.realIndex;
            }
            if (this.$el[0].parentNode.className.indexOf("bottom") > 0) {
              vm.radioRun = this.realIndex;
            }
          },
        },
      },
      pageList: [], // 数据列表
      runList: [],
    };
  },
  created() {},
  mounted() {
    this.getDirPicList();
    this.getAppRunList();
  },
  methods: {
    // 查询目录列表
    getDirPicList() {
      let _this = this;
      _this
        .$https({
          url: "tAppDirPic/getList",
          method: "get",
          authType: this.backToken,
        })
        .then((res) => {
          if (res.data.resultCode === "200") {
            _this.pageList = res.data.data;
            _this.pageList.forEach((item) => {
              if (item.isCurrent) {
                this.radioPage = item.id;
              }
            });
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 查询运行列表
    getAppRunList() {
      let _this = this;
      _this
        .$https({
          url: "tAppRunPic/getList",
          method: "get",
          authType: this.backToken,
        })
        .then((res) => {
          if (res.data.resultCode === "200") {
            _this.runList = res.data.data;
            _this.runList.forEach((item) => {
              if (item.isCurrent) {
                this.radioRun = item.id;
              }
            });
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 上传文件格式限制
    handleBeforeUpload(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$message.error("只能上传jpeg、jpg、png格式的文件");
        return false;
      }
      return true;
    },
    // 新增目录图片
    uploadPageImg(res, file) {
      if (res.resultCode === "200") {
        this.saveItem(
          { appDirPic: res.data.url, isCurrent: 1 },
          "tAppDirPic/save"
        );
      } else {
        this.$message.error(res.message);
      }
    },
    // 新增运行图片
    uploadRunImg(res, file) {
      if (res.resultCode === "200") {
        this.saveItem(
          { appRunPic: res.data.url, isCurrent: 1 },
          "tAppRunPic/save"
        );
      } else {
        this.$message.error(res.message);
      }
    },
    // 新增接口
    saveItem(param, url) {
      let _this = this;
      _this
        .$https(
          {
            url: url,
            method: "post",
            authType: this.backToken,
          },
          _this.$qs.stringify(param)
        )
        .then(
          (res) => {
            if (res.data.resultCode === "200") {
              _this.$message.success(res.data.message);
              this.getDirPicList();
              this.getAppRunList();
            } else {
              _this.$message.error(res.data.message);
            }
          },
          (error) => {
            console.log(error);
          }
        );
    },
    // 修改当前项
    submitForm() {
      if(vm.radioPage !== undefined){
        this.updateCurrent(this.pageList[vm.radioPage].id, "tAppDirPic/update");
      }
      if(vm.radioRun!== undefined){
        this.updateCurrent(this.runList[vm.radioRun].id, "tAppRunPic/update");
      }
    },
    updateCurrent(id, url) {
      let vm = this;
      let param = {
        id: id,
        isCurrent: 1,
      };
      vm.$https(
        {
          url: url,
          method: "put",
          authType: this.backToken,
        },
        vm.$qs.stringify(param)
      )
        .then((res) => {
          if (res.data.resultCode === "200") {
            this.$message.success("操作成功");
            this.getDirPicList();
            this.getAppRunList();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 取消
    close() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
.custom-page {
  position: relative;
  .page-title {
    font-size: 20px;
    color: #333333;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
  }
  .page-tip {
    background: #f7f5f2;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 14px;
    color: #333333;
    .tip-title {
      font-weight: 700;
      margin-right: 5px;
    }
  }
  .page-content {
    width: 800px;
    margin: 0 auto;
    .content-title {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      .title {
        position: relative;
        font-size: 18px;
        color: #333333;
        &::before {
          content: "";
          position: absolute;
          top: 6px;
          left: -20px;
          width: 4px;
          height: 18px;
          background: #000;
        }
      }
      .el-button {
        padding: 0 20px;
      }
    }
    .swiper-content {
      .swiper-item {
        position: relative;
        width: 100%;
        height: 128px;
        background-color: #99a9bf;
        border-radius: 10px;

        /deep/.el-radio {
          position: absolute;
          right: 12px;
          top: 12px;
          .el-radio__label {
            display: none;
          }
          .el-radio__inner {
            width: 24px;
            height: 24px;
          }
          .el-radio__input.is-checked .el-radio__inner {
            border-color: #ac9374;
            background: #ac9374;
          }
          .el-radio__inner:hover {
            border-color: #ac9374;
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .swiper-button-next {
        right: 0;
      }
      .swiper-button-prev {
        left: 0;
      }
      .swiper-button-prev,
      .swiper-button-next {
        background: #ac9374;
        width: 36px;
        height: 36px;
        border-radius: 50%;
      }
      .swiper-button-next:after,
      .swiper-button-prev:after {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        transition: 300ms;
        transform: scale(0.8);
      }
      .swiper-slide-active,
      .swiper-slide-duplicate-active {
        transform: scale(1);
      }
    }
  }
  /deep/.el-upload-list {
    display: none;
  }
  .footer-btn {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #eee;
    .el-button {
      width: 160px;
    }
  }
}
</style>