You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
570 lines
14 KiB
570 lines
14 KiB
<template>
|
|
<view class="container">
|
|
<view class="formlist">
|
|
<u-form :model="form" ref="uFormRef" label-position="top" :rules="rules">
|
|
<u-form-item label="用户身份" prop="member_tag_name">
|
|
<u-input v-model="form.member_tag_name" placeholder="请选择" placeholderStyle="color: #D3D3D3;"
|
|
disabled disabled-color="#ffffff" suffixIcon="arrow-down" @tap="show = true" />
|
|
<u-picker :show="show" :columns="[columns]" @confirm="confirm" @cancel="show = false"
|
|
keyName="title"></u-picker>
|
|
</u-form-item>
|
|
<u-form-item
|
|
:label="form.identity===1?'会员代表姓名':(form.identity===2?'会员代表姓名':(form.identity===5?'姓名':'联系人'))"
|
|
prop="contact">
|
|
<u-input v-model="form.contact" placeholder="请输入" placeholder-style="color: #D3D3D3;" />
|
|
</u-form-item>
|
|
<u-form-item
|
|
:label="form.identity===1?'会员代表电话':(form.identity===2?'会员代表电话':(form.identity===5?'电话':'联系电话'))"
|
|
prop="tel">
|
|
<u-input v-model="form.tel" placeholder="请输入" placeholder-style="color: #D3D3D3;" />
|
|
</u-form-item>
|
|
<u-form-item label="单位名称" prop="title" v-if="form.identity!==5">
|
|
<u-input v-if="form.identity===3" v-model="form.title" placeholder="请选择"
|
|
placeholderStyle="color: #D3D3D3;" disabled disabled-color="#ffffff" suffixIcon="arrow-down"
|
|
@tap="dwshow = true" />
|
|
<u-picker v-if="form.identity===3" :show="dwshow" :columns="dwcolumns" @confirm="dwconfirm"
|
|
@cancel="dwshow = false"></u-picker>
|
|
<u-input v-if="form.identity!==3" v-model="form.title" placeholder="请输入"
|
|
placeholder-style="color: #D3D3D3;" />
|
|
</u-form-item>
|
|
<u-form-item label="行业" prop="industry" v-if="form.identity===1||form.identity===2">
|
|
<u-input v-model="form.industry" placeholder="请输入" placeholder-style="color: #D3D3D3;" />
|
|
</u-form-item>
|
|
<u-form-item label="地址" prop="address" v-if="form.identity===4">
|
|
<u-input v-model="form.address" placeholder="请选择" placeholderStyle="color: #D3D3D3;" disabled
|
|
disabled-color="#ffffff" suffixIcon="arrow-down" @tap="dzshow = true" />
|
|
<u-cascader :show="dzshow" v-model="dzvalue" :data="dzcolumns" @confirm="dzconfirm"
|
|
@close="dzshow = false"></u-cascader>
|
|
</u-form-item>
|
|
<!-- <view class="cardbox" v-if="ishowcommany">
|
|
<view v-for="(group, index) in inputGroups" :key="index" class="input-group">
|
|
<view class="inputs" @click="beforeRead(index)">
|
|
公司性质
|
|
<input class="inputclass" placeholder-class="inputplacla" disabled disabledColor="#ffffff"
|
|
:value="group.type == 1 ? '其他(自由职业者等)' : group.type === 2 ? '个体工商户' : group.type === 3 ? '民营企业' : ''"
|
|
placeholder="民营企业、个体工商户、其它（自由职业者等）" @tap="qyshow = true" />
|
|
<u-action-sheet :actions="qylist" title="请选择关联企业类型" :show="qyshow" @select="qyClick"
|
|
@close="qyshow = false"></u-action-sheet>
|
|
公司名称
|
|
<input class="inputclass" placeholder-class="inputplacla" v-model="group.title"
|
|
placeholder="请输入真实公司名称" />
|
|
营业执照
|
|
<u-upload class="uploadbox" @afterRead="afterRead" :maxCount="1" :imageMode="'heightFix'"
|
|
:width="auto" :height="144">
|
|
<view class="yyzz" v-if="group.license === ''">
|
|
<image style="width: 40rpx; height: 40rpx" src="@/static/img/yyzz.png" mode="">
|
|
</image>
|
|
上传营业执照
|
|
</view>
|
|
<image v-else @click="beforeRead(index)"
|
|
style="width: 100%; height: 288rpx; margin-top: 12rpx"
|
|
:src="baseurl + '/' + group.license" mode="scaleToFill"></image>
|
|
</u-upload>
|
|
</view>
|
|
<view v-if="index > 0" class="remove-btn" @click="removeGroup(index)">-</view>
|
|
</view>
|
|
<button @click="addGroup" class="add-btn">+ 添加一组</button>
|
|
</view> -->
|
|
<!-- <u-form-item label="个人介绍" prop="introduce">
|
|
<u-textarea v-model="form.introduce" autoHeight placeholder="请输入个人介绍" placeholderStyle="color: #D3D3D3;"></u-textarea>
|
|
</u-form-item> -->
|
|
<u-form-item label="营业执照" prop="business_license" v-if="form.identity===1||form.identity===2">
|
|
<u-upload class="uploadbox" @afterRead="afterRead1" :maxCount="1" :imageMode="'heightFix'"
|
|
:width="auto" :height="144">
|
|
<view class="yyzz" v-if="form.business_license === ''">
|
|
<image style="width: 40rpx; height: 40rpx" src="@/static/img/yyzz.png" mode=""></image>
|
|
请上传营业执照
|
|
</view>
|
|
<image v-else style="width: 100%; height: 600rpx; margin-top: 12rpx"
|
|
:src="baseurl + '/' + form.business_license" mode="scaleToFill"></image>
|
|
</u-upload>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
<view class="sumitbotton">
|
|
<view class="button" @click="submit">确认提交</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue';
|
|
import {
|
|
memberTagList,
|
|
memberApply,
|
|
xhMemberImprove
|
|
} from '@/api/memberCenter'
|
|
import {
|
|
onShow
|
|
} from '@dcloudio/uni-app';
|
|
import ssqdata from './slpace.json'
|
|
|
|
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL)
|
|
|
|
const uPickerRef = ref(null)
|
|
|
|
|
|
// 响应式表单数据
|
|
const form = ref({
|
|
mobile: '',
|
|
member_tag_name: '',
|
|
contact: '',
|
|
tel: '',
|
|
title: '',
|
|
identity: '',
|
|
address: '',
|
|
industry: '',
|
|
business_license: ''
|
|
});
|
|
|
|
const identityname = ref('')
|
|
|
|
const ishowcommany = ref(false)
|
|
|
|
const show = ref(false);
|
|
const columns = ref([{
|
|
id: 1,
|
|
title: '个体私营企业'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '个体工商户'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '理事单位'
|
|
},
|
|
{
|
|
id: 4,
|
|
title: '商协会'
|
|
},
|
|
{
|
|
id: 5,
|
|
title: '自然人'
|
|
},
|
|
{
|
|
id: 6,
|
|
title: '其他单位'
|
|
}
|
|
]);
|
|
|
|
|
|
const dwshow = ref(false);
|
|
const dwcolumns = ref([
|
|
[{
|
|
id: '内蒙古自治区党委统战部',
|
|
text: '内蒙古自治区党委统战部'
|
|
},
|
|
{
|
|
id: '内蒙古自治区民营经济发展服务局',
|
|
text: '内蒙古自治区民营经济发展服务局'
|
|
},
|
|
{
|
|
id: '内蒙古自治区工业和信息化厅',
|
|
text: '内蒙古自治区工业和信息化厅'
|
|
},
|
|
{
|
|
id: '内蒙古自治区司法厅',
|
|
text: '内蒙古自治区司法厅'
|
|
},
|
|
{
|
|
id: '内蒙古自治区人力资源和社会保障厅',
|
|
text: '内蒙古自治区人力资源和社会保障厅'
|
|
},
|
|
{
|
|
id: '内蒙古自治区退役军人事务厅',
|
|
text: '内蒙古自治区退役军人事务厅'
|
|
},
|
|
{
|
|
id: '内蒙古自治区药品监督管理局',
|
|
text: '内蒙古自治区药品监督管理局'
|
|
},
|
|
{
|
|
id: '国家税务总局内蒙古自治区税务局',
|
|
text: '国家税务总局内蒙古自治区税务局'
|
|
},
|
|
{
|
|
id: '内蒙古自治区工商业联合会',
|
|
text: '内蒙古自治区工商业联合会'
|
|
}
|
|
]
|
|
]);
|
|
const dzshow = ref(false);
|
|
const dzvalue = ref(['内蒙古自治区'])
|
|
const dzcolumns = ref([ssqdata]);
|
|
|
|
// 校验规则
|
|
const rules = {
|
|
contact: [{
|
|
required: true,
|
|
message: '请输入姓名',
|
|
trigger: ['blur', 'change'],
|
|
}, ],
|
|
tel: [{
|
|
required: true,
|
|
message: '请输入电话',
|
|
trigger: ['blur', 'change'],
|
|
}, ],
|
|
title: [{
|
|
required: true,
|
|
message: '请输入单位名称',
|
|
trigger: ['blur', 'change'],
|
|
}, ],
|
|
industry: [{
|
|
required: true,
|
|
message: '请输入行业',
|
|
trigger: ['blur', 'change'],
|
|
}, ],
|
|
member_tag_name: [{
|
|
required: true,
|
|
message: '请选择身份类别',
|
|
trigger: ['blur', 'change'],
|
|
}, ],
|
|
address: [{
|
|
required: true,
|
|
message: '请选择地址',
|
|
trigger: ['blur', 'change'],
|
|
}, ],
|
|
business_license: [{
|
|
required: true,
|
|
message: '请上传营业执照',
|
|
trigger: ['blur', 'change'],
|
|
}, ],
|
|
};
|
|
|
|
const inputGroups = ref([{
|
|
type: '',
|
|
title: '',
|
|
license: ''
|
|
}])
|
|
|
|
const addGroup = () => {
|
|
inputGroups.value.push({
|
|
type: '',
|
|
title: '',
|
|
license: ''
|
|
})
|
|
}
|
|
|
|
const qyshow = ref(false)
|
|
const qylist = ref([{
|
|
id: 1,
|
|
name: '其他(自由职业者等)',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '个体工商户',
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '民营企业',
|
|
}
|
|
]);
|
|
const qyClick = async (val) => {
|
|
inputGroups.value[upclickindex.value].type = val.id
|
|
}
|
|
|
|
const removeGroup = (index) => {
|
|
inputGroups.value.splice(index, 1)
|
|
}
|
|
|
|
const upclickindex = ref(0)
|
|
const beforeRead = (index) => {
|
|
upclickindex.value = index
|
|
}
|
|
|
|
const afterRead = async (e) => {
|
|
uni.uploadFile({
|
|
url: import.meta.env.VITE_APP_BASE_URL + '/api/file/image',
|
|
filePath: e.file.url,
|
|
name: 'file',
|
|
header: {
|
|
'token': uni.getStorageSync('access_token')
|
|
},
|
|
success: async (val) => {
|
|
if (JSON.parse(val.data).data.url) {
|
|
inputGroups.value[upclickindex.value].license = JSON.parse(val.data).data.url
|
|
}
|
|
},
|
|
fail: (res) => {
|
|
console.log('失败', res);
|
|
}
|
|
})
|
|
}
|
|
|
|
const afterRead1 = async (e) => {
|
|
uni.uploadFile({
|
|
url: import.meta.env.VITE_APP_BASE_URL + '/api/file/image',
|
|
filePath: e.file.url,
|
|
name: 'file',
|
|
header: {
|
|
'token': uni.getStorageSync('access_token')
|
|
},
|
|
success: async (val) => {
|
|
if (JSON.parse(val.data).data.url) {
|
|
form.value.business_license = JSON.parse(val.data).data.url
|
|
}
|
|
},
|
|
fail: (res) => {
|
|
console.log('失败', res);
|
|
}
|
|
})
|
|
}
|
|
|
|
// 表单引用
|
|
const uFormRef = ref(null);
|
|
|
|
const confirm = (val) => {
|
|
form.value.member_tag_name = val.value[0].title
|
|
form.value.identity = val.value[0].id
|
|
show.value = false
|
|
}
|
|
|
|
const dwconfirm = (val) => {
|
|
form.value.title = val.value[0].id
|
|
dwshow.value = false
|
|
}
|
|
|
|
const dzconfirm = (val) => {
|
|
console.log(val);
|
|
form.value.address = val[1] + '-' + val[2]
|
|
dzshow.value = false
|
|
}
|
|
|
|
|
|
// 提交方法
|
|
function submit() {
|
|
uFormRef.value.validate().then(valid => {
|
|
if (valid) {
|
|
let data = []
|
|
// inputGroups.value.forEach((obj) => {
|
|
// if (obj.type == '' || obj.title == '' || obj.license == '') {
|
|
// uni.showToast({
|
|
// title: '请填写完整',
|
|
// icon: 'fail'
|
|
// })
|
|
// } else {
|
|
// data.push(obj)
|
|
// }
|
|
// })
|
|
uni.$u.toast('校验通过')
|
|
delete form.value.member_tag_name
|
|
console.log(form.value);
|
|
xhMemberImprove(form.value).then((res) => {
|
|
if (res.code === 1) {
|
|
uni.switchTab({
|
|
url: '/pages/memberCenter/index'
|
|
})
|
|
uni.showToast({
|
|
title: '请等待审核',
|
|
icon: 'success',
|
|
duration: 2000
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'fail',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}).catch(() => {
|
|
// 处理验证错误
|
|
uni.$u.toast('请填写完整')
|
|
})
|
|
}
|
|
|
|
|
|
onLoad(async (e) => {
|
|
form.value.mobile = e.number
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
background-color: #e9ecf3;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow-y: hidden;
|
|
|
|
.formlist {
|
|
width: 100%;
|
|
max-height: calc(100vh - 168rpx);
|
|
background: #e9ecf3;
|
|
padding: 40rpx;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
|
|
.cardbox {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.input-group {
|
|
padding: 40rpx;
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20rpx;
|
|
background-color: #e2e2e2;
|
|
}
|
|
|
|
.inputs {
|
|
flex: 9;
|
|
}
|
|
|
|
input {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
border: 2rpx solid #ddd;
|
|
padding: 0 20rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.remove-btn,
|
|
.add-btn {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #f0f0f0;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.remove-btn {
|
|
margin-left: 20rpx;
|
|
border-radius: 50%;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
color: #ff0000;
|
|
border: 2rpx solid #ff0000;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
.add-btn {
|
|
width: auto;
|
|
padding: 0 30rpx;
|
|
background: #007fff;
|
|
color: white;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.inputclass {
|
|
margin-top: 12rpx;
|
|
margin-bottom: 36rpx;
|
|
margin-right: 0 !important;
|
|
height: 100rpx !important;
|
|
border-radius: 10rpx;
|
|
background: #ffffff;
|
|
}
|
|
|
|
:deep(.inputplacla) {
|
|
font-family: Source Han Sans;
|
|
font-size: 24rpx;
|
|
font-weight: 350;
|
|
line-height: 32.76rpx;
|
|
letter-spacing: normal;
|
|
color: #d3d3d3;
|
|
}
|
|
|
|
.yyzz {
|
|
margin-top: 12rpx;
|
|
width: 100%;
|
|
height: 288rpx;
|
|
border-radius: 16rpx;
|
|
background: #ffffff;
|
|
display: grid;
|
|
align-content: center;
|
|
justify-items: center;
|
|
font-family: Source Han Sans;
|
|
font-size: 30rpx;
|
|
font-weight: 350;
|
|
line-height: 70rpx;
|
|
letter-spacing: normal;
|
|
color: #cccccc;
|
|
}
|
|
|
|
:deep(.u-upload) {
|
|
.u-upload__wrap {
|
|
view {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sumitbotton {
|
|
width: 100%;
|
|
height: 168rpx;
|
|
background: #ffffff;
|
|
/* 标签栏投影 */
|
|
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
bottom: 0;
|
|
|
|
.button {
|
|
width: 574rpx;
|
|
height: 96rpx;
|
|
border-radius: 248rpx;
|
|
background: linear-gradient(90deg, #007fff 0%, #99ccff 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Source Han Sans;
|
|
font-size: 36rpx;
|
|
font-weight: 350;
|
|
line-height: 32rpx;
|
|
text-align: justify;
|
|
/* 浏览器可能不支持 */
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: normal;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.yyzz {
|
|
margin-top: 12rpx;
|
|
width: 100%;
|
|
height: 288rpx;
|
|
border-radius: 16rpx;
|
|
background: #ffffff;
|
|
display: grid;
|
|
align-content: center;
|
|
justify-items: center;
|
|
font-family: Source Han Sans;
|
|
font-size: 30rpx;
|
|
font-weight: 350;
|
|
line-height: 70rpx;
|
|
letter-spacing: normal;
|
|
color: #cccccc;
|
|
}
|
|
|
|
:deep(.u-upload) {
|
|
.u-upload__wrap {
|
|
view {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.u-input {
|
|
background-color: #ffffff;
|
|
height: 100rpx !important;
|
|
}
|
|
|
|
.u-form-item__body__left__content__label {
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|