banma/pages/deal/productInfo.vue

<template>
  <view class="">
    <u-loading-page :loading="isLoading"></u-loading-page>
    <view class="" v-if="!isLoading">
      <u-swiper
        @change="swiperChange"
        @click="swiperClick"
        :list="info.images_arr"
        indicator
        indicatorMode="dot"
        circular
        height="338"
        imgMode="scaleToFill"
      ></u-swiper>
      <view class="baseInfo">
        <view class="titleBox">
          <view class="wechat"> 客服微信:{{ kefu }} </view>
          <view class="takeImg" @click="takephotos"> 生成斑马简图 </view>
        </view>
        <view class="attributeBox">
          <view class="attributeItem">
            <view class="labelItem">
              编号：<text class="fontWeight">{{ info.code }}</text>
            </view>
            <view class="labelItem">
              区服：<text class="fontWeight">{{ info.server }}</text>
            </view>
          </view>
          <view class="attributeItem">
            <view class="labelItem">
              金伙伴：<text class="fontWeight">{{ info.partner }}</text>
            </view>
            <view class="labelItem">
              vip：<text class="fontWeight">{{ info.level }}</text>
            </view>
          </view>
          <view class="attributeItem">
            <view class="labelItem">
              战力：<text class="fontWeight">{{ info.force }}亿</text>
            </view>
            <view class="labelItem">
              速度：<text class="fontWeight">{{ info.speed }}万</text>
            </view>
          </view>
          <view class="attributeItem">
            <view class="labelItem">
              法伤：<text class="fontWeight">{{ info.atk }}万</text>
            </view>

            <view class="labelItem">
              冰冻：<text class="fontWeight">{{ info.property }}万</text>
            </view>
          </view>
          <view class="attributeItem">
            <view class="labelItem">
              渡劫：<text class="fontWeight">{{ info.dj_level }}</text>
            </view>
            <view class="labelItem">
              小号数量：<text class="fontWeight">{{ info.children }}</text>
            </view>
          </view>
          <view class="attributeItem">
            <view class="labelItem">
              是否榜一：<text class="fontWeight">{{
                info.top_one == 1 ? "是" : "否"
              }}</text>
            </view>
            <view class="labelItem">
              账号类型：<text class="fontWeight">{{
                info.account_type_text
              }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="labelBox">
        <view
          class="labelItem"
          :style="{
            backgroundImage: 'url(' + BASE_URL + bg_list.top_bg.value + ')',
          }"
          v-if="info.is_top == 1"
        >
          置顶
        </view>

        <view
          class="labelItem"
          :style="{
            backgroundImage:
              'url(' + BASE_URL + bg_list.discount_bg.value + ')',
          }"
          v-if="info.discount == 1"
        >
          特价
        </view>
        <view
          class="labelItem"
          :style="{
            backgroundImage:
              'url(' + BASE_URL + bg_list.recommend_bg.value + ')',
          }"
          v-if="info.recommend == 1"
        >
          斑马推荐
        </view>
        <view
          class="labelItem"
          :style="{
            backgroundImage: 'url(' + BASE_URL + bg_list.stage_bg.value + ')',
          }"
          v-if="info.stage == 1"
        >
          可分期
        </view>
        <view
          class="labelItem"
          :style="{
            backgroundImage:
              'url(' + BASE_URL + bg_list.recommend_bg.value + ')',
          }"
          v-if="info.is_hot == 1"
        >
          热门
        </view>
        <!-- <view class="labelItem" :style="{	backgroundImage:'url('+BASE_URL+bg_list.level_bg.value+')'}" v-if="info.level>=1">
				VIP
			</view> -->
        <view
          class="labelItem"
          :style="{
            backgroundImage: 'url(' + BASE_URL + bg_list.new_bg.value + ')',
          }"
          v-if="info.is_new == 1"
        >
          新品
        </view>

        <view
          class="labelItem"
          :style="{
            backgroundImage:
              'url(' + BASE_URL + bg_list.standby1_bg.value + ')',
          }"
          v-if="info.standby1 == 1"
        >
          {{ info.standby1_title }}
        </view>
        <view
          class="labelItem"
          :style="{
            backgroundImage:
              'url(' + BASE_URL + bg_list.standby2_bg.value + ')',
          }"
          v-if="info.standby2 == 1"
        >
          {{ info.standby2_title }}
        </view>
        <view
          class="labelItem"
          :style="{
            backgroundImage:
              'url(' + BASE_URL + bg_list.standby3_bg.value + ')',
          }"
          v-if="info.standby3 == 1"
        >
          {{ info.standby3_title }}
        </view>

        <!-- <u-tag v-if="item.discount==1" text="特价" type="error" shape="circle" size="mini"></u-tag>
			<u-tag v-if="item.recommend==1" text="斑马推荐"  shape="circle" size="mini"></u-tag>
			<u-tag v-if="item.stage==1" text="可分期" type="success" shape="circle" size="mini"></u-tag> -->
      </view>
      <view class="productInfo">
        <view class="infoTitle"> 商品详情 </view>
        <view class="">
          <u-parse :content="info.detail"></u-parse>
        </view>
        <view class="" v-if="info.content_switch == 1">
          <u-parse :content="info.detail2"></u-parse>
        </view>
      </view>
      <view class="productInfo">
        <view class="infoTitle"> 免责声明 </view>
        <view class="statement">
          <u-parse :content="disclaimer"></u-parse>
        </view>
      </view>
      <view class="tabbar">
        <view class="back" @click="goBack">
          <u-icon name="home-fill" color="#fff"></u-icon>
          <span style="font-size: 16px">返回</span>
        </view>
        <view class="price">
          jià格：<text class="bold">{{ info.money }}</text
          ><text>米</text>
        </view>
        <view class="back purchase" @click="showPopup = true"> 流程规则 </view>
      </view>
      <view class="swiper-item swiper-itemcopy" id="copyswiperItem">
        <view
          class="titleBox"
          :style="{ background: 'url(' + BASE_URL + jt_bg1 + ')' }"
        >
          <!-- <image :src="BASE_URL+item.qrimage" mode=""></image> -->
          <limeQrcodeVue
            ref="qrcodeRef"
            :value="
              BASE_URL1 +
              `/h5/#/pages/deal/productInfo?id=${id}` +
              (rand_num ? `&rand_num=${rand_num}` : '')
            "
            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"
          :style="{ background: 'url(' + BASE_URL + jt_bg2 + ')' }"
        >
          <view class="" id="copycontent"> </view>
          <view
            class="watermark"
            v-if="
              (item.watermark_info && item.watermark_info.type == 1) ||
              (item.watermark_info && item.watermark_info.type == 3)
            "
          >
            <view
              v-for="it in 100"
              class=""
              :style="{
                transform: 'rotate(' + item.watermark_info.angle + 'deg)',
                opacity: (100 - item.watermark_info.opacity * 1) * 0.01,
                color: item.watermark_info.color,
                marginTop: item.watermark_info.hh + 'px',
                marginBottom: item.watermark_info.hh + 'px',
                marginLeft: item.watermark_info.ww + 'px',
                marginRight: item.watermark_info.ww + 'px',
                fontSize: item.watermark_info.text_font + 'px',
                fontWeight: item.watermark_info.bold == 1 ? 'bold' : '',
                fontFamily:
                  item.watermark_info.typeface == 1
                    ? 'typeface1'
                    : item.watermark_info.typeface == 2
                    ? 'typeface2'
                    : item.watermark_info.typeface == 3
                    ? 'typeface3'
                    : item.watermark_info.typeface == 4
                    ? 'typeface4'
                    : item.watermark_info.typeface == 5
                    ? 'typeface5'
                    : item.watermark_info.typeface == 6
                    ? 'typeface6'
                    : '',
              }"
            >
              <image
                :src="BASE_URL + item.watermark_info.image"
                mode=""
                v-if="
                  item.watermark_info.image && item.watermark_info.type == 1
                "
              ></image>
              <text
                v-if="
                  item.watermark_info.water_text &&
                  item.watermark_info.type == 3
                "
                >{{ item.watermark_info.water_text }}</text
              >
            </view>
          </view>
          <view
            class="watermark1"
            :style="{
              left:
                item.watermark_info.waterPos == 0
                  ? 0 + item.watermark_info.xx + 'px'
                  : item.watermark_info.waterPos == 1
                  ? 0 + item.watermark_info.xx + 'px'
                  : item.watermark_info.waterPos == 4
                  ? 0 + item.watermark_info.voffset + 'px'
                  : item.watermark_info.waterPos == 7
                  ? 0 + item.watermark_info.xx + 'px'
                  : item.watermark_info.waterPos == 2
                  ? 'calc( 40%' + ' + ' + item.watermark_info.xx + 'px )'
                  : item.watermark_info.waterPos == 5
                  ? 'calc( 40%' + ' + ' + item.watermark_info.voffset + 'px )'
                  : item.watermark_info.waterPos == 8
                  ? 'calc( 40%' + ' + ' + item.watermark_info.xx + 'px )'
                  : '',
              top:
                item.watermark_info.waterPos == 0
                  ? 0 + item.watermark_info.yy + 'px'
                  : item.watermark_info.waterPos == 1
                  ? 0 + item.watermark_info.yy + 'px'
                  : item.watermark_info.waterPos == 2
                  ? 0 + item.watermark_info.yy + 'px'
                  : item.watermark_info.waterPos == 3
                  ? 0 + item.watermark_info.yy + 'px'
                  : item.watermark_info.waterPos == 4
                  ? '40%'
                  : item.watermark_info.waterPos == 5
                  ? '40%'
                  : item.watermark_info.waterPos == 6
                  ? '40%'
                  : '',
              right:
                item.watermark_info.waterPos == 3
                  ? 0 + item.watermark_info.xx + 'px'
                  : item.watermark_info.waterPos == 6
                  ? 0 + item.watermark_info.waterPos + 'px'
                  : item.watermark_info.waterPos == 9
                  ? 0 + item.watermark_info.xx + 'px'
                  : '',
              bottom:
                item.watermark_info.waterPos == 7
                  ? 0 + item.watermark_info.xx + 'px'
                  : item.watermark_info.waterPos == 8
                  ? 0 + item.watermark_info.ww + 'px'
                  : item.watermark_info.waterPos == 9
                  ? 0 + item.watermark_info.xx + 'px'
                  : '',
              fontWeight: item.watermark_info.bold == 1 ? 'bold' : '',
              fontFamily:
                item.watermark_info.typeface == 1
                  ? 'typeface1'
                  : item.watermark_info.typeface == 2
                  ? 'typeface2'
                  : item.watermark_info.typeface == 3
                  ? 'typeface3'
                  : item.watermark_info.typeface == 4
                  ? 'typeface4'
                  : item.watermark_info.typeface == 5
                  ? 'typeface5'
                  : item.watermark_info.typeface == 6
                  ? 'typeface6'
                  : '',
            }"
            v-if="
              (item.watermark_info && item.watermark_info.type == 2) ||
              (item.watermark_info && item.watermark_info.type == 4)
            "
          >
            <view
              class=""
              :style="{
                transform: 'rotate(' + item.watermark_info.angle + 'deg)',
                color: `rgba(${hexToRgb(item.watermark_info.color).rgb},${
                  (100 - item.watermark_info.opacity * 1) * 0.01
                })`,
                fontSize: item.watermark_info.text_font + 'px',
              }"
            >
              <image
                :src="BASE_URL + item.watermark_info.image"
                mode=""
                v-if="
                  item.watermark_info.image && item.watermark_info.type == 2
                "
              ></image>
              <text
                v-if="
                  item.watermark_info.water_text &&
                  item.watermark_info.type == 4
                "
                >{{ item.watermark_info.water_text }}</text
              >
            </view>
          </view>
        </view>
      </view>
      <view class="swiper-item" id="swiperItem">
        <view
          class="titleBox"
          :style="{ background: 'url(' + BASE_URL + jt_bg1 + ')' }"
        >
          <limeQrcodeVue
            v-if="item.id"
            ref="qrcodeRef"
            :value="BASE_URL1 + '/h5/#/pages/deal/productInfo?id=' + id"
            size="112rpx"
          ></limeQrcodeVue>
          <!-- <image :src="BASE_URL+item.qrimage" mode=""></image> -->
          <view class="title">
            <p>{{ item.title1 }}</p>

            <p>{{ item.title2 }}</p>
            <p class="warn">{{ item.title3 }}</p>
          </view>
        </view>
        <view
          class="content"
          v-if="item.detail"
          :style="{ background: 'url(' + BASE_URL + jt_bg2 + ')' }"
        >
          <view class="" id="content1">
            <u-parse :content="item.detail"></u-parse>
          </view>
          <view
            class="watermark"
            v-if="
              (item.watermark_info && item.watermark_info.type == 1) ||
              (item.watermark_info && item.watermark_info.type == 3)
            "
          >
            <view
              v-for="it in 100"
              class=""
              :style="{
                transform: 'rotate(' + item.watermark_info.angle + 'deg)',
                opacity: (100 - item.watermark_info.opacity * 1) * 0.01,
                color: item.watermark_info.color,
                marginTop: item.watermark_info.hh + 'px',
                marginBottom: item.watermark_info.hh + 'px',
                marginLeft: item.watermark_info.ww + 'px',
                marginRight: item.watermark_info.ww + 'px',
                fontSize: item.watermark_info.text_font + 'px',
                fontWeight: item.watermark_info.bold == 1 ? 'bold' : '',
                fontFamily:
                  item.watermark_info.typeface == 1
                    ? 'typeface1'
                    : item.watermark_info.typeface == 2
                    ? 'typeface2'
                    : item.watermark_info.typeface == 3
                    ? 'typeface3'
                    : item.watermark_info.typeface == 4
                    ? 'typeface4'
                    : item.watermark_info.typeface == 5
                    ? 'typeface5'
                    : item.watermark_info.typeface == 6
                    ? 'typeface6'
                    : '',
              }"
            >
              <image
                :src="BASE_URL + item.watermark_info.image"
                mode=""
                v-if="
                  item.watermark_info.image && item.watermark_info.type == 1
                "
              ></image>
              <text
                v-if="
                  item.watermark_info.water_text &&
                  item.watermark_info.type == 3
                "
                >{{ item.watermark_info.water_text }}</text
              >
            </view>
          </view>
          <view
            class="watermark1"
            :style="{
              left:
                item.watermark_info.waterPos == 0
                  ? 0
                  : item.watermark_info.waterPos == 1
                  ? 0
                  : item.watermark_info.waterPos == 4
                  ? 0
                  : item.watermark_info.waterPos == 7
                  ? 0
                  : item.watermark_info.waterPos == 2
                  ? '40%'
                  : item.watermark_info.waterPos == 5
                  ? '40%'
                  : item.watermark_info.waterPos == 8
                  ? '40%'
                  : '',
              top:
                item.watermark_info.waterPos == 0
                  ? 0
                  : item.watermark_info.waterPos == 1
                  ? 0
                  : item.watermark_info.waterPos == 2
                  ? 0
                  : item.watermark_info.waterPos == 3
                  ? 0
                  : item.watermark_info.waterPos == 4
                  ? '40%'
                  : item.watermark_info.waterPos == 5
                  ? '40%'
                  : item.watermark_info.waterPos == 6
                  ? '40%'
                  : '',
              right:
                item.watermark_info.waterPos == 3
                  ? 0
                  : item.watermark_info.waterPos == 6
                  ? 0
                  : item.watermark_info.waterPos == 9
                  ? 0
                  : '',
              bottom:
                item.watermark_info.waterPos == 7
                  ? 0
                  : item.watermark_info.waterPos == 8
                  ? 0
                  : item.watermark_info.waterPos == 9
                  ? 0
                  : '',
              fontWeight: item.watermark_info.bold == 1 ? 'bold' : '',
              fontFamily:
                item.watermark_info.typeface == 1
                  ? 'typeface1'
                  : item.watermark_info.typeface == 2
                  ? 'typeface2'
                  : item.watermark_info.typeface == 3
                  ? 'typeface3'
                  : item.watermark_info.typeface == 4
                  ? 'typeface4'
                  : item.watermark_info.typeface == 5
                  ? 'typeface5'
                  : item.watermark_info.typeface == 6
                  ? 'typeface6'
                  : '',
            }"
            v-if="
              (item.watermark_info && item.watermark_info.type == 2) ||
              (item.watermark_info && item.watermark_info.type == 4)
            "
          >
            <view
              class=""
              :style="{
                transform: 'rotate(' + item.watermark_info.angle + 'deg)',
                color: `rgba(${hexToRgb(item.watermark_info.color).rgb},${
                  (100 - item.watermark_info.opacity * 1) * 0.01
                })`,
                fontSize: item.watermark_info.text_font + 'px',
              }"
            >
              <image
                :src="BASE_URL + item.watermark_info.image"
                mode=""
                v-if="
                  item.watermark_info.image && item.watermark_info.type == 2
                "
              ></image>
              <text
                v-if="
                  item.watermark_info.water_text &&
                  item.watermark_info.type == 4
                "
                style="white-space: nowrap"
                >{{ item.watermark_info.water_text }}</text
              >
            </view>
          </view>
        </view>
      </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-popup
        :show="showPopup"
        :round="10"
        mode="bottom"
        @close="showPopup = false"
      >
        <view class="popup">
          <view class="popupTop">
            <view class="contactInfo">
              <p>{{ notice_text }}</p>
            </view>
            <image :src="BASE_URL + noticeimage" mode=""></image>
          </view>
          <view class="notice">
            <!-- <view class="noticeTitle">
						购买须知
					</view> -->
            <view class="noticeInfo">
              <u-parse :content="buy_notes"></u-parse>
            </view>
            <view class="popupBottom">
              <view class="back" @click="showPopup = false">
                <u-icon name="home-fill" color="#fff"></u-icon>
                返回
              </view>
            </view>
          </view>
        </view>
      </u-popup>
      <u-overlay :show="show10" @click="show10 = false">
        <view class="warp">
          <view class="rect1" @tap.stop>
            <image src="../../static/tishi.png" mode=""></image>
            <p>该商品已出售或下架</p>
            <u-button
              color="#A5CF49"
              type="success"
              shape="circle"
              size="large"
              text="看看其他斑马账号"
              @click="goBack"
            ></u-button>
          </view>
        </view>
      </u-overlay>
    </view>
  </view>
