saas_manager/pages/bill/index.vue

<template>
  <view class="bill-ward">
    <view v-for="(item, index) in posterConfig" :key="index">
      <image
        :style="item.css"
        v-if="item.type == 0 && item.checked"
        :src="$method.splitImgHost(item.name, true)"
        mode=""
      />
      <view :style="backPosition(item)" style="white-space: pre-wrap">
        <view :style="item.css" v-if="item.type == 1">
          {{ item.name }}
        </view>
      </view>
      <view :style="backPosition(item)">
        <image
          :style="item.css"
          v-if="item.type == 2"
          :src="$method.splitImgHost(item.name, true)"
          mode=""
        />
      </view>
      <view class="code-box" v-if="item.type == 3" :style="backPosition(item)">
        <tki-qrcode
          :cid="item.codeUrl"
          ref="qrcode"
          :val="item.codeUrl"
          :size="item.height * 2 - 20"
          unit="upx"
          background="#ffffff"
          foreground="#000000"
          pdground="#000000"
          :lv="3"
          :onval="true"
          :loadMake="true"
        />
      </view>
    </view>
  </view>
</template>

<script>
import { getSharePoster } from "@/utils/bill";
import tkiQrcode from "tki-qrcode";
import wechat from "@/common/wechat";
export default {
  data() {
    return {
      options: {},
      posterConfig: [],
      billDetail: {},
      bg: {},
    };
  },
  onLoad(options) {
    this.options = options;
    this.getSharePoster();
    this.share();
    uni.setStorageSync("BillHerf", window.location.href);
  },
  components: {
    tkiQrcode,
  },

  methods: {
    getSharePoster() {
      getSharePoster(this.options).then((res) => {
        this.billDetail = res;
        this.posterConfig = this.changeData(JSON.parse(res.posterConfig));
      });
    },
    changeData(data) {
      Object.keys(data)
        .filter((key) => {
          if (key == "distribution" || key == "cardCode") {
            data[key].codeUrl =
              this.billDetail[
                key == "distribution" ? "urlCard" : "urlActivity"
              ];
          }
          return data[key].checked;
        })
        .forEach((key) => this.backStyle(data[key].css));
      return Object.values(data);
    },
    px2rpx(data) {
      if (!data.includes("px")) {
        return data;
      }
      return data.split("px")[0] * 2 + "rpx";
    },
    backPosition(item) {
      return {
        position: "absolute",
        left: item.left * 2 + "rpx",
        top: item.top * 2 + "rpx",
        width: item.width * 2 + "rpx",
        height: item.height * 2 + "rpx",
      };
    },
    backStyle(item) {
      Object.keys(item).forEach((e) => {
        item[e] = this.px2rpx(item[e]);
      });
    },
    share() {
      //分享微信好友
      wechat.share({
        title: "穷期先生的名片",
        desc: "拥有多年财富管理经验的理财专家",
        imgUrl: "",
        link: "h.xyyxt.net",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bill-ward {
  position: relative;
  .code-box {
    padding: 10rpx;
    background: #ffffff;
    box-sizing: border-box;
  }
}
</style>