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.
501 lines
12 KiB
501 lines
12 KiB
<template>
|
|
<view class="container">
|
|
<view class="formlist">
|
|
<u-form :model="form" ref="uFormRef" labelPosition="top" :rules="rules">
|
|
<u-form-item label="姓名" prop="name">
|
|
<u-input v-model="form.name" placeholder="请输入真实姓名" placeholderStyle="color: #D3D3D3;" />
|
|
</u-form-item>
|
|
<u-form-item label="会员标签" prop="member_tag_id">
|
|
<u-input v-model="member_tag_name" placeholder="请选择" placeholderStyle="color: #D3D3D3;" disabled disabledColor="#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="身份类型" prop="identity">
|
|
<u-input v-model="identityname" placeholder="请选择" placeholderStyle="color: #D3D3D3;" disabled disabledColor="#ffffff"
|
|
suffixIcon="arrow-down" @tap="idshow=true" />
|
|
<u-picker :show="idshow" :columns="idcolumns" @confirm="idconfirm"
|
|
@cancel="idshow=false"></u-picker>
|
|
</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="wx_code">
|
|
<u-upload class="uploadbox" @afterRead="afterRead1" :maxCount="1" :imageMode="'heightFix'"
|
|
:width="auto" :height="144">
|
|
<view class="yyzz" v-if="form.wx_code === ''">
|
|
<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.wx_code" 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
|
|
} from '@/api/memberCenter'
|
|
import {
|
|
onShow
|
|
} from '@dcloudio/uni-app';
|
|
|
|
const baseurl = ref(import.meta.env.VITE_APP_BASE_URL)
|
|
|
|
// 响应式表单数据
|
|
const form = ref({
|
|
name: '',
|
|
member_tag_id: '',
|
|
identity: '',
|
|
introduce: '',
|
|
wx_code: '',
|
|
enterprise: ''
|
|
});
|
|
|
|
const member_tag_name = ref('')
|
|
const identityname = ref('')
|
|
|
|
const ishowcommany = ref(false)
|
|
|
|
|
|
const show = ref(false);
|
|
const columns = ref([]);
|
|
|
|
const idshow = ref(false);
|
|
const idcolumns = ref([
|
|
[{
|
|
id: 1,
|
|
text: '其他(自由职业者等)'
|
|
},
|
|
{
|
|
id: 2,
|
|
text: '个体工商户'
|
|
},
|
|
{
|
|
id: 3,
|
|
text: '民营企业'
|
|
}
|
|
]
|
|
]);
|
|
|
|
// 校验规则
|
|
const rules = {
|
|
name: [{
|
|
required: true,
|
|
message: '请输入姓名',
|
|
trigger: ['blur', 'change'],
|
|
}, ],
|
|
// member_tag_id: [{
|
|
// required: true,
|
|
// message: '请输入标签',
|
|
// trigger: ['blur', 'change'],
|
|
// }, ],
|
|
// identity: [{
|
|
// required: true,
|
|
// message: '请输入身份类型',
|
|
// trigger: ['blur', 'change'],
|
|
// }, ],
|
|
introduce: [{
|
|
required: true,
|
|
message: '请输入个人介绍',
|
|
trigger: ['blur', 'change'],
|
|
}, ],
|
|
wx_code: [{
|
|
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.wx_code = JSON.parse(val.data).data.url
|
|
}
|
|
},
|
|
fail: (res) => {
|
|
console.log('失败', res);
|
|
}
|
|
})
|
|
}
|
|
|
|
// 表单引用
|
|
const uFormRef = ref(null);
|
|
|
|
const confirm = (val) => {
|
|
console.log(val.value[0]);
|
|
member_tag_name.value = val.value[0].title
|
|
form.value.member_tag_id = val.value[0].id
|
|
show.value = false
|
|
}
|
|
|
|
const idconfirm = (val) => {
|
|
identityname.value = val.value[0].text
|
|
form.value.identity = val.value[0].id
|
|
idshow.value = false
|
|
if (val.value[0].id === 1) {
|
|
ishowcommany.value = false
|
|
} else {
|
|
ishowcommany.value = true
|
|
}
|
|
}
|
|
|
|
// 提交方法
|
|
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)
|
|
}
|
|
})
|
|
if (data.length !== 0) {
|
|
form.value.enterprise = JSON.stringify(data)
|
|
}
|
|
if (form.value.member_tag_id === '') {
|
|
uni.showToast({
|
|
title: '请填写会员标签',
|
|
icon: 'fail'
|
|
})
|
|
} else {
|
|
if (form.value.identity === '') {
|
|
uni.showToast({
|
|
title: '请填写身份类型',
|
|
icon: 'fail'
|
|
})
|
|
} else {
|
|
uni.$u.toast('校验通过')
|
|
console.log(form.value);
|
|
memberApply(form.value).then((res) => {
|
|
if(res.code === 1) {
|
|
uni.switchTab({
|
|
url: '/pages/memberCenter/index'
|
|
})
|
|
uni.showToast({
|
|
title: '请等待审核',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
}).catch(() => {
|
|
// 处理验证错误
|
|
uni.$u.toast('请填写完整')
|
|
});
|
|
}
|
|
|
|
onShow(async () => {
|
|
await memberTagList().then((res) => {
|
|
columns.value = []
|
|
if (res.code === 1) {
|
|
columns.value.push(res.data)
|
|
console.log(columns.value);
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
background-color: #FFFFFF;
|
|
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: #4CAF50;
|
|
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>
|