lilishop-ui/seller/src/views/shop/wap/alertAdvertising.vue

<template>
  <div class="model-view">
    <div class="model-view-content">
      <div class="content">
        <div class="wap-title">首页</div>
        <div class="draggable">
          <!-- 弹窗广告 -->
          <div class="window-shadow">
            <img :src="advertising[0].img" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="model-config">
      <div class="decorate">
        <div class="decorate-title">弹窗广告</div>

        <div class="decorate-list">
          <div
            class="decorate-item"
            v-for="(item, index) in advertising"
            :key="index"
          >
            <div class="decorate-item-title">
              <div>设置</div>
            </div>
            <div class="decorate-item-box">
              <!-- 选择照片 -->
              <div class="decorate-view">
                <div class="decorate-view-title">选择图片</div>
                <div>
                  <img class="show-image" :src="item.img" alt />
                  <input
                    type="file"
                    class="hidden-input"
                    @change="changeFile(item, index)"
                    ref="files"
                    :id="'files' + index"
                  />
                  <div class="tips">
                    建议尺寸
                    <span>{{ item.size }}</span>
                  </div>
                </div>
                <div class="selectBtn">
                  <el-button
                    size="small"
                    @click="handleClickFile(item, index)"
                    plain
                    type="primary"
                    >选择链接</el-button
                  >
                </div>
              </div>

              <!-- 选择连接 -->
              <div class="decorate-view">
                <div class="decorate-view-title">选择图片</div>
                <div>
                  <el-button
                    plain
                    type="primary"
                    size="small"
                    @click="clickLink(item)"
                    >选择链接</el-button
                  >
                </div>
              </div>

              <div class="decorate-view">
                <div class="decorate-view-title">当前页面状态</div>
                <div>
                  <el-tag :type="result.pageShow === 'OPEN' ? 'success' : 'danger'">
                    {{ result.pageShow === "OPEN" ? "开启" : "关闭" }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
        <liliDialog
          ref="liliDialog"
          @selectedLink="selectedLink"
          :types="linkType"
        ></liliDialog>
      </div>
      <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
    </el-dialog>
    </div>
  </div>
</template>
<script>
import ossManage from "@/views/sys/oss-manage/ossManage";
import * as API_Other from "@/api/other.js";
export default {
   components: {
    ossManage,
  },
  data() {
    return {
      result:"",
      picModelFlag: false, //图片选择器
      type: "full", // 展示方式
      //全屏广告
      advertising: [
        {
          img:
            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/9136ecddcddf6607184fab689207e7e3.png",
          size: "612*836",
        },
      ],
      linkType: "", // 选择类型
      selectedLinks: {},
    };
  },

  watch: {
    advertising: {
      handler(val) {
        this.$store.state.openStyleStore = val;
        console.log(
          "this.$store.state.openStyleStore",
          this.$store.state.openStyleStore
        );
      },
      deep: true,
    },
  },
  mounted() {
    this.openPage();
  },
  methods: {
    // 回调选择的链接
    selectedLink(val) {
      this.selectedLinks.url = val;

      this.advertising[0].config = val;
    },
    openPage() {
      const alertType = this.$route.query.pagetype;
      const pageType = {
        INDEX: "INDEX",
        ALERT: "OPEN_SCREEN_PAGE",
        OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
      }[alertType ? alertType : "INDEX"];

      API_Other.getOpenHomeData(pageType).then((res) => {
        this.$store.state.openStoreId = res.result.id;
        if (res.result.pageData) {
          this.advertising = [JSON.parse(res.result.pageData)];
        }
        this.result = res.result
      });
    },
    // 图片选择器回显
    callbackSelected(val) {
      this.picModelFlag = false;
      this.advertising[0].img = val.url;
    },
    // 点击选择图片
    handleClickFile(item, index) {
      this.$refs.ossManage.selectImage = true;
      this.picModelFlag = true;
    },
    // 点击链接
    clickLink(item) {
      this.$refs.liliDialog.open('link')
    },
    //点击图片解析成base64
    changeFile(item, index) {
      const file = document.getElementById("files" + index).files[0];
      if (file == void 0) return false;
      const reader = new FileReader();
      reader.readAsDataURL(file);
      this.$nextTick((res) => {
        reader.onload = (e) => {
          item.img = e.target.result;
        };
      });
    },

  },
};
</script>
<style scoped lang="scss">
@import "./style.scss";
@import "./decorate.scss";
.decorate-radio {
  margin: 10px 0;
}
.window-shadow,
.full-shadow {
  display: flex;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  left: 0;
  align-items: center;
  justify-content: center;
}
.window-shadow {
  > img {
    width: 306px;
    height: 418px;
  }
}
.full-shadow {
  > img {
    width: 100%;
    height: 100%;
  }
}
.draggable {
  position: relative;
}

.btn-item {
  > img {
    margin: 4px 0;
    border-radius: 50%;
    width: 30px;
    height: 30px;
  }
}
</style>