331 lines
10 KiB
Vue
331 lines
10 KiB
Vue
<template>
|
||
<view class="margin-bottom-lg">
|
||
<!-- 顶部操作条 -->
|
||
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
||
<block slot="backText">返回</block>
|
||
<block slot="content">申请社区代理</block>
|
||
</cu-custom>
|
||
<view class="padding description">
|
||
上门到家服务需求，时刻围绕着社区。修水龙头、保洁、电器维修、上门住家饭、二手空调、社区跑腿、手机维护等等近千项日常生活中的需求数不胜数，应有尽有！目前，大多数社区服务不够优质、资源对接不够多、价格不够实惠、服务不够保障，市场尚大有可为！而社区服务的更加齐全、更加标准、更加丰富，需有赖于经营者的细心服务与打造创建。平台正开启有志于社区创业运营的人成为社区服务联合经营者，共同打造社区服务更多选择、更快捷、更优质、更细致的社区服务体系。
|
||
</view>
|
||
<view class="padding bg-white">
|
||
<radio-group @change="changeOperatorType">
|
||
<view class="flex justify-between align-center">
|
||
<view class="flex justify-start">
|
||
<view class="cu-avatar round middle-avatar first-avatar">
|
||
<text class="cuIcon-activityfill"></text>
|
||
</view>
|
||
<view class="margin-left-sm flex-column-around">
|
||
<view>我有社区运营经验</view>
|
||
<view>申请社区经营者</view>
|
||
</view>
|
||
</view>
|
||
<radio class="main-color" value="communityWithExp" />
|
||
</view>
|
||
<view class="flex justify-between align-center margin-top-sm">
|
||
<view class="flex justify-start">
|
||
<view class="cu-avatar round middle-avatar second-avatar">
|
||
<text class="cuIcon-activityfill"></text>
|
||
</view>
|
||
<view class="margin-left-sm flex-column-around">
|
||
<view>我无社区经验但有经营意向</view>
|
||
<view>申请社区经营者</view>
|
||
</view>
|
||
</view>
|
||
<radio class="main-color" value="communityNoExp" />
|
||
</view>
|
||
<view class="flex justify-between align-center margin-top-sm">
|
||
<view class="flex justify-start">
|
||
<view class="cu-avatar round middle-avatar third-avatar">
|
||
<text class="cuIcon-activityfill"></text>
|
||
</view>
|
||
<view class="margin-left-sm flex-column-around">
|
||
<view>我有社区开拓经验</view>
|
||
<view>申请社区站点开拓经营者</view>
|
||
</view>
|
||
</view>
|
||
<radio class="main-color" value="communityDevelopment" />
|
||
</view>
|
||
<view class="flex justify-between align-center margin-top-sm">
|
||
<view class="flex justify-start">
|
||
<view class="cu-avatar round middle-avatar fourth-avatar">
|
||
<text class="cuIcon-activityfill"></text>
|
||
</view>
|
||
<view class="margin-left-sm flex-column-around">
|
||
<view>我有经营经验</view>
|
||
<view>申请城市经营</view>
|
||
</view>
|
||
</view>
|
||
<radio class="main-color" value="cityDevelopment" />
|
||
</view>
|
||
</radio-group>
|
||
</view>
|
||
<view class="padding-sm bg-white">
|
||
<view class="solid radius padding-bottom">
|
||
<view class="text-xl text-black text-center">
|
||
<text class="float-info padding-lr bg-white">申请信息</text>
|
||
</view>
|
||
<form @submit="submit">
|
||
<view class="cu-form-group">
|
||
<view class="title">您的姓名<text class="text-red">*</text></view>
|
||
<input name="name" placeholder="请输入姓名"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">注册电话<text class="text-red">*</text></view>
|
||
<input name="phone" placeholder="请输入手机号" v-model="formData.phone"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">申请城市<text class="text-red">*</text></view>
|
||
<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange" :value="multiIndex" :range-key="'areaName'" :range="areaList">
|
||
<view class="picker">
|
||
{{formData.area && formData.area.length ? formData.area[0].areaName + '-' + formData.area[1].areaName : '请选择'}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">验证码<text class="text-red">*</text></view>
|
||
<input class="radius-input" type="number" name="code" placeholder="请输入验证码"></input>
|
||
<view v-if="countDownNum === 0" class="cu-btn bg-blue round-btn margin-left-xs shadow-blur" @click="sendVertifyCode">发送验证码
|
||
</view>
|
||
<view v-else class="cu-btn bg-gray round-btn margin-left-sm shadow-blur">已发送({{countDownNum}})
|
||
</view>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">关联信息</view>
|
||
<input name="remark" placeholder="请输入入驻关联信息备注"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view>
|
||
<checkbox style="transform:scale(0.7)" class="main-color" :value="formData.agreeContract" :checked="formData.agreeContract"
|
||
@click="changeAgreeContract">
|
||
</checkbox>
|
||
<text class="margin-left-xs" @click="showContract">合同同意书链接</text>
|
||
</view>
|
||
</view>
|
||
<view class="margin-lr-sm">
|
||
<button class="bg-main-color long-btn" form-type="submit">提交</button>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
curUserInfo: {},
|
||
areaList: [],
|
||
multiIndex: [0, 0],
|
||
countDownNum: 0,
|
||
formData: {
|
||
subType: '',
|
||
agreeContract: false,
|
||
area: null
|
||
},
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.loadData();
|
||
},
|
||
methods: {
|
||
loadData() {
|
||
this.curUserInfo = this.$request.getCurUserInfo();
|
||
this.loadAreaList();
|
||
},
|
||
changeOperatorType(e) {
|
||
this.formData.subType = e.detail.value;
|
||
},
|
||
changeAgreeContract() {
|
||
this.formData.agreeContract = !this.formData.agreeContract;
|
||
},
|
||
showContract() {
|
||
uni.navigateTo({
|
||
url: '/pages/my/contract'
|
||
})
|
||
},
|
||
async loadAreaList() {
|
||
let areaList = await this.$request.areaListByStep();
|
||
areaList = areaList.data;
|
||
let col1Code = areaList[0].areaCode;
|
||
let subAreaList = await this.$request.areaListByStep({ parentCode: col1Code });
|
||
subAreaList = subAreaList.data;
|
||
// let col2Code = subAreaList[0].areaCode;
|
||
// let subSubAreaList = await this.$request.areaListByStep({ parentCode: col2Code });
|
||
// subSubAreaList = subSubAreaList.data;
|
||
this.areaList.push(areaList);
|
||
this.areaList.push(subAreaList);
|
||
// this.areaList.push(subSubAreaList);
|
||
},
|
||
regionChange(e) {
|
||
this.multiIndex = e.detail.value;
|
||
let chosenArea = [];
|
||
for(let i = 0; i < this.areaList.length; i++) {
|
||
chosenArea.push(this.areaList[i][this.multiIndex[i]]);
|
||
}
|
||
this.formData.area = chosenArea;
|
||
},
|
||
async regionColChange(e) {
|
||
let colObj = e.detail;
|
||
if (colObj.column == 0) {
|
||
let subSubAreaList = [];
|
||
// 通过一级查询二级，通过二级查三级
|
||
let subAreaList = await this.$request.areaListByStep({parentCode: this.areaList[0][colObj.value].areaCode});
|
||
subAreaList = subAreaList.data;
|
||
this.areaList.pop();
|
||
this.areaList.push(subAreaList);
|
||
this.multiIndex = [colObj.value, 0];
|
||
}
|
||
},
|
||
startCountDownNum() {
|
||
this.countDownNum = 180;
|
||
let t = setInterval(() => {
|
||
this.countDownNum -= 1;
|
||
if (this.countDownNum === 0) {
|
||
clearInterval(t);
|
||
}
|
||
}, 1000);
|
||
},
|
||
async sendVertifyCode() {
|
||
console.log(this.formData)
|
||
if (this.$validate.validContactNum(this.formData.phone)) {
|
||
let res = await this.$request.sendVertifyCode({
|
||
to: this.formData.phone
|
||
});
|
||
if (res && res.code === 0) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '验证码已发送'
|
||
})
|
||
this.startCountDownNum();
|
||
} else if (res && res.msg) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.msg
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '验证码发送失败'
|
||
})
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请正确输入手机号码'
|
||
})
|
||
}
|
||
},
|
||
validateForm(confirmFormData) {
|
||
let formInfoValid = Boolean(confirmFormData.name) &&
|
||
Boolean(confirmFormData.phone) &&
|
||
Boolean(confirmFormData.area) &&
|
||
Boolean(confirmFormData.code);
|
||
if (!formInfoValid) {
|
||
uni.showToast({
|
||
title: '请填写完整信息',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
} else if (!confirmFormData.agreeContract) {
|
||
uni.showToast({
|
||
title: '请阅读并同意合同书',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
formInfoValid = false;
|
||
}
|
||
return formInfoValid;
|
||
},
|
||
async submit(e) {
|
||
let formData = {
|
||
...e.detail.value,
|
||
...this.formData,
|
||
city: this.formData.area && this.formData.area.length ? this.formData.area[this.formData.area.length - 1].areaId : null,
|
||
customerId: this.curUserInfo.customerId,
|
||
type: 'communityAgents'
|
||
}
|
||
let formValid = this.validateForm(formData);
|
||
if (formValid) {
|
||
let res = await this.$request.addCustomerPlace(formData);
|
||
if (res && res.code === 0) {
|
||
await this.$request.refreshCurUserCache();
|
||
uni.navigateBack({
|
||
delta: -1
|
||
})
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
} else if (res && res.msg) {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '提交失败',
|
||
icon: 'error',
|
||
duration: 2000
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.description {
|
||
line-height: 200%;
|
||
color: #676666;
|
||
}
|
||
|
||
.middle-avatar {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.middle-avatar [class*="cuIcon-"] {
|
||
font-size: 53rpx !important;
|
||
}
|
||
|
||
radio-group {
|
||
display: unset;
|
||
}
|
||
|
||
.first-avatar {
|
||
background-image: linear-gradient(45deg, #Ec008c, #6739b6);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.second-avatar {
|
||
background-image: linear-gradient(45deg, #9000ff, #5e00ff);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.third-avatar {
|
||
background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.fourth-avatar {
|
||
background-image: linear-gradient(45deg, #39b54a, #8dc63f);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.float-info {
|
||
display: inline-block;
|
||
position: relative;
|
||
top: -18rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.radius {
|
||
border-radius: 37rpx;
|
||
}
|
||
</style>
|