banma/pages/test/test.vue

<template>
  <view class="">
    <view class="btn" @click="takephotos"> 点击保存 </view>
    <view class="swiperBox">
      <swiper
        :style="{ height: swiperHeight + 'px' }"
        @change="swiperChange"
        :current="current"
        :indicator-dots="false"
        :autoplay="false"
        :interval="3000"
        :duration="1000"
      >
        <swiper-item v-for="(item, index) in list" :key="index">
          <view
            class="swiper-item swiper-itemcopy"
            :id="'copyswiperItem' + index"
          >
            <view class="titleBox">
              <!-- <image :src="BASE_URL+item.qrimage" mode=""></image> -->
              <limeQrcodeVue
                ref="qrcodeRef"
                :value="
                  BASE_URL + '/h5/#/pages/deal/product_info?id=' + item.id
                "
                size="112rpx"
              ></limeQrcodeVue>
              <view class="title">
                <p>{{ item.title1 }}</p>

                <p>{{ item.title2 }}</p>
                <p class="warn">{{ item.title3 }}</p>
              </view>
            </view>
            <view class="content" :id="'copycontent' + index"> </view>
          </view>
          <view class="swiper-item" :id="'swiperItem' + index">
            <view class="titleBox">
              <!-- <image :src="BASE_URL+item.qrimage" mode=""></image> -->
              <limeQrcodeVue
                ref="qrcodeRef"
                :value="
                  BASE_URL + '/h5/#/pages/deal/product_info?id=' + item.id
                "
                size="112rpx"
              ></limeQrcodeVue>
              <view class="title">
                <p>{{ item.title1 }}</p>

                <p>{{ item.title2 }}</p>
                <p class="warn">{{ item.title3 }}</p>
              </view>
            </view>
            <view class="content" :id="'content' + index" v-if="item.detail">
              <u-parse :content="item.detail"></u-parse>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <u-overlay :show="show" @click="show = false">
      <view class="warp">
        <view class="rect" @tap.stop>
          <image :src="url" mode="widthFix"></image>
          <p>长按保存到本地</p>
        </view>
      </view>
    </u-overlay>
    <u-overlay :show="show2" @click="show2 = false">
      <view class="warp">
        <view class="rect2">
          <image src="../../static/swiper1.png" mode=""></image>
          <p style="color: #fff">{{ alert2 }}</p>
        </view>
      </view>
    </u-overlay>
    <u-overlay :show="show1" @click="show1 = false">
      <view class="warp">
        <view class="rect1" @tap.stop>
          <image src="../../static/warn.png" mode=""></image>
          <p>{{ alert1 }}</p>
          <u-button
            color="#A5CF49"
            type="success"
            shape="circle"
            text="确认收藏"
            @click="addFavorite"
          ></u-button>
        </view>
      </view>
    </u-overlay>
  </view>
</template>

