公司小程序
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.

321 lines
6.9 KiB

<template>
<view class="main_background">
<view class="back"></view>
<MyNavbar title="合作申请" background="../../static/images/kehu/bg_2.png"></MyNavbar>
<view class="body">
<view style="width:100%;height:129rpx;position: absolute;top: 0;left: 0;right: 0;">
<view style="width: 8rpx;height: 22rpx;background: #D49B4B;opacity: 1;border-radius: 1px 5px 5px 1px;position: absolute;top: 42rpx;left: 20rpx;"/>
<text class="title_text">个人资料</text>
</view>
<view class="u-form-body">
<u-form
labelPosition="left"
ref="form1"
:model="person"
:rules="rules"
:labelStyle="form_tile_title"
>
<u-form-item
prop="person.name"
borderBottom
ref="name"
label="姓名*"
>
<input
:placeholder="rules['person.name'].message"
class="form_input"
:value="person.name"
placeholder-class="form_holder"
@blur="rules['person.name'].validator"
/>
</u-form-item>
<u-form-item
label="电话*"
prop="person.phone"
borderBottom
ref="phone"
>
<input
:placeholder="rules['person.phone'].message"
class="form_input"
placeholder-class="form_holder"
:value="person.phone"
@blur="rules['person.phone'].validator"
/>
</u-form-item>
<u-form-item
label="所在地址"
prop="person.address"
borderBottom
ref="city"
@click="onClickToSelectCity"
>
<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion">
<input
:placeholder="rules['person.address'].message"
class="form_input"
:disabled="true"
:value="person.address"
placeholder-class="form_holder"
/>
</pick-regions>
<u-icon
slot="right"
name="arrow-right"
></u-icon>
</u-form-item>
<u-form-item
label="推荐人电话"
prop="person.referrer"
borderBottom
ref="referrer"
>
<input
:placeholder="rules['person.referrer'].message"
class="form_input"
placeholder-class="form_holder"
:value="person.referrer"
@blur="rules['person.referrer'].validator"
/>
</u-form-item>
</u-form>
<u-gap height="40rpx" />
<view style="width: 100%;height: 120rpx;">
<text class="attentionText">注意事项</text>
<text class="attentionInfo">
v-bind:style 的对象语法十分直观看着非常像 CSS但其实是一个 JavaScript 对象CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case记得用引号括起来) 来命名
</text>
</view>
</view>
</view>
<view class="button">
<text class="button_text">提交</text>
</view>
</view>
</template>
<script>
import MyNavbar from "@/components/MyNavbar/MyNavbar.vue";
export default {
components:{
MyNavbar,
},
data() {
return {
person : {
///名字
name : '',
///电话号码
phone : '',
///所在地址
address : '',
///推荐人电话
referrer : '',
},
rules : {
"person.name" : {
type: 'string',
required: true,
message : '请输入您的姓名',
validator : (object)=>{
this.person.name = object.detail.value;
}
},
'person.phone' : {
type: 'string',
required: true,
message : '请输入您的联系电话',
///校验用户是否输入了正确的手机号码
validator : (object)=>{
var suc = uni.$u.test.mobile(object.detail.value);
if(!suc){
uni.$u.toast("请输入正确的电话号码!");
}else{
this.person.phone = object.detail.value;
}
return suc;
}
},
'person.address' : {
type : 'string',
required : false,
message: '请选择您的地址',
},
'person.referrer' : {
type : 'string',
required : false,
message : '请输入推荐人电话号码',
///校验用户是否输入了正确的手机号码
validator : (object)=>{
var suc = uni.$u.test.mobile(object.detail.value);
if(!suc){
uni.$u.toast("请输入正确的电话号码!");
}else{
this.person.referrer = object.detail.value;
}
return suc;
},
},
},
form_tile_title : {
width: '170rpx',
height: '37rpx',
fontSize: 26,
fontWeight: 500,
color: 'black',
},
defaultRegion:['四川省','成都市','武侯区'],
region:[],
};
},
methods:{
///点击并选择城市
onClickToSelectCity(){
uni.hideKeyboard();
},
// 获取选择的地区
handleGetRegion(region){
this.region = region;
this.person.address = this.regionName();
this.$refs.form1.validateField('person.address');
},
regionName(){
return this.region.map(item=>item.name).join(' ');
},
}
}
</script>
<style lang="scss" scoped>
.main_background{
opacity: 1;
border-radius: 0rpx;
overflow: scroll;
touch-action: auto;
flex-direction: column;
display: flex;
margin: 0 auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
position: relative;
}
.back{
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background:#F6F6F6
}
.top{
width: 750rpx;
height: 424rpx;
position: relative;
}
.top_banner{
position: relative;
left: 0;
top: 0;
width: 750rpx;
height: 424rpx;
}
.body{
width: 702rpx;
height: 820rpx;
position: relative;
left: 24rpx;
right: 24rpx;
top: -129rpx;
background: #FFFFFF;
opacity: 1;
border-radius: 20rpx;
}
.title_text{
width: 192rpx;
font-size: 32rpx;
font-weight: bold;
color: #333333;
opacity: 1;
position: absolute;
left: 38rpx;
top: 30rpx;
}
.u-form-body{
position: absolute;width: 662rpx;
top: 70rpx;
left: 20rpx;
right: 20rpx;
height: 740rpx;
//background-color: #1CBBB4;
border-radius: 20rpx;
}
.form_input{
//background-color: #0081FF;
width: 100%;
height: 90rpx;
text-align: right;
font-size: 28rpx;
font-weight: 400;
color: #333333;
}
.form_holder{
width: 100%;
height: 90rpx;
text-align: right;
font-size: 24rpx;
font-weight: 400;
color: #999999;
margin-right: 10rpx;
}
.form_label_style{
height: 37rpx;
font-size: 26rpx;
font-weight: 400;
color: #666666;
opacity: 1;
}r
///注意事项
.attentionText{
width: 104rpx;
height: 37rpx;
font-size: 26rpx;
font-weight: 400;
color: #666666;
opacity: 1;
}
.attentionInfo{
width: 648rpx;
font-size: 24rpx;
font-weight: 400;
color: #999999;
opacity: 1;
max-height: 120rpx;
}
.button{
width: 702rpx;
height: 90rpx;
background: #D49B4B;
opacity: 1;
border-radius: 93rpx;
position: relative;
left: 24rpx;
}
.button_text{
width: 72rpx;
height: 50rpx;
font-size: 36rpx;
font-weight: 400;
color: #FFFFFF;
opacity: 1;
position: absolute;
left: 315rpx;
top: 20rpx;
}
</style>