|
|
@@ -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"></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>
|
vvv vvv