index.vue

<template>
  <div class="custom-page height100">
    <el-card class="height100">
      <!-- <div class="page-title">app界面自定义</div> -->
      <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://192.168.110.67/mall/file/image/upload"
                :on-success="uploadPageImg"
                :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://192.168.110.67/mall/file/image/upload"
                :on-success="uploadRunImg"
                :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.url" 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 size="mini" @click="close">取 消</el-button>
        <el-button size="mini" 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 {
      radioPage: '',
      radioRun: '',
      dirList:[],
      fileRunList:[],
      swiperOption: {
        slideToClickedSlide: true, //点击后居中展示
        slidesPerView: 5,
        spaceBetween: 30,
        centeredSlides: true,
        observer: true, // 动态检查器,自动初始化swiper,默认为false
        observerParents: true,
        // centerInsufficientSlides: true, //不够5个时居中显示
        // loop: true, // 不能同上一个属性同用
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        on: {
          click: function() {
            console.log(vm)
            if (this.$el[0].parentNode.className.indexOf("top") > 0) {
              vm.radioPage = this.realIndex;
              // vm.radioPage = vm.pageList[this.realIndex].id;
            }
            if (this.$el[0].parentNode.className.indexOf("bottom") > 0) {
              vm.radioRun = this.realIndex;
              // vm.radioRun = vm.runList[this.realIndex].id;
            }
          }
        }
      },
      pagefileList: [],
      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({ type: "error", message: 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({ type: "error", message: res.data.message });
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    uploadPageImg(res, file) {
      this.saveItem(res.url,'tAppDirPic/save')
    },
    uploadRunImg(res, file) {
      this.saveItem(res.url,'tAppRunPic/save')
    },
    saveItem(pic,url){
      let _this = this;
      let param = {
        appDirPic: pic,
        isCurrent: 1
      };
      _this.$https(
          {
            url: url,
            method: "post",
            authType: this.backToken
          },
          _this.$qs.stringify(param)
        )
        .then(
          res => {
            if (res.data.resultCode === "200") {
              _this.$message({
                type: "success",
                message: res.data.message
              });
              this.getDirPicList()
              this.getAppRunList()
            } else {
              _this.$message({
                type: "error",
                message: res.data.message
              });
            }
          },
          error => {
            _this.$message({
              type: "error",
              message: error
            });
          }
        );
    },
    submitForm() {
      // 修改当前项
      this.updateCurrent(this.pageList[vm.radioPage].id,'tAppDirPic/update')
      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({type:'error',message: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 {
      padding: 0 20px;
    }
  }
}
</style>