YingXingAI/pages/my/shoolAuthentication/shoolAuthentication.vue

492 lines
11 KiB
Vue
Raw Normal View History

2025-06-30 14:43:02 +08:00
<template>
<view style="background-color: rgb(246, 247, 250); height: 100%">
<u-navbar title="教育经历认证"></u-navbar>
<view class="content">
<view class="form">
<view class="flex-col group">
<view class="flex-col section_2">
<view class="flex-col group_5">
<view class="flex-row group_6">
<text class="text_15">真实姓名</text>
<u-input class="input" v-model="user.name" :custom-style="inputStyle" :type="'text'"
:border="false" placeholder="请输入" inputAlign="right" />
</view>
</view>
</view>
</view>
</view>
<view class="file">
<view class="flex-col section_4">
<view class="title-tips">
<view class="title">上传证明</view>
<view class="tips"><text class="red-tips">*</text>上传学生证毕业证录取通知书校园卡所有上传信息仅供校友身份的认证</view>
</view>
<view class="flex-row equal-division" style="margin-top: 0">
<view class="flex-col equal-division-item">
<!-- <view class="flex-row">
<text :class="user.imgType==0?'text_11':'text_12'" @click="handleSelect(0)">学生证</text>
<text :class="user.imgType==1?'text_11':'text_12'" @click="handleSelect(1)">毕业证</text>
<text :class="user.imgType==2?'text_11':'text_12'" @click="handleSelect(2)">录取通知书</text>
<text :class="user.imgType==3?'text_11':'text_12'" @click="handleSelect(3)">校园卡</text>
</view> -->
<view class="flex-col section_5">
<u-upload :header='header' :action="$u.http.config.baseUrl+action" @on-success="onSuccess"
:max-size="5 * 1024 * 1024" @on-change='onChange' @on-error='onError' upload-text='' max-count="1"
ref="uUpload" :auto-upload="true" width="640"
height="396">
<template #addBtn>
<image :src="StudentCard" mode="widthFix"></image>
</template>
</u-upload>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="flex-col group_9">
<u-button class="button" type="primary" :disabled="!state" :plain="!state" @click="commitAuth"
:throttle-time='1000'>{{state?'提交认证':'提交中'}}</u-button>
</view>
<!-- 提示 -->
<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
<u-toast ref="uToast" />
</view>
</template>
<script>
import uUpload from '../../../uview-ui/components/u-upload/u-upload.vue';
import StudentCard from '@/static/common/img/StudentCard.png'
export default {
components: {
uUpload
},
data() {
return {
// input 样式
inputStyle: {
lineHeight: "0.5rem",
height: "0.5rem",
width: "1.5rem",
},
action: '/app/User/File',
user: {
name: '',
imageFile: '',
imgType: 0,
educationId: '',
userId: '',
},
header: {
Authorization: ""
},
state: true,
StudentCard:StudentCard
};
},
onLoad(e) {
if (!e.educationId) {
this.$u.route({
url: "pages/my/ShoolList/ShoolList"
})
}
this.user.educationId = e.educationId
this.user.name = this.vuex_user.name ? this.vuex_user.name : ''
},
onShow() {
if (!this.user.educationId || !this.user.name) {
this.$u.route({
url: "pages/my/ShoolList/ShoolList"
})
}
},
created() {
this.header.Authorization = "Bearer " + this.vuex_token
},
methods: {
commitAuth() {
if (!this.user.educationId) {
/* uni.showToast({
title: "提交错误",
duration: 2000,
}); */
this.$refs.uToast.show({
title: "提交错误",
type: "error",
});
setTimeout(() => {
this.$u.route({
url: "pages/my/ShoolList/ShoolList"
})
}, 1000)
return;
}
if (!this.state) {
this.tips("请勿重复提交", "error");
return;
}
// console.log(file)
let _this = this
if (!this.user.name) {
this.tips("请输入真实姓名", "error");
return;
}
var reg = new RegExp("^[\u4e00-\u9fa5]{0,}$", "g");
if (!reg.test(this.user.name)) {
// this.$tips("请输入正确的真实姓名", "error");
this.$refs.uToast.show({
title: '请输入正确的真实姓名!',
type: "error",
});
return;
}
if (!this.user.imageFile ) {
this.tips("请上传文件", "error");
return
}
this.state = false;
// uni.showLoading({
// title: '提交中...'
// })
// setTimeout(() => {
// this.state = true;
// uni.hideLoading()
// uni.showToast({
// title: "提交失败",
// duration: 2000,
// });
// }, 10000)
this.user.userId = this.vuex_user.id
this.$u.apiList.SubmitAttestationXY(this.user).then((res) => {
this.state = true;
uni.hideLoading()
/* uni.showToast({
title: "已提交",
duration: 2000,
}); */
this.$refs.uToast.show({
title: "已提交",
type: "success",
});
setTimeout(() => {
this.$u.route({
url: "pages/my/ShoolList/ShoolList"
})
}, 1000)
this.user.name = "";
this.$refs.uUpload.clear()
})
},
handleSelect(i) {
this.user.imgType = i;
},
// 提示
tips(title, type, time) {
this.$refs.uToast.show({
title: title ? title : "",
type: type ? type : "success",
duration: time ? time + "" : "1000",
});
},
onSuccess(res) {
this.user.imageFile = res.data
},
onChange(res){
if(res.errMsg.indexOf('fail')>=0){
this.user.imageFile=''
}
},
onError() {
this.tips("文件上传错误", "error");
},
//返回上一级
router() {
this.$u.route({
url: 'pages/my/ShoolList/ShoolList'
});
}
},
};
</script>
<style lang="scss" scoped>
.file {
.section_4 {
margin-top: 0.06rem;
// padding: 0.17rem 0.17rem 0.07rem 0.23rem;
background-color: rgb(255, 255, 255);
.text_11 {
color: #fff;
font-size: 0.15rem;
white-space: nowrap;
padding: 0.05rem 0.05rem;
background-color: #2e9bff;
border-radius: 0.05rem;
margin-right: 0.1rem;
border: 1px solid #fff;
}
.text_12 {
color: #2e9bff;
font-size: 0.15rem;
white-space: nowrap;
padding: 0.05rem 0.05rem;
background-color: #fff;
border-radius: 0.05rem;
margin-right: 0.1rem;
border: 1px solid #2e9bff;
}
.equal-division {
margin-top: 0.13rem;
color: rgb(46, 155, 255);
font-size: 0.12rem;
line-height: 0.16rem;
white-space: nowrap;
.equal-division-item {
flex: 1 1 1.6rem;
max-width: 100%;
.section_5 {
// border-radius: 0.05rem;
// border: 1px dotted #66b5ff;
margin-top: 0.1rem;
::v-deep .u-upload>view {
width: 100% !important;
}
::v-deep.u-list-item {
width: 100% !important;
margin: 0;
}
}
.text_16 {
margin-top: 0.055rem;
align-self: center;
}
}
.equal-division-item_1 {
max-width: 48.5%;
margin-left: 0.14rem;
flex: 1 1 1.6rem;
.text_11 {
margin-bottom: 0.13rem;
}
.section_6 {
padding: 0.17rem 0.27rem 0.14rem 0.29rem;
border-radius: 0.05rem;
border: 1px dotted #66b5ff;
}
.text_19 {
margin-top: 0.05rem;
align-self: center;
}
}
.top-section {
padding: 0.12rem 0 0.1rem;
border-radius: 0.05rem;
background: #eff7ff;
.image_6 {
width: 0.22rem;
height: 0.17rem;
}
.text_12 {
margin-left: 0.075rem;
margin-top: 0.015rem;
}
}
.bottom-section {
margin-top: 0.1rem;
padding: 0.09rem 0.17rem 0.13rem;
border-radius: 0.05rem;
background: #eff7ff;
.image_8 {
margin-right: 0.08rem;
width: 0.23rem;
height: 0.17rem;
}
.text_14 {
margin-top: 0.015rem;
}
}
}
}
}
.group_6{
display: flex;
justify-content: space-between;
}
.form {
.headerImg {
padding-bottom: 0.05rem;
}
.section_2>view>view {
// margin-left: 0.21rem;
padding: 0 !important;
border-bottom: 0.01rem solid #edeeef;
position: relative;
}
.section_2>view>view .input,
.section_2>view>view text {
line-height: 0.5rem;
}
.section_2>view>view .input {
// padding-right: 0.2rem !important;
}
.section_2>view>view text {
margin-right: 0.1rem;
min-width: 0.91rem;
white-space: nowrap;
}
.section_2>view>view image {
position: absolute;
top: 50%;
right: 0.14rem;
transform: translateY(-50%);
}
.image_3 {
width: 0.075rem;
height: 0.13rem;
}
.group {
flex: 1 1 auto;
overflow-y: auto;
}
.section_2 {
padding: 0.055rem 0 0 0;
background-color: rgb(255, 255, 255);
}
.group_16 {
margin-top: 0.21rem;
padding: 0 0.02rem;
}
.button_1,
.button {
padding: 0.13rem 0;
color: rgb(255, 255, 255);
font-size: 0.15rem;
line-height: 0.14rem;
letter-spacing: 0.03rem;
white-space: nowrap;
background-color: rgb(46, 155, 255);
border-radius: 0.1rem;
width: 3.1rem;
margin: 0 auto;
}
.button_1 {
margin-top: 0.1rem;
color: rgb(55, 59, 72);
background-color: rgb(255, 255, 255);
border: solid 0.01rem rgba(160, 162, 172, 0.33);
margin-bottom: 0.2rem;
}
.view_1 {
margin-left: 0.02rem;
}
.text_15 {
color: rgb(55, 59, 72);
font-size: 0.15rem;
line-height: 0.16rem;
white-space: nowrap;
}
.image_2 {
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
overflow: hidden;
}
.image_4 {
margin-right: 0.15rem;
margin-top: 0.28rem;
}
}
.group_9 {
background-color: rgb(246, 247, 250);
padding-bottom: 0.2rem;
position: fixed;
bottom: 180rpx;
left: 0;
right: 0;
.button {
width: 700rpx;
margin: 0 auto;
padding: 0.12rem 0;
color: rgb(255, 255, 255);
font-size: 32rpx;
line-height: 0.16rem;
letter-spacing: 0.03rem;
white-space: nowrap;
// background-color: rgb(60, 181, 251);
border-radius: 50rpx;
}
}
.content {
width: calc(100% - 60rpx);
margin: 24rpx auto;
padding: 24rpx 32rpx;
background: #fff;
border-radius: 32rpx;
}
.title{
font-weight: bold;
font-size: 32rpx;
color: rgba(0,0,0,0.9);
}
.tips{
font-size: 24rpx;
color: #7f7f7f;
margin-top: 20rpx;
}
.red-tips{
color: #EF3920;
}
::v-deep .u-add-wrap {
display: none !important;
}
</style>