店铺专属海报

src/pages.json

@@ -580,6 +580,13 @@
 					"style": {
 						"navigationBarTitleText": "转化"
 					}
+				},
+				{
+					"path": "invi-img/index",
+					"style": {
+						"navigationBarTitleText": "店铺海报",
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		}

src/pagesC/invi-img/index.vue

@@ -0,0 +1,320 @@
+<template>
+    <view class="container" :class="[IsMobile?'pt-190' :'pt-50']">
+        <div @click="gomy" class="iconfont fanhui" :style="{top:topHight+'px'}" v-if="IsMobile">&#xe633;</div>
+        <view class="invi_img">
+            <swiper class="swiper_box" circular="true" duration="1000" indicator-dots="true" indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="#d7a54c" @change="swiperchange">
+                <block>
+                    <swiper-item v-for="(item, index) in bgImgList" :key="index">
+                        <image :src="item" v-if="item && item != ''" class="slide-image" mode="widthFix" lazy-load />
+                    </swiper-item>
+                </block>
+            </swiper>
+        </view>
+        <view class="invi_tops"><text space="nbsp">新用户扫二维码识别小程序 / 授权登录即可成功绑定关系</text></view>
+        <view class="btn_group disFlex_goodsBox flex_hor_between" v-if="bgImgList && bgImgList.length > 0">
+            <view class="btn_tab" @tap="getImg">生成商户专属收款海报</view>
+        </view>
+        <canvas class="myCanvas" canvas-id="myCanvas" :style="'width:' + WIDTH + 'px;height:' + HEIGHT + 'px;'"></canvas>
+    </view>
+</template>
+<script>
+import { post } from "@/request/api.js";
+
+export default {
+    data() {
+        return {
+            WIDTH: 600,
+            HEIGHT: 952,
+            E_WIDTH: 316,
+            E_HEIGHT: 316,
+            imgUrl: "",
+            bgImgList: [],
+            bgSrc: "",
+            sybgSrc: "",
+            userInfo: {},
+            Url: "",
+            userImg: "",
+            topHight: 50,
+            IsMobile: true,
+            title: ""
+        }
+    },
+    onLoad: function(options) {
+        this.title = decodeURI(options.name)
+        this.loadData(options);
+    },
+    onShow: function() {
+        let menuButtonObject = uni.getMenuButtonBoundingClientRect();
+        this.topHight = menuButtonObject.top;
+        let pf = uni.getSystemInfoSync().platform;
+        if(["windows","mac"].includes(pf)) this.IsMobile = false
+    },
+    methods: {
+        loadData(da) {
+            uni.showLoading({ mask: true });
+            // post("v1/user/xcxqrcode").then((res) => {
+            //     uni.hideLoading();
+            //     if (res.code === 0) {
+            //         this.bgImgList = ["https://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/268c896c47298c7c79a8270c36076741e8f15b0fjpg","http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/banner/202308/c94a91d021bbb78d060122b6e38257ed.jpg"];
+            //         this.bgSrc = "https://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/268c896c47298c7c79a8270c36076741e8f15b0fjpg";
+            //         // this.userImg = res.data.data.userImg;
+            //     } else {
+            //         this.$toast(res.msg || "");
+            //     }
+            // });
+            post("v1/merchant/xcxqrcode",da).then(res=>{
+                uni.hideLoading();
+                if(res.code === 0) {
+                    this.bgImgList = res.data.list;
+                    this.bgSrc = this.bgImgList[0];
+                    this.userImg = res.data.code;
+                } else {
+                    this.$toast(res.msg || "");
+                }
+            })
+            
+        },
+        swiperchange: function(e) {
+            var current = e.detail.current || 0;
+            this.bgSrc = this.bgImgList[current];
+        },
+        getImg(e) {
+            uni.showLoading({
+                title: "图片保存中...",
+            });
+            this.save();
+        },
+
+        save() {
+            var bgSrc = this.bgSrc, that = this;
+            uni.getImageInfo({
+                src: bgSrc,
+                success: function(ret) {
+                    var path = ret.path;
+					that.createImg(path);
+                },
+                fail: (err) => {
+                    console.log(err);
+                },
+            });
+        },
+
+        createImg(bgSrc, avatar) {
+            let imgUrl = this.userImg,
+                WIDTH = this.WIDTH,
+                HEIGHT = this.HEIGHT,
+                E_WIDTH = this.E_WIDTH,
+                E_HEIGHT = this.E_HEIGHT,
+                that = this;
+            var path;
+            uni.getImageInfo({
+                src: imgUrl,
+                success: function(ret) {
+                    path = ret.path;
+                    const ctx = uni.createCanvasContext("myCanvas");
+                    let EWM_Y = HEIGHT - E_WIDTH - 316;
+
+                    ctx.save();
+                    ctx.drawImage(bgSrc, 0, 0, WIDTH, HEIGHT);
+                    ctx.drawImage(path, (WIDTH - E_WIDTH) / 2, EWM_Y, E_WIDTH, E_HEIGHT);
+                    //绘制标题
+                    ctx.setFontSize(26); //设置标题字体大小
+                    ctx.setFillStyle('#333'); //设置标题文本颜色
+                    ctx.textAlign = 'center';
+                    ctx.fillText(that.title, 300, (HEIGHT / 2 + E_HEIGHT / 2 + 42))
+                    ctx.restore();
+
+                    ctx.draw(false, function(e) {
+                        // 保存到本地
+                        uni.canvasToTempFilePath({
+                            canvasId: "myCanvas",
+                            quality: 1,
+                            fileType: "jpg",
+                            success: function(res) {
+                                let pic = res.tempFilePath;
+                                that.saveImage(pic);
+                            },
+                        });
+                    });
+                },
+                fail: (err) => {
+                    console.log(err);
+                },
+            });
+        },
+
+        saveImage(path) {
+            var that = this;
+            uni.getSetting({
+                success: (res) => {
+                    uni.hideLoading();
+                    //如果没有相册权限
+                    console.log(res.authSetting); //授权信息
+                    if (!res.authSetting["scope.writePhotosAlbum"]) {
+                        console.log("没有授权，调用授权！");
+                        // 向用户发起授权请求
+                        uni.authorize({
+                            scope: "scope.writePhotosAlbum",
+                            success: () => {
+                                console.log("授权成功！");
+                                that.savefun(path);
+                            },
+                            fail: (res) => {
+                                uni.showModal({
+                                    content:'检测到您没打开保存到相册功能权限，是否去设置打开？',
+                                    confirmText: "确认",
+                                    cancelText:'取消',
+                                    success: (res) =>{
+                                        if(res.confirm){
+                                            uni.openSetting({
+                                                success: (res) =>{
+                                                    that.savefun(path);
+                                                }
+                                            })
+                                        }
+                                    }
+                                })
+                            },
+                        });
+                    } else {
+                        console.log("已授权。直接保存");
+                        that.savefun(path);
+                    }
+                },
+                fail: (res) => {},
+            });
+        },
+
+        savefun(path) {
+            let that =  this
+            uni.saveImageToPhotosAlbum({
+                filePath: path,
+                success(result) {
+                    uni.showToast({
+                        title: "保存成功",
+                        icon: "success",
+                        duration: 1200,
+                    });
+                    // 预览图片
+                    uni.previewImage({
+                        current: path, // 当前显示图片的http链接
+                        urls: [path], // 需要预览的图片http链接列表
+                    });
+                },
+                fail(result) {
+                    that.$toast("保存失败");
+                },
+            });
+        },
+
+        gomy(){
+            uni.navigateBack();
+        }
+    },
+};
+</script>
+<style lang="scss">
+page {
+    background-color: #2f323b;
+    color: #fff;
+    overflow: hidden;
+}
+.fanhui{
+    position: absolute;
+    left: -50rpx;
+    top: 100rpx;
+    color: #fff;
+    font-size: 66rpx;
+}
+
+.container {
+    width: 600rpx;
+    margin: 0 auto;
+    overflow: initial;
+    position: relative;
+}
+
+.myCanvas {
+    position: absolute;
+    top: 150%;
+    left: 50%;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    transform: translate(-50%, 50%);
+}
+
+.invi_img {
+    margin: 5% 0 24rpx;
+    overflow: hidden;
+    border: 16rpx solid #fff;
+}
+
+.invi_img .image {
+    width: 100%;
+    display: block;
+}
+
+.invi_img .swiper_box,
+.invi_img .slide-image {
+    width: 100%;
+    height: 952rpx !important;
+    overflow: hidden;
+}
+
+.invi_tops {
+    list-style: 1.2;
+    font-size: 24rpx;
+    opacity: 0.8;
+    text-align: center;
+    width: 640rpx;
+    margin-left: -20rpx;
+    transform: scale(0.9);
+    -webkit-transform: scale(0.9);
+    -moz-transform: scale(0.9);
+    -o-transform: scale(0.9);
+    -ms-transform: scale(0.9);
+    transform-origin: top center;
+    -webkit-transform-origin: top center;
+    -moz-transform-origin: top center;
+    -o-transform-origin: top center;
+    -ms-transform-origin: top center;
+}
+
+.btn_group {
+    padding-top: 6rpx;
+    padding-bottom: 42rpx;
+}
+
+.btn_group .btn_tab {
+    /* min-width: calc((100% - 32rpx) / 2); */
+    min-width: 100%;
+    border-radius: 8rpx;
+    box-sizing: border-box;
+    padding: 20rpx;
+    text-align: center;
+    color: #fff;
+    background-color: #c9ab79;
+    margin-top: 32rpx;
+    /* width: 100%; */
+}
+
+.btn_group .btn_tab .button {
+    border: 0;
+    padding: 0;
+    margin: 0;
+}
+
+.btn_group .btn_tab,
+.btn_group .btn_tab .button {
+    color: #fff;
+    line-height: 1.4;
+    font-size: 28rpx;
+}
+.pt-190{
+    padding-top: 190rpx;
+}
+.pt-50{
+    padding-top: 50rpx;
+}
+</style>

src/pagesC/settledMerchant/myShop.vue

@@ -28,7 +28,8 @@
                             <span class="commentScore">{{i.score}}分</span>
                         </div>
                     </div>
-                    <div class="twocode iconfont" @click.stop="showcode({merchant_id:i.merchant_id,shop_id:i.shop_id,name:i.name})">&#xe635;</div>
+                    <!-- <div class="twocode iconfont" @click.stop="showcode({merchant_id:i.merchant_id,shop_id:i.shop_id,name:i.name})">&#xe635;</div> -->
+                    <div class="twocode iconfont" @click.stop="goto('/pagesC/invi-img/index',{merchant_id:i.merchant_id,shop_id:i.shop_id,name:i.name})">&#xe635;</div>
                 </div>
                 <div class="p1 flex_r flex_jb flex_ac">
                     <div class="l"><span class="iconfont">&#xe9d2;</span>商户大使：{{i.nickname || ""}}</div>