leromro-mini/pages_home/pages/certification/UserA.vue

<template>
    <view class="certification-card">
        <view class="serve-box flex_c_s">
            <view>{{viewStatus?'请上传个人形象照':'个人形象照'}}</view>
            <view v-if="viewStatus">{{ fileCount }}/1</view>
        </view>
        <view class="serve-img-contnt">
            <view class="serve-img" v-for="item in files" :key="item">
                <view class="img-close" @click="deleteImg(item)" v-if="viewStatus"></view>
                <view class="serve-is-img flex_c_c">
                    <image-viewer :src="item" :width="170" :height="227" :preview="true"></image-viewer>
                </view>
            </view>
            <view class="serve-up-img flex_c_c" @click="upImg" v-if="fileCount < maxImgCount && viewStatus">
                <up-icon name="plus" color="#C9CDD4" size="16"></up-icon>
            </view>
        </view>
    </view>

</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { wxUploadFile } from '@/utils/wxRequest.js';
import { inject } from 'vue';
import ImageViewer from './image-viewer.vue'

const props=defineProps({
    viewStatus: {
        type: Boolean,
        default: true
    },
})

const formData = inject('formData');
const fileList = ref([]);
const maxImgCount = 1;

const fileCount = computed(() => {
    return formData.volunteerPicture ? 1 : 0;
});

const files = computed(() => {
    return formData.volunteerPicture?[formData.volunteerPicture] : [];
});


const deleteImg = () => { 
    formData.volunteerPicture = '';
};
const upImg = async () => {
    try {
        const res = await wxUploadFile('img', maxImgCount);
        if(res && res.length >0 ){
            formData.volunteerPicture = res[0].url;
            fileList.value = [res];
        }
    } catch (error) {
        console.log("TCL: upImg -> error", error)
    }
}


</script>

<style lang="scss" scoped>
@import "./index.scss";
.certification-card {
    margin-bottom: 20rpx;
}
.serve-is-img {
    height: 227rpx;
}
.serve-up-img {
    padding: 90rpx 0;
}
</style>