banma/pages/deal/product_info.vue

<template>
  <u-loading-page :loading="loading"></u-loading-page>

  <view class="wrap" v-if="!loading">
    <!-- 轮播图 -->
    <view class="swiper">
      <u-swiper
        indicator
        circular
        height="338"
        indicatorMode="dot"
        imgMode="scaleToFill"
        :list="detail.images_arr"
        @change="swiperChange"
        @click="swiperClick"
      ></u-swiper>
    </view>

    <!-- 商品信息 -->
    <view class="baseInfo">
      <view class="titleBox">
        <view class="wechat"> 客服微信:{{ platform_info.kfwx }} </view>
        <view class="takeImg" @click="popup_diagram = true">
          生成斑马简图
        </view>
      </view>
      <view class="attributeBox">
        <view class="attributeItem">
          <view class="labelItem">
            编号：<text class="fontWeight">{{ detail.code }}</text>
          </view>
          <view class="labelItem">
            区服：<text class="fontWeight">{{ detail.server }}</text>
          </view>
        </view>
        <view class="attributeItem">
          <view class="labelItem">
            金伙伴：<text class="fontWeight">{{ detail.partner }}</text>
          </view>
          <view class="labelItem">
            vip：<text class="fontWeight">{{ detail.level }}</text>
          </view>
        </view>
        <view class="attributeItem">
          <view class="labelItem">
            战力：<text class="fontWeight">{{ detail.force }}亿</text>
          </view>
          <view class="labelItem">
            速度：<text class="fontWeight">{{ detail.speed }}万</text>
          </view>
        </view>
        <view class="attributeItem">
          <view class="labelItem">
            法伤：<text class="fontWeight">{{ detail.atk }}万</text>
          </view>

          <view class="labelItem">
            冰冻：<text class="fontWeight">{{ detail.property }}万</text>
          </view>
        </view>
        <view class="attributeItem">
          <view class="labelItem">
            渡劫：<text class="fontWeight">{{ detail.dj_level }}</text>
          </view>
          <view class="labelItem">
            小号数量：<text class="fontWeight">{{ detail.children }}</text>
          </view>
        </view>
        <view class="attributeItem">
          <view class="labelItem">
            是否榜一：<text class="fontWeight">{{
              detail.top_one == 1 ? "是" : "否"
            }}</text>
          </view>
          <view class="labelItem">
            账号类型：<text class="fontWeight">{{
              detail.account_type_text
            }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- tag标签 -->
    <view class="labelBox">
      <view
        class="labelItem"
        :style="{
          backgroundImage: 'url(' + BASE_URL + bg_list.top_bg.value + ')',
        }"
        v-if="detail.is_top == 1"
      >
        置顶
      </view>

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

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

    <!-- 商品详情 -->
    <view class="productInfo">
      <view class="infoTitle"> 商品详情 </view>
      <view class="">
        <u-parse :content="detail.detail"></u-parse>
      </view>
      <view class="" v-if="detail.content_switch == 1">
        <u-parse :content="detail.detail2"></u-parse>
      </view>
    </view>

    <!-- 免责声明 -->
    <view class="productInfo">
      <view class="infoTitle"> 免责声明 </view>
      <view class="statement">
        <u-parse :content="platform_info.disclaimer"></u-parse>
      </view>
    </view>

    <!-- 底部 -->
    <view class="footer">
      <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">{{ detail.money }}</text
        ><text>米</text>
      </view>
      <view class="back purchase" @click="popup_flow = true"> 流程规则 </view>
    </view>

    <!-- 截图模板 -->
    <view class="template" id="template">
      <view
        class="titleBox"
        :style="
          meun_info.jt_bg1
            ? { background: `url(${BASE_URL + meun_info.jt_bg1})` }
            : ''
        "
      >
        <limeQrcodeVue
          v-if="image_detail.id"
          size="112rpx"
          ref="qrcodeRef"
          :value="
            BASE_URL1 +
            `/h5/#/pages/deal/product_info?id=${id}&rand_num=${rand_num}`
          "
        ></limeQrcodeVue>
        <view class="title">
          <p>{{ image_detail.title1 }}</p>
          <p>{{ image_detail.title2 }}</p>
          <p class="warn">{{ image_detail.title3 }}</p>
        </view>
      </view>
      <view
        class="content"
        v-if="image_detail.detail"
        :style="
          meun_info.jt_bg2
            ? { background: 'url(' + BASE_URL + meun_info.jt_bg2 + ')' }
            : ''
        "
      >
        <u-parse :content="image_detail.detail"></u-parse>
        <view
          class="watermark"
          v-if="
            image_detail.watermark_info &&
            (image_detail.watermark_info.type == 1 ||
              image_detail.watermark_info.type == 3)
          "
        >
          <image
            v-if="
              image_detail.watermark_info.image &&
              image_detail.watermark_info.type == 1
            "
            v-for="i in 100"
            :style="image_detail.style"
            :src="BASE_URL + image_detail.watermark_info.image"
          ></image>
          <text
            v-if="
              image_detail.watermark_info.water_text &&
              image_detail.watermark_info.type == 3
            "
            v-for="i in 100"
            :style="image_detail.style"
            >{{ image_detail.watermark_info.water_text }}</text
          >
        </view>
        <view
          class="watermark-position"
          v-if="
            image_detail.watermark_info &&
            (image_detail.watermark_info.type == 2 ||
              image_detail.watermark_info.type == 4)
          "
          :style="image_detail.style_position"
        >
          <image
            v-if="
              image_detail.watermark_info.image &&
              image_detail.watermark_info.type == 2
            "
            :style="image_detail.style"
            :src="BASE_URL + image_detail.watermark_info.image"
          ></image>
          <text
            v-if="
              image_detail.watermark_info.water_text &&
              image_detail.watermark_info.type == 4
            "
            :style="image_detail.style"
            >{{ image_detail.watermark_info.water_text }}
          </text>
        </view>
      </view>
    </view>

    <!-- 流程规则 -->
    <u-popup
      :show="popup_flow"
      :round="10"
      mode="bottom"
      @close="popup_flow = false"
    >
      <view class="popup">
        <view class="popupTop">
          <view class="contactInfo">
            <p>{{ platform_info.notice_text }}</p>
          </view>
          <image :src="BASE_URL + platform_info.noticeimage" mode=""></image>
        </view>
        <view class="notice">
          <!-- <view class="noticeTitle">
						购买须知
					</view> -->
          <view class="noticeInfo">
            <u-parse :content="platform_info.buy_notes"></u-parse>
          </view>
          <view class="popupBottom">
            <view class="back" @click="popup_flow = false">
              <u-icon name="home-fill" color="#fff"></u-icon>
              返回
            </view>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 已出售 -->
    <u-overlay :show="popup_sell" @click="popup_sell = false">
      <view class="window">
        <view class="is-sell" @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>

    <!-- 简图 -->
    <u-overlay :show="popup_diagram" @click="popup_diagram = false">
      <view class="window">
        <view class="diagram" @tap.stop>
          <image :src="diagram_url" mode="widthFix"></image>
          <!-- <p @touchstart.prevent="touchstart" @touchend.prevent="touchend">
            长按保存到本地
          </p> -->
          <p @click="popup_diagram = false">长按保存到本地</p>
        </view>
      </view>
    </u-overlay>
  </view>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { onLoad, onShow, onPullDownRefresh, onReady } from "@dcloudio/uni-app";
