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 v-if="item.type == 3" :style="backPosition(item)">
        <tki-qrcode
          :cid="item.codeUrl"
          ref="qrcode"
          :val="item.codeUrl"
          :size="item.height * 2"
          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";
export default {
  data() {
    return {
      options: {},
      posterConfig: [],
      billDetail: {},
      bg: {},
    };
  },
  onLoad(options) {
    this.options = options;
    this.getSharePoster();
  },
  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]);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bill-ward {
  position: relative;
}
</style>