xk-doctor-wx/subPackages/sub_workbench/workbench_code.vue

<template>
  <view class="body-code-qr">
    <view class="bg"></view>
    <view>
      <view class="box">
        <l-painter ref="painter" :board="poster"/>
      </view>
      <view class="p-col-32 m-t-32">
        <u-button :throttle-time="0" shape="circle"
                  :custom-style="{width:'360rpx',backgroundColor:'#6ACDBB',color:'#fff'}" :ripple="true"
                  @click="save">保存图片
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import LPainter from './uni_modules/lime-painter/components/l-painter/l-painter.vue'

export default {
  components: {
    'l-painter': LPainter
  },
  data() {
    return {
      poster: {
        css: {
          // 根节点若无尺寸，自动获取父级节点
          width: '560rpx'
        },
        views: []
      },
      userInfo: uni.getStorageSync('userInfo') || {},
    };
  },
  onLoad() {
    let info = uni.getStorageSync('doctorInfo') || {}
    let sex = info.DoctorInfo['idcard'] ? info.DoctorInfo['idcard'].charAt(16) : 1;
    let url = require(`@/static/image/${sex % 2 == 0 ? 'nv' : 'nan'}.png`);
    const avatar = info.DoctorInfo['avatar'] ? info.DoctorInfo['avatar'] : info.role == 1 ? url : url

    this.poster = {
      ...this.poster,
      views: [{
        type: 'view',
        css: {
          width: '560rpx',
          borderRadius: '16rpx',
          paddingBottom: '68rpx',
          paddingTop: '30rpx',
          backgroundColor: '#F8FAFF'
        },
        views: [{
          type: 'image',
          src: avatar,
          css: {
            width: '180rpx',
            height: '180rpx',
            borderRadius: '50%',
            marginLeft: '190rpx',
          }
        },
          {
            type: 'view',
            css: {
              textAlign: 'center',
              marginTop: '8rpx'
            },
            views: [{
              type: 'text',
              text: info.DoctorInfo.name,
              css: {
                color: '#000000',
                fontSize: '36rpx'
              }
            }, {
              type: 'text',
              text: info.DoctorInfo.title.name,
              css: {
                color: '#1E293B',
                fontSize: '28rpx',
                paddingTop: '10rpx',
                marginLeft: '8rpx',
              }
            }]
          },
          {
            type: 'view',
            css: {
              textAlign: 'center',
              marginTop: '8rpx'
            },
            views: [{
              type: 'text',
              text: info.store.store.name,
              css: {
                color: '#475569',
                fontSize: '24rpx'
              }
            }, {
              type: 'text',
              text: info.DoctorInfo.depart.name,
              css: {
                color: '#475569',
                fontSize: '24rpx',
                marginLeft: '10rpx',
              }
            }]
          },
          {
            type: 'view',
            css: {
              textAlign: 'center',
              marginTop: '20rpx',
              marginBottom: '20rpx'
            },
            views: [{
              type: 'image',
              src: info.DoctorInfo.qr_code,
              css: {
                width: '388rpx',
                height: '388rpx',
              }
            }]
          },
          {
            type: 'view',
            css: {
              paddingLeft: '20rpx',
              paddingRight: '20rpx',
            },
            views: [{
              type: 'text',
              text: '专业擅长',
              css: {
                color: '#6ACDBB',
                fontSize: '28rpx',
                textAlign: 'center',
                marginLeft: '56rpx',
              }
            }, {
              type: 'text',
              text: info.DoctorInfo.good_at,
              css: {
                color: '#000000',
                fontSize: '24rpx',
                marginLeft: '8rpx',
                marginTop: '4rpx',
              }
            }]
          },
        ]
      }]
    }
    // console.log(this.poster, 'this.poster')
  },
  methods: {
    save() {
      uni.getSetting({ //获取用户的当前设置
        success: res => {
          if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
            this.saveImageToPhotosAlbum()
          } else {
            uni.authorize({ //重新发起获取授权
              scope: 'scope.writePhotosAlbum',
              success: () => {
                this.saveImageToPhotosAlbum()
              },
              fail: () => {
                uni.showToast({
                  title: '请打开保存相册权限，再点击保存相册分享',
                  icon: 'none',
                  duration: 2000
                })
                let timer = setTimeout(() => {
                  clearTimeout(timer)
                  uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
                    success: e => {
                    }
                  })
                }, 2000)
              }
            })
          }
        }
      })
    },
    saveImageToPhotosAlbum() {
      this.$refs.painter.canvasToTempFilePathSync({
        fileType: "png",
        // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
        pathType: 'url',
        quality: 1,
        success: (res) => {
          console.log(res.tempFilePath);
          // 非H5 保存到相册
          // H5 提示用户长按图另存
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function () {
              console.log('save success');
            }
          });
        },
      });
    }
  }
}
</script>
<style lang="scss" scoped>
//page {
//  padding: 1rpx;
//  width: 100%;
//  height: 100%;
//  background: linear-gradient(133deg, #5B98FF 0%, #17CDC1 100%);
//}

.box {
  display: flex;
  justify-content: center;
  margin-top: 120rpx;
}

.body-code-qr {
  width: 100%;
  height: 100%;
  padding: 1rpx 0;
  background: linear-gradient(133deg, #5B98FF 0%, #17CDC1 100%);
}

//.bg {
//	position: absolute;
//	top: 0;
//	left: 0;
//	width: 750rpx;
//  min-height: 100vh;
//	background: linear-gradient(133deg, #5B98FF 0%, #17CDC1 100%);
//}
</style>