</template>

<script setup>
import limeQrcodeVue from "../../uni_modules/lime-qrcode/components/l-qrcode/l-qrcode.vue";
import html2canvas from "html2canvas";
import { BASE_URL, BASE_URL1 } from "../../utils/http.js";
import { onLoad, onShow, onPullDownRefresh, onReady } from "@dcloudio/uni-app";
import { ref } from "vue";
import {
  getGoodsDetail,
  getsimpleimages,
  getplatformeditor,
  getsimpleimagesdetail,
  getplatformmeun,
} from "@/utils/api.js";
let show10 = ref(false);
let disclaimer = ref();
let buy_notes = ref();
let notice_text = ref();
let kefu = ref();
let title = ref();
let bg_list = ref({});
let current = ref(0);
let noticeimage = ref();
let jt_bg1 = ref("");
let jt_bg2 = ref("");
onReady(() => {
  getplatformmeun().then((res) => {
    uni.setNavigationBarTitle({
      title: res.data.name,
    });
    jt_bg1.value = res.data.jt_bg1;
    jt_bg2.value = res.data.jt_bg2;
  });
});
let swiperChange = (e) => {
  current.value = e.current;
};
let swiperClick = (e) => {
  uni.previewImage({
    // 预览时，默认显示图片的索引
    current: current.value,
    // 所有图片 url 地址的数组
    urls: info.value.images_arr,
  });
};
let isLoading = ref(true);
onLoad((option) => {
  getplatformeditor().then((res) => {
    disclaimer.value = res.data.disclaimer;
    notice_text.value = res.data.notice_text;
    noticeimage.value = res.data.noticeimage;
    buy_notes.value = res.data.buy_notes;
    kefu.value = res.data.kfwx;
    kefu.value = res.data.kfwx;
  });
  id.value = option.id;
  rand_num.value = option.rand_num;
  let images_arr = [];
  let index = new Date().getTime();
  getGoodsDetail({ goods_id: id.value, rand_num: rand_num.value }).then(
    (res) => {
      if (res.code == 1) {
        bg_list.value = res.data.bg_list;
        if (res.data.detail.status == 0) {
          show10.value = true;
          // return
        }
      } else {
        show10.value = true;
        isLoading.value = false;
      }

      res.data &&
        res.data.detail.images_arr.forEach((item) => {
          // images_arr.push(BASE_URL+item+"?res="+index)
          images_arr.push(BASE_URL + item);
        });
      info.value = res.data.detail;
      info.value.images_arr = images_arr;
      getsimpleimagesdetail({ goods_id: info.value.id }).then((res) => {
        isLoading.value = false;
        res.data.detail = filterDetail(res.data.detail);
        item.value = res.data;
        // item.value.detail=getspan(item.value.detail)
        setTimeout((_) => {
          createCanvas();
        }, 100);
      });
      // getsimpleimages().then(res=>{
      // 	let arr=res.data
      // 	arr.forEach(it=>{
      // 		if(info.value.simple_id==it.id){
      // 			item.value=it
      // 		}
      // 	})
      // })
    }
  );
});
function getspan(str) {
  var list1 = str.split("</span>");
  var list2 = [];
  list1.forEach((val) => {
    if (val.indexOf("<span") > -1) {
      list2.push({
        isspan: true,
        arr: val.split("<span"),
      });
    } else {
      list2.push({
        isspan: false,
        arr: val,
      });
    }
  });
  var list3 = [];
  list2.forEach((val) => {
    if (val.isspan) {
      list3.push({
        ...val,
        style: val.arr[1].split(">")[0],
        span: val.arr[1].split(">")[1],
      });
    } else {
      list3.push({
        ...val,
      });
    }
  });
  var html = "";
  list3.forEach((val) => {
    if (val.isspan) {
      html = html + val.arr[0];
      var span = "";
      for (var a = 0; a < val.span.length; a++) {
        span = span + `<span${val.style}>${val.span[a]}</span>`;
      }
      html = html + span;
    } else {
      html = html + val.arr;
    }
  });
  return html;
}
onShow(() => {});
let item = ref({});
let info = ref({});
let id = ref("");
let rand_num = ref("");
let showPopup = ref(false);
let swiperHeight = ref(67);
let goBack = () => {
  let page = getCurrentPages();
  if (page.length == 1) {
    uni.switchTab({
      url: "/pages/deal/deal",
    });
  } else {
    uni.navigateBack();
  }
  // console.log('page',page)
};
let show = ref(false);
let takephotos = () => {
  // var dom = document.getElementById('swiperItem'); // 获取dom元素
  // if(dom&&dom.children[1]){
  // 	swiperHeight.value=67+dom.children[1].clientHeight
  // }else{
  // 	swiperHeight.value=67
  // }
  // html2canvas(dom).then((canvas) => {
  // 	url.value = canvas.toDataURL("image/png");
  // 	show.value = true
  // });
  // var swiper = document.getElementById('copyswiperItem'); // 获取dom元素
  // var dom = document.getElementById('content1'); // 获取dom元素
  // var dom1 = document.getElementById('copycontent'); // 获取dom元素
  //   dom1.innerHTML=dom.innerHTML
  //   let res = domTrans(dom1)
  //   // console.log(1223,res)
  //           let html = forFn(res)
  // 		  dom1.innerHTML=html
  //   html2canvas(swiper,{
  // 	   allowTaint: true,
  // 	  useCORS: true
  //   }).then((canvas) => {
  //     url.value = canvas.toDataURL("image/png").replace('image/png', 'image/octet-stream');
  // 	show.value=true
  //   });
  url.value = canvasValue.value
    .toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
  show.value = true;
};
let url = ref();
let content = `
						<p>露从今夜白，月是故乡明</p>
						<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
					`;