<script setup>
import limeQrcodeVue from "../../uni_modules/lime-qrcode/components/l-qrcode/l-qrcode.vue";
import html2canvas from "html2canvas";
import { BASE_URL } from "../../utils/http.js";
import { onLoad, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import { nextTick, ref } from "vue";
import { getsimpleimages, getplatformeditor } from "@/utils/api.js";
let show = ref(false);
let show1 = ref(false);
let show2 = ref(true);
let swiperChange = (e) => {
  page.value += 1;
  console.log(e.detail.current);
  current.value = e.detail.current;
  var dom = document.getElementById("swiperItem" + current.value); // 获取dom元素

  if (dom && dom.children[1]) {
    swiperHeight.value = 667 + dom.children[1].clientHeight;
  } else {
    swiperHeight.value = 667;
  }
  getsimpleimages({ page: 1, page_num }).then((res) => {
    list.value = [...list.value, ...res.data];
    list.value.forEach((item) => {});
  });
};
let page_num = 1;
let page = ref(1);
let url = ref();
let swiperHeight = ref(200);
let current = ref(0);
let list = ref([]);
let refList = ref([]);
let setBoxRef = (el) => {
  if (el) {
    refList.value.push(el);
  }
};

let takephotos = () => {
  var swiper = document.getElementById("copyswiperItem" + current.value); // 获取dom元素
  var dom = document.getElementById("content" + current.value); // 获取dom元素
  var dom1 = document.getElementById("copycontent" + current.value); // 获取dom元素
  // if(dom&&dom.children[1]){
  // 	swiperHeight.value=67+dom.children[1].clientHeight
  // }else{
  // 	swiperHeight.value=67
  // }
  dom1.innerHTML = dom.innerHTML;
  let res = domTrans(dom1);
  // console.log(1223,res)
  let html = forFn(res);
  dom1.innerHTML = html;
  html2canvas(swiper).then((canvas) => {
    url.value = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream");
    console.log(url.value);
    show.value = true;
  });
};
let alert1 = ref("");
let alert2 = ref("");
onLoad(() => {
  getplatformeditor().then((res) => {
    alert1.value = res.data.alert1;
    alert2.value = res.data.alert2;
  });
  getsimpleimages({ page: page.value, page_num: 2 }).then((res) => {
    list.value = res.data;
  });
  let flag = uni.getStorageSync("collect");
  if (!flag) {
    show1.value = true;
    uni.setStorageSync("collect", true);
  }
  setTimeout(() => {
    show2.value = false;
  }, 2000);
});
nextTick(() => {
  var dom = document.getElementById("swiperItem" + current.value); // 获取dom元素
  if (dom && dom.children[1]) {
    swiperHeight.value = 667 + dom.children[1].clientHeight;
  } else {
    swiperHeight.value = 667;
  }
});

onShow(() => {});

// 将DOM转换为js对象
function domTrans(dom) {
  // 总dom树
  let tree = [];

  // 递归, node = 当前的节点，dataNode = 数据插入的节点
  const loop = (node, dataNode) => {
    // 当前节点的模板
    let temp = {
      type: node.nodeType,
    };

    // 如果是文本节点 或 单标签节点
    if (temp.type == 3 && node.nodeValue.match(/\S/)) {
      temp["content"] = node.nodeValue;
      temp["tag"] = node.nodeName;
      dataNode.push(temp);
    }

    // 元素节点
    if (temp.type == 1) {
      let attributes = getAttribute(node);

      // 如果没有属性，不添加 attributes
      if (attributes) temp["attributes"] = attributes;

      var newNode = node.childNodes;

      var newNode2;
      if (newNode[0] && newNode.length <= 1) {
        newNode2 = newNode[0].childNodes.length;
      }
      // 当前节点下还有子节点
      if (node.childNodes.length > 1 || newNode2 > 0) {
        temp["children"] = [];
        temp["tag"] = node.nodeName.toLowerCase();
        for (let i = 0; i < node.childNodes.length; i++) {
          loop(node.childNodes[i], temp.children);
        }
      }
      // 当前节点下只有文本 或 单标签节点
      if (node.childNodes.length <= 1 && newNode2 == 0) {
        temp["content"] = node.innerHTML;
        temp["tag"] = node.nodeName.toLowerCase();
      }

      dataNode.push(temp);
    }
  };
  loop(dom, tree);
  return tree[0].children;
}
function forFn(arr) {
  let html = ``;
  for (let i = 0; i < arr.length; i++) {
    let tArr = [];
    if (arr[i].content) {
      tArr = arr[i].content.split("");
    }
    if (arr[i].type === 1) {
      if (arr[i].attributes) {
        if (arr[i].attributes.src) {
          html += `<img class="${arr[i].attributes.class}" src="${arr[i].attributes.src}" style="${arr[i].attributes.style}">`;
        } else {
          html += `<${arr[i].tag} class="${arr[i].attributes.class}" style="${arr[i].attributes.style}">`;
        }
      } else {
        if (arr[i].tag == "img") {
          html += `<${arr[i].tag} style="${arr[i].attributes.style}">`;
        } else {
          html += `<${arr[i].tag}>`;
        }
      }
      if (arr[i].children) {
        html += forFn(arr[i].children);
      }
      html += `</${arr[i].tag}>`;
    }
    tArr.forEach((el) => {
      if (arr[i].tag === "#text") {
        html += `${el}`;
      } else {
        if (arr[i].attributes) {
          if (arr[i].tag == "img") {
            html += `<${arr[i].tag} class="${arr[i].attributes.class}" src="${arr[i].attributes.src}" style="${arr[i].attributes.style}">${el}</${arr[i].tag}>`;
          } else {
            html += `<${arr[i].tag} class="${arr[i].attributes.class}" style="${arr[i].attributes.style}">${el}</${arr[i].tag}>`;
          }
        } else {
          if (arr[i].tag == "img") {
            html += `<${arr[i].tag} src="${arr[i].attributes.src}">${el}</${arr[i].tag}>`;
          } else {
            html += `<${arr[i].tag}>${el}</${arr[i].tag}>`;
          }
        }
      }
    });
  }
  // console.log(html,'====')
  return html;
}
// 提取元素属性
function getAttribute(dom) {
  let attributes = {};
  //   let empty = true;
  Array.from(dom.attributes).map((item) => {
    attributes[item.nodeName] = item.nodeValue;
    // empty = false;
  });
  return attributes;
}
let h2 =
  '<h2 style=""><span style="color: rgb(0, 0, 0); background-color: rgb(0, 255, 255);">斑马K496=31.8w</span><font color="#000000">,</font><span style="color: rgb(0, 0, 0); background-color: rgb(0, 255, 0);">s.8000区</span><font color="#000000" style="background-color: rgb(0, 255, 0);">左</font><font color="#000000"><span style="background-color: rgb(0, 255, 0);">右,</span>42金1,26.8e</font><font color="#000000" style="">战v30,</font><font color="#000000">速316w,法1.7e,冰16.5w,514鞋,7个0星,世民1星,</font><span style="color: rgb(0, 0, 255);">3个2星,精卫3星,4个4星(</span><font color="#000000">大圣通天等),</font><span style="color: rgb(255, 255, 255); background-color: rgb(255, 0, 0);">.28个5星</span><font color="#000000">,</font><span style="color: rgb(255, 255, 255); background-color: rgb(107, 173, 222);">19个终皮肤</span><font color="#000000">劫81,</font><span style="color: rgb(0, 0, 255);">10个仙器技满</span><font color="#000000">，龙4普4魔4，，贴35，金盒子2个，142w玉，强石14w，，</font><span style="color: rgb(0, 0, 255);">30个小ha</span><font color="#000000">o，手几</font></h2>';
</script>

<style lang="scss">
.swiper-itemcopy {
  position: absolute;
  top: 999px;
}
.content {
  word-break: break-all;
  word-wrap: break-word;
  overflow: hidden;
  position: relative;
  .watermark {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    // bottom: 0;
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }
  .watermark1 {
    position: absolute;
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }
}
.warp {
  padding: 0 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.rect {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 694px;
  height: auto;
  image {
    width: 100%;
  }
  p {
    font-size: 48rpx;
    color: #fff;
    margin-top: 12rpx;
  }
  // background-color: #fff;
}
.rect2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  image {
    width: 374rpx;
    height: 361rpx;
  }
}
.rect1 {
  padding: 60rpx 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 558rpx;
  height: 438rpx;
  background: #ffffff;
  border-radius: 20rpx;
  image {
    width: 96rpx;
    height: 96rpx;
  }
  p {
    font-size: 24rpx;
    margin: 62rpx 0 40rpx;
  }
  // background-color: #fff;
}
page {
  height: 100%;

  .btn {
    font-size: 28rpx;
    color: #fff;
    text-align: center;
    line-height: 70rpx;
    float: right;
    width: 182rpx;
    height: 70rpx;
    background: #a5cf49;
    border-radius: 0rpx 0rpx 0rpx 32rpx;
  }

  .swiperBox {
    width: 694rpx;
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);

    .swiper-item {
      .titleBox {
        font-size: 28rpx;
        color: #666666;
        padding: 6rpx;
        background: #fff5e5;
        display: flex;
        align-items: center;

        image {
          margin-right: 4rpx;
          width: 112rpx;
          height: 112rpx;
        }
        .warn {
          font-size: 32rpx;
          color: #ff2828;
        }
        .title {
          margin-left: 4rpx;
        }
      }
    }
  }
}
</style>