app-govern/pages/device/transfer.vue

<template>
    <view>
        <Cn-page :loading="loading" beforeRender>
            <view slot="body">
                <view class="transfer">
                    <!-- <div class="transfer-img" ref="qrCodeUrl" /> -->
                    <!-- <uqrcode ref="uqrcode" canvas-id="qrcode" :value="content" :options="{ margin: 10 }"></uqrcode> -->
                    <uqrcode
                        ref="uqrcode"
                        canvas-id="qrcode"
                        :value="content"
                        size="200"
                        @complete="complete"
                        :loading="false"
                    ></uqrcode>
                    <view style="height: 200rpx"></view>
                    <view class="transfer-text">请让接收人员扫码接收</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="scan">扫一扫</button>
                    </view>
                </view>
            </view>
        </Cn-page>
       <uni-popup ref="alertDialog" type="dialog">
       	<uni-popup-dialog
       		style="width: 90%; margin: 5%"
       		type="info"
       		cancelText="禁止"
       		confirmText="允许"
       		title="权限说明"
       		content='是否允许"灿能物联"使用相机?'
       		@confirm="handleScon('camera')"
       		@close="dialogClose"
       	></uni-popup-dialog>
       </uni-popup>
       <uni-popup ref="message" type="message">
       	<uni-popup-message type="info" :duration="0" style="width: 90%; margin: 5%">
       		<view style="color: #909399; font-style: 16px">相机权限使用说明:</view>
       		<view style="color: #6c6c6c; margin-top: 3rpx; ">　用于相机扫描二维码!</view>
       	</uni-popup-message>
       </uni-popup>
    </view>
</template>
<script>
// import QRCode from 'qrcodejs2'
// import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';

import { transferDevice } from '@/common/api/device'

export default {
    data() {
        return {
            loading: true,
            content: '',
            options: {},
        }
    },
    methods: {
        complete() {
            this.loading = false
        },
        back() {
            uni.navigateBack({ delta: 1 })
        },
        home() {
            uni.navigateBack({ delta: 1 })
        },
        transferDevice(userId) {
            transferDevice(this.options.id, userId).then((res) => {
                uni.showToast({
                    title: '移交成功',
                    icon: 'none',
                })
                uni.navigateBack()
            })
        },
        scan() {
            if (
                plus.os.name == 'Android' &&
                plus.navigator.checkPermission('android.permission.CAMERA') === 'undetermined'
            ) {
               //未授权
               this.$refs.message.open()
               this.$refs.alertDialog.open('bottom')
            } else {
                this.handleScon()
            }
        },
        handleScon() {
			this.$refs.message.close()
            uni.scanCode({
                onlyFromCamera:true,
                success: (res) => {
                    console.log(res)
                    let data = JSON.parse(res.result)
                    if (data.type === 'userId') {
                        this.transferDevice(data.id)
                    } else {
                        uni.showToast({
                            title: '请扫描正确的二维码',
                            icon: 'none',
                        })
                    }
                },
            })
        },
        dialogClose() {this.$refs.message.close()},
    },
    onLoad(options) {
        this.options = options
        this.content = JSON.stringify({
            type: 'transferDevice',
            id: options.id,
        })
    },
}
</script>
<style lang="scss">
.transfer {
    padding: 200rpx 34rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    .transfer-img {
    }

    .transfer-text {
        font-size: 28rpx;
        color: #999999;
        margin-top: 30rpx;
    }

    .transfer-btn {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 100rpx;
        width: 100%;

        .transfer-btn-item {
            flex: 1;
            height: 80rpx;
            border-radius: 12rpx;
            background-color: $uni-theme-color;
            font-size: 28rpx;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>