229 lines
9.1 KiB
Vue
229 lines
9.1 KiB
Vue
<route lang="jsonc" type="page">
|
||
{
|
||
"needLogin": true,
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}
|
||
</route>
|
||
|
||
<template>
|
||
<view>
|
||
<!-- 申请成功提示 -->
|
||
<view class="mt-84rpx" v-if="tips">
|
||
<view class="flex justify-center items-center">
|
||
<wd-img width="300rpx" height="278rpx" :src="`${OSS}images/settle_in/settle_in_image2.png`"/>
|
||
</view>
|
||
<view class="mt-60rpx text-center">
|
||
<view class="text-36rpx leading-50rpx text-#303133">您的信息已成功提交</view>
|
||
<view class="font-400 text-28rpx leading-42rpx text-#303133 mt-20rpx text-#9CA3AF">目前正在审核中，请您耐心等待</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<navbar title="申请合创合伙人" custom-class='!bg-[#F6F7F8]'></navbar>
|
||
</view>
|
||
|
||
<view class="mx-30rpx mt-38rpx">
|
||
<!-- 联系方式 -->
|
||
<view class="bg-white rounded-16rpx px-30rpx pt-28rpx mt-20rpx">
|
||
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx flex items-center">
|
||
<view class="mr-10rpx">联系方式</view>
|
||
<view class="flex items-center">
|
||
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view>
|
||
<view class="text-26rpx leading-32rpx text-#606266">联系人</view>
|
||
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
|
||
<wd-input no-border placeholder="请填写联系人" ></wd-input>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-22rpx">
|
||
<view class="text-26rpx leading-32rpx text-#606266">手机号</view>
|
||
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
|
||
<wd-input no-border placeholder="请填写手机号"></wd-input>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-22rpx">
|
||
<view class="text-26rpx leading-32rpx text-#606266">验证码</view>
|
||
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx">
|
||
<wd-input type="text" placeholder="请填写手机验证码" v-model="form.code" inputmode="numeric" no-border>
|
||
<template #suffix>
|
||
<view class="flex items-center mr-34rpx">
|
||
<view class="flex items-center">
|
||
<view class="text-[#4C9F44] text-28rpx font-400 leading-40rpx" v-if="!startCountDown" @click="Parten.handleCountDown">发送验证码</view>
|
||
<view class="!text-[#C9C9C9] text-28rpx font-400 leading-40rpx flex items-center" v-if="startCountDown">
|
||
<wd-count-down ref="countDown" :time="countDownTime" millisecond :auto-start="false" format="ss" custom-class="!text-[#C9C9C9] !text-32rpx" @finish="Parten.handleFinishCountDown"></wd-count-down>
|
||
<view> S后重发</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</wd-input>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-22rpx">
|
||
<view class="text-26rpx leading-32rpx text-#606266">省市区</view>
|
||
<view class="mt-20rpx border-b border-b-solid border-b-[#F6F7F8] pb-20rpx tea-room-address">
|
||
<wd-col-picker v-model="value" :columns="area" :column-change="columnChange" @confirm="Parten.handleConfirmAddress" placeholder="请选择省市区"></wd-col-picker>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-22rpx">
|
||
<view class="text-26rpx leading-32rpx text-#606266">详细地址</view>
|
||
<view class="mt-20rpx pb-20rpx">
|
||
<wd-input no-border placeholder="请输入小区/写字楼"></wd-input>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 所在区域 -->
|
||
<view class="bg-white rounded-16rpx px-30rpx py-32rpx mt-20rpx flex items-center">
|
||
<view class="flex items-center">
|
||
<view class="text-32rpx leading-44rpx text-#303133 mr-10rpx">所在区域</view>
|
||
<view class="flex items-center">
|
||
<wd-img width="16rpx" height="16rpx" :src="`${OSS}icon/icon_validate.png`"></wd-img>
|
||
</view>
|
||
</view>
|
||
<view class="flex-1 ml-80rpx">
|
||
<wd-col-picker v-model="form.area" :columns="area" :column-change="columnChange" @confirm="Parten.handleConfirmArea" placeholder="请选择所在区域"></wd-col-picker>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 留言建议 -->
|
||
<view class="bg-white rounded-16rpx px-30rpx py-32rpx mt-20rpx">
|
||
<view class="text-32rpx leading-44rpx text-#303133 mb-32rpx flex items-center">
|
||
留言建议
|
||
</view>
|
||
<view class="">
|
||
<wd-textarea placeholder="有想说的可以在这里写哦！" v-model="form.message" custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]' custom-textarea-class='!bg-[#F8F9FA]' />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="text-26rpx leading-32rpx text-#606266 mt-24rpx mx-60rpx">
|
||
*提交表单申请，工作人员将在3个工作日内与您电话联系，如需及时了解，请直接电话咨询，我们将在第一时间解答
|
||
</view>
|
||
|
||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133] mt-112rpx pb-66rpx">
|
||
<view class="w-330rpx h-90rpx bg-[#FFFFFF] rounded-8rpx mr-30rpx">联系我们</view>
|
||
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff">提交申请</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { useColPickerData } from '@/hooks/useColPickerData'
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
// 审核提示
|
||
const tips = ref<boolean>(false)
|
||
|
||
// 省市区数据
|
||
const { colPickerData, findChildrenByCode } = useColPickerData()
|
||
const value = ref<string[]>([])
|
||
const area = ref<any[]>([
|
||
colPickerData.map((item) => {
|
||
return {
|
||
value: item.value,
|
||
label: item.text
|
||
}
|
||
})
|
||
])
|
||
const columnChange = ({ selectedItem, resolve, finish }) => {
|
||
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
|
||
if (areaData && areaData.length) {
|
||
resolve(
|
||
areaData.map((item) => {
|
||
return {
|
||
value: item.value,
|
||
label: item.text
|
||
}
|
||
})
|
||
)
|
||
} else {
|
||
finish()
|
||
}
|
||
}
|
||
|
||
// 上传文件
|
||
const fileList = ref<any[]>([])
|
||
const action = 'https://www.mocky.io/v2/5cc8019d300000980a055e76' // 仅做测试使用，实际请换成真实上传接口
|
||
|
||
// 验证码倒计时
|
||
const countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
|
||
const startCountDown = ref<boolean>(false) // 是否开始倒计时
|
||
const countDown = ref<any>(null) // 倒计时组件
|
||
|
||
// 表单
|
||
const form = reactive<{
|
||
settleIn: number,
|
||
code: string,
|
||
message: string,
|
||
area: string[]
|
||
}>({
|
||
settleIn: 1,
|
||
code: '',
|
||
message: '',
|
||
area: []
|
||
})
|
||
|
||
const Parten = {
|
||
// 图片选择/删除
|
||
handleUploadFile: (event: any) => {
|
||
fileList.value = event.fileList
|
||
},
|
||
|
||
// 发送验证码
|
||
handleCountDown: () => {
|
||
startCountDown.value = true
|
||
nextTick(() => {
|
||
countDown.value?.start()
|
||
|
||
// 发送验证码请求
|
||
})
|
||
},
|
||
|
||
// 验证码倒计时结束
|
||
handleFinishCountDown: () => {
|
||
startCountDown.value = false
|
||
},
|
||
|
||
// 确认选择地址
|
||
handleConfirmAddress: (selected) => {
|
||
console.log("🚀 ~ selected:", selected)
|
||
},
|
||
|
||
// 选择所在区域
|
||
handleConfirmArea: (selected) => {
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: $cz-page-background;
|
||
}
|
||
|
||
.tea-room-address {
|
||
:deep() {
|
||
.wd-cell {
|
||
padding-left: 0 !important;
|
||
}
|
||
|
||
.wd-cell__wrapper {
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|