miniprogram-doctor/Pages/yishi/mycard/index.js

import { API } from './../../../utils/network/api'
let api = new API()
const app = getApp()
Page({
  data: {
    navbarData: {
      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
      title: '我的名片', //导航栏 中间的标题
    },
    height: app.globalData.height, 
    confirmBtn: { content: '去开启', variant: 'base',  theme: 'gdxz'},
    showText: false,
    saveImgPath: "",
    info: {},
    //  https://github.com/Kujiale-Mobile/Painter
    template: {
      width: '750px',
      height: '1200px',
      background: "#eee",
      views: [
        {
          type: 'rect',//顶部背景图 0
          css: {
            top: '0',
            left: '0',
            color: '#3CC7C0',
            width: '750px',
            height: '350px',
          },  
        },
        {
          type: 'rect',//医生信息矩形框 1
          css: {
            left: '30px',
            top: '100px',
            color: '#fff',
            width: '690px',
            height: '300px',
            borderRadius: "10px"
          },
        },
        {
          type: 'rect',//医生二维码框 2
          css: {
            left: '30px',
            top: '402px',
            color: '#fff',
            width: '690px',
            height: '532px',
            borderRadius: "10px"
          },
        },
        {
          type: 'image',//医生二维码图片 3
          url: 'https://gdxz-hospital.oss-cn-chengdu.aliyuncs.com/applet/doctor/static/images/yishi/qrcode.png',
          css: {
            left: '215px',
            top: '458px',
            width: '320px',
            height: '320px',
          },
        },
        {
          type: 'image',//医生头像图片 4
          url: 'https://gdxz-hospital.oss-cn-chengdu.aliyuncs.com/applet/doctor/static/images/default_photo.png',
          css: {
            top: '40px',
            left: '327px',
            width: '120px',
            height: '120px',
            borderRadius: "50%"
          },
        },
        {
          type: 'text',//医生姓名 5
          text: "张三三",
          css: {
            top: '172px',
            left: '327px',
            width: '120px',
            height: '120px',
            fontSize: '36px',
            textAlign: 'center',
          },
        },
        {
          type: 'text',//医生职称 6
          text: "主任医师",
          css: {
            top: '232px',
            left: '30px',
            width: '340px',
            height: '42px',
            color: '#3CC7C0',
            fontSize: '30px',
            textAlign: 'right',
          },
        },
        {
          type: 'text',//医生职称 7
          text: "|",
          css: {
            top: '232px',
            left: '370px',
            width: '10px',
            height: '42px',
            color: '#3CC7C0',
            fontSize: '30px',
            textAlign: 'center',
          },
        },
        {
          type: 'text',//医生职称 8
          text: "肝病科",
          css: {
            top: '232px',
            left: '400px',
            width: '340px',
            height: '42px',
            color: '#3CC7C0',
            fontSize: '30px',
            textAlign: 'left',
          },
        },
        {
          type: 'text',//医生医院 9
          text: "首都医科大学附属北京佑安医院",
          css: {
            top: '284px',
            left: '40px',
            width: '690px',
            height: '42px',
            fontSize: '30px',
            color: '#666666',
            textAlign: 'center',
          },
        },
        {
          type: 'text',//微信长按或扫描二维码查看我的更多信息 10
          text: "微信长按或扫描二维码查看我的更多信息",
          css: {
            top: '790px',
            left: '228px',
            width: '300px',
            height: '62px',
            lineHeight: '50px',
            letterSpacing: '10px',
            fontSize: '30px',
            textAlign: 'center',
            color: '#666666'
          },
        },
      ],
    },
    painter_ready: false
  },
  onLoad(){
    //获取医生名片
    api.getDoctorInfoCard().then(response => {
      console.log(response);
      this.setData({
       info: response.data,
       "template.views[3].url" : response.data.qr_code_url,
       "template.views[4].url" : response.data.avatar,
       "template.views[5].text" : response.data.user_name,
       "template.views[6].text" : response.data.doctor_title,
       "template.views[8].text" : response.data.department_custom_name,
       "template.views[9].text" : response.data.hospital_name,
      })
    }).then(res => {
      this.setData({
        painter_ready: true
      })
    }).catch(errors => {console.error(errors);})
  },
  onImgOK(e){
    console.log(e.detail.path);
    this.setData({
      saveImgPath: e.detail.path
    })
  },
  openSetting(){
    wx.openSetting({
      success(res){
        console.log("openSetting success: ", res)
      },
      fail(res){
        console.log("openSetting fail: ", res)
      }
    })
  },
  onSave(){
    let _this = this;
    wx.getSetting({
      success(res){
        console.log(res.authSetting)
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success () {
              _this.saveImg();
            },
            fail(res){
              _this.setData({
                showText: true
              })
            }
          })
        }else{
          _this.saveImg();
        }
      }
    })
  },
  /* 保存图片 */
  saveImg() {
    let tempFilePath = this.data.saveImgPath;

    wx.saveImageToPhotosAlbum({
      filePath: tempFilePath,
      success: function (res) {
        wx.showToast({
          title: '保存图片成功',
        })
      },
      fail: function (err) {
        wx.showToast({
          title: '保存图片失败' ,
        })
      }
    })
  },   
  onVisibleChange(e) {
    this.setData({
      visible: e.detail.visible,
    });
  },
  showVisible(){
    this.setData({
      visible: !this.data.visible,
    });
  },
  // onShareAppMessage(e) {
  //   return {
  //     title: '自定义转发标题',
  //     path: '/Pages/yishi/mycard/index',
  //   }
  // }
})