jingcai-buyer/src/pages/shop/SharePage.vue

52 lines
2.4 KiB
Vue

<template>
<PageLayout class="shop-share-page fit">
<div class="text-amber-3 text-center relative-position no-scroll" ref="domRef">
<img src="~assets/bg2.png" style="width:100%; float:left"/>
<div class="absolute full-width full-height" style="top:0;bottom:0;left:0;right:0;"></div>
<div class="text-weight-bold absolute full-width text-subtitle1" style="top:5%; text-shadow:rgb(126 12 13) 0px 0px 23px">欢迎来到{{selfStore.shop.name}}店铺</div>
<div class="shop-share absolute" style="width:74%; left:13%; top:37%; height:48%;">
<!-- <div class="text-weight-bold text-subtitle1 q-pb-sm">欢迎来到必连红竞彩店店铺</div> -->
<div class="bordered q-py-xs q-mx-lg text-subtitle2">安全可靠 扫码下载</div>
<div class="bg-white q-my-lg q-pa-sm inline-block" style="width:62%;">
<q-img crossorigin="anonymous" :src="url" ratio="1" width="100%"/>
</div>
<p class="q-mb-sm"><span class="rounded-borders bg-amber-3 text-red-10 q-px-xs q-mr-sm">1</span>真实店铺</p>
<p class="q-mb-sm"><span class="rounded-borders bg-amber-3 text-red-10 q-px-xs q-mr-sm">2</span>支付方式齐全</p>
<p class="q-mb-sm"><span class="rounded-borders bg-amber-3 text-red-10 q-px-xs q-mr-sm">3</span>发单赚佣金</p>
</div>
</div>
<template #footer>
<q-footer>
<q-btn square class="full-width" glossy color="amber-3" text-color="red-10" label="" @click="onClickSavePicture">
<div class="safe-padding-bottom">请截图分享
</div>
</q-btn>
</q-footer>
</template>
</PageLayout>
</template>
<script setup>
import { ref,onMounted } from "vue";
import { useSelfStore } from "stores/self";
import { api } from 'boot/axios'
import { savePicture } from 'src/utils/tools'
import html2canvas from 'html2canvas';
import { useQuasar } from 'quasar';
const selfStore = useSelfStore();
const $q = useQuasar()
const domRef = ref(null)
let size = Math.ceil(window.innerWidth*(window.devicePixelRatio||1)/2)
size = Math.ceil(size/100)*100
const url = api.getQrcodeUrl(api.domain+'register/index.html?shopsn='+selfStore.shop.shop_sn+'&agtcid='+selfStore.user.id,size)
function onClickSavePicture(){
savePicture(domRef.value,selfStore.shop.name)
}
</script>
<style lang="scss" scoped>
// .shop-share-page{
// background:url("assets/bg2.png") no-repeat center 20px;
// background-size:100%;
// }
</style>