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.
599 lines
19 KiB
599 lines
19 KiB
<template> |
|
<view class="app-wallpaper" :style="{padding:paddingTop?'16rpx 26rpx':'0rpx 26rpx 16rpx 26rpx'}"> |
|
<view class="fxx-container row"> |
|
<view class="fxx-content"> |
|
<u-form errorType="toast" labelPosition="left" :model="model" :rules="rules" ref="authForm" |
|
labelWidth="160rpx" label-style="font-size:32rpx;color:#020B18;"> |
|
<u-form-item prop="userInfo.sex" :custom-style="{padding:'34rpx 0'}"> |
|
<button open-type="chooseAvatar" @chooseavatar="uploadAvatar" class="avatarBtn" |
|
style="background:transparent;"> |
|
<view class="" style="margin:auto;position: relative"> |
|
<u-avatar :src="model.userInfo.avatar" size="160" |
|
custom-style="margin:auto;"></u-avatar> |
|
<view class="camera" style="position:absolute;right:0;bottom:0"> |
|
<u-image :src="staticImage.camera" width="64" height="64"></u-image> |
|
</view> |
|
</view> |
|
</button> |
|
</u-form-item> |
|
<u-form-item required :custom-style="{ |
|
padding:'36rpx 0' |
|
}" label="主体" prop="userInfo.body" borderBottom> |
|
<u-radio-group v-model="model.userInfo.principal_part" placement="row" @change="bodyChange"> |
|
<u-radio size="32" labelSize="32" icon-size="24" activeColor="#FF9545" |
|
:customStyle="{marginRight: '50rpx'}" v-for="(item, index) in bodyList" :key="index" |
|
:label="item.name" :name="item.id"> |
|
</u-radio> |
|
</u-radio-group> |
|
</u-form-item> |
|
<u-form-item required :custom-style="{ |
|
padding:'36rpx 0' |
|
}" :label="model.userInfo.principal_part === 2?'联系人':'姓名'" prop="userInfo.name" borderBottom> |
|
<u-input fontSize="28" placeholder="请填写您的真实姓名" v-model="model.userInfo.name" |
|
border="none"></u-input> |
|
</u-form-item> |
|
<u-form-item required :custom-style="{ |
|
padding:'36rpx 0' |
|
}" label="性别" prop="userInfo.sex" borderBottom> |
|
<u-radio-group v-model="model.userInfo.sex" placement="row" @change="sexChange"> |
|
<u-radio size="32" labelSize="32" icon-size="24" activeColor="#FF9545" |
|
:customStyle="{marginRight: '80rpx'}" v-for="(item, index) in sexList" :key="index" |
|
:label="item.name" :name="item.id"> |
|
</u-radio> |
|
</u-radio-group> |
|
</u-form-item> |
|
<u-form-item required v-if="model.userInfo.principal_part === 2" :custom-style="{ |
|
padding:'36rpx 0' |
|
}" label="公司名称" prop="userInfo.company" borderBottom> |
|
<u-input fontSize="28" placeholder="请填写公司全称" v-model="model.userInfo.company" |
|
border="none"></u-input> |
|
</u-form-item> |
|
<u-form-item required :custom-style="{ |
|
padding:'36rpx 0' |
|
}" label="手机号码" prop="userInfo.phone" borderBottom> |
|
<u-input fontSize="28" placeholder="请输入" v-model="model.userInfo.phone" border="none"></u-input> |
|
</u-form-item> |
|
<u-form-item required :custom-style="{ |
|
padding:'36rpx 0' |
|
}" label="现住地" prop="userInfo.address" borderBottom> |
|
<u-input fontSize="28" placeholder="请输入" v-model="model.userInfo.address" |
|
border="none"></u-input> |
|
</u-form-item> |
|
<u-form-item required :custom-style="{ |
|
padding:'36rpx 0' |
|
}" label="邮箱" prop="userInfo.email" borderBottom> |
|
<u-input fontSize="28" placeholder="请输入" v-model="model.userInfo.email" border="none"></u-input> |
|
</u-form-item> |
|
<u-form-item required :custom-style="{ |
|
padding:'36rpx 0' |
|
}" label="所属街道" prop="userInfo.street_id" borderBottom> |
|
<u-text @click="openStreetPicker" :text="model.userInfo.street_name||'请选择'" size="28" |
|
:color="model.userInfo.street_name?'#020B18':'#AFB5BE'" suffixIcon="arrow-right" |
|
:icon-style="{color:(model.userInfo.street_name?'#020B18':'#AFB5BE')}"></u-text> |
|
</u-form-item> |
|
<u-form-item required :custom-style="{ |
|
padding:'36rpx 0' |
|
}" label="所属社区" prop="userInfo.community" borderBottom> |
|
<u-text @click="openCommunityPicker" :text="model.userInfo.community_name||'请选择'" size="28" |
|
:color="model.userInfo.community_name?'#020B18':'#AFB5BE'" suffixIcon="arrow-right" |
|
:icon-style="{color:(model.userInfo.community_name?'#020B18':'#AFB5BE')}"></u-text> |
|
</u-form-item> |
|
|
|
<u-form-item required :custom-style="{ |
|
padding:'36rpx 0' |
|
}" label="顾问类别" prop="userInfo.advisor_type " borderBottom> |
|
<view class="advisorType"> |
|
|
|
<view class="tags row" v-if="advisor_type?.length > 0" style="align-items: center;"> |
|
<view class="tag" v-for="(item,index) in advisor_type"> |
|
<uv-tags closable type="warning" :text="item.label" @close="delAdvisorType(index)"></uv-tags> |
|
</view> |
|
<view class="" style="padding-top: 30rpx;"> |
|
<u-text @click="openAdvisorPicker" text="" size="28" color="#AFB5BE" suffixIcon="arrow-right" icon-style="color:#AFB5BE;"></u-text> |
|
</view> |
|
</view> |
|
<view class="tags" v-else> |
|
<u-text @click="openAdvisorPicker" text="请选择" size="28" color="#AFB5BE" suffixIcon="arrow-right" icon-style="color:#AFB5BE;"></u-text> |
|
</view> |
|
</view> |
|
|
|
|
|
</u-form-item> |
|
|
|
<u-form-item :custom-style="{ |
|
padding:'36rpx 0' |
|
}" prop="userInfo.infomation" borderBottom> |
|
<view class="row" style="margin-bottom:22rpx;"> |
|
<view style="max-width:25px;"> |
|
<u-text text="*" size="20px" |
|
color="#f56c6c"></u-text> |
|
</view> |
|
<u-text text="顾问介绍" size="32" |
|
color="#020B18"></u-text> |
|
</view> |
|
<u-textarea v-model="model.userInfo.infomation" border="none" placeholder="请输入个人履历及服务擅长项" |
|
height="220" :custom-style="{ |
|
backgroundColor:'#FAFAFA', |
|
padding:'20rpx' |
|
}"></u-textarea> |
|
</u-form-item> |
|
<u-form-item prop="userInfo.sex" :custom-style="{padding:'34rpx 0'}"> |
|
<view class="row" style="margin-bottom:22rpx;"> |
|
<view style="max-width:25px;"> |
|
<u-text text="*" size="20px" |
|
color="#f56c6c"></u-text> |
|
</view> |
|
<u-text text="资料上传" size="32" |
|
color="#020B18"></u-text></view> |
|
<uv-upload width="160ropx" height="160rpx" :fileList="images.aptitude" name="1" multiple |
|
:maxCount="10" uploadIcon="plus" @delete="(res) => {uploadDel(res,'aptitude')}" |
|
@afterRead="(res) => {uploadPut(res,'aptitude')}"></uv-upload> |
|
</u-form-item> |
|
|
|
</u-form> |
|
|
|
</view> |
|
</view> |
|
<view class="foot-button border-box"> |
|
<u-button type="primary" :text="isEdit?'保存':'立即认证'" shape="circle" :custom-style="{ |
|
color:'#020B18', |
|
backgroundColor:'#FF9545', |
|
border:'none', |
|
fontSize:'36', |
|
fontWeight:'400', |
|
}" @click="submit"></u-button> |
|
</view> |
|
<uv-picker ref="street" :columns="[streetList]" keyName="name" @confirm="selectStreet"></uv-picker> |
|
<uv-picker ref="community" :columns="[communityList]" keyName="name" @confirm="selectCommunity"></uv-picker> |
|
<uv-picker ref="advisor" :columns="[advisorTypeList]" keyName="label" @confirm="selectAdvisor"></uv-picker> |
|
|
|
<uv-popup ref="advisorPopup" mode="bottom" round="10rpx" closeable safeAreaInsetTop safeAreaInsetBottom |
|
custom-style="position:relative;"> |
|
<view class="title row" style="position:absolute;justify-content: center;width:100%;top:20rpx;left:0;"> |
|
<view class="value col" style="position: relative;text-align: center;"> |
|
|
|
<!-- <u-text text="协议内容" size="38" color="#191919"></u-text>--> |
|
<view class="" style="position: relative;display:inline-block;"> |
|
<view style="color:#191919;font-size:38rpx;display:inline-block;position: relative;z-index: 2;"> |
|
选择顾问类型</view> |
|
<!-- <view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view>--> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="pop-service-container" style="min-height:500rpx;position:relative;"> |
|
<view class="" style="width:100%;padding-bottom:114rpx;"> |
|
<u-cell-group custom-style="max-height:700rpx;overflow:auto;" v-if="advisorTypeList.length"> |
|
<u-cell |
|
size="large" |
|
:title="item.label" |
|
isLink |
|
right-icon="" |
|
@click="selectAdvisor(index)" |
|
v-for="(item,index) in advisorTypeList"> |
|
<template #value> |
|
<view class=""> |
|
<view class="" style="display:flex;align-items: center"> |
|
<view class=""> |
|
<u-checkbox-group @change="typeCheckChange"> |
|
<u-checkbox :name="index" |
|
:customStyle="{marginBottom: '0',marginTop: '0',marginLeft:'15rpx'}" |
|
size="32" :checked="item.checked" activeColor="#FF9545" |
|
iconSize="30"> |
|
</u-checkbox> |
|
</u-checkbox-group> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
</u-cell> |
|
</u-cell-group> |
|
<u-cell-group custom-style="max-height:700rpx;overflow:auto;" v-else> |
|
<u-cell size="large" title="暂无"> |
|
</u-cell> |
|
</u-cell-group> |
|
</view> |
|
<view class="row" style="position:absolute;bottom:0;width:100%;padding-top:30rpx;" v-if="true"> |
|
<view class="col-6" style="padding:0 30rpx;'"> |
|
<u-button text="取消" @click="$refs.advisorPopup.close()"></u-button> |
|
</view> |
|
<view class="col-6" style="padding:0 30rpx;"> |
|
<u-button color="#FF9545" text="确认" @click="advisorConfirm" |
|
custom-style="color:#020B18;"></u-button> |
|
</view> |
|
</view> |
|
</view> |
|
</uv-popup> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { |
|
imghost |
|
} from '@/config/host.js' |
|
import MzSubsection from '@/components/MzSubsection/Index.vue'; |
|
import api from '@/utils/functions.js'; |
|
import { |
|
getCommonStreet, |
|
systemConfig, |
|
webConfig |
|
} from "@/api/other"; |
|
import { |
|
avatarUpload, |
|
fxxApply, |
|
userExtends |
|
} from "@/api/user"; |
|
import { |
|
setAdvisor |
|
} from "@/api/advisor"; |
|
|
|
export default { |
|
components: { |
|
MzSubsection |
|
}, |
|
props: { |
|
paddingTop: { |
|
type: Boolean, |
|
default: true, |
|
}, |
|
isEdit: { |
|
type: Boolean, |
|
default: false |
|
} |
|
}, |
|
data() { |
|
return { |
|
polShow: false, |
|
advisor_type:[], |
|
model: { |
|
userInfo: { |
|
name: '', |
|
avatar: '', |
|
sex: 1, |
|
principal_part: 1, |
|
phone: '', |
|
company: '', |
|
address: '', |
|
street_id: '', |
|
community_id: '', |
|
community_name: '', |
|
street_name: '', |
|
email: '', |
|
advisor_type: '', |
|
infomation: '', |
|
aptitude: [], |
|
}, |
|
}, |
|
images: { |
|
aptitude: [], |
|
}, |
|
rules: { |
|
'userInfo.principal_part': { |
|
type: 'number', |
|
required: true, |
|
message: '请选择主体', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'userInfo.avatar': { |
|
type: 'number', |
|
required: true, |
|
message: '请选择头像', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'userInfo.name': { |
|
type: 'string', |
|
required: true, |
|
message: '请填写姓名', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'userInfo.sex': { |
|
type: 'string', |
|
max: 1, |
|
required: true, |
|
message: '请选择男或女', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'userInfo.phone': { |
|
type: 'string', |
|
required: true, |
|
message: '请输入手机号码', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'userInfo.street_id': { |
|
type: 'string', |
|
required: true, |
|
message: '请选择街道', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'userInfo.community_id': { |
|
type: 'string', |
|
required: true, |
|
message: '请选择社区', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'userInfo.advisor_type': { |
|
type: 'string', |
|
required: true, |
|
message: '请选择顾问类型', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'userInfo.infomation': { |
|
type: 'string', |
|
required: true, |
|
message: '请输入介绍', |
|
trigger: ['blur', 'change'] |
|
}, |
|
}, |
|
sexList: [{ |
|
id: 1, |
|
name: '男', |
|
disabled: false, |
|
}, |
|
{ |
|
id: 2, |
|
name: '女', |
|
disabled: false, |
|
}, |
|
], |
|
bodyList: [{ |
|
id: 1, |
|
name: '个人', |
|
disabled: false, |
|
}, |
|
{ |
|
id: 2, |
|
name: '公司或组织', |
|
disabled: false, |
|
}, |
|
], |
|
political_outlook_name: '', |
|
current: 1, |
|
title: '顾问认证', |
|
loading: true, |
|
staticImage: { |
|
bg: imghost + '/BG.png', |
|
newIcon: imghost + '/new-icon.png', |
|
fxxLogo: imghost + '/fxx-logo.png', |
|
fxx1: imghost + '/fxx-1.png', |
|
camera: imghost + '/camera.png', |
|
}, |
|
user: { |
|
avatar: imghost + '/banner.png', |
|
nickname: '清晨的风', |
|
coupons: 221, |
|
id: 88685, |
|
}, |
|
isTop: false, |
|
size: { |
|
height: 500, |
|
}, |
|
streetList: [], |
|
communityList: [], |
|
positionList: [], |
|
advisorTypeList: [], |
|
} |
|
}, |
|
methods: { |
|
delAdvisorType(index){ |
|
this.advisor_type.splice(index,1) |
|
}, |
|
advisorConfirm(){ |
|
let list = []; |
|
this.advisorTypeList.map(item => { |
|
if(item.checked){ |
|
list.push(item); |
|
} |
|
}); |
|
this.advisor_type = list; |
|
this.$refs.advisorPopup.close(); |
|
}, |
|
typeCheckChange(e) { |
|
this.advisorTypeList[e].checked = !this.advisorTypeList[e].checked; |
|
}, |
|
selectAdvisor(index) { |
|
this.advisorTypeList[index].checked = !this.advisorTypeList[index].checked; |
|
}, |
|
uploadAvatar(e) { |
|
api.uploadOssFile(e.detail.avatarUrl).then(res => { |
|
console.log('res', res) |
|
this.model.userInfo.avatar = res.show_path |
|
avatarUpload({ |
|
url: res.show_path |
|
}).then(res => { |
|
if (res.code === 200) { |
|
uni.$u.toast('修改成功') |
|
} else { |
|
uni.$u.toast(res.msg) |
|
} |
|
}).catch(err => { |
|
uni.$u.toast('服务器开小差了') |
|
}) |
|
}) |
|
}, |
|
uploadSubmit(data, fileName = '') { |
|
this.model.userInfo[fileName] = data.map(item => { |
|
return item.url; |
|
}) |
|
}, |
|
uploadShow(data, fileName = '') { |
|
let result = []; |
|
try { |
|
data.forEach(item => { |
|
result.push({ |
|
url: item.url |
|
}) |
|
}) |
|
} catch (e) { |
|
this.images[fileName] = []; |
|
} |
|
this.images[fileName] = result; |
|
}, |
|
uploadPut(event, fileName = '') { |
|
let lists = [].concat(event.file); |
|
let fileListLen = this.images[fileName].length; |
|
lists.map((item) => { |
|
this.images[fileName].push({ |
|
...item, |
|
status: 'uploading', |
|
message: '上传中', |
|
}); |
|
}); |
|
for (let i = 0; i < lists.length; i++) { |
|
const fileType = api.getFileType(lists[i].url); |
|
console.log(fileType) |
|
api.uploadOssFile(lists[i].url).then(res => { |
|
let item = this.images[fileName][fileListLen]; |
|
this.images[fileName].splice(fileListLen, 1, { |
|
...item, |
|
status: 'success', |
|
message: '', |
|
url: res.show_path, |
|
thumb: res.show_path, |
|
type: fileType |
|
}); |
|
fileListLen++; |
|
}) |
|
} |
|
}, |
|
uploadDel(fileIndex, fileName = '') { |
|
this.images[fileName].splice(fileIndex.index, 1); |
|
}, |
|
openPolPicker() { |
|
this.$refs.pol.open(); |
|
}, |
|
openStreetPicker() { |
|
this.$refs.street.open(); |
|
}, |
|
openCommunityPicker() { |
|
this.$refs.community.open(); |
|
}, |
|
openPositionPicker() { |
|
this.$refs.position.open(); |
|
}, |
|
openAdvisorPicker() { |
|
if(this.advisor_type?.length>0){ |
|
const checkedValue = this.advisor_type.map(item => { |
|
return item.value; |
|
}); |
|
this.advisorTypeList.map(item => { |
|
if(checkedValue.indexOf(item.value)!==-1){ |
|
item.checked = true; |
|
}else{ |
|
item.checked = false; |
|
} |
|
}) |
|
} |
|
this.$refs.advisorPopup.open(); |
|
}, |
|
chatDetail(item) { |
|
wx.navigateTo({ |
|
url: '/pages/ChatDetail/index?id=' + item.id |
|
}); |
|
}, |
|
checkSection(index) { |
|
this.current = index; |
|
}, |
|
scrollToLower() { |
|
|
|
}, |
|
sexChange(e) { |
|
console.log(e) |
|
this.model.userInfo.sex = e; |
|
}, |
|
bodyChange(e) { |
|
z |
|
console.log(e) |
|
this.model.userInfo.principal_part = e; |
|
}, |
|
navTo(url) { |
|
uni.navigateTo({ |
|
url: url |
|
}) |
|
}, |
|
getPickerData() { |
|
systemConfig({ |
|
type: 'advisor_type' |
|
}).then(res => { |
|
this.advisorTypeList = res.data.map(item => { |
|
item.checked = false; |
|
return item; |
|
}); |
|
}) |
|
getCommonStreet({}).then(res => { |
|
this.streetList = res.data |
|
}); |
|
}, |
|
selectPol(e) { |
|
this.political_outlook_name = e.value[0].name; |
|
this.model.userInfo.political_outlook = e.value[0].id; |
|
this.polShow = false; |
|
}, |
|
selectStreet(e) { |
|
this.model.userInfo.street_id = e.value[0].id; |
|
this.model.userInfo.street_name = e.value[0].name; |
|
this.communityList = e.value[0].children; |
|
}, |
|
selectCommunity(e) { |
|
this.model.userInfo.community_name = e.value[0].name; |
|
this.model.userInfo.community_id = e.value[0].id; |
|
}, |
|
selectPosition(e) { |
|
this.model.userInfo.position_type = e.value[0].name; |
|
}, |
|
submit() { |
|
this.uploadSubmit(this.images.aptitude, 'aptitude'); |
|
this.model.userInfo.advisor_type = this.advisor_type.map(item => { |
|
return item.value; |
|
}).join(','); |
|
setAdvisor(this.model.userInfo).then(res => { |
|
if (res.code === 200) { |
|
if(!this.isEdit){ |
|
this.navTo('/pages/Consultant/done?name=' + this.model.userInfo.name) |
|
}else{ |
|
api.success('修改成功').then(() => { |
|
uni.navigateBack(); |
|
}); |
|
} |
|
} else { |
|
uni.$u.toast(res.msg); |
|
} |
|
}) |
|
|
|
}, |
|
getUserExtend() { |
|
userExtends().then((res) => { |
|
if (res.code === 200) { |
|
if (res.data.advisor?.id) { |
|
this.model.userInfo = res.data.advisor; |
|
this.model.userInfo.name = res.data.advisor.name; |
|
this.model.userInfo.principal_part = res.data.advisor.principal_part; |
|
this.model.userInfo.sex = res.data.advisor.sex; |
|
this.model.userInfo.phone = res.data.advisor.phone; |
|
this.model.userInfo.address = res.data.advisor.address; |
|
this.model.userInfo.community_name = res.data.advisor.community; |
|
this.model.userInfo.street_name = res.data.advisor.street; |
|
this.model.userInfo.advisor_type = res.data.advisor.type; |
|
this.uploadShow(res.data.advisor.aptitude, 'aptitude'); |
|
this.advisor_type = res.data.advisor.type_name || []; |
|
} else { |
|
this.userInfo = res.data; |
|
this.model.userInfo.name = res.data.name; |
|
this.model.userInfo.phone = res.data.phone; |
|
this.model.userInfo.company = res.data.company; |
|
} |
|
} |
|
}); |
|
} |
|
}, |
|
mounted() { |
|
this.getPickerData(); |
|
let token = uni.getStorageSync('token'); |
|
if (token) { |
|
this.getUserExtend(); |
|
} |
|
}, |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/index.scss'; |
|
</style> |