|
|
@@ -1,51 +1,111 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <tki-qrcode
|
|
|
- ref="qrcode"
|
|
|
- :val="val"
|
|
|
- :size="size"
|
|
|
- :unit="unit"
|
|
|
- :background="background"
|
|
|
- :foreground="foreground"
|
|
|
- :pdground="pdground"
|
|
|
- :lv="lv"
|
|
|
- :onval="onval"
|
|
|
- :loadMake="loadMake"
|
|
|
- @result="qrR"
|
|
|
- />
|
|
|
+ <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 {
|
|
|
- name: "SaasManagerIndex",
|
|
|
-
|
|
|
data() {
|
|
|
return {
|
|
|
- val: "生成二维码内容", //要生成二维码的值
|
|
|
- size: 250, // 二维码的大小 单位为rpx
|
|
|
- background: "#ffffff", //背景色
|
|
|
- foreground: "#000000",
|
|
|
- pdground: "#000000", //角标色
|
|
|
- icon: "", //二维码图标
|
|
|
- iconsize: 30, //二维码图标大小
|
|
|
- lv: 3, //二维码容错级别
|
|
|
- onval: true, //val值变化时自动重新生成二维码
|
|
|
- unit: "upx",
|
|
|
- loadMake: true, //组件加载完成后自动生成二维码
|
|
|
- src: "",
|
|
|
- showLoading: true, //loading
|
|
|
- loadingText: "loading内容", //loading内容
|
|
|
- title: "Hello",
|
|
|
+ options: {},
|
|
|
+ posterConfig: [],
|
|
|
+ billDetail: {},
|
|
|
+ bg: {},
|
|
|
};
|
|
|
},
|
|
|
+ onLoad(options) {
|
|
|
+ this.options = options;
|
|
|
+ this.getSharePoster();
|
|
|
+ },
|
|
|
components: {
|
|
|
tkiQrcode,
|
|
|
},
|
|
|
|
|
|
- methods: {},
|
|
|
+ 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></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bill-ward {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+</style>
|