import limeQrcodeVue from "@/uni_modules/lime-qrcode/components/l-qrcode/l-qrcode.vue";
// import html2canvas from "html2canvas";
// import domtoimage from "dom-to-image";
import domtoimage from "@/components/dom-to-image.js";
import { BASE_URL, BASE_URL1 } from "@/utils/http.js";
import {
  getGoodsDetail,
  getplatformeditor,
  getsimpleimagesdetail,
  getplatformmeun,
} from "@/utils/api.js";

const id = ref(""), // 商品id
  rand_num = ref(""),
  detail = ref({}), // 商品详情
  bg_list = ref({}), // tag信息
  meun_info = ref({}), // tabbar等信息
  platform_info = ref({}), // 平台信息
  popup_sell = ref(false), // 已售出弹窗
  popup_flow = ref(false), // 流程弹窗
  popup_diagram = ref(false), // 简图弹窗
  diagram_url = ref(""), // 简图地址
  current = ref(0), // 轮播图当前页
  image_detail = ref({}), // 简图详情
  loop = ref(() => {}), // 长按延时事件
  loading = ref(true); // 加载状态

// 轮播图切换
function swiperChange(e) {
  current.value = e.current;
}
// 轮播图点击---预览
function swiperClick() {
  uni.previewImage({
    // 预览时，默认显示图片的索引
    current: current.value,
    // 所有图片 url 地址的数组
    urls: detail.value.images_arr,
  });
}
// 返回
function goBack() {
  let page = getCurrentPages();
  if (page.length == 1) {
    uni.switchTab({
      url: "/pages/deal/deal",
    });
  } else {
    uni.navigateBack();
  }
}