let list3 = ref([
  "https://cdn.uviewui.com/uview/swiper/swiper3.png",
  "https://cdn.uviewui.com/uview/swiper/swiper2.png",
  "https://cdn.uviewui.com/uview/swiper/swiper1.png",
]);
onPullDownRefresh(() => {
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 1000);
});
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) {
      if (arr[i].content.includes("&nbsp;")) {
        let cArr = arr[i].content.split("&nbsp;").map((item) => item.split(""));
        let a = cArr.length - 1;
        for (let i = 0; i < a; i++) {
          cArr.splice(i + 2, 0, "&nbsp;");
        }
        tArr = cArr.flat();
      } else {
        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 filterDetail(str) {
  let detail = str.split('<font style="">');
  detail = detail.map((item, index) => {
    return !index ? item : item.replace("</font>", "");
  });
  return detail.join("");
}
// 提取元素属性
function getAttribute(dom) {
  let attributes = {};
  //   let empty = true;
  Array.from(dom.attributes).map((item) => {
    attributes[item.nodeName] = item.nodeValue;
    // empty = false;
  });
  return attributes;
}

function hexToRgb(val) {
  //HEX十六进制颜色值转换为RGB(A)颜色值
  // 16进制颜色值的正则
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  // 把颜色值变成小写
  var color = val.toLowerCase();
  var result = "";
  if (reg.test(color)) {
    // 如果只有三位的值，需变成六位，如：#fff => #ffffff
    if (color.length === 4) {
      var colorNew = "#";
      for (var i = 1; i < 4; i += 1) {
        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
      }
      color = colorNew;
    }
    // 处理六位的颜色值，转为RGB
    var colorChange = [];
    for (var i = 1; i < 7; i += 2) {
      colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
    }
    result = colorChange.join(",");
    return {
      rgb: result,
      r: colorChange[0],
      g: colorChange[1],
      b: colorChange[2],
    };
  } else {
    result = "无效";
    return { rgb: result };
  }
}
let canvasValue = ref({});
function createCanvas() {
  var swiper = document.getElementById("copyswiperItem"); // 获取dom元素
  var dom = document.getElementById("content1"); // 获取dom元素
  var dom1 = document.getElementById("copycontent"); // 获取dom元素
  dom1.innerHTML = dom.innerHTML;
  let res = domTrans(dom1);
  let html = forFn(res);
  dom1.innerHTML = html;
  html2canvas(swiper, {
    allowTaint: true,
    useCORS: true,
    ignoreElements: (e) => {
      if (e.contains(swiper) || swiper.contains(e)) {
        return false;
      }
      return true;
    },
  }).then((canvas) => {
    canvasValue.value = canvas;
  });
}
</script>

<style lang="scss">
.fontWeight {
  font-weight: bold;
  color: #000;
  font-size: 30rpx;
}
.warp {
  padding: 0 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.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: 30rpx;
    margin: 62rpx 0 40rpx;
  }

  // background-color: #fff;
}
.labelBox {
  padding: 0 15px;
  margin: 10rpx 0;
  display: flex;
  flex-wrap: wrap;
  .labelItem {
    margin-right: 20rpx;
    margin-bottom: 5rpx;
    font-size: 20rpx;
    color: #fff;
    border-radius: 30rpx;
    padding: 7rpx 16rpx;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    // background-color: #A5CF49;
  }
}
.content {
  padding-left: 10rpx;
  padding-right: 10rpx;
  overflow: hidden;
  position: relative;
  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;
    }
  }
}
.popup {
  overflow: hidden;
  .notice {
    padding: 24rpx 28rpx;
    font-size: 28rpx;
    .noticeTitle {
      font-weight: bold;
      text-align: center;
    }
    .noticeInfo {
      height: 500rpx;
      overflow: scroll;
    }
  }
  .popupBottom {
    display: flex;
    justify-content: right;
    padding: 20rpx 28rpx;
    height: 160rpx;
    .back {
      display: flex;
      justify-content: center;
      text-align: center;
      font-size: 28rpx;
      color: #fff;
      width: 162rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: #a5cf49;
      border-radius: 40rpx;
    }
  }
  .popupTop {
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26rpx;
    background: linear-gradient(135deg, #f9ffe9 0%, #ddffda 100%);

    .contactInfo {
      flex: 1;
      font-size: 36rpx;
    }
    image {
      width: 160rpx;
      height: 160rpx;
    }
  }
}

.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;
}

