talk_appAmin/pages/mine/studentCard/authentication.vue

<template>
    <view style="background-color: #FFFFFF; padding-top: 32rpx;">
        <view class="cards">
            <fileUpload v-model="form.infoDocument"  limit="1">
                <template #default-image>
        <image :src="xszfileupcode" style="width: 686rpx; height: 400rpx;"></image>
      </template>
            </fileUpload>
            <view class="card-box">
                <view class="cell1"><span class="text">姓名</span>
                    <up-input type="text" v-model="form.infoName" placeholder="请填写姓名"
                        placeholderStyle="font-size: 30rpx;text-align: right;color: #999999 100%;" color="#333333"
                        border="none" fontSize="30rpx" inputAlign="right"></up-input>
                </view>
                <view class="cell1"><span class="text">学校</span>
                    <up-input type="text" v-model="form.infoSchool" placeholder="请选择学校"
                        placeholderStyle="font-size: 30rpx;text-align: right;color: #999999 100%;" color="#333333"
                        border="none" fontSize="30rpx" inputAlign="right">
                    </up-input>
                    <image @click="show1 = true" :src="right3" style="width: 18rpx; height: 30rpx; margin-left: 12rpx;">
                    </image>
                </view>
                <view class="cell1"><span class="text">系别</span>
                    <up-input type="text" v-model="form.infoDepartment" placeholder="请选择系别"
                        placeholderStyle="font-size: 30rpx;text-align: right;color: #999999 100%;" color="#333333"
                        border="none" fontSize="30rpx" inputAlign="right"></up-input>
                    <image @click="show2 = true" :src="right3" style="width: 18rpx; height: 30rpx; margin-left: 12rpx;">
                    </image>
                </view>
                <view class="cell1"><span class="text">年级</span>
                    <up-input type="text" v-model="form.infoGrade" placeholder="请选择年级"
                        placeholderStyle="font-size: 30rpx;text-align: right;color: #999999 100%;" color="#333333"
                        border="none" fontSize="30rpx" inputAlign="right"></up-input>
                    <image @click="show3 = true" :src="right3" style="width: 18rpx; height: 30rpx; margin-left: 12rpx;">
                    </image>
                </view>
                <view class="cell1"><span class="text">学号</span>
                    <up-input type="text" v-model="form.infoCode" placeholder="请填写学号"
                        placeholderStyle="font-size: 30rpx;text-align: right;color: #999999 100%;" color="#333333"
                        border="none" fontSize="30rpx" inputAlign="right"></up-input>
                </view>
            </view>
        </view>
        <view>
            <up-picker :show="show1" :columns="schoolS" keyName="scName" @cancel="show1 = false"
                @confirm="selectSchool"></up-picker>
            <up-picker :show="show2" :columns="departmentS" keyName="scName" @cancel="show2 = false"
                @confirm="selectDepartment"></up-picker>
            <up-picker :show="show3" :columns="gradeS" keyName="scName" @cancel="show3 = false"
                @confirm="selectGrade"></up-picker>
        </view>

    </view>
    <view style="margin-top: 60rpx;">
        <view class="btn" @click="toAuthenticatito"><span class="text2">提交认证</span></view>
    </view>
</template>

<script setup>
import { listUserinfo, getUserinfo, delUserinfo, addUserinfo, updateUserinfo2 } from "@/api/system/userinfo";
import { listSchoolselect } from "@/api/system/schoolselect";
import fileUpload from '@/pages/common/file/fileUpload/index'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ref, getCurrentInstance, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app'

const show1 = ref(false)
const show2 = ref(false)
const show3 = ref(false)
const { proxy } = getCurrentInstance();
const iconConfig = proxy.iconConfig;
const xszfileupcode = iconConfig.xszfileupcode;
const right3 = iconConfig.right3;
const fileList1 = ref([])
const schoolS = reactive([[]])
const departmentS = reactive([[]])
const gradeS = reactive([[]])
const selectedSchool = ref('')
const selectedDepartment = ref('')
const selectedGrade = ref('')
const studentNumber = ref('')
const name = ref('')
const form = ref({
    doingsStatus: null,
    newUser: null,
    birthday: null,
    infoName: null,
    infoSchool: null,
    infoDepartment: null,
    infoGrade: null,
    infoCode: null,
    infoDocument: null,
    codeDocument: null,
    codeInfo: null,
    backgroundImage: null,
    auditInfo: null,
    auditTime: null,
    auditUserId: null,
    area: null,
    infoRank: null,
    infoCoin: null,
    infoActive: null,
    infoAssist: null,
    followCount: null,
    fanCount: null,
})

onLoad(async (options) => {
    try {
        const response = await listSchoolselect();
        const data = response.rows; // 假设返回的数据结构中包含 rows

        // 根据 scSelect 的值将数据分配到不同的 ref
        data.forEach(item => {
            switch (item.scSelct) {
                case '0':
                    schoolS[0].push(item);
                    break;
                case '1':
                    departmentS[0].push(item);
                    break;
                case '2':
                    gradeS[0].push(item);
                    break;
                default:
                    break;
            }
        });
        console.log(schoolS);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
})

const toAuthenticatito = () => {
    
    console.log(form.value);
    if(form.value.infoDocument == null | form.value.infoDocument === ""){
        proxy.$modal.msgError("请传入您的学生证图片")
    }
    else if (form.value.infoName == null | form.value.infoName === "") {
        proxy.$modal.msgError("请输入您的名字")
    }else if(form.value.infoSchool == null | form.value.infoSchool === ""){
        proxy.$modal.msgError("请选择您的学校")
    }
    else if(form.value.infoDepartment == null | form.value.infoDepartment === ""){
        proxy.$modal.msgError("请选择您的系别")
    }
    else if(form.value.infoGrade == null | form.value.infoGrade === ""){
        proxy.$modal.msgError("请选择您的年级")
    }
    else if(form.value.infoCode == null | form.value.infoCode === ""){
        proxy.$modal.msgError("请输入您的学号")
    }else {
        proxy.$modal.loading('正在提交数据，请稍候...');
    updateInfo()
  }

}
const updateInfo = () => {
    updateUserinfo2(form.value).then( e=> {
        console.log(e);
        proxy.$modal.closeLoading();
        proxy.$modal.msgSuccess('提交成功')
    })
}

const selectSchool = (value) => {
    form.value.infoSchool = schoolS[0][value.indexs].scName;
    show1.value = false;
}

const selectDepartment = (value) => {
    form.value.infoDepartment = departmentS[0][value.indexs].scName;
    show2.value = false;
}

const selectGrade = (value) => {
    form.value.infoGrade = gradeS[0][value.indexs].scName;
    show3.value = false;
}

</script>

<style lang="scss" scoped>
page {
    background-color: #F4F5F6;
}

.text {
    font-size: 32rpx;
    text-align: left;
    color: #666666 !important;
}

.cards {
    width: 686rpx;
    height: 900rpx;
    margin: 0 auto;
    background-color: #ffffff;

    .card-box {
        width: 100%;
        height: 96rpx;

        .cell1 {
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}

.btn {
    width: 686rpx;
    height: 80rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    background: #c0f0ec;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;

    .text2 {
        font-weight: 600;
        font-size: 30rpx;

        color: #00CCBE !important;
    }
}
</style>