saas_manager/pages/bill/index.vue

<template>
  <view class="bill-ward">
    <view
      v-for="(item, index) in posterConfig"
      :key="index"
      :style="backPosition(item)"
    >
      <image
        :style="item.css"
        v-if="(item.type == 0 || item.type == 2) && item.checked"
        :src="$method.splitImgHost(item.name)"
        mode=""
      />

      <view
        :style="item.css"
        v-if="item.type == 1"
        style="white-space: pre-wrap"
      >
        {{ item.name }}
      </view>

      <view class="code-box" v-if="item.type == 3">
        <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, bindLink } from "@/utils/bill";
import { authorize, backOpenId } from "@/common/authorize";
import { openidLogin } from "@/utils/login";
import tkiQrcode from "tki-qrcode";
import wechat from "@/common/wechat";
export default {
  data() {
    return {
      options: {},
      posterConfig: [],
      billDetail: {},
      bg: {},
    };
  },
  onLoad(options) {
    this.options = options;
    uni.setStorageSync("BillHerf", window.location.href);
  },
  onShow() {
    this.backUrl();
    backOpenId(this.login);
    authorize();
    this.getSharePoster();
  },
  components: {
    tkiQrcode,
  },

  methods: {
    getSharePoster() {
      getSharePoster(this.options).then((res) => {
        this.billDetail = res;
        let posterConfig = JSON.parse(res.posterConfig);
        this.posterConfig = this.changeData(posterConfig);
        this.share(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]);
      });
    },
    bindLink() {
      bindLink({
        linkCode: this.options.linkCode,
        distributionId: this.options.distributionId,
      });
    },
    share(data) {
      wechat
        .share({
          title: this.billDetail.activityName,
          desc: data.advertise.name,
          imgUrl: this.$method.splitImgHost(data.goods.name),
          link: this.backUrl(),
        })
        .then((res) => {
          this.$method.isLogin() && this.bindLink();
        });
    },
    login(openid) {
      openidLogin({ openid }).then((data) => {
        this.$store.commit("LOGIN_CB", data);
        this.$store.dispatch("getUserInfo");
      });
    },
    backUrl() {
      let url = window.location.href;
      if (url.includes("&code")) {
        url = url.split("&code")[0];
      }
      return url;
    },
  },
};
</script>

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