// 过滤空标签
function filterDetail(str) {
  let detail = str.split('<font style="">');
  detail = detail.map((item, index) => {
    return !index ? item : item.replace("</font>", "");
  });
  return detail.join("");
}

// 生成简图图片---domtoimage截图
function createCanvas() {
  let template = document.querySelector("#template"); // 获取dom元素

  // if (diagram_url.value) return (popup_diagram.value = true);
  const height = template.clientHeight,
    width = template.clientWidth;
  domtoimage
    .toPng(template, {
      bgcolor: "#fff",
      cacheBust: true,
      width: width,
      height: height,
      scale: 4,
      filter: (el) => {
        if (el.contains(template) || template.contains(el)) {
          return true;
        }
        return false;
      },
    })
    .then(function (dataUrl) {
      diagram_url.value = dataUrl.replace("image/png", "image/octet-stream");
      // popup_diagram.value = true;
    })
    .catch((err) => {
      console.log(err);
    });
}

// 长按开始
function touchstart() {
  clearTimeout(loop.value);
  loop.value = setTimeout(() => {
    saveImage();
  }, 600);
}

// 长按结束
function touchend() {
  clearTimeout(loop.value);
}

// 保存图片
function saveImage() {
  var arr = diagram_url.value.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  // 将Blob对象转换成文件并下载到本地
  var blob = new Blob([u8arr], {
    type: mime,
  });
  var a = document.createElement("a");
  a.download = detail.value.code + "简图.png";
  a.href = URL.createObjectURL(blob);
  a.click();
}

// 请求数据
function getData(url) {
  switch (url) {
    case "getplatformeditor": // 获取平台信息
      getplatformeditor().then(({ data }) => {
        platform_info.value = data;
      });
      break;
    case "getGoodsDetail": // 获取商品信息
      getGoodsDetail({
        goods_id: id.value,
        rand_num: rand_num.value,
      }).then(({ data, code }) => {
        if (!code || !data.detail.status) {
          popup_sell.value = true;
          loading.value = false;
          return;
        } else {
          detail.value = data.detail;
          bg_list.value = data.bg_list;
        }
        detail.value.images_arr = detail.value.images_arr.map((item) => {
          return BASE_URL + item;
        });
        if (detail.value.id && image_detail.value) {
          loading.value = false;
          // setTimeout(() => {
          //   createCanvas();
          // }, 1000);
          nextTick(() => {
            createCanvas();
          });
        }
      });
      break;
    case "getsimpleimagesdetail": // 获取水印信息
      getsimpleimagesdetail({ goods_id: id.value }).then(({ data }) => {
        let { watermark_info } = data,
          family_arr = [
            "fangsong",
            "Helvetica",
            "Arial",
            "Tahoma",
            "Microsoft YaHei",
            "SimSun",
          ];
        // data.detail = filterDetail(data.detail);
        data.style = {
          opacity: (100 - watermark_info.opacity * 1) * 0.01,
          color: watermark_info.color,
          fontSize: watermark_info.text_font + "px",
          fontWeight: watermark_info.bold == 1 ? "bold" : "",
          // fontFamily: `typeface${watermark_info.typeface}`,
          fontFamily: family_arr[watermark_info.typeface - 1],
          transform: `rotate(${watermark_info.angle}deg)`,
          // textShadow:'0 0 5px #000'
        };
        data.style_position = {};
        if (watermark_info.type == "2" || watermark_info.type == "4") {
          // let box_height =
          //   30 + Number(watermark_info.hh) + Number(watermark_info.hh);
          // switch (watermark_info.waterPos) {
          //   case "1":
          //     data.style_position = {
          //       top: 0,
          //       justifyContent: "flex-start",
          //       ...data.style_position,
          //     };
          //     break;
          //   case "2":
          //     data.style_position = {
          //       top: 0,
          //       justifyContent: "center",
          //       ...data.style_position,
          //     };
          //     break;
          //   case "3":
          //     data.style_position = {
          //       top: 0,
          //       justifyContent: "flex-end",
          //       ...data.style_position,
          //     };
          //     break;
          //   case "4":
          //     data.style_position = {
          //       top: `calc(50% - ${box_height / 2}px)`,
          //       justifyContent: "flex-start",
          //       ...data.style_position,
          //     };
          //     break;
          //   case "5":
          //     data.style_position = {
          //       top: `calc(50% - ${box_height / 2}px)`,
          //       justifyContent: "center",
          //       ...data.style_position,
          //     };
          //     break;
          //   case "6":
          //     data.style_position = {
          //       top: `calc(50% - ${box_height / 2}px)`,
          //       justifyContent: "flex-end",
          //       ...data.style_position,
          //     };
          //     break;
          //   case "7":
          //     data.style_position = {
          //       bottom: 0,
          //       justifyContent: "flex-start",
          //       ...data.style_position,
          //     };
          //     break;
          //   case "8":
          //     data.style_position = {
          //       bottom: 0,
          //       justifyContent: "center",
          //       ...data.style_position,
          //     };
          //     break;
          //   case "9":
          //     data.style_position = {
          //       bottom: 0,
          //       justifyContent: "flex-end",
          //       ...data.style_position,
          //     };
          //     break;
          //   default:
          //     data.style_position = {
          //       top: 0,
          //       justifyContent: "flex-start",
          //       ...data.style_position,
          //     };
          // }
          data.style_position = {
            top: watermark_info.yy + "px",
            left: watermark_info.xx + "px",
          };
          if (watermark_info.type == "4") {
            data.style_position.height = data.style.lineHeight =
              data.style.fontSize;
          }
        } else if (watermark_info.type == "1" || watermark_info.type == "3") {
          Object.assign(data.style, {
            marginTop: watermark_info.hh + "px",
            marginBottom: watermark_info.hh + "px",
            marginLeft: watermark_info.ww + "px",
            marginRight: watermark_info.ww + "px",
          });
        }
        image_detail.value = data;
        if (detail.value.id && image_detail.value) {
          loading.value = false;
          // setTimeout(() => {
          //   createCanvas();
          // }, 1000);
          nextTick(() => {
            createCanvas();
          });
        }
      });
      break;
    case "getplatformmeun": // 获取tabbar等信息
      getplatformmeun().then(({ data }) => {
        uni.setNavigationBarTitle({
          title: data.name,
        });
        meun_info.value = data;
      });
      break;
  }
}

