index.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. <template>
  2. <My_listbox ref="List" :pullDown="false">
  3. <view class="painter-box" v-if="userMsg.userid" style="">
  4. <view>
  5. <l-painter ref="painter" css="position: relative;width: 280px; height: 426px">
  6. <l-painter-image
  7. src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202405151715764356769B1a729abd.webp"
  8. css="width: 280px; height: 426px;position: absolute;" />
  9. <l-painter-image
  10. :src="userMsg.headpic || 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202406011717209838416B6150695f.webp'"
  11. css="width: 56px; height:56px;border-radius: 50%;position: absolute;top:20px;left:20px;z-index:2;"
  12. object-fit="fill" />
  13. <l-painter-text :text="name"
  14. css="width:180px;line-height:24px;height:24px;position: absolute;left:86px;top:21px;z-index:2;font-family: Source Han Sans SC, Source Han Sans SC;font-weight: 500;font-size: 16px;color: #333333; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" />
  15. <l-painter-text :text="userMsg.areaname"
  16. css="width:180px;line-height:20px;height:20px;position: absolute;left:86px;top:55px;z-index:2;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-family: Source Han Sans SC, Source Han Sans SC;font-size: 14px;color: #666666;" />
  17. <l-painter-text text="扫码进入店铺"
  18. css="width:96px;line-height:17px;position: absolute;left:50%;bottom:269px;z-index:2;margin-left:-48px;font-size: 12px;color: #666666;font-family: PingFang SC, PingFang SC;" />
  19. <l-painter-qrcode :text="qrCode + 'getStore?id=' + storeid"
  20. css="width: 200px; height: 200px;position: absolute;left:50%;bottom:55px;z-index:2;margin-left:-100px;" />
  21. </l-painter>
  22. </view>
  23. </view>
  24. <view style="height: 70px;" />
  25. <view class="footer">
  26. <view class="add" hover-class="navigator-hover" @click="saveTheImage()">
  27. <block>
  28. 保存图片
  29. </block>
  30. </view>
  31. </view>
  32. </My_listbox>
  33. </template>
  34. <script>
  35. import lPainter from "../../uni_modules/lime-painter/components/l-painter/l-painter.vue"
  36. import lPainterView from "../../uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue"
  37. import lPainterText from "../../uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue"
  38. import lPainterImage from "../../uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue"
  39. import lPainterQrcode from "../../uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue"
  40. import contact from "../../components/contact"
  41. export default {
  42. components: { lPainter, lPainterView, lPainterText, lPainterImage, lPainterQrcode, contact },
  43. data() {
  44. return {
  45. userMsg: {
  46. userid: 0
  47. },
  48. qrCode: this.qrCodePrefix,
  49. name: "",
  50. storeid: uni.getStorageSync('shop').sa_storeid
  51. }
  52. },
  53. onLoad() {
  54. uni.setNavigationBarTitle({
  55. title: '店铺码',
  56. })
  57. this.getUserMsg()
  58. },
  59. methods: {
  60. getUserMsg() {
  61. this.$Http.basic({
  62. "id": 20240510104102,
  63. "content": {},
  64. }).then(res => {
  65. console.log("获取个人信息", res)
  66. if (this.cutoff(res.msg)) return;
  67. res.data.headpic = res.data.attinfos.find(v => v.usetype == "headportrait") && res.data.attinfos.find(v => v.usetype == "headportrait").url || '';
  68. this.userMsg = res.data;
  69. this.name = res.data.name ? res.data.name + ',邀请您加入' : '邀请您加入'
  70. })
  71. },
  72. saveTheImage() {
  73. let that = this;
  74. this.loading = true;
  75. this.$refs.painter.canvasToTempFilePathSync({
  76. fileType: "jpg",
  77. // 如果返回的是base64是无法使用 saveImageToPhotosAlbum,需要设置 pathType为url
  78. pathType: 'url',
  79. quality: 1,
  80. success: (res) => {
  81. // 非H5 保存到相册
  82. // H5 提示用户长按图另存
  83. uni.saveImageToPhotosAlbum({
  84. filePath: res.tempFilePath,
  85. success: function (e) {
  86. uni.showModal({
  87. title: '提示',
  88. content: '图片已保存到系统相册',
  89. showCancel: false
  90. })
  91. that.loading = false;
  92. that.$Http.basic({
  93. "id": 20240319142702,
  94. "content": {
  95. sat_sharematerialid: that.detail.sat_sharematerialid, type: 1
  96. }
  97. }).then(res => {
  98. console.log(type, '记录', res)
  99. })
  100. },
  101. fail: ({ errMsg }) => {
  102. if (errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
  103. uni.showModal({
  104. title: '提示',
  105. content: '请授权添加到相册权限后再试!',
  106. showCancel: false,
  107. complete: (complete) => {
  108. uni.openSetting({
  109. success: res => {
  110. that.loading = false;
  111. if (res.authSetting['scope.writePhotosAlbum']) {
  112. this.saveTheImage()
  113. } else {
  114. uni.showModal({
  115. title: '提示',
  116. content: '未获取授权!已取消保存',
  117. showCancel: false,
  118. })
  119. }
  120. }
  121. })
  122. },
  123. })
  124. } else {
  125. that.loading = false;
  126. uni.showModal({
  127. title: '提示',
  128. content: '已取消保存',
  129. showCancel: false,
  130. })
  131. }
  132. },
  133. });
  134. },
  135. });
  136. },
  137. onBack() {
  138. uni.navigateBack();
  139. },
  140. getSheraDate() {
  141. return {
  142. title: this.name, // 标题
  143. path: "/team/team/getInvite?id=" + this.userMsg.sys_enterpriseid, // 分享路径
  144. imageUrl: ""// 分享图
  145. };
  146. }
  147. },
  148. }
  149. </script>
  150. <style lang="scss" scoped>
  151. .head {
  152. position: relative;
  153. width: 100vw;
  154. .custom {
  155. position: absolute;
  156. width: 100vw;
  157. display: flex;
  158. justify-content: center;
  159. align-items: center;
  160. font-family: PingFang SC, PingFang SC;
  161. font-weight: 500;
  162. font-size: 17px;
  163. color: #FFFFFF;
  164. .back {
  165. position: absolute;
  166. padding: 0 10px;
  167. left: 0;
  168. color: #fff;
  169. font-size: 12px;
  170. transform: rotateY(180deg);
  171. }
  172. }
  173. }
  174. .painter-box {
  175. display: flex;
  176. justify-content: center;
  177. margin-top: 25px;
  178. }
  179. .share {
  180. display: flex;
  181. justify-content: space-around;
  182. width: 275px;
  183. margin: 30px auto 0;
  184. .item {
  185. display: flex;
  186. align-items: center;
  187. justify-content: center;
  188. width: 48px;
  189. height: 48px;
  190. border-radius: 50%;
  191. background: rgba(255, 255, 255, 0.3);
  192. overflow: hidden;
  193. .iconfont {
  194. font-size: 28px;
  195. color: #fff;
  196. }
  197. }
  198. }
  199. .footer {
  200. position: fixed;
  201. bottom: 0;
  202. width: 100vw;
  203. height: 65px;
  204. background: #FFFFFF;
  205. box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
  206. box-sizing: border-box;
  207. padding: 5px 10px;
  208. .add {
  209. display: flex;
  210. align-items: center;
  211. justify-content: center;
  212. width: 100%;
  213. height: 45px;
  214. background: #C30D23;
  215. border-radius: 5px;
  216. font-family: PingFang SC, PingFang SC;
  217. font-size: 14px;
  218. color: #FFFFFF;
  219. }
  220. }
  221. </style>