反馈修改

pages/user/erweima.vue

@@ -1,40 +1,93 @@
 <template>
-    <Cn-page :loading="loading">
-        <view slot="body">
-            <view class="transfer">
-                <!-- <div class="transfer-img" ref="qrCodeUrl" /> -->
-                <uqrcode ref="uqrcode" canvas-id="qrcode" :value="content" :options="{ margin: 10 }" :loading="false"></uqrcode>
-                <canvas id="qrcode" width="200" height="200"></canvas>
-                <view class="transfer-text">{{ userInfo.nickname }}</view>
-                <!-- <view class="transfer-btn">
-                    <button class="transfer-btn-item" style="background-color: #fff; color: #111" @click="back">
-                        返回
-                    </button>
-                    <button class="transfer-btn-item ml20" @click="home">转移成功</button>
-                </view> -->
+    <view class="transfer">
+        <!-- <div class="transfer-img" ref="qrCodeUrl" /> -->
+        <Cn-htmlToImg domId="content" @renderFinish="renderFinish" style="display: flex">
+            <view class="content" id="content">
+                <view class="user-info">
+                    <image class="avatar" :src="userInfo.avatar"></image>
+                    <view class="right">
+                        <view class="user-info-name">{{ userInfo.nickname }}</view>
+                        <view class="user-info-role">{{ roleName }}</view>
+                    </view>
+                </view>
+                <uqrcode size="260" ref="uqrcode" canvas-id="qrcode" :value="content"
+                         :loading="false"></uqrcode>
             </view>
+        </Cn-htmlToImg>
+        <view class="transfer-text">
+            <!--            <view>换个样式</view>-->
+            <view @click="save">保存图片</view>
         </view>
-    </Cn-page>
+        <!-- <view class="transfer-btn">
+            <button class="transfer-btn-item" style="background-color: #fff; color: #111" @click="back">
+                返回
+            </button>
+            <button class="transfer-btn-item ml20" @click="home">转移成功</button>
+        </view> -->
+    </view>
 </template>
 <script>
 // import QRCode from 'qrcodejs2'
 // import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
 
+import {base64ToPath} from "image-tools";
+import setting from "@/pages/engineering/setting.vue";
+
 export default {
     data() {
         return {
             loading: false,
             content: '',
+            img: '',
             userInfo: {},
         }
     },
+    computed: {
+        roleName() {
+            let roleName = ''
+            switch (this.userInfo.authorities) {
+                case 'tourist':
+                    roleName = '游客'
+                    break
+                case 'engineering_user':
+                    roleName = '工程用户'
+                    break
+                case 'app_vip_user':
+                    roleName = 'VIP用户'
+                    break
+                case 'market_user':
+                    roleName = '营销用户'
+                    break
+                case 'operation_manager':
+                    roleName = '运维管理员'
+                    break
+            }
+            return roleName
+        },
+    },
     methods: {
-        back() {
-            this.$util.refreshPrePage(2)
-        },
-        home() {
-            this.$util.refreshPrePage(2)
+        renderFinish(e) {
+            this.img = e
         },
+        save() {
+            if(!this.img){
+                setTimeout(()=>{
+                    this.save()
+                },500)
+            }
+            base64ToPath(this.img).then((res) => {
+                console.log(res)
+                uni.saveImageToPhotosAlbum({
+                    filePath: res,
+                    success: () => {
+                        this.$util.toast('已保存到系统相册')
+                    },
+                    fail: function (err) {
+                        console.log(err)
+                    },
+                });
+            })
+        }
     },
     onLoad(options) {
         this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
@@ -46,19 +99,66 @@ export default {
 }
 </script>
 <style lang="scss">
-.transfer {
-    padding: 200rpx 34rpx 0;
+.content {
+    width: 330px;
+    padding: 30px 0;
+    border-radius: 12rpx;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
+    background: #fff;
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 50rpx;
+    width: 260px;
+
+    .avatar {
+        margin-right: 20rpx;
+        height: 100rpx;
+        width: 100rpx;
+        border-radius: 8rpx;
+    }
+
+    .right {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .user-info-name {
+            font-size: 32rpx;
+            color: #333333;
+        }
+
+        .user-info-role {
+            margin-top: 10rpx;
+            font-size: 28rpx;
+            color: #999999;
+        }
+    }
+}
+
+.transfer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    height: 100vh;
+    background: #fff;
+    box-sizing: border-box;
+    padding: 100rpx 0;
 
     .transfer-img {
     }
 
     .transfer-text {
+        display: flex;
         font-size: 28rpx;
-        color: #999999;
-        margin-top: 30rpx;
+        color: rgb(122, 126, 153);
     }
 
     .transfer-btn {