|
@@ -1,16 +1,32 @@
|
|
|
<script setup>
|
|
|
import { ref, watch, nextTick } from "vue";
|
|
|
import { useRoute } from "vue-router";
|
|
|
+import { useStore } from "vuex";
|
|
|
+import { bannerGetQrcode } from "@/api/report";
|
|
|
|
|
|
const route = useRoute();
|
|
|
const imgBg = ref("");
|
|
|
+const bannerId = ref("");
|
|
|
+const enable = ref("");
|
|
|
+const title = ref("");
|
|
|
+const store = useStore();
|
|
|
|
|
|
+
|
|
|
+const qrcodeImg = ref("");
|
|
|
+
|
|
|
+console.log(store.state.userInfo);
|
|
|
watch(
|
|
|
() => route.query.imgBg,
|
|
|
(e) => {
|
|
|
if (e) {
|
|
|
nextTick(() => {
|
|
|
imgBg.value = route.query.imgBg;
|
|
|
+ bannerId.value = route.query.id;
|
|
|
+ enable.value = route.query.enable;
|
|
|
+ title.value = route.query.title;
|
|
|
+ qrcodeImg.value = '';
|
|
|
+ console.log(enable.value);
|
|
|
+ enable.value == 1 && store.state.userInfo && getQrcCode();
|
|
|
});
|
|
|
}
|
|
|
},
|
|
@@ -19,24 +35,45 @@ watch(
|
|
|
deep: true,
|
|
|
}
|
|
|
);
|
|
|
+
|
|
|
+// // 获取code 二维码
|
|
|
+async function getQrcCode() {
|
|
|
+ const res = await bannerGetQrcode({
|
|
|
+ UserId: store.state.userInfo.user_id,
|
|
|
+ BannerId: bannerId.value,
|
|
|
+ Remark: title.value,
|
|
|
+ });
|
|
|
+ if (res.code == 200) {
|
|
|
+ qrcodeImg.value = res.data;
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="container-disseminate">
|
|
|
- <img v-if="imgBg" :src="imgBg" alt="" />
|
|
|
+ <img class="bg-img" v-if="imgBg" :src="imgBg" alt="" />
|
|
|
+ <img class="qrcode-img" v-if="qrcodeImg" :src="qrcodeImg" alt="" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.container-disseminate {
|
|
|
+ position: relative;
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- img {
|
|
|
- margin-left: -50px;
|
|
|
+ .bg-img {
|
|
|
width: 820px;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+ .qrcode-img {
|
|
|
+ position: absolute;
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 90px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|