分享按钮

components/contact.vue

@@ -1,5 +1,5 @@
 <template>
-    <button class="button" open-type="contact">
+    <button class="button" :open-type="openType">
         <slot />
     </button>
 </template>
@@ -7,6 +7,12 @@
 <script>
 export default {
     name: "contact",
+    props: {
+        openType: {
+            type: String,
+            default: "contact"
+        }
+    }
 }
 </script>
 <style scoped>

team/team/InviteUser.vue

@@ -8,8 +8,6 @@
                 </view>
             </view>
         </view>
-
-
         <view class="painter-box" v-if="userMsg.userid" style="">
             <view>
                 <l-painter ref="painter" css="position: relative;width: 280px; height: 426px">
@@ -34,6 +32,17 @@
                 </l-painter>
             </view>
         </view>
+        <view class="share">
+            <contact openType="share">
+                <view class="item">
+                    <text class="iconfont icon-weixin" />
+                </view>
+            </contact>
+
+            <view class="item" @click="saveTheImage">
+                <text class="iconfont icon-baocunbendi" />
+            </view>
+        </view>
     </My_listbox>
 </template>
 
@@ -43,8 +52,10 @@ import lPainterView from "../../uni_modules/lime-painter/components/l-painter-vi
 import lPainterText from "../../uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue"
 import lPainterImage from "../../uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue"
 import lPainterQrcode from "../../uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue"
+import contact from "../../components/contact"
+
 export default {
-    components: { lPainter, lPainterView, lPainterText, lPainterImage, lPainterQrcode },
+    components: { lPainter, lPainterView, lPainterText, lPainterImage, lPainterQrcode, contact },
     data() {
         return {
             userMsg: {
@@ -69,6 +80,72 @@ export default {
                 this.name = res.data.enterprise_hr.name ? res.data.enterprise_hr.name + ',邀请您加入' : '邀请您加入'
             })
         },
+        saveTheImage() {
+            let that = this;
+            this.loading = true;
+            this.$refs.painter.canvasToTempFilePathSync({
+                fileType: "jpg",
+                // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
+                pathType: 'url',
+                quality: 1,
+                success: (res) => {
+                    // 非H5 保存到相册
+                    // H5 提示用户长按图另存
+                    uni.saveImageToPhotosAlbum({
+                        filePath: res.tempFilePath,
+                        success: function (e) {
+                            uni.showModal({
+                                title: '提示',
+                                content: '图片已保存到系统相册',
+                                showCancel: false
+                            })
+                            that.loading = false;
+                            this.$Http.basic({
+                                "id": 20240319142702,
+                                "content": {
+                                    sat_sharematerialid: that.detail.sat_sharematerialid, type: 1
+                                }
+                            }).then(res => {
+                                console.log(type, '记录', res)
+                            })
+
+                        },
+                        fail: ({ errMsg }) => {
+                            if (errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
+                                uni.showModal({
+                                    title: '提示',
+                                    content: '请授权添加到相册权限后再试！',
+                                    showCancel: false,
+                                    complete: (complete) => {
+                                        uni.openSetting({
+                                            success: res => {
+                                                that.loading = false;
+                                                if (res.authSetting['scope.writePhotosAlbum']) {
+                                                    this.saveTheImage()
+                                                } else {
+                                                    uni.showModal({
+                                                        title: '提示',
+                                                        content: '未获取授权！已取消保存',
+                                                        showCancel: false,
+                                                    })
+                                                }
+                                            }
+                                        })
+                                    },
+                                })
+                            } else {
+                                that.loading = false;
+                                uni.showModal({
+                                    title: '提示',
+                                    content: '已取消保存',
+                                    showCancel: false,
+                                })
+                            }
+                        },
+                    });
+                },
+            });
+        },
         onBack() {
             uni.navigateBack();
         },
@@ -121,4 +198,27 @@ export default {
     justify-content: center;
     margin-top: 25px;
 }
+
+.share {
+    display: flex;
+    justify-content: space-around;
+    width: 275px;
+    margin: 30px auto 0;
+
+    .item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.3);
+        overflow: hidden;
+
+        .iconfont {
+            font-size: 28px;
+            color: #fff;
+        }
+    }
+}
 </style>