210 lines
6.2 KiB
Vue
210 lines
6.2 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">
|
||
欢迎入驻城市运营商，我们在运营全国城市区县、物业、社区、街道等等的C客户端提供包含配送、安装、维修、保养、家政、家具等全面的家居上门服务，以及提供当地服务商、经销商、当地商场、平台的配套售后服务。诚挚邀请您加入所在城市的运营，服务规划行业市场！
|
||
</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-friendfill"></text>
|
||
</view>
|
||
<view class="margin-left-sm flex-column-around">
|
||
<view>具备多年经营基础</view>
|
||
<view>申请入驻社区运营</view>
|
||
</view>
|
||
</view>
|
||
<radio class="main-color" value="community" />
|
||
</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-group_fill"></text>
|
||
</view>
|
||
<view class="margin-left-sm flex-column-around">
|
||
<view>具有良好业务开拓能力</view>
|
||
<view>申请入驻城市区域营业</view>
|
||
</view>
|
||
</view>
|
||
<radio class="main-color" value="cityArea" />
|
||
</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="city" />
|
||
</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">您的姓名</view>
|
||
<input name="name" placeholder="请输入姓名"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">注册电话</view>
|
||
<input name="phone" placeholder="请输入手机号"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">申请城市</view>
|
||
<input name="city" placeholder="请输入城市名"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">验证码</view>
|
||
<input name="identifyCode" placeholder="请输入验证码"></input>
|
||
<button class='cu-btn bg-main-color shadow'>获取验证码</button>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">关联信息</view>
|
||
<input name="comments" placeholder="请输入入驻关联信息备注"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view>
|
||
<checkbox style="transform:scale(0.7)" class="main-color" :value="agreeContract" :checked="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 {
|
||
operatorType: '',
|
||
agreeContract: false
|
||
}
|
||
},
|
||
methods: {
|
||
changeOperatorType(e) {
|
||
this.operatorType = e.detail.value;
|
||
},
|
||
changeAgreeContract() {
|
||
this.agreeContract = !this.agreeContract;
|
||
},
|
||
showContract() {
|
||
uni.navigateTo({
|
||
url: '/pages/my/contract'
|
||
})
|
||
},
|
||
validateForm(confirmFormData) {
|
||
let formInfoValid = Boolean(confirmFormData.name) &&
|
||
Boolean(confirmFormData.phone) &&
|
||
Boolean(confirmFormData.city) &&
|
||
Boolean(confirmFormData.identifyCode) &&
|
||
Boolean(confirmFormData.comments);
|
||
if (!formInfoValid) {
|
||
uni.showToast({
|
||
title: '请填写完整信息',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
} else if (!Boolean(confirmFormData.operatorType)) {
|
||
uni.showToast({
|
||
title: '请选择入驻运营商类型',
|
||
icon: 'none',
|
||
mask: true
|
||
});
|
||
formInfoValid = false;
|
||
} else if (!confirmFormData.agreeContract) {
|
||
uni.showToast({
|
||
title: '请阅读并同意合同书',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
formInfoValid = false;
|
||
}
|
||
return formInfoValid;
|
||
},
|
||
submit(e) {
|
||
let formData = e.detail.value;
|
||
formData.operatorType = this.operatorType;
|
||
formData.agreeContract = this.agreeContract;
|
||
let formValid = this.validateForm(formData);
|
||
console.log(formData);
|
||
if (formValid) {
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'success',
|
||
mask: true
|
||
})
|
||
uni.navigateTo({
|
||
url: '/pages/my/my-operator'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</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, #Ff9700, #Ed1c24);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.second-avatar {
|
||
background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.third-avatar {
|
||
background-image: linear-gradient(45deg, #Ec008c, #6739b6);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.float-info {
|
||
display: inline-block;
|
||
position: relative;
|
||
top: -18rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.radius {
|
||
border-radius: 37rpx;
|
||
}
|
||
</style>
|