dd-OFFICE/src/views/personal/signature.vue

<template>
    <div class="signature-container">
        <div class="imgbox">
            <div v-if="!img" class="img-framework" @click="handleUpdateSignature">
                <van-icon name="plus" color="#817f7f" size="34" />
            </div>
            <img v-else :src="img" alt="个签">
            <div class="state">
                <van-icon :name="examineIconName" size="20" />
                <span>{{ signatureStateText }}</span>
            </div>
        </div>
        <div class="btnbox" @click="handleResetSignature">
            <span>重新上传</span>
        </div>
    </div>
</template>

<script>

import { waitAuthentication, getChooseImages } from '@/utils/dingtalk'

import updateUserInfoMixin from './updateUserInfo.mixin'

import { mapState } from 'vuex'
import upload from '@/utils/upload'

export default {
    mixins: [
        updateUserInfoMixin
    ],
    computed: {
        ...mapState('user', {
            // 签名状态:0=待审核,1=审核通过,2=审核驳回  
            signatureStateText: state => state.signatureStateText,
        }),
        examineIconName () {
            return 'checked'
        },
    },
    data () {
        return {
            img: require('@/assets/index/index-business-libs.png'),
        }
    },
    mounted() {
        const that = this
        waitAuthentication({
            jsApiList: [],
            errorCallback: that.handleAError.bind(that),
            readyCallback: that.handleAReady.bind(that)
        })

    },
    methods: {
        handleAError (error) {
            console.log('error', error);
        },
        handleAReady (){
            this.handleResetSignature()
        },
        // NOTE：点击上传个签
        handleUpdateSignature() {
            const params = {
                type: 4,
                signature: this.img
            }
            this.put_userinfo(params, true)
        },

        // NOTE: 重新上传个签
        async handleResetSignature () {
            let toastLoadingInstance = null
            try {
                const result = await getChooseImages({})    
                console.log('%c chooseimg res >>>', 'background: blue; color: #fff', result);


                toastLoadingInstance = this.$toast.loading({
                    message: '图片上传中',
                    duration: 0
                })

                
                // TODO: Update image
                const uploadResult = await upload(result.files)
                console.log('%c upload result >>>', 'background: blue; color: #fff', uploadResult);
                // TODO: Update userinfo
                this.img = uploadResult
                this.handleUpdateSignature()
            } catch (error) {
                console.log('getChooseImage error', error);
            } finally {
                if (toastLoadingInstance) {
                    toastLoadingInstance.clear()
                }
            }
        },
    }
}
</script>

<style lang="less">
@import url("@/styles/variables.less");
.signature {
    &-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 50px 14px 0;
    }
}
.imgbox {
    margin-bottom: 80px;
    .img-framework {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 180px;
        height: 180px;
        border-radius: 8px;
        border: 1px dashed #817f7f;
    }

    img {
        width: 180px;
        height: 180px;
        border-radius: 5px;
        overflow: hidden;
    }

    .state {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 0;
        text-align: center;
        .van-icon {
            color: @main-color;
        }
        span {
            margin-left: 8px;
            font-size: @text-secondery-size;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: @text-xsecondery-color;
            line-height: 20px;
        }
    }

}
</style>