index.vue 11 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12
<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">
qzhxx's avatar
qzhxx committed
13 14 15
              <el-upload
                action="http://192.168.110.67/mall/file/image/upload"
                :on-success="uploadPageImg"
乐宝呗666's avatar
乐宝呗666 committed
16
                :before-upload="handleBeforeUpload"
qzhxx's avatar
qzhxx committed
17 18 19 20
                :file-list="dirList"
              >
                <el-button type="default">上传背景图</el-button>
              </el-upload>
21 22
            </div>
          </div>
qzhxx's avatar
qzhxx committed
23 24 25 26 27 28 29
          <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>
30
              </swiper-slide>
qzhxx's avatar
qzhxx committed
31 32
              <div class="swiper-button-prev" slot="button-prev">
                <i class="iconfont icon-arrow-left"></i>
33
              </div>
qzhxx's avatar
qzhxx committed
34 35
              <div class="swiper-button-next" slot="button-next">
                <i class="iconfont icon-arrow-right"></i>
36 37
              </div>
            </swiper>
qzhxx's avatar
qzhxx committed
38
          </div>
39 40 41 42 43
        </div>
        <div class="down-content">
          <div class="content-title">
            <div class="title">app运行画面设置</div>
            <div class="btn-group">
qzhxx's avatar
qzhxx committed
44 45 46
              <el-upload
                action="http://192.168.110.67/mall/file/image/upload"
                :on-success="uploadRunImg"
乐宝呗666's avatar
乐宝呗666 committed
47 48 49
                :before-upload="handleBeforeUpload"
                :file-list="fileRunList"
              >
qzhxx's avatar
qzhxx committed
50 51
                <el-button type="default">上传背景图</el-button>
              </el-upload>
52 53
            </div>
          </div>
qzhxx's avatar
qzhxx committed
54 55 56 57 58
          <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>
乐宝呗666's avatar
乐宝呗666 committed
59
                  <img :src="item.appRunPic" alt />
qzhxx's avatar
qzhxx committed
60 61 62 63 64 65 66 67 68 69
                </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>
70 71 72 73
        </div>
      </div>
      <div class="btn-group footer-btn">
        <el-button size="mini" @click="close">取 消</el-button>
乐宝呗666's avatar
乐宝呗666 committed
74 75 76
        <el-button size="mini" type="primary" @click="submitForm('editform')"
          >确定</el-button
        >
77 78 79 80 81
      </div>
    </el-card>
  </div>
</template>
<script>
qzhxx's avatar
qzhxx committed
82 83 84
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
var vm = {};
85
export default {
qzhxx's avatar
qzhxx committed
86
  components: { Swiper, SwiperSlide },
87 88
  data() {
    return {
乐宝呗666's avatar
乐宝呗666 committed
89 90 91 92
      radioPage: "", // 选中项
      radioRun: "",
      dirList: [], // 上传列表
      fileRunList: [],
93
      swiperOption: {
qzhxx's avatar
qzhxx committed
94 95 96
        slideToClickedSlide: true, //点击后居中展示
        slidesPerView: 5,
        spaceBetween: 30,
97
        centeredSlides: true,
乐宝呗666's avatar
乐宝呗666 committed
98
        observer: true,
qzhxx's avatar
qzhxx committed
99 100 101 102 103
        observerParents: true,
        // centerInsufficientSlides: true, //不够5个时居中显示
        // loop: true, // 不能同上一个属性同用
        navigation: {
          nextEl: ".swiper-button-next",
乐宝呗666's avatar
乐宝呗666 committed
104
          prevEl: ".swiper-button-prev",
105
        },
qzhxx's avatar
qzhxx committed
106
        on: {
乐宝呗666's avatar
乐宝呗666 committed
107 108
          click: function () {
            console.log(vm);
qzhxx's avatar
qzhxx committed
109 110 111 112 113 114
            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;
            }
乐宝呗666's avatar
乐宝呗666 committed
115 116
          },
        },
qzhxx's avatar
qzhxx committed
117
      },
乐宝呗666's avatar
乐宝呗666 committed
118 119
      pageList: [], // 数据列表
      runList: [],
120 121
    };
  },
