|
@@ -1,431 +1,466 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <!--pages/invi-img/index.wxml-->
|
|
|
|
|
- <view class='container'>
|
|
|
|
|
- <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' v-if="flag">生成专属海报</view>
|
|
|
|
|
- <view class='btn_tab' v-else>
|
|
|
|
|
- <button open-type="openSetting" class='button' plain @getuserinfo="onGotUserInfo">生成专属海报</button>
|
|
|
|
|
- </view>
|
|
|
|
|
- <!-- <view class='btn_tab' bindtap='getImg' data-type='sy' wx:if="{{flag}}">生成收益海报</view>
|
|
|
|
|
|
|
+ <!--pages/invi-img/index.wxml-->
|
|
|
|
|
+ <view class="container">
|
|
|
|
|
+ <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" v-if="flag">生成专属海报</view>
|
|
|
|
|
+ <view class="btn_tab" v-else>
|
|
|
|
|
+ <button
|
|
|
|
|
+ open-type="openSetting"
|
|
|
|
|
+ class="button"
|
|
|
|
|
+ plain
|
|
|
|
|
+ @getuserinfo="onGotUserInfo"
|
|
|
|
|
+ >
|
|
|
|
|
+ 生成专属海报
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- <view class='btn_tab' bindtap='getImg' data-type='sy' wx:if="{{flag}}">生成收益海报</view>
|
|
|
<view class='btn_tab' wx:else>
|
|
<view class='btn_tab' wx:else>
|
|
|
<button open-type="openSetting" class='button' plain bindgetuserinfo="onGotUserInfo">生成收益海报</button>
|
|
<button open-type="openSetting" class='button' plain bindgetuserinfo="onGotUserInfo">生成收益海报</button>
|
|
|
</view> -->
|
|
</view> -->
|
|
|
- </view>
|
|
|
|
|
- <canvas class="myCanvas" canvas-id="myCanvas" :style="'width:' + WIDTH + 'px;height:' + HEIGHT + 'px;'"></canvas>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <canvas
|
|
|
|
|
+ class="myCanvas"
|
|
|
|
|
+ canvas-id="myCanvas"
|
|
|
|
|
+ :style="'width:' + WIDTH + 'px;height:' + HEIGHT + 'px;'"
|
|
|
|
|
+ ></canvas>
|
|
|
|
|
+ </view>
|
|
|
</template>
|
|
</template>
|
|
|
<script>
|
|
<script>
|
|
|
-let app = getApp()
|
|
|
|
|
|
|
+let app = getApp();
|
|
|
var appEv = app.$vm.$options;
|
|
var appEv = app.$vm.$options;
|
|
|
-var util = require('@/utils/utils.js');
|
|
|
|
|
|
|
+var util = require("@/utils/utils.js");
|
|
|
import { get, post, u_post } from "@/request/api.js";
|
|
import { get, post, u_post } from "@/request/api.js";
|
|
|
// import { ReqApi } from "../../utils/reqTools.js";
|
|
// import { ReqApi } from "../../utils/reqTools.js";
|
|
|
// var reqApi = new ReqApi();
|
|
// var reqApi = new ReqApi();
|
|
|
// import { base64ToPath } from "@/js_sdk/image-tools.js";
|
|
// import { base64ToPath } from "@/js_sdk/image-tools.js";
|
|
|
export default {
|
|
export default {
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- WIDTH: 1080,
|
|
|
|
|
- HEIGHT: 1848,
|
|
|
|
|
- E_WIDTH: 290,
|
|
|
|
|
- flag: true,
|
|
|
|
|
- imgUrl: "",
|
|
|
|
|
- bgImgList: [],
|
|
|
|
|
- bgSrc: "",
|
|
|
|
|
- sybgSrc: "",
|
|
|
|
|
- type: '',
|
|
|
|
|
- userInfo: {},
|
|
|
|
|
- Url: '',
|
|
|
|
|
- };
|
|
|
|
|
- },
|
|
|
|
|
- /**
|
|
|
|
|
- * 生命周期函数--监听页面加载
|
|
|
|
|
- */
|
|
|
|
|
- onLoad: function(options) {
|
|
|
|
|
- var userId = app.globalData.systemUserInfo && app.globalData.systemUserInfo.userId ? app.globalData.systemUserInfo.userId : '';
|
|
|
|
|
- var that = this;
|
|
|
|
|
- if (!userId || userId == '') {
|
|
|
|
|
- appEv.authorizeUserInfo(res => {
|
|
|
|
|
- if (res) {
|
|
|
|
|
- that.loadData();
|
|
|
|
|
- } else {
|
|
|
|
|
- appEv.errTips("请先登录");
|
|
|
|
|
- setTimeout(function() {
|
|
|
|
|
- uni.switchTab({
|
|
|
|
|
- url: '/pages/my/index'
|
|
|
|
|
- })
|
|
|
|
|
- }, 1200);
|
|
|
|
|
- }
|
|
|
|
|
- }, true);
|
|
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ WIDTH: 1080,
|
|
|
|
|
+ HEIGHT: 1848,
|
|
|
|
|
+ E_WIDTH: 290,
|
|
|
|
|
+ flag: true,
|
|
|
|
|
+ imgUrl: "",
|
|
|
|
|
+ bgImgList: [],
|
|
|
|
|
+ bgSrc: "",
|
|
|
|
|
+ sybgSrc: "",
|
|
|
|
|
+ type: "",
|
|
|
|
|
+ userInfo: {},
|
|
|
|
|
+ Url: "",
|
|
|
|
|
+ userImg: "",
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 生命周期函数--监听页面加载
|
|
|
|
|
+ */
|
|
|
|
|
+ onLoad: function (options) {
|
|
|
|
|
+ this.loadData();
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 生命周期函数--监听页面显示
|
|
|
|
|
+ */
|
|
|
|
|
+ onShow: function () {},
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ loadData() {
|
|
|
|
|
+ uni.showLoading({ mask: true });
|
|
|
|
|
+ post("user/xcxqrcode").then((res) => {
|
|
|
|
|
+ uni.hideLoading();
|
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
|
+ this.bgImgList = res.data.data.list;
|
|
|
|
|
+ this.bgSrc = this.bgImgList[0];
|
|
|
|
|
+ this.userImg = res.data.data.userImg;
|
|
|
} else {
|
|
} else {
|
|
|
- that.loadData();
|
|
|
|
|
|
|
+ appEv.errTips(res.msg || "");
|
|
|
}
|
|
}
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ swiperchange: function (e) {
|
|
|
|
|
+ var current = e.detail.current || 0;
|
|
|
|
|
+ this.bgSrc = this.bgImgList[current];
|
|
|
|
|
+ },
|
|
|
|
|
+ onGotUserInfo(e) {
|
|
|
|
|
+ console.log(e);
|
|
|
|
|
+ },
|
|
|
|
|
+ getImg(e) {
|
|
|
|
|
+ uni.showLoading({
|
|
|
|
|
+ title: "图片保存中...",
|
|
|
|
|
+ });
|
|
|
|
|
+ // 判断是否为生成收益海报
|
|
|
|
|
+ if (
|
|
|
|
|
+ e.currentTarget.dataset.type &&
|
|
|
|
|
+ e.currentTarget.dataset.type == "sy"
|
|
|
|
|
+ ) {
|
|
|
|
|
+ this.type = e.currentTarget.dataset.type;
|
|
|
|
|
+ this.HEIGHT = 1920;
|
|
|
|
|
+ this.getSyImg();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.type = "";
|
|
|
|
|
+ this.HEIGHT = 1848;
|
|
|
|
|
+ this.getZsImg();
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 专属海报接口
|
|
|
|
|
+ getZsImg() {
|
|
|
|
|
+ var that = this;
|
|
|
|
|
+ that.save();
|
|
|
|
|
+ // u_post("ShuZiTeaYW/twoCode/get").then((res) => {
|
|
|
|
|
+ // if (res.status == 200) {
|
|
|
|
|
+ // if (res.url) {
|
|
|
|
|
+ // that.imgUrl = res.url;
|
|
|
|
|
+ // that.save();
|
|
|
|
|
+ // } else {
|
|
|
|
|
+ // appEv.errTips("保存失败");
|
|
|
|
|
+ // uni.hideLoading();
|
|
|
|
|
+ // }
|
|
|
|
|
+ // } else {
|
|
|
|
|
+ // appEv.errTips(res.msg || "");
|
|
|
|
|
+ // }
|
|
|
|
|
+ // });
|
|
|
|
|
+ },
|
|
|
|
|
+ // 收益海报接口
|
|
|
|
|
+ getSyImg() {
|
|
|
|
|
+ var that = this;
|
|
|
|
|
+ that.save();
|
|
|
|
|
+ // var imgs = reqApi.getSyInviImg();
|
|
|
|
|
+ // if (imgs) {
|
|
|
|
|
+ // imgs.then((res) => {
|
|
|
|
|
+ // if (res.data.status == 200) {
|
|
|
|
|
+ // if (res.data.twoCode) {
|
|
|
|
|
+ // (that.imgUrl = res.data.twoCode), (that.userInfo = res.data);
|
|
|
|
|
+
|
|
|
|
|
+ // } else {
|
|
|
|
|
+ // appEv.errTips("保存失败");
|
|
|
|
|
+ // uni.hideLoading();
|
|
|
|
|
+ // }
|
|
|
|
|
+ // } else {
|
|
|
|
|
+ // appEv.errTips(res.data.msg || "");
|
|
|
|
|
+ // }
|
|
|
|
|
+ // });
|
|
|
|
|
+ // }
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
- /**
|
|
|
|
|
- * 生命周期函数--监听页面显示
|
|
|
|
|
- */
|
|
|
|
|
- onShow: function() {},
|
|
|
|
|
- methods: {
|
|
|
|
|
- loadData() {
|
|
|
|
|
- uni.showLoading({ mask: true })
|
|
|
|
|
- u_post("ShuZiTeaYW/poster/getPoster").then(res => {
|
|
|
|
|
- uni.hideLoading();
|
|
|
|
|
- if (res.status == 200) {
|
|
|
|
|
- var list = res.list || this.bgImgList;
|
|
|
|
|
- this.bgImgList = list
|
|
|
|
|
- this.bgSrc = list[0]
|
|
|
|
|
- this.sybgSrc = res.profit
|
|
|
|
|
|
|
+ save() {
|
|
|
|
|
+ var bgSrc = this.type == "sy" ? this.sybgSrc : this.bgSrc,
|
|
|
|
|
+ userInfo = this.userInfo,
|
|
|
|
|
+ that = this;
|
|
|
|
|
+ uni.getImageInfo({
|
|
|
|
|
+ src: bgSrc,
|
|
|
|
|
+ success: function (ret) {
|
|
|
|
|
+ var path = ret.path;
|
|
|
|
|
+ if (that.type == "sy") {
|
|
|
|
|
+ uni.downloadFile({
|
|
|
|
|
+ url: this.userImg,
|
|
|
|
|
+ success(res) {
|
|
|
|
|
+ if (res.tempFilePath) {
|
|
|
|
|
+ that.createImg(path, res.tempFilePath);
|
|
|
} else {
|
|
} else {
|
|
|
- appEv.errTips(res.msg || '');
|
|
|
|
|
|
|
+ appEv.errTips("头像下载失败");
|
|
|
}
|
|
}
|
|
|
- })
|
|
|
|
|
|
|
+ },
|
|
|
|
|
+ fail() {
|
|
|
|
|
+ appEv.errTips("头像下载失败");
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ that.createImg(path);
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
- swiperchange: function(e) {
|
|
|
|
|
- var current = e.detail.current || 0;
|
|
|
|
|
- this.bgSrc = this.bgImgList[current]
|
|
|
|
|
|
|
+ fail: (err) => {
|
|
|
|
|
+ console.log(err);
|
|
|
},
|
|
},
|
|
|
- onGotUserInfo(e) {
|
|
|
|
|
- console.log(e);
|
|
|
|
|
- },
|
|
|
|
|
- getImg(e) {
|
|
|
|
|
- uni.showLoading({
|
|
|
|
|
- title: '图片保存中...',
|
|
|
|
|
- })
|
|
|
|
|
- // 判断是否为生成收益海报
|
|
|
|
|
- if (e.currentTarget.dataset.type && e.currentTarget.dataset.type == 'sy') {
|
|
|
|
|
- this.type = e.currentTarget.dataset.type
|
|
|
|
|
- this.HEIGHT = 1920
|
|
|
|
|
- this.getSyImg();
|
|
|
|
|
- } else {
|
|
|
|
|
- this.type = ''
|
|
|
|
|
- this.HEIGHT = 1848
|
|
|
|
|
- this.getZsImg();
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
|
|
+ createImg(bgSrc, avatar) {
|
|
|
|
|
+ let imgUrl = this.userImg,
|
|
|
|
|
+ WIDTH = this.WIDTH,
|
|
|
|
|
+ HEIGHT = this.HEIGHT,
|
|
|
|
|
+ E_WIDTH = this.E_WIDTH,
|
|
|
|
|
+ that = this;
|
|
|
|
|
+ var path;
|
|
|
|
|
+ uni.getImageInfo({
|
|
|
|
|
+ src: imgUrl,
|
|
|
|
|
+ success: function (ret) {
|
|
|
|
|
+ path = ret.path;
|
|
|
|
|
+
|
|
|
|
|
+ // let aBuffer = await base64ToPath(imgUrl);
|
|
|
|
|
+ // path = aBuffer;
|
|
|
|
|
+
|
|
|
|
|
+ const ctx = uni.createCanvasContext("myCanvas");
|
|
|
|
|
+ let EWM_Y =
|
|
|
|
|
+ that.type == "sy"
|
|
|
|
|
+ ? HEIGHT - E_WIDTH - 15 - 90
|
|
|
|
|
+ : HEIGHT - E_WIDTH - 15 - 128;
|
|
|
|
|
+
|
|
|
|
|
+ ctx.save();
|
|
|
|
|
+ ctx.drawImage(bgSrc, 0, 0, WIDTH, HEIGHT);
|
|
|
|
|
+ ctx.drawImage(path, (WIDTH - E_WIDTH) / 2, EWM_Y, E_WIDTH, E_WIDTH);
|
|
|
|
|
+ ctx.restore();
|
|
|
|
|
+
|
|
|
|
|
+ if (that.type == "sy") {
|
|
|
|
|
+ var userInfo = that.userInfo;
|
|
|
|
|
+
|
|
|
|
|
+ // 昵称
|
|
|
|
|
+ ctx.save();
|
|
|
|
|
+ ctx.setTextBaseline("top");
|
|
|
|
|
+ ctx.setTextAlign("left");
|
|
|
|
|
+ ctx.setFillStyle("#1b2028");
|
|
|
|
|
+ ctx.setFontSize(44);
|
|
|
|
|
+ ctx.fillText(
|
|
|
|
|
+ util.transformContentToMultiLineText(
|
|
|
|
|
+ ctx,
|
|
|
|
|
+ util.emoji_uncodeUtf16(userInfo.name),
|
|
|
|
|
+ 190,
|
|
|
|
|
+ 1
|
|
|
|
|
+ ),
|
|
|
|
|
+ 520,
|
|
|
|
|
+ 284,
|
|
|
|
|
+ 230
|
|
|
|
|
+ );
|
|
|
|
|
+
|
|
|
|
|
+ // id
|
|
|
|
|
+ ctx.setFontSize(28);
|
|
|
|
|
+ ctx.fillText(userInfo.id, 632, 365, 230);
|
|
|
|
|
+
|
|
|
|
|
+ // 总佣金
|
|
|
|
|
+ ctx.setTextAlign("center");
|
|
|
|
|
+ ctx.setFillStyle("#f8233b");
|
|
|
|
|
+ ctx.setFontSize(84);
|
|
|
|
|
+ ctx.fillText(userInfo.money + "元", WIDTH / 2, 520);
|
|
|
|
|
+
|
|
|
|
|
+ // 时间
|
|
|
|
|
+ ctx.setFillStyle("#f5e3cd");
|
|
|
|
|
+ ctx.setFontSize(28);
|
|
|
|
|
+ ctx.fillText(
|
|
|
|
|
+ util.formatDateTime(new Date(), "hzhm") + "数据",
|
|
|
|
|
+ WIDTH / 2,
|
|
|
|
|
+ 868
|
|
|
|
|
+ );
|
|
|
|
|
+
|
|
|
|
|
+ // 阶段佣金
|
|
|
|
|
+ ctx.setTextAlign("center");
|
|
|
|
|
+ ctx.setFillStyle("#fd513b");
|
|
|
|
|
+ ctx.setFontSize(38);
|
|
|
|
|
+ ctx.fillText(userInfo.todayMoney, WIDTH / 2 - 204, 1028);
|
|
|
|
|
+
|
|
|
|
|
+ ctx.fillText(userInfo.todayCount, WIDTH / 2 + 206, 1028);
|
|
|
|
|
+
|
|
|
|
|
+ ctx.fillText(userInfo.yesterDayMoney, WIDTH / 2 - 204, 1150);
|
|
|
|
|
+
|
|
|
|
|
+ ctx.fillText(userInfo.yesterDayCount, WIDTH / 2 + 206, 1150);
|
|
|
|
|
+
|
|
|
|
|
+ ctx.fillText(userInfo.monthMoney, WIDTH / 2 - 204, 1272);
|
|
|
|
|
+
|
|
|
|
|
+ ctx.fillText(userInfo.monthCount, WIDTH / 2 + 206, 1272);
|
|
|
|
|
+
|
|
|
|
|
+ ctx.fillText(userInfo.lastMonthMoney, WIDTH / 2 - 204, 1394);
|
|
|
|
|
+
|
|
|
|
|
+ ctx.fillText(userInfo.lastMonthCount, WIDTH / 2 + 206, 1394);
|
|
|
|
|
+ ctx.restore();
|
|
|
|
|
+
|
|
|
|
|
+ // 头像
|
|
|
|
|
+ ctx.save();
|
|
|
|
|
+ ctx.beginPath();
|
|
|
|
|
+ ctx.arc(426, 340, 66, 0, 2 * Math.PI);
|
|
|
|
|
+ ctx.clip();
|
|
|
|
|
+ ctx.drawImage(avatar, 360, 274, 132, 132);
|
|
|
|
|
+ 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);
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
},
|
|
},
|
|
|
- // 专属海报接口
|
|
|
|
|
- getZsImg() {
|
|
|
|
|
- var that = this;
|
|
|
|
|
- u_post("ShuZiTeaYW/twoCode/get").then(res => {
|
|
|
|
|
- if (res.status == 200) {
|
|
|
|
|
- if (res.url) {
|
|
|
|
|
- that.imgUrl = res.url
|
|
|
|
|
- that.save();
|
|
|
|
|
- } else {
|
|
|
|
|
- appEv.errTips("保存失败");
|
|
|
|
|
- uni.hideLoading();
|
|
|
|
|
- }
|
|
|
|
|
- } else {
|
|
|
|
|
- appEv.errTips(res.msg || '');
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- // 收益海报接口
|
|
|
|
|
- getSyImg() {
|
|
|
|
|
- var that = this;
|
|
|
|
|
- var imgs = reqApi.getSyInviImg();
|
|
|
|
|
- if (imgs) {
|
|
|
|
|
- imgs.then(res => {
|
|
|
|
|
- if (res.data.status == 200) {
|
|
|
|
|
- if (res.data.twoCode) {
|
|
|
|
|
- that.imgUrl = res.data.twoCode,
|
|
|
|
|
- that.userInfo = res.data
|
|
|
|
|
- that.save();
|
|
|
|
|
- } else {
|
|
|
|
|
- appEv.errTips("保存失败");
|
|
|
|
|
- uni.hideLoading();
|
|
|
|
|
- }
|
|
|
|
|
- } else {
|
|
|
|
|
- appEv.errTips(res.data.msg || '');
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- save: function() {
|
|
|
|
|
- var bgSrc = this.type == 'sy' ? this.sybgSrc : this.bgSrc,
|
|
|
|
|
- userInfo = this.userInfo,
|
|
|
|
|
- that = this;
|
|
|
|
|
- uni.getImageInfo({
|
|
|
|
|
- src: bgSrc,
|
|
|
|
|
- success: function(ret) {
|
|
|
|
|
- var path = ret.path;
|
|
|
|
|
- if (that.type == 'sy') {
|
|
|
|
|
- uni.downloadFile({
|
|
|
|
|
- url: userInfo.img,
|
|
|
|
|
- success(res) {
|
|
|
|
|
- if (res.tempFilePath) {
|
|
|
|
|
- that.createImg(path, res.tempFilePath);
|
|
|
|
|
- } else {
|
|
|
|
|
- appEv.errTips("头像下载失败");
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- fail() {
|
|
|
|
|
- appEv.errTips("头像下载失败");
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- } else {
|
|
|
|
|
- that.createImg(path);
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- fail: (err) => {
|
|
|
|
|
- console.log(err);
|
|
|
|
|
- },
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ fail: (err) => {
|
|
|
|
|
+ console.log(err);
|
|
|
},
|
|
},
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
- createImg(bgSrc, avatar) {
|
|
|
|
|
- var imgUrl = this.imgUrl,
|
|
|
|
|
- WIDTH = this.WIDTH,
|
|
|
|
|
- HEIGHT = this.HEIGHT,
|
|
|
|
|
- E_WIDTH = this.E_WIDTH,
|
|
|
|
|
- that = this;
|
|
|
|
|
- var path;
|
|
|
|
|
- uni.getImageInfo({
|
|
|
|
|
- src: imgUrl,
|
|
|
|
|
- success: function(ret) {
|
|
|
|
|
- path = ret.path;
|
|
|
|
|
-
|
|
|
|
|
- // let aBuffer = await base64ToPath(imgUrl);
|
|
|
|
|
- // path = aBuffer;
|
|
|
|
|
-
|
|
|
|
|
- const ctx = uni.createCanvasContext('myCanvas');
|
|
|
|
|
- let EWM_Y = that.type == 'sy' ? (HEIGHT - E_WIDTH - 15 - 90) : (HEIGHT - E_WIDTH - 15 - 128);
|
|
|
|
|
-
|
|
|
|
|
- ctx.save();
|
|
|
|
|
- ctx.drawImage(bgSrc, 0, 0, WIDTH, HEIGHT);
|
|
|
|
|
- ctx.drawImage(path, (WIDTH - E_WIDTH) / 2, EWM_Y, E_WIDTH, E_WIDTH);
|
|
|
|
|
- ctx.restore();
|
|
|
|
|
-
|
|
|
|
|
- if (that.type == 'sy') {
|
|
|
|
|
- var userInfo = that.userInfo;
|
|
|
|
|
-
|
|
|
|
|
- // 昵称
|
|
|
|
|
- ctx.save();
|
|
|
|
|
- ctx.setTextBaseline('top')
|
|
|
|
|
- ctx.setTextAlign('left')
|
|
|
|
|
- ctx.setFillStyle('#1b2028');
|
|
|
|
|
- ctx.setFontSize(44);
|
|
|
|
|
- ctx.fillText(util.transformContentToMultiLineText(ctx, util.emoji_uncodeUtf16(userInfo.name), 190, 1), 520, 284, 230);
|
|
|
|
|
-
|
|
|
|
|
- // id
|
|
|
|
|
- ctx.setFontSize(28);
|
|
|
|
|
- ctx.fillText(userInfo.id, 632, 365, 230);
|
|
|
|
|
-
|
|
|
|
|
- // 总佣金
|
|
|
|
|
- ctx.setTextAlign('center')
|
|
|
|
|
- ctx.setFillStyle('#f8233b');
|
|
|
|
|
- ctx.setFontSize(84);
|
|
|
|
|
- ctx.fillText(userInfo.money + '元', WIDTH / 2, 520);
|
|
|
|
|
-
|
|
|
|
|
- // 时间
|
|
|
|
|
- ctx.setFillStyle('#f5e3cd');
|
|
|
|
|
- ctx.setFontSize(28);
|
|
|
|
|
- ctx.fillText(util.formatDateTime(new Date(), 'hzhm') + '数据', WIDTH / 2, 868);
|
|
|
|
|
-
|
|
|
|
|
- // 阶段佣金
|
|
|
|
|
- ctx.setTextAlign('center')
|
|
|
|
|
- ctx.setFillStyle('#fd513b');
|
|
|
|
|
- ctx.setFontSize(38);
|
|
|
|
|
- ctx.fillText(userInfo.todayMoney, WIDTH / 2 - 204, 1028);
|
|
|
|
|
-
|
|
|
|
|
- ctx.fillText(userInfo.todayCount, WIDTH / 2 + 206, 1028);
|
|
|
|
|
-
|
|
|
|
|
- ctx.fillText(userInfo.yesterDayMoney, WIDTH / 2 - 204, 1150);
|
|
|
|
|
-
|
|
|
|
|
- ctx.fillText(userInfo.yesterDayCount, WIDTH / 2 + 206, 1150);
|
|
|
|
|
-
|
|
|
|
|
- ctx.fillText(userInfo.monthMoney, WIDTH / 2 - 204, 1272);
|
|
|
|
|
-
|
|
|
|
|
- ctx.fillText(userInfo.monthCount, WIDTH / 2 + 206, 1272);
|
|
|
|
|
-
|
|
|
|
|
- ctx.fillText(userInfo.lastMonthMoney, WIDTH / 2 - 204, 1394);
|
|
|
|
|
-
|
|
|
|
|
- ctx.fillText(userInfo.lastMonthCount, WIDTH / 2 + 206, 1394);
|
|
|
|
|
- ctx.restore();
|
|
|
|
|
-
|
|
|
|
|
- // 头像
|
|
|
|
|
- ctx.save()
|
|
|
|
|
- ctx.beginPath()
|
|
|
|
|
- ctx.arc(426, 340, 66, 0, 2 * Math.PI)
|
|
|
|
|
- ctx.clip()
|
|
|
|
|
- ctx.drawImage(avatar, 360, 274, 132, 132)
|
|
|
|
|
- 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 = appEv.parameter("path")) {
|
|
|
|
|
+ var that = this;
|
|
|
|
|
+ uni.getSetting({
|
|
|
|
|
+ success: (res) => {
|
|
|
|
|
+ //如果没有相册权限
|
|
|
|
|
+ console.log(res.authSetting); //授权信息
|
|
|
|
|
+ if (!res.authSetting["scope.writePhotosAlbum"]) {
|
|
|
|
|
+ console.log("没有授权,调用授权!");
|
|
|
|
|
+ //向用户发起授权请求
|
|
|
|
|
+ uni.authorize({
|
|
|
|
|
+ scope: "scope.writePhotosAlbum",
|
|
|
|
|
+ success: () => {
|
|
|
|
|
+ console.log("授权成功!");
|
|
|
|
|
+ that.savefun(path);
|
|
|
|
|
+ },
|
|
|
|
|
+ fail: (res) => {},
|
|
|
|
|
+ });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ console.log("已授权。直接保存");
|
|
|
|
|
+ that.savefun(path);
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
|
|
+ fail: (res) => {},
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
- saveImage(path = appEv.parameter('path')) {
|
|
|
|
|
- var that = this;
|
|
|
|
|
- uni.getSetting({
|
|
|
|
|
- success: (res) => {
|
|
|
|
|
- //如果没有相册权限
|
|
|
|
|
- console.log(res.authSetting); //授权信息
|
|
|
|
|
- if (!res.authSetting["scope.writePhotosAlbum"]) {
|
|
|
|
|
- console.log('没有授权,调用授权!');
|
|
|
|
|
- //向用户发起授权请求
|
|
|
|
|
- uni.authorize({
|
|
|
|
|
- scope: "scope.writePhotosAlbum",
|
|
|
|
|
- success: () => {
|
|
|
|
|
- console.log('授权成功!');
|
|
|
|
|
- that.savefun(path)
|
|
|
|
|
- },
|
|
|
|
|
- fail: (res) => {},
|
|
|
|
|
- })
|
|
|
|
|
- } else {
|
|
|
|
|
- console.log('已授权。直接保存');
|
|
|
|
|
- that.savefun(path)
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- fail: (res) => {},
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ savefun(path) {
|
|
|
|
|
+ uni.saveImageToPhotosAlbum({
|
|
|
|
|
+ filePath: path,
|
|
|
|
|
+ success(result) {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: "保存成功",
|
|
|
|
|
+ icon: "success",
|
|
|
|
|
+ duration: 1200,
|
|
|
|
|
+ });
|
|
|
|
|
+ // 预览图片
|
|
|
|
|
+ uni.previewImage({
|
|
|
|
|
+ current: path, // 当前显示图片的http链接
|
|
|
|
|
+ urls: [path], // 需要预览的图片http链接列表
|
|
|
|
|
+ });
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
- savefun(path) {
|
|
|
|
|
- uni.saveImageToPhotosAlbum({
|
|
|
|
|
- filePath: path,
|
|
|
|
|
- success(result) {
|
|
|
|
|
- uni.showToast({
|
|
|
|
|
- title: '保存成功',
|
|
|
|
|
- icon: 'success',
|
|
|
|
|
- duration: 1200
|
|
|
|
|
- })
|
|
|
|
|
- // 预览图片
|
|
|
|
|
- uni.previewImage({
|
|
|
|
|
- current: path, // 当前显示图片的http链接
|
|
|
|
|
- urls: [path], // 需要预览的图片http链接列表
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- fail(result) {
|
|
|
|
|
- this.flag = false;
|
|
|
|
|
- appEv.errTips("保存失败");
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ fail(result) {
|
|
|
|
|
+ this.flag = false;
|
|
|
|
|
+ appEv.errTips("保存失败");
|
|
|
},
|
|
},
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+};
|
|
|
</script>
|
|
</script>
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
/* pages/invi-img/index.wxss */
|
|
/* pages/invi-img/index.wxss */
|
|
|
page {
|
|
page {
|
|
|
- background-color: #2F323B;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
|
|
+ background-color: #2f323b;
|
|
|
|
|
+ color: #fff;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.container {
|
|
.container {
|
|
|
- width: 600rpx;
|
|
|
|
|
- margin: 0 auto;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- position: relative;
|
|
|
|
|
|
|
+ width: 600rpx;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ position: relative;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.myCanvas {
|
|
.myCanvas {
|
|
|
- position: absolute;
|
|
|
|
|
- top: 150%;
|
|
|
|
|
- left: 50%;
|
|
|
|
|
- right: 0;
|
|
|
|
|
- bottom: 0;
|
|
|
|
|
- opacity: 0;
|
|
|
|
|
- transform: translate(-50%, 50%);
|
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 150%;
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ opacity: 0;
|
|
|
|
|
+ transform: translate(-50%, 50%);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.invi_img {
|
|
.invi_img {
|
|
|
- margin: 5% 0 24rpx;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- border: 16rpx solid #fff;
|
|
|
|
|
|
|
+ margin: 5% 0 24rpx;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ border: 16rpx solid #fff;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.invi_img .image {
|
|
.invi_img .image {
|
|
|
- width: 100%;
|
|
|
|
|
- display: block;
|
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ display: block;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.invi_img .swiper_box,
|
|
.invi_img .swiper_box,
|
|
|
.invi_img .slide-image {
|
|
.invi_img .slide-image {
|
|
|
- width: 100%;
|
|
|
|
|
- height: 970rpx !important;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 970rpx !important;
|
|
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.invi_tops {
|
|
.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;
|
|
|
|
|
|
|
+ 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 {
|
|
.btn_group {
|
|
|
- padding-top: 6rpx;
|
|
|
|
|
- padding-bottom: 42rpx;
|
|
|
|
|
|
|
+ padding-top: 6rpx;
|
|
|
|
|
+ padding-bottom: 42rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.btn_group .btn_tab {
|
|
.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%; */
|
|
|
|
|
|
|
+ /* 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 {
|
|
.btn_group .btn_tab .button {
|
|
|
- border: 0;
|
|
|
|
|
- padding: 0;
|
|
|
|
|
- margin: 0;
|
|
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ margin: 0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.btn_group .btn_tab,
|
|
.btn_group .btn_tab,
|
|
|
.btn_group .btn_tab .button {
|
|
.btn_group .btn_tab .button {
|
|
|
- color: #fff;
|
|
|
|
|
- line-height: 1.4;
|
|
|
|
|
- font-size: 28rpx;
|
|
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ line-height: 1.4;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.codeimg {
|
|
.codeimg {
|
|
|
- // display: none;
|
|
|
|
|
|
|
+ // display: none;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|