123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158 |
- <template>
- <view>
- <navbar ref="navbar" :config="config" backColor="#999999"></navbar>
- <canvas @longtap="popShow=true" canvas-id="canvasId" id="canvasId"></canvas>
- <view class="ayQrcodeCls">
- <ayQrcode ref="qrcode" :modal="modal_qr" :url="url" @result="getCode" :height="125" :width="125" />
- </view>
- <u-modal v-model="popShow" content="确定保存到手机?" show-cancel-button @confirm="shareB()"></u-modal>
- </view>
- </template>
- <script>
- import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue";
- export default {
- components: {
- ayQrcode
- },
- data() {
- return {
- config: {
- back: true, //false是tolbar页面 是则不写
- title: '分享',
- color: 'black',
- //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
- backgroundColor: [1, '#fff'],
- statusBarFontColor: 'black',
- },
- // 捐爱心
- // text:"感谢您于2022年06月15日捐款100颗爱心。我们将按照您的意愿,全部用于公益慈善事业。",
- // 捐钱
- // text:"感谢您于2022年06月15日捐款¥1.00元。我们将按照您的意愿,全部用于公益慈善事业。"
- // 捐物
- text: "感谢您于2022年06月15日捐款100万元的爱心物质。我们将按照您的意愿,全部用于公益慈善事业。",
- imgUrl: "",
- systemInfo: {},
- data: null,
- userInfo: {},
- code: null,
- modal_qr: false,
- url: this.$mConfig.redirect_uri + "/pages/register",
- imgURL:"",
- popShow:false
- }
- },
- onLoad(options) {
- uni.getSystemInfo({
- success: (res) => {
- this.systemInfo = res
- }
- })
- this.userInfo = uni.getStorageSync('personal');
- this.data = options.time.replace('-', '年').replace('-', '月') + '日';
- this.code = options.code;
- this.text = `感谢您于${this.data+options.title}。我们将按照您的意愿,全部用于公益慈善事业。`;
- this.showQrcode()
- },
- methods: {
- // 展示二维码
- showQrcode() {
- let _this = this;
- this.modal_qr = true;
- // uni.showLoading()
- setTimeout(function () {
- // uni.hideLoading()
- _this.$refs.qrcode.crtQrCode();
- }, 50);
- },
- init() {
- let textStr = 0;
- let that = this;
- uni.getImageInfo({
- src: '/static/convenienceService/credentialBg.png',
- success: function(image) {
- let y = 140;
- var context = uni.createCanvasContext('canvasId');
- context.drawImage(image.path, 0, 0, that.systemInfo.screenWidth, 570);
- context.font = "bold 16px Arial";
- context.fillText("亲爱的:", 40, 140);
- context.font = "14px Arial";
- y += 30
- context.fillText("绿马公益" + that.userInfo.real_name, 40, y);
- y += 30;
- for (let i = 0; i < (Math.ceil(that.text.length / 21)); i++) {
- let textX = i !== 0 ? 40 : 68
- let num = i !== 0 ? 21 : 24
- context.fillText(that.text.substr(textStr, num), textX, y);
- y += 20;
- if (i !== 0) {
- textStr += 21
- } else {
- textStr += 24
- }
- }
- y += 5;
- context.fillText("您的善行义举,将点燃更多希望。再次向您", 68, y);
- y += 20;
- context.fillText("致以最诚挚的敬意。", 40, y);
- y += 25;
- context.fillText("特颁此证,深表谢忱。", 40, y);
- context.drawImage(that.imgURL, 130, 350, 104, 104);
- context.font = "13px Arial";
- context.fillText("扫码参与绿马公益", 130, 470);
- context.textAlign = "center"
- context.fillText("记录编号:" + that.code, that.systemInfo.screenWidth / 2, 520);
- context.draw(false, () => {
- // 返回canvas图片信息
- uni.canvasToTempFilePath({
- canvasId: 'canvasId',
- success: (res) => {
- that.imgUrl = res.tempFilePath
- },
- fail: function(err) {
- console.log(err)
- }
- })
- })
- }
- });
- },
- // 保存图片
- shareB() {
- var _this = this;
- uni.saveImageToPhotosAlbum({
- filePath: _this.imgUrl,
- success() {
- uni.showModal({
- title: "保存成功",
- content: "图片已成功保存到相册",
- showCancel: false
- })
- },
- fail(e) {
- console.log(e)
- }
- })
- },
- getCode(e) {
- this.imgURL=e
- console.log(e)
- this.init()
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- #canvasId {
- width: 750rpx;
- height: 1200rpx;
- }
- .ayQrcodeCls{
- position: absolute;
- left: -999rpx;
- }
- </style>
|