qzhxx's avatar
qzhxx committed
122 123 124 125 126
  created() {},
  mounted() {
    this.getDirPicList();
    this.getAppRunList();
  },
127
  methods: {
qzhxx's avatar
qzhxx committed
128 129 130
    // 查询目录列表
    getDirPicList() {
      let _this = this;
乐宝呗666's avatar
乐宝呗666 committed
131 132 133 134 135 136 137
      _this
        .$https({
          url: "tAppDirPic/getList",
          method: "get",
          authType: this.backToken,
        })
        .then((res) => {
qzhxx's avatar
qzhxx committed
138 139
          if (res.data.resultCode === "200") {
            _this.pageList = res.data.data;
乐宝呗666's avatar
乐宝呗666 committed
140
            _this.pageList.forEach((item) => {
qzhxx's avatar
qzhxx committed
141 142 143 144 145
              if (item.isCurrent) {
                this.radioPage = item.id;
              }
            });
          } else {
乐宝呗666's avatar
乐宝呗666 committed
146
            this.$message.error(res.data.message);
qzhxx's avatar
qzhxx committed
147 148
          }
        })
乐宝呗666's avatar
乐宝呗666 committed
149
        .catch(function (err) {
qzhxx's avatar
qzhxx committed
150 151 152 153 154 155
          console.log(err);
        });
    },
    // 查询运行列表
    getAppRunList() {
      let _this = this;
乐宝呗666's avatar
乐宝呗666 committed
156 157 158 159 160 161 162
      _this
        .$https({
          url: "tAppRunPic/getList",
          method: "get",
          authType: this.backToken,
        })
        .then((res) => {
qzhxx's avatar
qzhxx committed
163 164
          if (res.data.resultCode === "200") {
            _this.runList = res.data.data;
乐宝呗666's avatar
乐宝呗666 committed
165
            _this.runList.forEach((item) => {
qzhxx's avatar
qzhxx committed
166 167 168 169 170
              if (item.isCurrent) {
                this.radioRun = item.id;
              }
            });
          } else {
乐宝呗666's avatar
乐宝呗666 committed
171
            this.$message.error(res.data.message);
qzhxx's avatar
qzhxx committed
172 173
          }
        })
乐宝呗666's avatar
乐宝呗666 committed
174
        .catch(function (err) {
qzhxx's avatar
qzhxx committed
175 176 177
          console.log(err);
        });
    },
乐宝呗666's avatar
乐宝呗666 committed
178 179 180 181 182 183 184 185 186
    // 上传文件格式限制
    handleBeforeUpload(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        this.$message.error("只能上传jpeg、jpg、png格式的文件");
        return false;
      }
      return true;
    },
    // 新增目录图片
qzhxx's avatar
qzhxx committed
187
    uploadPageImg(res, file) {
乐宝呗666's avatar
乐宝呗666 committed
188 189 190 191 192 193 194 195
      if (res.resultCode === "200") {
        this.saveItem(
          { appDirPic: res.data.url, isCurrent: 1 },
          "tAppDirPic/save"
        );
      } else {
        this.$message.error(res.message);
      }
qzhxx's avatar
qzhxx committed
196
    },
乐宝呗666's avatar
乐宝呗666 committed
197
    // 新增运行图片
qzhxx's avatar
qzhxx committed
198
    uploadRunImg(res, file) {
乐宝呗666's avatar
乐宝呗666 committed
199 200 201 202 203 204 205 206
      if (res.resultCode === "200") {
        this.saveItem(
          { appRunPic: res.data.url, isCurrent: 1 },
          "tAppRunPic/save"
        );
      } else {
        this.$message.error(res.message);
      }
qzhxx's avatar
qzhxx committed
207
    },
