|
|
|
@@ -1,155 +1,167 @@ |
|
|
|
<!-- 注册第1步 --> |
|
|
|
<template> |
|
|
|
<view class="register-main"> |
|
|
|
<view class="title">修改手机号</view> |
|
|
|
<view class="hint">请输入新的手机号</view> |
|
|
|
|
|
|
|
<view class="form-input"> |
|
|
|
<view> +86</view> |
|
|
|
<image :src="`${$imgUrl}common/arror_down_black.png`" class="arror" /> |
|
|
|
<input |
|
|
|
class="input" |
|
|
|
v-model="state.phone" |
|
|
|
focus |
|
|
|
placeholder="请输入手机号" |
|
|
|
placeholder-class="form-placeholder" |
|
|
|
type="number" |
|
|
|
maxlength="11" |
|
|
|
/> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="agreement"> |
|
|
|
<u-checkbox |
|
|
|
v-model="state.checked" |
|
|
|
activeColor="#00B38B" |
|
|
|
size="30" |
|
|
|
icon-size="30" |
|
|
|
label-size="24" |
|
|
|
>我已阅读并同意</u-checkbox> |
|
|
|
<!-- <view class="txt-grey">我已阅读并同意</view> --> |
|
|
|
<view class="txt-green" @click="msg('阅读协议')" |
|
|
|
>《平台用户服务隐私协议》</view |
|
|
|
> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="btn"> |
|
|
|
<submit-button |
|
|
|
title="同意协议并获取验证码" |
|
|
|
@submit="nextStep" |
|
|
|
></submit-button> |
|
|
|
</view> |
|
|
|
<view class="register-main"> |
|
|
|
<view class="title">修改手机号</view> |
|
|
|
<view class="hint">请输入新的手机号</view> |
|
|
|
|
|
|
|
<view class="form-input"> |
|
|
|
<view> +86</view> |
|
|
|
<image :src="`${$imgUrl}common/arror_down_black.png`" class="arror" /> |
|
|
|
<input class="input" v-model="state.phone" focus placeholder="请输入手机号" placeholder-class="form-placeholder" |
|
|
|
type="number" maxlength="11" /> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="agreement"> |
|
|
|
<u-checkbox v-model="state.checked" activeColor="#00B38B" size="30" icon-size="30" label-size="24">我已阅读并同意 |
|
|
|
</u-checkbox> |
|
|
|
<!-- <view class="txt-grey">我已阅读并同意</view> --> |
|
|
|
<view class="txt-green" @click="toRead">《平台用户服务隐私协议》</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="btn"> |
|
|
|
<submit-button title="同意协议并获取验证码" @submit="nextStep"></submit-button> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import uCheckBox from "@/uni_modules/vk-uview-ui/components/u-checkbox/u-checkbox.vue"; |
|
|
|
import { reactive } from "vue"; |
|
|
|
import { checkStr, msg, navTo } from "@/utils/utils"; |
|
|
|
import { sendCode, regist } from "@/utils/network/api.js"; |
|
|
|
import { request } from "@/utils/network/request.js"; |
|
|
|
|
|
|
|
const state = reactive({ |
|
|
|
phone: "", //电话 |
|
|
|
checked: false, //是否勾选阅读协议 |
|
|
|
}); |
|
|
|
|
|
|
|
/* 下一步 */ |
|
|
|
const nextStep = () => { |
|
|
|
if (!state.phone) { |
|
|
|
msg("请输入手机号！"); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (!checkStr(state.phone, "mobile")) { |
|
|
|
msg("请输入正确的手机号！"); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (!state.checked) { |
|
|
|
msg("请勾选我已阅读并同意《平台用户服务隐私协议》"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: { mobile: state.phone }, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
request(sendCode, options) |
|
|
|
.then((res) => { |
|
|
|
msg("验证码发送成功！"); |
|
|
|
navTo(`/personal-center/setting/change-phone-code?phone=${state.phone}`); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err); |
|
|
|
}); |
|
|
|
}; |
|
|
|
import uCheckBox from "@/uni_modules/vk-uview-ui/components/u-checkbox/u-checkbox.vue"; |
|
|
|
import { |
|
|
|
reactive |
|
|
|
} from "vue"; |
|
|
|
import { |
|
|
|
checkStr, |
|
|
|
msg, |
|
|
|
navTo |
|
|
|
} from "@/utils/utils"; |
|
|
|
import { |
|
|
|
sendCode, |
|
|
|
regist |
|
|
|
} from "@/utils/network/api.js"; |
|
|
|
import { |
|
|
|
request |
|
|
|
} from "@/utils/network/request.js"; |
|
|
|
|
|
|
|
const state = reactive({ |
|
|
|
phone: "", //电话 |
|
|
|
checked: false, //是否勾选阅读协议 |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// |
|
|
|
const toRead = () => { |
|
|
|
navTo("/login/agreement") |
|
|
|
} |
|
|
|
|
|
|
|
/* 下一步 */ |
|
|
|
const nextStep = () => { |
|
|
|
if (!state.phone) { |
|
|
|
msg("请输入手机号！"); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (!checkStr(state.phone, "mobile")) { |
|
|
|
msg("请输入正确的手机号！"); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (!state.checked) { |
|
|
|
msg("请勾选我已阅读并同意《平台用户服务隐私协议》"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: { |
|
|
|
mobile: state.phone |
|
|
|
}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
request(sendCode, options) |
|
|
|
.then((res) => { |
|
|
|
msg("验证码发送成功！"); |
|
|
|
navTo(`/personal-center/setting/change-phone-code?phone=${state.phone}`); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
console.log(err); |
|
|
|
}); |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.register-main { |
|
|
|
border-top: 1rpx solid #dcdcdc; |
|
|
|
padding: 78rpx 30rpx 50rpx; |
|
|
|
.title { |
|
|
|
font-size: 32rpx; |
|
|
|
color: #333333; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
.hint { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #999999; |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.form-input { |
|
|
|
margin-top: 80rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
height: 90rpx; |
|
|
|
border-bottom: 1rpx solid #dcdcdc; |
|
|
|
padding: 0rpx 12rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #333333; |
|
|
|
&:last-child { |
|
|
|
margin-top: 50rpx; |
|
|
|
} |
|
|
|
.input { |
|
|
|
flex: 1; |
|
|
|
padding-right: 48rpx; |
|
|
|
} |
|
|
|
.arror { |
|
|
|
width: 28rpx; |
|
|
|
height: 25rpx; |
|
|
|
margin-left: 16rpx; |
|
|
|
margin-right: 40rpx; |
|
|
|
} |
|
|
|
.eye { |
|
|
|
width: 48rpx; |
|
|
|
height: 48rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.form-placeholder { |
|
|
|
color: #999999; |
|
|
|
} |
|
|
|
|
|
|
|
.agreement { |
|
|
|
font-size: 24rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-top: 60rpx; |
|
|
|
.txt-grey { |
|
|
|
color: #666666; |
|
|
|
} |
|
|
|
|
|
|
|
.txt-green { |
|
|
|
color: #00b38b; |
|
|
|
} |
|
|
|
:deep(.u-checkbox) { |
|
|
|
margin-right: -20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.btn { |
|
|
|
margin: 200rpx 40rpx 0px; |
|
|
|
} |
|
|
|
.register-main { |
|
|
|
border-top: 1rpx solid #dcdcdc; |
|
|
|
padding: 78rpx 30rpx 50rpx; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: 32rpx; |
|
|
|
color: #333333; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
|
|
|
|
.hint { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #999999; |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.form-input { |
|
|
|
margin-top: 80rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
height: 90rpx; |
|
|
|
border-bottom: 1rpx solid #dcdcdc; |
|
|
|
padding: 0rpx 12rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #333333; |
|
|
|
|
|
|
|
&:last-child { |
|
|
|
margin-top: 50rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.input { |
|
|
|
flex: 1; |
|
|
|
padding-right: 48rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.arror { |
|
|
|
width: 28rpx; |
|
|
|
height: 25rpx; |
|
|
|
margin-left: 16rpx; |
|
|
|
margin-right: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.eye { |
|
|
|
width: 48rpx; |
|
|
|
height: 48rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.form-placeholder { |
|
|
|
color: #999999; |
|
|
|
} |
|
|
|
|
|
|
|
.agreement { |
|
|
|
font-size: 24rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-top: 60rpx; |
|
|
|
|
|
|
|
.txt-grey { |
|
|
|
color: #666666; |
|
|
|
} |
|
|
|
|
|
|
|
.txt-green { |
|
|
|
color: #00b38b; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.u-checkbox) { |
|
|
|
margin-right: -20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
margin: 200rpx 40rpx 0px; |
|
|
|
} |
|
|
|
</style> |
zengyuehua
vor 2 Jahren