onLoad((option) => {
  id.value = option.id;
  rand_num.value = option.rand_num;
  getData("getplatformeditor");
  getData("getGoodsDetail");
  getData("getsimpleimagesdetail");
  getData("getplatformmeun");
});
onReady(() => {});
onShow(() => {
  window.scrollTo(0, 0);
});
onPullDownRefresh(() => {
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 1000);
});
</script>

<style lang="scss" scoped>
page {
  user-select: none;
  width: 100%;
  display: flex;
  justify-content: center;
}
.wrap {
  padding-bottom: 160rpx;
  width: 750rpx;

  .swiper {
  }
  .baseInfo {
    width: 100%;
    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;
      }
    }
    .attributeBox {
      font-size: 28rpx;
      color: #666666;

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

        .labelItem {
          flex: 1;
        }
        .fontWeight {
          font-weight: bold;
          color: #000;
          font-size: 30rpx;
        }
      }
    }
  }
  .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;
    }
  }
  .productInfo {
    margin-bottom: 10rpx;
    background-color: #fff;
    padding: 20rpx 32rpx;

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

    .statement {
      font-size: 24rpx;
    }
  }
  .footer {
    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;
      }
    }
  }
  .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: 32rpx;
        margin-right: 20rpx;
      }
      image {
        width: 300rpx;
        height: 300rpx;
      }
    }
  }
  .window {
    padding: 0 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .is-sell {
      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;
      }
    }
    .diagram {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 694px;
      height: auto;
      user-select: none;

      image {
        width: 100%;
      }

      p {
        font-size: 48rpx;
        color: #fff;
        margin-top: 12rpx;
        width: 100%;
        text-align: center;
      }
    }
  }
  .template {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
    max-width: 60vh;

    .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;
      }
    }
    .content {
      padding-left: 10rpx;
      padding-right: 10rpx;
      overflow: hidden;
      position: relative;
      word-break: break-all;
      word-wrap: break-word;
      overflow: hidden;
      position: relative;
      .watermark {
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        top: 0;
        left: 0;
        right: 0;
        image {
          width: 100rpx;
          height: 100rpx;
        }
      }
      .watermark-position {
        position: absolute;
        height: 30rpx;
        width: 100%;
        display: flex;
        image {
          width: 100rpx;
          height: 100rpx;
        }
      }
      text {
        white-space: nowrap;
      }
    }
  }
}
</style>