360 lines
9.7 KiB
Vue
360 lines
9.7 KiB
Vue
<template>
|
||
<view class="box fromClass">
|
||
<view class="lanBox">
|
||
<view class="lan border-bottom">
|
||
<view class="left">姓名<text class="redcolor">*</text></view>
|
||
<view class="right">
|
||
<input name="name" type="text" v-model="content.name" placeholder="姓名" />
|
||
</view>
|
||
</view>
|
||
<view class="lan border-bottom">
|
||
<view class="left">性别</view>
|
||
<view class="right">
|
||
<picker mode="selector" :range="sexItem" @change="onsexArr">
|
||
<view class="uni-input">{{content.sex==0?'请选择':content.sex==1?'男':content.sex==2?'女':'未知'}}
|
||
</view>
|
||
<uni-icons type="forward" size="20" color="#999"></uni-icons>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="lan border-bottom">
|
||
<view class="left">手机号</view>
|
||
<view class="right">
|
||
<input name="name" type="text" v-model="content.phone" placeholder="手机号" />
|
||
</view>
|
||
</view>
|
||
<view class="lan border-bottom">
|
||
<view class="left">个人照片</view>
|
||
<view class="right touxiang" v-if="content.avatar">
|
||
<image :src="content.avatarurl" mode="aspectFit" @click="handleimage(1)" />
|
||
<uni-icons type="close" size="22" class="uni-icons" @click="content.avatarurl='',content.avatar=''"
|
||
@click.stop></uni-icons>
|
||
</view>
|
||
<view class="right touxiang size20 bold" v-else @click="handleimage(1)">+</view>
|
||
<text class="size12 c999 desc">请上传1寸蓝底照片，大小不超过2M</text>
|
||
</view>
|
||
<view class="lan border-bottom">
|
||
<view class="left">系统划分</view>
|
||
<view class="right">
|
||
<picker mode="selector" :range="industrylist" range-key="name" :value="content.industryname"
|
||
@change="changeIndustry">
|
||
<view class="uni-input">{{content.industryname?content.industryname:"请选择"}}</view>
|
||
<uni-icons type="forward" size="20" color="#999"></uni-icons>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="lan border-bottom">
|
||
<view class="left">企业全称</view>
|
||
<view class="right">
|
||
<input name="name" type="text" v-model="content.comName" placeholder="企业全称" />
|
||
</view>
|
||
</view>
|
||
<view class="lan border-bottom">
|
||
<view class="left">公司职位</view>
|
||
<view class="right">
|
||
<input name="name" type="text" v-model="content.comPos" placeholder="公司职位" />
|
||
</view>
|
||
</view>
|
||
<view class="lan border-bottom">
|
||
<view class="left">营业执照</view>
|
||
<view class="right zhizhao" v-if="content.license">
|
||
<image :src="content.licenseurl" class="headimage" @click="handleimage(2)" mode="aspectFit" />
|
||
<uni-icons type="close" size="22" class="uni-icons"
|
||
@click="content.licenseurl='',content.license=''" @click.stop></uni-icons>
|
||
</view>
|
||
<view class="right zhizhao size20 bold" v-else @click="handleimage(2)">+</view>
|
||
<text class="size12 c999 desc">点击上传企业营业执照，仅用于资质审核</text>
|
||
</view>
|
||
<view class="lan border-bottom">
|
||
<view class="left">通过什么途径了解沪抖团？</view>
|
||
<view class="radio">
|
||
<label @click="radioChange('抖音')">
|
||
<icon class="iconfont radioimg"
|
||
:class="[source=='抖音'?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']">
|
||
</icon>
|
||
抖 音
|
||
</label>
|
||
<label @click="radioChange('朋友圈')">
|
||
<icon class="iconfont radioimg"
|
||
:class="[source=='朋友圈'?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']">
|
||
</icon>
|
||
朋友圈
|
||
</label>
|
||
|
||
<label>
|
||
<view @click="radioChange('介绍人')">
|
||
<icon class="iconfont radioimg"
|
||
:class="[source=='介绍人'?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']">
|
||
</icon>
|
||
介绍人
|
||
</view>
|
||
<input type="text" v-model="sourceName" />
|
||
</label>
|
||
</view>
|
||
</view>
|
||
<view class="lan border-bottom">
|
||
<view class="left">加入沪抖团想收获什么？</view>
|
||
<checkbox-group @change="checkboxChange" class="checkbox">
|
||
<label v-for="(ite,ind) in addNeeds" :key="ind">
|
||
<checkbox :value="ite" style="transform:scale(0.8)" :checked="checkbox.indexOf(ite)!== -1 " />
|
||
{{ite}}
|
||
</label>
|
||
</checkbox-group>
|
||
</view>
|
||
<view class="lan border-bottom">
|
||
<view class="left">能给平台带来什么？</view>
|
||
<view class="right textarea">
|
||
<textarea v-model="content.provide" name="content" maxlength="-1" />
|
||
</view>
|
||
</view>
|
||
<view class="lan c999 size12 mt-15">
|
||
所有上传的资料信息同意公开展示，最终解释权归沪抖团平台所有。
|
||
</view>
|
||
|
||
</view>
|
||
<view class="btn" @click="confirmInfo">申请加入</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState
|
||
} from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
sexItem: [
|
||
"男",
|
||
"女"
|
||
],
|
||
source: "",
|
||
sourceName: "",
|
||
content: {
|
||
sex: "",
|
||
name: "",
|
||
phone: "",
|
||
avatar: "",
|
||
avatarurl: "",
|
||
source: "",
|
||
industryid: "",
|
||
industryname: "",
|
||
comName: "",
|
||
comPos: "",
|
||
provide: "",
|
||
demand: "",
|
||
license: "",
|
||
licenseurl: ""
|
||
},
|
||
addNeeds: [],
|
||
checkbox: [],
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState(["user", "HomeContent"]),
|
||
endDate() {
|
||
return this.$tools.getDate("start")
|
||
},
|
||
industrylist() {
|
||
return this.HomeContent.industrylist
|
||
},
|
||
},
|
||
onLoad(options) {
|
||
let that = this
|
||
that.addNeeds = that.$json.addNeeds
|
||
that.content.name = that.user.name?that.user.name:''
|
||
that.content.phone = that.user.phone?that.user.phone:""
|
||
that.content.comName = that.user.cominfo.name?that.user.cominfo.name:''
|
||
that.content.sex = that.user.sex ? that.user.sex : ""
|
||
that.content.avatar = that.user.avatar ? that.user.avatar : ''
|
||
that.content.provide = that.user.provide ? that.user.provide : ""
|
||
that.content.comPos = that.user.cominfo.pos ? that.user.cominfo.pos : ''
|
||
that.content.avatarurl = that.user.avatarurl ? that.user.avatarurl : ""
|
||
that.content.industryid = that.user.industryid ? that.user.industryid : ''
|
||
that.content.industryname = that.user.industryid ? that.industrylist[that.industrylist.findIndex(ite => ite
|
||
.id === that.user.industryid)].name : ''
|
||
that.checkbox = that.user.demand ? that.user.demand.split(',') : []
|
||
},
|
||
methods: {
|
||
// 提交
|
||
confirmInfo() {
|
||
let that = this
|
||
if (!this.content.name) {
|
||
this.$tools.msg("请输入姓名")
|
||
return;
|
||
}
|
||
if (!this.content.sex) {
|
||
this.$tools.msg("请选择性别")
|
||
return;
|
||
}
|
||
if (!this.content.phone) {
|
||
this.$tools.msg("请输入手机号")
|
||
return;
|
||
}
|
||
if (!this.content.avatarurl) {
|
||
this.$tools.msg("请上传个人照片")
|
||
return;
|
||
}
|
||
if (!this.content.industryname) {
|
||
this.$tools.msg("请选择系统划分")
|
||
return;
|
||
}
|
||
|
||
if (!this.content.comName) {
|
||
this.$tools.msg("请输入企业全称")
|
||
return;
|
||
}
|
||
|
||
if (!this.content.comPos) {
|
||
this.$tools.msg("请输入公司职位")
|
||
return;
|
||
}
|
||
if (this.source == '介绍人' && !this.sourceName) {
|
||
this.$tools.msg("请输入介绍人姓名")
|
||
return;
|
||
}
|
||
this.content.source = this.sourceName ? this.sourceName : this.source
|
||
console.log('content', this.content)
|
||
that.$model.getApplyforMember(this.content).then(res => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: "提交成功",
|
||
duration: 2000
|
||
});
|
||
setTimeout(function() {
|
||
uni.switchTab({
|
||
url: "/pages/index/index"
|
||
})
|
||
}, 2000)
|
||
|
||
} else {
|
||
that.$tools.msg(res.message);
|
||
}
|
||
});
|
||
},
|
||
handleimage(ind) {
|
||
let that = this
|
||
uni.chooseImage({
|
||
count: 1, //默认9
|
||
sourceType: ['album', 'camera'], //从相册选择
|
||
success: function(res) {
|
||
uni.showLoading({
|
||
title: '识别中...'
|
||
})
|
||
that.$model.getUpLoadimg({
|
||
uploadpath: res.tempFilePaths[0]
|
||
}).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code == 0) {
|
||
if (ind == 1) {
|
||
that.content.avatar = res.data.path
|
||
that.content.avatarurl = res.data.url
|
||
} else {
|
||
that.content.license = res.data.path
|
||
that.content.licenseurl = res.data.url
|
||
}
|
||
} else {
|
||
that.$tools.msg("不支持该图像")
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//确定年龄
|
||
bindDateChange(e) {
|
||
this.content.birthday = e.target.value
|
||
},
|
||
//确定性别
|
||
onsexArr(e) {
|
||
this.content.sex = this.sexItem[e.target.value] == "男" ? 1 : 2
|
||
},
|
||
// 所属行业
|
||
changeIndustry(e) {
|
||
this.content.industryname = this.HomeContent.industrylist[e.target.value].name
|
||
this.content.industryid = this.HomeContent.industrylist[e.target.value].id
|
||
},
|
||
// 途径
|
||
radioChange(e) {
|
||
this.source = this.source == e ? '' : e
|
||
this.sourceName = this.source == '介绍人' ? this.sourceName : '';
|
||
},
|
||
// 收获
|
||
checkboxChange(e) {
|
||
this.content.demand = e.detail.value.join(',')
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped="scoped" lang="scss">
|
||
.zhizhao,
|
||
.touxiang {
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.lan {
|
||
margin: 0 10px !important;
|
||
}
|
||
|
||
.right {
|
||
/deep/input {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.radio {
|
||
width: 100%;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
label {
|
||
display: flex;
|
||
}
|
||
|
||
icon {
|
||
color: #dfdfdf;
|
||
font-size: 22px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.icon-yuanxingxuanzhongfill {
|
||
color: $uni-color-success;
|
||
}
|
||
|
||
:nth-child(3) {
|
||
width: 50%;
|
||
|
||
view {
|
||
width: 50%;
|
||
display: flex;
|
||
}
|
||
|
||
/deep/input {
|
||
width: 50% !important;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
}
|
||
}
|
||
}
|
||
|
||
.checkbox {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
label {
|
||
width: 33%;
|
||
display: flex;
|
||
font-size: 12px;
|
||
margin: 5px 0;
|
||
align-items: center;
|
||
}
|
||
}
|
||
</style> |