|
|
@@ -0,0 +1,373 @@
|
|
|
+<template>
|
|
|
+ <div class="paymentCode">
|
|
|
+ <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 class="paymentCode-right">
|
|
|
+ <div class="paymentCode-explain">
|
|
|
+ <div class="explain-title">商家收款码使用说明</div>
|
|
|
+ <div class="explain-text">商家收款码仅限已入驻团蜂平台的商家使用，请勿向他人出租商家收款码，否则可能被他人用于违法犯罪活动。</div>
|
|
|
+ </div>
|
|
|
+ <div class="paymentCode-mode">
|
|
|
+ <div class="mode-title">支持支付方式</div>
|
|
|
+ <div class="mode-list">
|
|
|
+ <div class="mode-item" v-for="(item, index) in payList" :key="index">
|
|
|
+ <div class="img">
|
|
|
+ <img class="" :src="item.url" />
|
|
|
+ </div>
|
|
|
+ <div class="text">{{ item.text }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getQrcode } from "@/api/shop"
|
|
|
+import html2canvas from 'html2canvas'
|
|
|
+export default {
|
|
|
+ created() {
|
|
|
+ this.generateCode()
|
|
|
+ // 本地拿到商家名称
|
|
|
+ this.codeInfo.roleName = localStorage.getItem('roleName')
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ codeInfo: {},
|
|
|
+ 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: '支付宝'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ updated() {
|
|
|
+ this.generateImage()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async generateCode() {
|
|
|
+ const res = await getQrcode({ codeType: 1, state: 1 })
|
|
|
+ this.codeInfo = res.data
|
|
|
+ },
|
|
|
+ generateImage() {
|
|
|
+ html2canvas(this.$refs.paymentCodeCanvas, {
|
|
|
+ dpi: 300,
|
|
|
+ useCORS: true,
|
|
|
+ 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');
|
|
|
+ console.log(this.canvasImg);
|
|
|
+ this.srcList.push(this.canvasImg)
|
|
|
+ }).catch(() => {
|
|
|
+ console.log("生成图片错误");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ downloadCode() {
|
|
|
+ this.$confirm('您确定需要下载商家二维码吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.setImgSize(662, 795)
|
|
|
+ // const filename = `${this.codeInfo.shopName}的商家收款码.png`
|
|
|
+ // const link = document.createElement('a')
|
|
|
+ // link.href = this.canvasImg
|
|
|
+ // link.download = filename
|
|
|
+ // document.body.appendChild(link)
|
|
|
+ // link.click()
|
|
|
+ // document.body.removeChild(link)
|
|
|
+ }).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;
|
|
|
+}
|
|
|
+
|
|
|
+.paymentCode {
|
|
|
+ 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;
|
|
|
+ margin-top: 80px !important;
|
|
|
+ border-radius: 0 0 9px 9px !important;
|
|
|
+ text-align: center !important;
|
|
|
+ line-height: 88px !important;
|
|
|
+ font-size: 32px !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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .paymentCode-right {
|
|
|
+ width: 846px;
|
|
|
+ padding-top: 65px;
|
|
|
+
|
|
|
+ .paymentCode-explain {
|
|
|
+ width: 100%;
|
|
|
+ height: 271px;
|
|
|
+ padding: 22px 47px 40px 65px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .explain-title {
|
|
|
+ margin-bottom: 33px;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .explain-text {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .paymentCode-mode {
|
|
|
+ margin-top: 53px;
|
|
|
+ padding: 22px 24px 44px;
|
|
|
+ padding-right: 0;
|
|
|
+ height: 271px;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .mode-title {
|
|
|
+ margin-bottom: 33px;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mode-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .mode-item {
|
|
|
+ width: calc(100% / 3);
|
|
|
+ height: 50px;
|
|
|
+ padding: 3px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 31px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ img {
|
|
|
+ width: 50px !important;
|
|
|
+ height: 50px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
wzy
