|
|
@@ -0,0 +1,318 @@
|
|
|
+<template>
|
|
|
+ <div class="storeCode">
|
|
|
+ <div class="paymentCode-left">
|
|
|
+ <div class="paymentCode-title">店铺商家二维码</div>
|
|
|
+ <template v-if="canvasImg == ''">
|
|
|
+ <!-- v-if="canvasImg == ''" -->
|
|
|
+ <div ref="paymentCodeCanvas" id="paymentCodeCanvas">
|
|
|
+ <div class="paymentCode-img" ref="businessCardCanvas" id="businessCardCanvas">
|
|
|
+ <div class="paymentCode-img-title">扫码消费有补贴</div>
|
|
|
+ <div class="img-box">
|
|
|
+ <img :src="codeInfo.shopCode" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="img-button">{{ codeInfo.shopName }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="paymentCode-img-box">
|
|
|
+ <el-image style="width: 463px; height: 595px" :src="canvasImg" :preview-src-list="srcList">
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="paymentCode-open">
|
|
|
+ <div class="open-icon">
|
|
|
+ <img src="@/assets/images/scan.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="open-text">打开微信扫一扫即可进入店铺</div>
|
|
|
+ </div>
|
|
|
+ <div class="paymentCode-btn" @click="downloadCode">下载收款码</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { shopSysGetById } from "@/api/shopSys"
|
|
|
+import QRCode from 'qrcode';
|
|
|
+// 引入 cookie 的库
|
|
|
+import Cookies from 'js-cookie'
|
|
|
+import html2canvas from 'html2canvas'
|
|
|
+export default {
|
|
|
+ created () {
|
|
|
+ this.generateCode()
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ codeInfo: {
|
|
|
+ shopName:'',
|
|
|
+ shopCode:''
|
|
|
+ },
|
|
|
+ canvasImg: '',
|
|
|
+ srcList: [],
|
|
|
+ // 支持支付方式数据
|
|
|
+ payList: [
|
|
|
+ {
|
|
|
+ url: require('@/assets/images/mode-img/1.png'),
|
|
|
+ text: '团蜂佣金'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require('@/assets/images/mode-img/2.png'),
|
|
|
+ text: '团蜂代金券'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require('@/assets/images/mode-img/3.png'),
|
|
|
+ text: '建行支付'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require('@/assets/images/mode-img/4.png'),
|
|
|
+ text: '团蜂交易金'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require('@/assets/images/mode-img/5.png'),
|
|
|
+ text: '微信支付'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require('@/assets/images/mode-img/6.png'),
|
|
|
+ text: '支付宝'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 没有 logo 的二维码图片
|
|
|
+ qCodeImg: '',
|
|
|
+ shopLogo:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // updated() {
|
|
|
+ // },
|
|
|
+ methods: {
|
|
|
+ // 生成二维码
|
|
|
+ async setQRcode() {
|
|
|
+ // https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/shop/shop-detail?shopId=494
|
|
|
+ // 获取本地存储的商家 id
|
|
|
+ let shopId = Cookies.get('shopID');
|
|
|
+ let urlCode = `https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/shop/shop-detail?shopId=${shopId}`
|
|
|
+ // 根据 qcode 生成二维码链接
|
|
|
+ // let imgCode = await QRCode.toDataURL(`https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/shop/shop-detail?shopId=${shopId}`)
|
|
|
+ // console.log(imgCode);
|
|
|
+ const qrCodeCanvas = document.createElement('canvas');
|
|
|
+ qrCodeCanvas.width = 300; // 根据需要调整二维码尺寸
|
|
|
+ qrCodeCanvas.height = 300; // 根据需要调整二维码尺寸
|
|
|
+ await QRCode.toCanvas(qrCodeCanvas, urlCode);
|
|
|
+ const ctx = qrCodeCanvas.getContext('2d');
|
|
|
+ const logo = new Image();
|
|
|
+ // 本地头像
|
|
|
+ logo.src = this.shopLogo;
|
|
|
+ // 解决跨域 重要
|
|
|
+ logo.setAttribute('crossOrigin', 'anonymous');
|
|
|
+ logo.onload = () => {
|
|
|
+ const logoSize = qrCodeCanvas.width * 0.26; // 根据需要调整logo尺寸
|
|
|
+ const logoX = (qrCodeCanvas.width - logoSize) / 2;
|
|
|
+ const logoY = (qrCodeCanvas.height - logoSize) / 2;
|
|
|
+ // 绘制二维码
|
|
|
+ ctx.drawImage(logo, logoX, logoY, logoSize, logoSize);
|
|
|
+ // 将生成的二维码插入到页面中
|
|
|
+ this.codeInfo.shopCode = qrCodeCanvas.toDataURL();
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.generateImage()
|
|
|
+ })
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async generateCode() {
|
|
|
+ const res = await shopSysGetById({ })
|
|
|
+ this.codeInfo.shopName = res.data.shopName
|
|
|
+ this.shopLogo = res.data.shopLogo
|
|
|
+ // 生成 qCode 二维码
|
|
|
+ this.setQRcode()
|
|
|
+ },
|
|
|
+ generateImage() {
|
|
|
+ html2canvas(this.$refs.paymentCodeCanvas, {
|
|
|
+ dpi: 300,
|
|
|
+ useCORS: false,
|
|
|
+ allowTaint: true,
|
|
|
+ logging: false,
|
|
|
+ scale: 1,
|
|
|
+ windowHeight: this.$refs.businessCardCanvas?.offsetHeight,
|
|
|
+ width: this.$refs.businessCardCanvas?.offsetWidth,
|
|
|
+ height: this.$refs.businessCardCanvas?.offsetHeight
|
|
|
+ }).then((canvas) => {
|
|
|
+ this.canvasImg = canvas.toDataURL('image/png');
|
|
|
+ this.srcList.push(this.canvasImg)
|
|
|
+ }).catch(() => {
|
|
|
+ console.log("生成图片错误");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ downloadCode() {
|
|
|
+ this.$confirm('您确定需要下载商家二维码吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.setImgSize(463, 595)
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '取消下载成功'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 设置图片大小
|
|
|
+ setImgSize(width, height) {
|
|
|
+ const canvas = document.createElement('canvas')
|
|
|
+ const ctx = canvas.getContext('2d')
|
|
|
+
|
|
|
+ // 设置canvas尺寸
|
|
|
+ canvas.width = width
|
|
|
+ canvas.height = height
|
|
|
+
|
|
|
+ // 绘制图片到canvas上
|
|
|
+ const img = new Image()
|
|
|
+ img.src = this.canvasImg
|
|
|
+ img.onload = () => {
|
|
|
+ ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
|
|
|
+
|
|
|
+ // 将canvas内容转换为base64格式的图片数据
|
|
|
+ const imageData = canvas.toDataURL('image/png')
|
|
|
+
|
|
|
+ // 创建下载链接并设置文件名
|
|
|
+ const filename = `${this.codeInfo.shopName}的店铺二维码.png`
|
|
|
+ const link = document.createElement('a')
|
|
|
+ link.href = imageData
|
|
|
+ link.download = filename
|
|
|
+
|
|
|
+ // 将下载链接添加到页面并点击下载
|
|
|
+ document.body.appendChild(link)
|
|
|
+ link.click()
|
|
|
+ document.body.removeChild(link)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+* {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+img {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.storeCode {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 117px;
|
|
|
+ padding-top: 50px;
|
|
|
+
|
|
|
+ .paymentCode-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .paymentCode-title {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .paymentCode-img {
|
|
|
+ width: 463px;
|
|
|
+ height: 595px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #EF530E;
|
|
|
+ border-radius: 10px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .paymentCode-img-title {
|
|
|
+ display: block !important;
|
|
|
+ width: 100%;
|
|
|
+ height: 76px !important;
|
|
|
+ color: #fff !important;
|
|
|
+ font-size: 50px !important;
|
|
|
+ margin: 32px 0 24px !important;
|
|
|
+ font-weight: 700 !important;
|
|
|
+ font-style: italic !important;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 76px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-box {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .img-button {
|
|
|
+ width: 100% !important;
|
|
|
+ height: 88px !important;
|
|
|
+ background-color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ border-radius: 0 0 9px 9px !important;
|
|
|
+ text-align: center !important;
|
|
|
+ line-height: 88px !important;
|
|
|
+ font-size: 24px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .paymentCode-img-box {
|
|
|
+ width: 463px;
|
|
|
+ height: 595px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .paymentCode-open {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20px;
|
|
|
+ margin-top: 30px;
|
|
|
+
|
|
|
+ .open-icon {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .open-text {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #3D3D3D;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .paymentCode-btn {
|
|
|
+ width: 315px;
|
|
|
+ height: 67px;
|
|
|
+ background-color: #EF530E;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 67px;
|
|
|
+ margin-top: 32px;
|
|
|
+ font-size: 28px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
wzy