parent
74831cceaf
commit
50791074c1
13 changed files with 366 additions and 65 deletions
@ -0,0 +1,188 @@ |
||||
<template> |
||||
<view class="wrap"> |
||||
<view class="title">欢迎加入</view> |
||||
<view class="wel"> |
||||
<image class="icon" src="http://124.71.79.122/images/miniProgram/house.png" mode="widthFix" /> |
||||
<view class="text">{{ teamName + '邀请你加入他的团队' }}</view> |
||||
</view> |
||||
<view class="inner"> |
||||
<view class="input"> |
||||
<uni-easyinput type="text" v-model="form.name" placeholder="请输入你的真实姓名" :clearable="false" /> |
||||
</view> |
||||
<view class="input"> |
||||
<uni-easyinput type="number" v-model="form.phone" placeholder="请填写你的手机号" maxlength="11" :clearable="false" /> |
||||
</view> |
||||
<view class="input code-wrap"> |
||||
<uni-easyinput class="code" type="number" v-model="form.code" placeholder="验证码" maxlength="6" :clearable="false" /> |
||||
<view class="send-code" @click="sendCode" :disabled="codeDisabled">{{ phoneBtnText }}</view> |
||||
</view> |
||||
<button class="submit" type="primary" @click="submit">立即加入</button> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { sendPhoneOrEmailCode, inviteJoinOrganization } from '@/apis/modules/user.js' |
||||
export default { |
||||
data () { |
||||
return { |
||||
teamName: '', |
||||
form: { |
||||
accountId: '', |
||||
classificationId: '', |
||||
platformId: '', |
||||
phone: '', |
||||
code: '', |
||||
name: '', |
||||
}, |
||||
rules: { |
||||
phone: [ |
||||
{ required: true, message: '请输入手机号', trigger: 'blur' } |
||||
], |
||||
code: [ |
||||
{ required: true, message: "请输入验证码", trigger: 'blur' } |
||||
] |
||||
}, |
||||
repeat: false, // 是否有已存在用户，有的话禁填用户名和账号 |
||||
codeDisabled: false, |
||||
phoneTimer: null, |
||||
phoneOpener: '', |
||||
phoneBtnText: '发送验证码', |
||||
submiting: false // 新增编辑防抖标识 |
||||
}; |
||||
}, |
||||
onShow () { |
||||
const pages = getCurrentPages() |
||||
const { options } = pages[pages.length - 1] |
||||
this.teamName = options.teamName |
||||
this.form.accountId = options.accountId |
||||
this.form.classificationId = options.id |
||||
this.form.platformId = options.platformId |
||||
}, |
||||
methods: { |
||||
// 验证手机号 |
||||
verifyPhone (phone) { |
||||
if (!phone) { |
||||
this.$util.errMsg("请输入手机号") |
||||
return false |
||||
} |
||||
if (!/^1[3456789]\d{9}$/.test(phone) && !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(phone)) { |
||||
this.$util.errMsg("请输入正确的手机号") |
||||
return false |
||||
} |
||||
return true |
||||
}, |
||||
// 验证码倒计时 |
||||
phoneCountdown () { |
||||
let count = 60 |
||||
if (!this.phoneTimer) { |
||||
this.codeDisabled = true |
||||
this.phoneTimer = setInterval(() => { |
||||
if (count > 0) { |
||||
count-- |
||||
this.phoneBtnText = `${count}秒后重试` |
||||
} else { |
||||
this.codeDisabled = false |
||||
clearInterval(this.phoneTimer) |
||||
this.phoneTimer = null |
||||
this.phoneBtnText = `发送验证码` |
||||
} |
||||
}, 1000) |
||||
} |
||||
}, |
||||
// 发送验证码 |
||||
sendCode () { |
||||
const { phone } = this.form |
||||
if (!this.verifyPhone(phone)) return false |
||||
sendPhoneOrEmailCode({ |
||||
phone, |
||||
types: 2 |
||||
}).then(({ message }) => { |
||||
if (message.opener) { |
||||
this.phoneCountdown() |
||||
this.phoneOpener = message.opener |
||||
} else { |
||||
this.$util.errMsg(message) |
||||
} |
||||
}).catch(res => { }) |
||||
}, |
||||
// 提交 |
||||
submit () { |
||||
if (this.submiting) return false |
||||
if (this.phoneRepeat) return this.$util.errMsg("该手机号已存在") |
||||
const { form } = this |
||||
form.uniqueIdentification = Date.now() |
||||
this.submiting = true |
||||
inviteJoinOrganization(form).then(res => { |
||||
this.$util.sucMsg('加入成功！') |
||||
setTimeout(() => { |
||||
uni.redirectTo({ |
||||
url: '/team/joinSuccess/joinSuccess' |
||||
}) |
||||
}, 1500) |
||||
}).catch(res => { |
||||
this.submiting = false |
||||
}) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
margin: 100px 30rpx; |
||||
text-align: center; |
||||
border-radius: 6px; |
||||
background-color: #fff; |
||||
border-radius: 6px; |
||||
overflow: hidden; |
||||
.title { |
||||
padding: 15rpx 0; |
||||
font-size: 36rpx; |
||||
color: #fff; |
||||
background-color: $uni-primary; |
||||
} |
||||
.icon { |
||||
width: 120rpx; |
||||
margin: 50rpx 0 30rpx; |
||||
} |
||||
.text { |
||||
margin-bottom: 20rpx; |
||||
font-size: 28rpx; |
||||
color: #565656; |
||||
} |
||||
.inner { |
||||
padding: 20px; |
||||
} |
||||
.input { |
||||
margin-bottom: 30rpx; |
||||
input { |
||||
border-color: #dedede !important; |
||||
} |
||||
} |
||||
.code-wrap { |
||||
display: flex; |
||||
} |
||||
.code { |
||||
flex: 1; |
||||
} |
||||
.send-code { |
||||
width: 100px; |
||||
margin-left: 20px; |
||||
text-align: center; |
||||
color: #4386ff; |
||||
font-size: 12px; |
||||
line-height: 36px; |
||||
border: 1px solid #4386ff; |
||||
border-radius: 5px; |
||||
} |
||||
.submit { |
||||
width: 100%; |
||||
margin-top: 40rpx; |
||||
font-size: 36rpx; |
||||
background-color: $uni-primary; |
||||
border-color: #007eff; |
||||
border-radius: 20px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,44 @@ |
||||
<template> |
||||
<view class="wrap"> |
||||
<uni-icons type="checkbox-filled" size="50" color="#4876f9"></uni-icons> |
||||
<view class="tips">加入成功</view> |
||||
<view class="btn" @click="toLogin">前往登录</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
}, |
||||
methods: { |
||||
toLogin() { |
||||
uni.clearStorageSync() |
||||
this.$util.to('/pages/login/login') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
padding: 100rpx 30rpx; |
||||
text-align: center; |
||||
.tips { |
||||
margin: 10rpx 0 30rpx; |
||||
font-size: 30rpx; |
||||
color: $uni-primary; |
||||
} |
||||
.btn { |
||||
width: 100%; |
||||
line-height: 80rpx; |
||||
font-size: 30rpx; |
||||
text-align: center; |
||||
color: #fff; |
||||
border-radius: 10rpx; |
||||
background-color: $uni-primary; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue