app-govern/pages/user/head.vue

<template>
    <view>
        <Cn-page :loading="loading">
            <view slot="body">
                <view class="head">
                    <image class="head-img" :src="userInfo.avatar" v-if="userInfo.avatar"></image>
                    <image class="head-img" src="/static/head.png" v-else></image>
                    <view class="head-setup">
                        <view class="head-setup-item" @click="take('album')">从相册选一张</view>
                        <view class="head-setup-item" @click="take('camera')">拍一张照片</view>
                    </view>
                </view>
            </view>
        </Cn-page>

        <uni-popup ref="alertDialog" type="dialog">
            <uni-popup-dialog
                style="width: 90%; margin: 5%"
                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>
        <yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="CAMERA"></yk-authpup>
        <yk-authpup
            ref="authpup1"
            type="top"
            @changeAuth="changeAuth"
            permissionID="WRITE_EXTERNAL_STORAGE"
        ></yk-authpup>
    </view>
</template>
<script>
import { uploadImage, getImageUrl } from '@/common/api/basic'
import { apiUpdateUser } from '@/common/api/user'
import ykAuthpup from '@/components/yk-authpup/yk-authpup'
export default {
    components: {
        ykAuthpup,
    },
    data() {
        return {
            loading: false,
            userInfo: {},
            type: '',
        }
    },
    methods: {
        take(type) {
            this.type = type
            if (type == 'camera') {
                if (plus.os.name == 'Android') {
                    this.$refs['authpup'].open()
                    //未授权
                    // this.$refs.message.open()
                    // this.$refs.alertDialog.open('bottom')
                } else {
                    this.handleScon(type)
                }
            } else {
                if (plus.os.name == 'Android') {
                    this.$refs['authpup1'].open()
                    //未授权
                    // this.$refs.message.open()
                    // this.$refs.alertDialog.open('bottom')
                } else {
                    this.handleScon(type)
                }
                // this.handleScon(type)、
            }
        },
        changeAuth() {
            //这里是权限通过后执行自己的代码逻辑
            console.log('权限已授权，可执行自己的代码逻辑了')
            // this.handleScon()
            this.handleScon(this.type)
        },
        handleScon(type) {
            this.$refs.message.close()
            uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: [type],
                success: (res) => {
                    uploadImage(res.tempFilePaths[0]).then((res) => {
                        console.log(res)
                        let result = JSON.parse(res[1].data)
                        apiUpdateUser({
                            headSculpture: result.data.minFileUrl,
                        }).then((res) => {
                            console.log(res)
                            this.userInfo.headSculpture = result.data.minFileUrl
                            this.userInfo.avatar = this.$config.static + result.data.minFileUrl
                            uni.setStorageSync(this.$cacheKey.userInfo, this.userInfo)
                            this.$forceUpdate()
                        })
                    })
                },
            })
        },
        dialogClose() {
            this.$refs.message.close()
        },
    },

    onLoad(options) {
        this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
    },
}
</script>
<style lang="scss">
.head {
    .head-img {
        height: 750rpx;
        width: 750rpx;
    }

    .head-setup {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 750rpx;
        padding-bottom: 60rpx;
        background-color: #fff;

        .head-setup-item {
            height: 100rpx;
            line-height: 100rpx;
            text-align: center;
            border-top: 1rpx solid #e8e8e8;
        }
    }
}
/deep/ .uni-popup-message__box {
    border-radius: 10rpx !important;
    background-color: #fff;
}
</style>