.swiper-item {
  position: fixed;
  top: 9999px;

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

    image {
      margin-right: 4rpx;
      width: 112rpx;
      height: 112rpx;
    }

    .warn {
      font-size: 32rpx;
      color: #ff2828;
    }
    .title {
      margin-left: 4rpx;
    }
  }
}

.tabbar {
  bottom: 0;
  padding: 20rpx 28rpx;
  position: fixed;
  width: 750rpx;
  height: 160rpx;
  background: #ffffff;
  display: flex;
  justify-content: space-between;

  .back {
    display: flex;
    justify-content: center;
    font-size: 28rpx;
    color: #fff;
    width: 162rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    background: #a5cf49;
    border-radius: 40rpx;
  }

  .price {
    line-height: 80rpx;
    font-size: 24rpx;
    color: #333333;

    text {
      color: #ff2828;
    }

    .bold {
      font-weight: bold;
      font-size: 40rpx;
    }
  }
}

.productInfo {
  margin-bottom: 10rpx;
  background-color: #fff;
  padding: 20rpx 32rpx;

  .infoTitle {
    margin-bottom: 10rpx;
    font-size: 28rpx;
    font-weight: bold;
  }

  .statement {
    font-size: 24rpx;
  }
}

.label {
  padding: 24rpx 32rpx;
  background-color: #fff;
  margin: 10rpx 0;

  .u-fade-enter-active {
    margin-right: 20rpx;
  }
}

page {
  padding-bottom: 170rpx;

  .attributeBox {
    font-size: 28rpx;
    color: #666666;

    .attributeItem {
      margin-top: 20rpx;
      display: flex;

      .labelItem {
        flex: 1;
      }
    }
  }

  .baseInfo {
    background-color: #fff;
    padding: 22rpx 30rpx;

    .titleBox {
      display: flex;
      justify-content: space-between;

      .wechat {
        font-size: 40rpx;
        color: #1677ff;
        font-weight: bold;
      }

      .takeImg {
        width: 206rpx;
        height: 52rpx;
        line-height: 52rpx;
        background: #a5cf49;
        border-radius: 40rpx;
        font-size: 28rpx;
        color: #ffff;
        font-weight: bold;
        text-align: center;
      }
    }
  }
}
</style>