share.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <view class="card-box">
  3. <lPainter ref="painter" css="position:relative;">
  4. <lPainterView :css="'background:#ffffff;border-radius:'+tovw(8)+';width:'+tovw(280)+';height:'+tovw(463)">
  5. <lPainterImage :src="imageUrl" :css="'width:'+tovw(280)+';height:'+tovw(200)+';border-radius:'+tovw(8)" object-fit="fill" />
  6. <lPainterView :css="'display: flex;flex-direction: column;margin:auto;align-items: center;position: absolute;bottom: '+tovw(25)+';width:'+tovw(140)">
  7. <lPainterView :css="'width:'+tovw(56)+';height:'+tovw(56)+';border-radius:50%;background:#ffffff'">
  8. <lPainterImage :src="userInfo.headpoc || 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404231713854678447B26b4363.svg'" :css="'width:'+tovw(56)+';height:'+tovw(56)+';border-radius:50%;border: 2px solid #FFFFFF'" object-fit="fill" />
  9. </lPainterView>
  10. <lPainterView :css="'display: flex;align-items: center;align-content: center;font-family: Source Han Sans SC, Source Han Sans SC;padding-top:'+tovw(10)">
  11. <lPainterText :text="userInfo.name||'暂无'" :css="'font-weight: 500;font-size: '+tovw(18)+';color: #333333;'"></lPainterText>
  12. <lPainterView :css="'border: 1px solid #C30D23;padding-top:'+tovw(5)+';padding-bottom:'+tovw(5)+';padding-left:'+tovw(5)+';padding-right:'+tovw(5)+';margin-top:'+tovw(15)+';margin-bottom:'+tovw(15)+';margin-left:'+tovw(12)+';margin-right:'+tovw(12)+';color: #C30D23;border-radius:'+tovw(10)"><lPainterText :text="userInfo.rolenames||'暂无'" :css="'font-size:'+tovw(10)"></lPainterText></lPainterView>
  13. </lPainterView>
  14. <lPainterView :css="'margin-bottom: '+tovw(10)+';display: flex;align-items: center;align-content: center;align-self: self-start'">
  15. <lPainterImage src="/static/workbench/手机.svg" :css="'width:'+tovw(14)+';height:'+tovw(14)"></lPainterImage>
  16. <lPainterText :css="'margin-left: '+tovw(10)+';font-weight: 400;font-size: '+tovw(12)+';color: #666666;'" :text="userInfo.phonebumber||'暂无'"></lPainterText>
  17. </lPainterView>
  18. <lPainterView :css="'margin-bottom: '+tovw(21)+';display: flex;align-items: center;align-content: center;align-self: self-start'">
  19. <lPainterImage src="/static/workbench/邮箱.svg" :css="'width:'+tovw(14)+';height:'+tovw(14)"></lPainterImage>
  20. <lPainterText :css="'margin-left: '+tovw(10)+';font-weight: 400;font-size: '+tovw(12)+';color: #666666;'" :text="userInfo.email||'暂无'"></lPainterText>
  21. </lPainterView>
  22. <lPainterView :css="'display: flex;flex-direction: column;align-content: center;align-items: center;font-weight: 400;font-size: '+tovw(10)+';color: #999999'">
  23. <lPainterQrcode :text="qrCode + 'callingCard?userid=' + userid" :css="'width: '+tovw(70)+'; height: '+tovw(70)+';color:#000;'" />
  24. <lPainterText :css="'font-weight: 400;font-size: '+tovw(12)+';color: #666666;margin-top:'+tovw(5)" :text="'请长按扫码'"></lPainterText>
  25. </lPainterView>
  26. </lPainterView>
  27. </lPainterView>
  28. </lPainter>
  29. <view class="bottom">
  30. <view class="but" @click="loading?'':saveTheImage()" hover-class="navigator-hover">
  31. <u-loading-icon v-if="loading" color="#fff" />
  32. <text v-else>保存名片海报</text>
  33. </view>
  34. </view>
  35. </view>
  36. </template>
  37. <script>
  38. import lPainter from "../../uni_modules/lime-painter/components/l-painter/l-painter.vue"
  39. import lPainterView from "../../uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue"
  40. import lPainterText from "../../uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue"
  41. import lPainterImage from "../../uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue"
  42. import lPainterQrcode from "../../uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue"
  43. export default {
  44. components: { lPainter, lPainterView, lPainterText, lPainterImage, lPainterQrcode },
  45. data () {
  46. return {
  47. userInfo:{},
  48. userid:'',
  49. imageUrl:'',
  50. loading:false
  51. }
  52. },
  53. methods: {
  54. saveTheImage () {
  55. let that = this
  56. this.loading = true;
  57. this.$refs.painter.canvasToTempFilePathSync({
  58. fileType: "jpg",
  59. // 如果返回的是base64是无法使用 saveImageToPhotosAlbum,需要设置 pathType为url
  60. pathType: 'url',
  61. quality: 1,
  62. success: (res) => {
  63. // 非H5 保存到相册
  64. // H5 提示用户长按图另存
  65. uni.saveImageToPhotosAlbum({
  66. filePath: res.tempFilePath,
  67. success: function (e) {
  68. uni.showModal({
  69. title: '提示',
  70. content: '图片已保存到系统相册',
  71. showCancel: false
  72. })
  73. that.loading = false;
  74. },
  75. fail: ({ errMsg }) => {
  76. if (errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
  77. uni.showModal({
  78. title: '提示',
  79. content: '请授权添加到相册权限后再试!',
  80. showCancel: false,
  81. complete: (complete) => {
  82. uni.openSetting({
  83. success: res => {
  84. that.loading = false;
  85. if (res.authSetting['scope.writePhotosAlbum']) {
  86. this.saveTheImage()
  87. } else {
  88. uni.showModal({
  89. title: '提示',
  90. content: '未获取授权!已取消保存',
  91. showCancel: false,
  92. })
  93. }
  94. }
  95. })
  96. },
  97. })
  98. } else {
  99. that.loading = false;
  100. uni.showModal({
  101. title: '提示',
  102. content: '已取消保存',
  103. showCancel: false,
  104. })
  105. }
  106. },
  107. });
  108. },
  109. });
  110. },
  111. async getuserInfo (id) {
  112. let res = await this.$Http.basic({
  113. "id": 20240514161502,
  114. "content": {
  115. userid:this.userid
  116. },
  117. })
  118. this.userInfo = res.data
  119. console.log(this.userInfo,'用户信息');
  120. },
  121. async getImages () {
  122. let res = await this.$Http.basic({
  123. id:20240426154302,
  124. content: {
  125. systemclient:'wechatsaletool',
  126. locations:['business_card']
  127. }
  128. })
  129. if (res.data.business_card.length) {
  130. this.imageUrl = res.data.business_card[0].attinfos.length && res.data.business_card[0].attinfos[0].url
  131. }
  132. console.log(this.imageUrl,'海报广告图');
  133. }
  134. },
  135. onLoad (option) {
  136. this.userid = option.id
  137. this.getImages()
  138. this.getuserInfo()
  139. }
  140. }
  141. </script>
  142. <style lang="scss">
  143. .card-box {
  144. width:280px;
  145. height: 463px;
  146. margin: 20px auto 0 auto;
  147. box-sizing: border-box;
  148. .bottom {
  149. display: flex;
  150. position: fixed;
  151. bottom: 0;
  152. left: 0;
  153. width: 375px;
  154. height: 64px;
  155. background: #FFFFFF;
  156. box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
  157. box-sizing: border-box;
  158. z-index: 9999999;
  159. padding: 10px;
  160. .but {
  161. width: 355px;
  162. height: 45px;
  163. font-family: PingFang SC, PingFang SC;
  164. font-weight: 500;
  165. font-size: 14px;
  166. color: #FFFFFF;
  167. background: #C30D23;
  168. border-radius: 5px 5px 5px 5px;
  169. border: 1px solid #FFFFFF;
  170. display: flex;
  171. align-items: center;
  172. align-content: center;
  173. justify-content: space-evenly;
  174. }
  175. }
  176. }
  177. </style>