商家楼层装修

seller/src/views/shop/wap/advertising.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="model-view">
+    <div class="model-view-content">
+      <div class="content">
+        <div class="wap-title">首页</div>
+        <div class="draggable">
+          <!-- 全屏 -->
+          <div class="full-shadow" v-if="type == 'full'">
+            <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">
+                  <Button
+                    size="small"
+                    @click="handleClickFile(item, index)"
+                    ghost
+                    type="primary"
+                    >选择照片</Button
+                  >
+                </div>
+              </div>
+
+              <!-- 选择连接 -->
+              <div class="decorate-view">
+                <div class="decorate-view-title">选择图片</div>
+                <div>
+                  <Button
+                    ghost
+                    type="primary"
+                    size="small"
+                    @click="clickLink(item)"
+                    >选择链接</Button
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- <Button type="primary" @click="addDecorate()" ghost>添加</Button> -->
+        <liliDialog ref="liliDialog" :types="linkType"></liliDialog>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+
+      type: "full", // 是否全屏
+
+      //全屏广告
+      advertising: [
+         {
+          img:
+            "https://st-gdx.dancf.com/gaodingx/0/uxms/design/20200903-182035-5e87.png?x-oss-process=image/resize,w_932/interlace,1,image/format,webp",
+          size: "750*1624",
+        },
+      ],
+
+      linkType: "", // 选择类型
+    };
+  },
+  methods: {
+    // 点击链接
+    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;
+        };
+      });
+    },
+    // 点击选择照片
+    handleClickFile(item, index) {
+      document.getElementById("files" + index).click();
+    },
+  },
+};
+</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>