乐宝呗666's avatar
乐宝呗666 committed
208 209
    // 新增接口
    saveItem(param, url) {
qzhxx's avatar
qzhxx committed
210
      let _this = this;
乐宝呗666's avatar
乐宝呗666 committed
211 212
      _this
        .$https(
qzhxx's avatar
qzhxx committed
213 214 215
          {
            url: url,
            method: "post",
乐宝呗666's avatar
乐宝呗666 committed
216
            authType: this.backToken,
qzhxx's avatar
qzhxx committed
217 218 219 220
          },
          _this.$qs.stringify(param)
        )
        .then(
乐宝呗666's avatar
乐宝呗666 committed
221
          (res) => {
qzhxx's avatar
qzhxx committed
222
            if (res.data.resultCode === "200") {
乐宝呗666's avatar
乐宝呗666 committed
223 224 225
              _this.$message.success(res.data.message);
              this.getDirPicList();
              this.getAppRunList();
qzhxx's avatar
qzhxx committed
226
            } else {
乐宝呗666's avatar
乐宝呗666 committed
227
              _this.$message.error(res.data.message);
qzhxx's avatar
qzhxx committed
228 229
            }
          },
乐宝呗666's avatar
乐宝呗666 committed
230 231
          (error) => {
            console.log(error);
qzhxx's avatar
qzhxx committed
232 233 234
          }
        );
    },
乐宝呗666's avatar
乐宝呗666 committed
235
    // 修改当前项
qzhxx's avatar
qzhxx committed
236
    submitForm() {
乐宝呗666's avatar
乐宝呗666 committed
237 238
      this.updateCurrent(this.pageList[vm.radioPage].id, "tAppDirPic/update");
      this.updateCurrent(this.runList[vm.radioRun].id, "tAppRunPic/update");
qzhxx's avatar
qzhxx committed
239
    },
乐宝呗666's avatar
乐宝呗666 committed
240
    updateCurrent(id, url) {
qzhxx's avatar
qzhxx committed
241 242 243
      let vm = this;
      let param = {
        id: id,
乐宝呗666's avatar
乐宝呗666 committed
244
        isCurrent: 1,
qzhxx's avatar
qzhxx committed
245 246 247 248 249
      };
      vm.$https(
        {
          url: url,
          method: "put",
乐宝呗666's avatar
乐宝呗666 committed
250
          authType: this.backToken,
qzhxx's avatar
qzhxx committed
251 252 253
        },
        vm.$qs.stringify(param)
      )
乐宝呗666's avatar
乐宝呗666 committed
254 255 256
        .then((res) => {
          if (res.data.resultCode === "200") {
            this.$message.success("操作成功");
qzhxx's avatar
qzhxx committed
257 258
            this.getDirPicList();
            this.getAppRunList();
乐宝呗666's avatar
乐宝呗666 committed
259 260
          } else {
            this.$message.error(res.data.message);
qzhxx's avatar
qzhxx committed
261 262
          }
        })
乐宝呗666's avatar
乐宝呗666 committed
263
        .catch(function (err) {
qzhxx's avatar
qzhxx committed
264 265 266
          console.log(err);
        });
    },
乐宝呗666's avatar
乐宝呗666 committed
267
    // 取消
qzhxx's avatar
qzhxx committed
268 269
    close() {
      this.$router.go(-1);
乐宝呗666's avatar
乐宝呗666 committed
270 271
    },
  },
272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320
};
</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;
      }
    }
qzhxx's avatar
qzhxx committed
321 322 323 324 325 326 327
    .swiper-content {
      .swiper-item {
        position: relative;
        width: 100%;
        height: 128px;
        background-color: #99a9bf;
        border-radius: 10px;
328

qzhxx's avatar
qzhxx committed
329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394
        /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);
      }
395 396
    }
  }
qzhxx's avatar
qzhxx committed
397 398 399
  /deep/.el-upload-list {
    display: none;
  }
400 401 402 403 404 405 406 407 408 409 410 411 412 413
  .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>