GuangYuYuan-shanghu/src/pages/join/idCardEdit.vue

<template>
    <view>
        <view class="images">
            <view class="id-upload-row">
                <Upload name="idCardFront" width="187rpx" height="220rpx" :maxCount="1"
                    @fileList="onUpload($event, 'idCardFront')" :fileList="idCardFront">
                    <view class="upload-block" slot="content">
                        <view class="icon-bg"><u-icon name="camera-fill" color="#fff" size="20"></u-icon></view>
                        <text class="up-text">身份证人像面</text>
                    </view>
                </Upload>
                <Upload name="idCardBack" width="187rpx" height="220rpx" :maxCount="1"
                    @fileList="onUpload($event, 'idCardBack')" :fileList="idCardBack">
                    <view class="upload-block" slot="content">
                        <view class="icon-bg"><u-icon name="camera-fill" color="#fff" size="20"></u-icon></view>
                        <text class="up-text">身份证国徽面</text>
                    </view>
                </Upload>
            </view>

            <Upload name="idCardHand" width="187rpx" height="220rpx" :maxCount="1"
                @fileList="onUpload($event, 'idCardHand')" :fileList="idCardHand">
                <view class="upload-block full-width" slot="content">
                    <view class="icon-bg"><u-icon name="camera-fill" color="#fff" size="20"></u-icon></view>
                    <text class="up-text">手持身份证照片</text>
                </view>
            </Upload>

            <view class="footer-bar">
                <u-button shape="circle" :customStyle="{
                    color: '#fff',
                    background: 'var(--theme-color-gradient)'
                }" @click="onSubmit">确认修改</u-button>
            </view>
        </view>
    </view>
</template>

<script>

import Upload from '@/components/upload/index.vue';

export default {
    components: { Upload },
    data() {
        return {
            fieldName: '',
            idCardFront: [],
            idCardBack: [],
            idCardHand: [],
        }
    },

    onLoad(query) {
        console.log(query)
        if (query.fieldName) this.fieldName = query.fieldName
        if (query.fieldVal) {
            let fieldVal = JSON.parse(query.fieldVal)
            this.idCardFront=fieldVal[0]?[fieldVal[0]]:[]
            this.idCardBack=fieldVal[1]?[fieldVal[1]]:[]
            this.idCardHand=fieldVal[2]?[fieldVal[2]]:[]
        }

        // console.log(this.fileList, 'query')
        // console.log(this.fileList, 'query')
        // console.log(this.maxlength, 'query')
        // console.log(this.title, 'query')
    },
    onReady() {

    },
    onShow() {
    },
    methods: {

        // upload事件
        onUpload(e, t) {
            this[t] = e;
            console.log(this[t])
        },
        goBack() {
            uni.navigateBack()
        },
        onSubmit() {
            // 获取页面栈
            const pages = getCurrentPages()
            // 上一页实例
            const prevPage = pages[pages.length - 2]
            // 直接修改上一页data里的字段
            prevPage.$data.baseInfo[this.fieldName] = [...this.idCardFront,...this.idCardBack,...this.idCardHand]
            uni.navigateBack()
        }

    }
}
</script>

<style scoped lang="scss">
/* 身份证上传样式 */
.id-upload-row {
    gap: 10rpx;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
}

.upload-block {
    // width: 100%;
    height: 220rpx;
    background-color: #f9f9f9;
    border-radius: 12rpx;
    border: 1rpx dashed #eee;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;

    &.full-width {
        width: 100%;
        height: 240rpx;
    }

    .icon-bg {
        width: 60rpx;
        height: 60rpx;
        background-color: #00cba3;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16rpx;
    }

    .up-text {
        font-size: 24rpx;
        color: #666;
    }
}
</style>