722 lines
28 KiB
Vue
Raw Normal View History

2024-07-09 18:07:55 +08:00
<template>
<div class="list-card list-common-table" v-if="id!=0">
<t-card :bordered="false" v-if="show==1">
<t-steps :defaultCurrent="current" :style="{ width: '1200px',margin:'20px auto' }">
<t-step-item :title="info.association_name"></t-step-item>
<t-step-item title="会员信息填写"></t-step-item>
<t-step-item title="公司信息填写"></t-step-item>
</t-steps>
<div style="margin-top: 40px">
<template v-if="current==0">
<t-card :title="info.association_name+'入会须知'" :bordered="true" hover-shadow
:style="{ width: '1200px',margin:'0 auto' }">
<div v-html="info.ruhuixizhu"
style="height: 500px; overflow-y: auto;white-space: break-spaces;line-height: 25px;"></div>
<div style="text-align: center;padding: 20px">
<t-checkbox v-model="ok">同意安装协议</t-checkbox>
</div>
<div style="text-align: center">
<t-button @click="okIns">下一步</t-button>
</div>
</t-card>
</template>
<template v-if="current==1">
<t-card title="会员信息填写" :bordered="true" hover-shadow :style="{ width: '1200px',margin:'0 auto' }">
<div style="padding: 20px">
<div style="padding-bottom: 20px;font-weight: bold">登陆信息</div>
<t-form
layout="inline"
labelAlign="top"
>
<t-form-item label="手机号" name="phone">
<t-input v-model="formData.phone" placeholder="请输入手机号"></t-input>
</t-form-item>
<t-form-item label="密码" name="password">
<t-input v-model="formData.password" placeholder="请输入密码"></t-input>
</t-form-item>
<t-form-item label="申请职位" name="position_id">
<t-select v-model="formData.position_id" :style="{ width: '200px' }">
<t-option v-for="(item,index) in plan_list" :label="item.position_name" :value="item.id"></t-option>
</t-select>
</t-form-item>
</t-form>
</div>
<div style="padding: 20px">
<div style="padding-bottom: 20px;font-weight: bold"></div>
<t-form
labelAlign="top"
layout="inline"
>
<t-form-item label="真实姓名" name="nikename">
<t-input v-model="formData.nikename" placeholder="请输入真实姓名"></t-input>
</t-form-item>
<t-form-item label="性别" name="gender">
<t-select v-model="formData.gender" :style="{ width: '200px' }">
<t-option key="0" label="女" value="0"></t-option>
<t-option key="1" label="男" value="1"></t-option>
</t-select>
</t-form-item>
<t-form-item label="民族" name="nation">
<t-input v-model="formData.nation" placeholder="请输入民族"></t-input>
</t-form-item>
<t-form-item label="政治面貌" name="political">
<t-input v-model="formData.political" placeholder="请输入政治面貌"></t-input>
</t-form-item>
<t-form-item label="出生日期" name="birth_time">
<t-date-picker :style="{ width: '200px' }" v-model="formData.birth_time"/>
</t-form-item>
<t-form-item label="身份证号码" name="card_number">
<t-input v-model="formData.card_number" placeholder="请输入身份证号码"></t-input>
</t-form-item>
<t-form-item label="籍贯" name="jiguan">
<t-input v-model="formData.jiguan" placeholder="请输入籍贯"></t-input>
</t-form-item>
<t-form-item label="毕业院校" name="institution">
<t-input v-model="formData.institution" placeholder="请输入毕业院校"></t-input>
</t-form-item>
<t-form-item label="学历" name="education">
<t-input v-model="formData.education" placeholder="请输入学历"></t-input>
</t-form-item>
<t-form-item label="学位" name="academic_degree">
<t-input v-model="formData.academic_degree" placeholder="请输入学位"></t-input>
</t-form-item>
<t-form-item label="工作单位" name="academic_degree">
<t-input v-model="formData.work_unit" placeholder="请输入工作单位"></t-input>
</t-form-item>
<t-form-item label="单位职务" name="unit_position">
<t-input v-model="formData.unit_position" placeholder="请输入单位职务"></t-input>
</t-form-item>
<t-form-item label="微信号" name="wx_number">
<t-input v-model="formData.wx_number" placeholder="请输入微信号"></t-input>
</t-form-item>
<t-form-item label="邮箱" name="mailbox">
<t-input v-model="formData.mailbox" placeholder="请输入邮箱"></t-input>
</t-form-item>
<t-form-item label="固定电话" name="fixed_telephone">
<t-input v-model="formData.fixed_telephone" placeholder="请输入固定电话"></t-input>
</t-form-item>
<t-form-item label="其他社会职务" name="other_social_positions">
<t-input v-model="formData.other_social_positions" placeholder="请输入其他社会职务"></t-input>
</t-form-item>
<t-form-item label="其他联系人" name="other_contacts">
<t-input v-model="formData.other_contacts" placeholder="请输入其他联系人"></t-input>
</t-form-item>
<!-- <t-form-item label="意向协会职务" name="position">-->
<!-- <t-input v-model="formData.position" placeholder="请输入意向协会职务"></t-input>-->
<!-- </t-form-item>-->
<t-form-item label="自我介绍" name="achievement_award">
<t-textarea placeholder="请输入自我介绍" :autosize="{ minRows: 3, maxRows: 5 }"
v-model="formData.introduction"/>
</t-form-item>
<t-form-item label="主要成就以及获奖情况" name="achievement_award">
<t-textarea placeholder="请输入主要成就以及获奖情况" :autosize="{ minRows: 3, maxRows: 5 }"
v-model="formData.achievement_award"/>
</t-form-item>
</t-form>
</div>
<div style="padding: 0px 20px">
<t-form labelAlign="top"
layout="inline">
<t-form-item label="形象照">
<t-upload
:action="$store.state.user.apiUrl+'/api/common/upload'"
v-model="formData.photo_image_show"
theme="image"
tips="请选择形象照"
accept="image/*"
:format-response="(response) => formatResponse(response, 0)"
></t-upload>
</t-form-item>
<t-form-item label="身份证正面照">
<t-upload
:action="$store.state.user.apiUrl+'/api/common/upload'"
v-model="formData.cardz_image_show"
theme="image"
tips="请选择身份证正面照"
accept="image/*"
:format-response="(response) => formatResponse(response, 1)"
></t-upload>
</t-form-item>
<t-form-item label="身份证反面照">
<t-upload
:action="$store.state.user.apiUrl+'/api/common/upload'"
v-model="formData.cardf_image_show"
theme="image"
tips="请选择身份证反面照"
accept="image/*"
:format-response="(response) => formatResponse(response, 2)"
></t-upload>
</t-form-item>
</t-form>
</div>
<div style="text-align: center;margin-top: 40px">
<t-space :style="{ width: '300px',margin:'0 auto',textAlign:'center' }">
<t-button @click="okreceiveCode">下一步</t-button>
</t-space>
</div>
</t-card>
</template>
<template v-if="current==2">
<t-card title="公司信息填写" :bordered="true" hover-shadow :style="{ width: '1200px',margin:'0 auto' }">
<div style="padding: 20px">
<t-form labelAlign="top"
layout="inline">
<t-form-item label="营业执照">
<t-upload
:action="$store.state.user.apiUrl+'/api/common/upload'"
v-model="formData.business_license_image_show"
theme="image"
tips="请选择营业执照"
accept="image/*"
:format-response="(response) => formatResponse(response, 3)"
></t-upload>
</t-form-item>
<t-form-item label="统一社会信用代码" name="unified_code">
<t-input v-model="formData.unified_code" placeholder="请输入统一社会信用代码"></t-input>
</t-form-item>
<t-form-item label="企业名称" name="enterprise_name">
<t-input v-model="formData.enterprise_name" placeholder="请输入企业名称"></t-input>
</t-form-item>
<t-form-item label="企业性质" name="enterprise_nature">
<t-input v-model="formData.enterprise_nature" placeholder="请输入企业性质"></t-input>
</t-form-item>
<t-form-item label="行业" name="industry_id">
<t-select v-model="formData.industry_id" :style="{ width: '200px' }">
<t-option v-for="(item,index) in industry_list" :label="item.industry_name" :value="item.id"></t-option>
</t-select>
</t-form-item>
<t-form-item label="企业网址" name="enterprise_website">
<t-input v-model="formData.enterprise_website" placeholder="请输入企业网址"></t-input>
</t-form-item>
<t-form-item label="是否上市" name="if_list">
<t-select v-model="formData.if_list" :style="{ width: '200px' }">
<t-option key="0" label="是" value="0"></t-option>
<t-option key="1" label="否" value="1"></t-option>
</t-select>
</t-form-item>
<t-form-item label="员工人数" name="employee">
<t-input v-model="formData.employee" placeholder="请输入员工人数"></t-input>
</t-form-item>
<t-form-item label="企业注册地" name="enterprise_location">
<t-input v-model="formData.enterprise_location" placeholder="请输入企业注册地"></t-input>
</t-form-item>
<t-form-item label="上年度营业额" name="previous_revenue">
<t-input v-model="formData.previous_revenue" placeholder="请输入上年度营业额"></t-input>
</t-form-item>
<t-form-item label="上年度纳税额" name="previous_tax">
<t-input v-model="formData.previous_tax" placeholder="请输入上年度纳税额"></t-input>
</t-form-item>
<t-form-item label="上年度净利润" name="previous_profit">
<t-input v-model="formData.previous_profit" placeholder="请输入上年度净利润"></t-input>
</t-form-item>
<t-form-item label="上年度公益性捐赠支出" name="previous_donation">
<t-input v-model="formData.previous_donation" placeholder="上年度公益性捐赠支出"></t-input>
</t-form-item>
<t-form-item label="其他企业任职情况" name="qitaqiyerenzhiqingkuang">
<t-input v-model="formData.qitaqiyerenzhiqingkuang" placeholder="其他企业任职情况"></t-input>
</t-form-item>
<t-form-item label="企业介绍" name="enterprise_Introduction">
<t-textarea placeholder="请输入企业介绍" :autosize="{ minRows: 3, maxRows: 5 }"
v-model="formData.enterprise_Introduction"/>
</t-form-item>
<t-form-item label="业务介绍" name="introdiction">
<t-textarea placeholder="请输入业务介绍" :autosize="{ minRows: 3, maxRows: 5 }"
v-model="formData.introdiction"/>
</t-form-item>
<t-form-item label="企业所获荣誉以及专利" name="enterprise_honor">
<t-textarea placeholder="请输入企业所获荣誉以及专利" :autosize="{ minRows: 3, maxRows: 5 }"
v-model="formData.enterprise_honor"/>
</t-form-item>
</t-form>
<t-form labelAlign="top"
layout="inline">
<t-form-item label="是否建立团组织" name="if_organization">
<t-select v-model="formData.if_organization" :style="{ width: '200px' }">
<t-option key="0" label="是" value="0"></t-option>
<t-option key="1" label="否" value="1"></t-option>
</t-select>
</t-form-item>
</t-form>
<t-form v-if="formData.if_organization==0" labelAlign="top"
layout="inline">
<t-form-item label="团组织性质" name="nature">
<t-input v-model="formData.nature" placeholder="团组织性质"></t-input>
</t-form-item>
<t-form-item label="建团时间" name="jiantuan_time">
<t-date-picker :style="{ width: '200px' }" v-model="formData.jiantuan_time"/>
</t-form-item>
<t-form-item label="建团人数" name="jiantuan_number">
<t-input v-model="formData.jiantuan_number" placeholder="建团人数"></t-input>
</t-form-item>
<t-form-item label="青年人数" name="youth_number">
<t-input v-model="formData.youth_number" placeholder="青年人数"></t-input>
</t-form-item>
<t-form-item label="上级团组织" name="superior_nature">
<t-input v-model="formData.superior_nature" placeholder="上级团组织"></t-input>
</t-form-item>
<t-form-item label="团委负责人信息" name="tuanweifuzerenxinxi">
<t-input v-model="formData.tuanweifuzerenxinxi" placeholder="团委负责人信息"></t-input>
</t-form-item>
<t-form-item label="批复文件">
<t-upload
:action="$store.state.user.apiUrl+'/api/common/upload'"
v-model="formData.documents_file_show"
theme="image"
tips="请选择批复文件(图片)"
accept="image/*"
:format-response="(response) => formatResponse(response, 4)"
></t-upload>
</t-form-item>
</t-form>
<div style="text-align: center;margin-top: 40px">
<t-space :style="{ width: '300px',margin:'0 auto',textAlign:'center' }">
<t-button @click="current=1" theme="default">上一步</t-button>
<t-button @click="submit">提交申请</t-button>
</t-space>
</div>
</div>
</t-card>
</template>
</div>
</t-card>
<div class="result-success" v-if="show==0">
<check-circle-icon class="result-success-icon" />
<div class="result-success-title">申请已提交</div>
<div class="result-success-describe">登陆小程序可查看审核结果</div>
<div>
<t-button @click="() => this.$router.push('/login?id='+id)">返回首页</t-button>
</div>
</div>
</div>
</template>
<script>
import {UserIcon, LockOnIcon} from 'tdesign-icons-vue';
import { CheckCircleIcon } from 'tdesign-icons-vue';
export default {
components: {
CheckCircleIcon,
UserIcon,
LockOnIcon,
},
data() {
return {
show:1,
formData: {
position_id:null,
industry_id:null,
phone: '',
password: '',
nikename: '',
gender: null,
birth_time: '',
nation: '',
political: '',
jiguan: '',
institution: '',
education: '',
academic_degree: '',
card_number: '',
work_unit: '',
unit_position: '',
wx_number: '',
mailbox: '',
fixed_telephone: '',
achievement_award: '',
other_contacts: '',
other_social_positions: '',
position: '',
cardf_image_show: [],
cardz_image_show: [],
photo_image_show: [],
cardf_image: '',
cardz_image: '',
photo_image: '',
business_license_image_show: [],
business_license_image: '',
unified_code: '',
enterprise_nature: '',
enterprise_website: '',
if_list: null,
employee: '',
previous_revenue: '',
previous_tax: '',
previous_profit: '',
previous_donation: '',
qitaqiyerenzhiqingkuang: '',
enterprise_Introduction: '',
introdiction: '',
enterprise_honor: '',
if_organization: null,
nature: '',
jiantuan_time: '',
jiantuan_number: '',
youth_number: '',
superior_nature: '',
tuanweifuzerenxinxi: '',
documents_file: '',
documents_file_show: [],
enterprise_location:'',
introduction:'',
enterprise_name:'',
},
ok: false,
current: 2,
id: 0,
info: '',
industry_list:[],
plan_list:[]
};
},
mounted() {
console.log(this.$route.query.id);
if (typeof (this.$route.query.id) != 'undefined') {
this.id = this.$route.query.id;
this.getInfo();
this.getPlan();
this.getIndustry();
} else {
this.$message.error('入会链接有误!', 0);
}
},
methods: {
getIndustry(){
this.$request
.post("/industry",{association_id:this.id})
.then( (res) => {
console.log(res);
if(res.code==1){
this.industry_list=res.data;
}
})
.catch((e) => {
console.log(e);
});
},
getPlan(){
this.$request
.post("/position",{association_id:this.id})
.then( (res) => {
console.log(res);
if(res.code==1){
this.plan_list=res.data;
}
})
.catch((e) => {
console.log(e);
});
},
formatResponse(res, type) {
console.log(res);
if (type == 0) {
this.formData.photo_image = res.data.url;
} else if (type == 1) {
this.formData.cardz_image = res.data.url;
} else if (type == 2) {
this.formData.cardf_image = res.data.url;
} else if (type == 3) {
this.formData.business_license_image = res.data.url;
} else {
this.formData.documents_file = res.data.url;
}
return {url: res.data.fullurl};
},
getInfo() {
this.$request
.post("/association/find", {association_id: this.id})
.then((res) => {
console.log(res);
if (res.code == 1) {
this.info = res.data;
}
})
.catch((e) => {
console.log(e);
});
},
okIns() {
if (!this.ok) {
this.$message.error('请认真阅读且同意入会协议!');
return;
}
this.current = 1;
//this.getreceiveCode();
},
okreceiveCode() {
//检查是否填写
if (this.formData.phone == '') {
this.$message.error('请输入手机号!');
return;
}
if (this.formData.password == '') {
this.$message.error('请输入密码!');
return;
}
if (this.formData.nikename == '') {
this.$message.error('请输入真实姓名!');
return;
}
if (this.formData.position_id == null) {
this.$message.error('请选择申请职位!');
return;
}
if (this.formData.birth_time == '') {
this.$message.error('请输入出生日期!');
return;
}
if (this.formData.gender == null) {
this.$message.error('请选择性别!');
return;
}
if (this.formData.nation == '') {
this.$message.error('请输入民族!');
return;
}
if (this.formData.political == '') {
this.$message.error('请输入政治面貌!');
return;
}
if (this.formData.jiguan == '') {
this.$message.error('请输入籍贯!');
return;
}
if (this.formData.institution == '') {
this.$message.error('请输入毕业院校!');
return;
}
if (this.formData.education == '') {
this.$message.error('请输入学历!');
return;
}
if (this.formData.academic_degree == '') {
this.$message.error('请输入学位!');
return;
}
if (this.formData.card_number == '') {
this.$message.error('请输入身份证号!');
return;
}
if (this.formData.work_unit == '') {
this.$message.error('请输入工作单位!');
return;
}
if (this.formData.unit_position == '') {
this.$message.error('请输入单位职务!');
return;
}
if (this.formData.wx_number == '') {
this.$message.error('请输入微信号!');
return;
}
if (this.formData.mailbox == '') {
this.$message.error('请输入邮箱!');
return;
}
if (this.formData.fixed_telephone == '') {
this.$message.error('请输入固定电话!');
return;
}
if (this.formData.achievement_award == '') {
this.$message.error('请输主要成就以及获奖情况!');
return;
}
if (this.formData.other_contacts == '') {
this.$message.error('请输入其他联系人!');
return;
}
if (this.formData.other_social_positions == '') {
this.$message.error('请输入其他社会职务!');
return;
}
if (this.formData.position == '') {
this.$message.error('请输入意向协会职务!');
return;
}
if (this.formData.cardf_image == '') {
this.$message.error('请上传身份证正面!');
return;
}
if (this.formData.cardz_image == '') {
this.$message.error('请上传身份证反面!');
return;
}
if (this.formData.photo_image == '') {
this.$message.error('请上传个人照片!');
return;
}
if(this.formData.introduction==''){
this.$message.error('请填写自我介绍!');
return;
}
this.current = 2;
},
submit(){
if (this.formData.business_license_image == '') {
this.$message.error('请上传营业执照!');
return;
}
if (this.formData.unified_code == '') {
this.$message.error('请输入统一社会信用代码!');
return;
}
if(this.formData.enterprise_name==''){
this.$message.error('请输入企业名称!');
return;
}
if (this.formData.enterprise_nature == '') {
this.$message.error('请输入企业性质!');
return;
}
if (this.formData.industry_id == null) {
this.$message.error('请选择行业!');
return;
}
if (this.formData.enterprise_website == '') {
this.$message.error('请输入企业网址!');
return;
}
if (this.formData.if_list == null) {
this.$message.error('请选择是否上市!');
return;
}
if (this.formData.employee == '') {
this.$message.error('请输入员工人数!');
return;
}
if (this.formData.enterprise_location == '') {
this.$message.error('请输入企业注册地!');
return;
}
if (this.formData.previous_revenue == '') {
this.$message.error('请输入上年度营业额!');
return;
}
if (this.formData.previous_tax == '') {
this.$message.error('请输入上年度纳税额!');
return;
}
if (this.formData.education == '') {
this.$message.error('请输入学历!');
return;
}
if (this.formData.previous_profit == '') {
this.$message.error('请输入上年度净利润!');
return;
}
if (this.formData.previous_donation == '') {
this.$message.error('请输入上年度公益性捐赠支出!');
return;
}
if (this.formData.qitaqiyerenzhiqingkuang == '') {
this.$message.error('请输入其他企业任职情况!');
return;
}
if (this.formData.enterprise_Introduction == '') {
this.$message.error('请输入企业介绍!');
return;
}
if (this.formData.introdiction == '') {
this.$message.error('请输入业务介绍!');
return;
}
if (this.formData.enterprise_honor == '') {
this.$message.error('请输入企业所获荣誉以及专利!');
return;
}
if (this.formData.if_organization == null) {
this.$message.error('是否建立团组织!');
return;
}
if(this.formData.if_organization==0){
if (this.formData.nature == '') {
this.$message.error('请输主团组织性质!');
return;
}
if (this.formData.jiantuan_time == '') {
this.$message.error('请输入建团时间!');
return;
}
if (this.formData.jiantuan_number == '') {
this.$message.error('请输入建团人数!');
return;
}
if (this.formData.youth_number == '') {
this.$message.error('请输入青年人数!');
return;
}
if (this.formData.superior_nature == '') {
this.$message.error('请输入上级团组织!');
return;
}
if (this.formData.tuanweifuzerenxinxi == '') {
this.$message.error('请输入团委负责人信息!');
return;
}
if (this.formData.documents_file == '') {
this.$message.error('请上传批复文件!');
return;
}
}
this.formData.association_id=this.id;
this.$request
.post("/move/login/add", this.formData)
.then((res) => {
console.log(res);
if (res.code==1){
this.$message.success(res.msg);
this.show=0;
}else{
this.$message.error(res.msg);
}
// setTimeout(() => {
// this.$router.push(`/login?id=`+this.id);
// }, 1000);
//this.getInfo();
})
.catch((e) => {
console.log(e);
});
},
},
};
</script>
<style lang="less" scoped>
@import '@/style/variables.less';
.result-success {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 75vh;
&-icon {
font-size: 72px;
color: var(--td-success-color);
}
&-title {
margin-top: 28px;
font-size: 20px;
color: var(--td-text-color-primary);
text-align: center;
line-height: 28px;
font-weight: 500;
}
&-describe {
margin: 8px 0 32px;
font-size: 14px;
color: var(--td-text-color-secondary);
line-height: 22px;
}
}
.t-button + .t-button {
margin-left: var(--td-comp-margin-s);
}
</style>