parent
9197292305
commit
a98ebce307
10 changed files with 399 additions and 6 deletions
|
After Width: | Height: | Size: 331 B |
|
After Width: | Height: | Size: 81 KiB |
@ -0,0 +1,308 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="join"> |
||||
<h6>欢迎加入</h6> |
||||
<div class="wel"> |
||||
<div class="icon"> |
||||
<img src="@/assets/img/house.png" |
||||
alt=""> |
||||
</div> |
||||
<p class="text" |
||||
style="font-size: 16px">城市合伙人计划</p> |
||||
<p class="text">{{ teamName ? (teamName + '邀请你加入他的团队') : '加入并自动为你创建一个团队群组' }}</p> |
||||
</div> |
||||
<div class="inner"> |
||||
<el-form class="form" |
||||
ref="form" |
||||
:model="form" |
||||
:rules="rules"> |
||||
<el-form-item prop="provinceId"> |
||||
<el-select style="width: 100%" |
||||
v-model="form.provinceId" |
||||
placeholder="请选择省份" |
||||
:disabled="provinceId" |
||||
@change="getCity"> |
||||
<el-option v-for="(item,index) in provinces" |
||||
:key="index" |
||||
:label="item.provinceName" |
||||
:value="item.provinceId"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item prop="cityId"> |
||||
<el-select style="width: 100%" |
||||
v-model="form.cityId" |
||||
placeholder="请选择城市" |
||||
:disabled="provinceId || (form.provinceId ? false : true)"> |
||||
<el-option v-for="(item,index) in cities" |
||||
:key="index" |
||||
:label="item.cityName" |
||||
:value="item.cityId"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item prop="phone"> |
||||
<el-input v-model.trim="form.phone" |
||||
placeholder="请输入手机号" |
||||
maxlength="11" |
||||
@change="phoneChange"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="userName"> |
||||
<el-input v-model.trim="form.userName" |
||||
placeholder="请输入姓名" |
||||
:disabled="repeat"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="code"> |
||||
<div class="ver-code"> |
||||
<el-input v-model="form.code" |
||||
placeholder="请输入验证码" |
||||
maxlength="6"></el-input> |
||||
<el-button class="send" |
||||
type="text" |
||||
@click="sendPhoneCode" |
||||
:disabled="phoneDisabled">{{ phoneBtnText }}</el-button> |
||||
</div> |
||||
</el-form-item> |
||||
</el-form> |
||||
<el-button class="submit" |
||||
type="primary" |
||||
@click="submit">立即加入</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util" |
||||
import Setting from "@/setting" |
||||
export default { |
||||
data () { |
||||
return { |
||||
provinceId: this.$route.query.provinceId, |
||||
provinces: [], |
||||
cities: [], |
||||
isMobile: util.isMobile(), |
||||
userName: this.$route.query.userName, |
||||
teamName: this.$route.query.teamName, |
||||
admin: this.$route.query.admin, // 是否是转让超管 |
||||
form: { |
||||
id: this.$route.query.accountId, |
||||
partnerClassificationId: this.$route.query.id, |
||||
isTeam: this.$route.query.isTeam, // 移动端创建的为成员(0)，pc创建的为团队(1) |
||||
phone: '', |
||||
code: '', |
||||
userName: '', |
||||
provinceId: +this.$route.query.provinceId || '', |
||||
cityId: +this.$route.query.cityId || '' |
||||
}, |
||||
rules: { |
||||
provinceId: [ |
||||
{ required: true, message: '请选择省份', trigger: "change" } |
||||
], |
||||
cityId: [ |
||||
{ required: true, message: '请选择城市', trigger: "change" } |
||||
], |
||||
userName: [ |
||||
{ required: true, message: '请输入用户名', trigger: "blur" } |
||||
], |
||||
phone: [ |
||||
{ required: true, message: '请输入手机号', trigger: 'blur' } |
||||
], |
||||
code: [ |
||||
{ required: true, message: "请输入验证码", trigger: 'blur' } |
||||
] |
||||
}, |
||||
repeat: false, // 是否有已存在用户，有的话禁填用户名和账号 |
||||
phoneDisabled: false, |
||||
phoneTimer: null, |
||||
phoneOpener: '', |
||||
phoneBtnText: '发送验证码', |
||||
submiting: false // 新增编辑防抖标识 |
||||
}; |
||||
}, |
||||
mounted () { |
||||
// document.body.style.minWidth = 'none' |
||||
this.getProvince() |
||||
this.form.cityId && this.getCity() |
||||
}, |
||||
methods: { |
||||
// 获取省份 |
||||
getProvince () { |
||||
this.$get(this.api.queryProvince).then(res => { |
||||
this.provinces = res.list |
||||
}).catch(res => { }) |
||||
}, |
||||
// 获取城市 |
||||
getCity (val) { |
||||
this.$get(this.api.queryCity, { |
||||
provinceId: this.form.provinceId |
||||
}).then(res => { |
||||
this.cities = res.list |
||||
if (val) this.form.cityId = '' |
||||
}).catch(res => { }) |
||||
}, |
||||
// 验证手机号 |
||||
verifyPhone (phone) { |
||||
if (!phone) { |
||||
util.warningMsg("请输入手机号") |
||||
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)) { |
||||
util.warningMsg("请输入正确的手机号") |
||||
return false |
||||
} |
||||
return true |
||||
}, |
||||
// 验证码倒计时 |
||||
phoneCountdown () { |
||||
let count = 60 |
||||
if (!this.phoneTimer) { |
||||
this.phoneDisabled = true |
||||
this.phoneTimer = setInterval(() => { |
||||
if (count > 0) { |
||||
count-- |
||||
this.phoneBtnText = `${count}秒后重试` |
||||
} else { |
||||
this.phoneDisabled = false |
||||
clearInterval(this.phoneTimer) |
||||
this.phoneTimer = null |
||||
this.phoneBtnText = `发送验证码` |
||||
} |
||||
}, 1000) |
||||
} |
||||
}, |
||||
// 发送验证码 |
||||
sendPhoneCode () { |
||||
const { phone } = this.form |
||||
if (!this.verifyPhone(phone)) return false |
||||
this.$post(this.api.sendPhoneOrEmailCode, { |
||||
platform: Setting.platformId, |
||||
phone, |
||||
types: 2 |
||||
}).then(({ message }) => { |
||||
if (message.opener) { |
||||
this.phoneCountdown() |
||||
this.phoneOpener = message.opener |
||||
} else { |
||||
util.errorMsg(message) |
||||
} |
||||
}).catch(res => { }) |
||||
}, |
||||
// 手机号输入完后，带出信息 |
||||
phoneChange () { |
||||
const { form } = this |
||||
this.$get(this.api.queryUserInfoByPhone, { |
||||
phone: form.phone |
||||
}).then(({ info }) => { |
||||
// 返回了信息，则赋值，并禁止输入 |
||||
if (info) { |
||||
this.repeat = true |
||||
form.account = info.account |
||||
form.userName = info.userName |
||||
} else { |
||||
this.repeat = false |
||||
} |
||||
}).catch(res => { }) |
||||
}, |
||||
// 提交 |
||||
submit () { |
||||
this.$refs.form.validate((valid) => { |
||||
if (valid) { |
||||
if (this.submiting) return false |
||||
if (this.phoneRepeat) return util.warningMsg("该手机号已存在") |
||||
if (this.emailRepeat) return util.warningMsg("该邮箱已存在") |
||||
const { form } = this |
||||
form.uniqueIdentification = Date.now() |
||||
this.submiting = true |
||||
this.$post(this.api[this.admin ? 'transferAdmin' : 'savePartnerAccount'], form).then(res => { |
||||
this.$router.push('/join/success') |
||||
}).catch(res => { |
||||
this.submiting = false |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
body { |
||||
min-width: none; |
||||
} |
||||
.wrap { |
||||
height: 100%; |
||||
padding-top: 100px; |
||||
background-color: #f3f6fa; |
||||
} |
||||
.ver-code { |
||||
position: relative; |
||||
.el-button { |
||||
position: absolute; |
||||
top: 11px; |
||||
right: 10px; |
||||
color: #319bf7; |
||||
} |
||||
} |
||||
.join { |
||||
width: 436px; |
||||
margin: 0 auto; |
||||
text-align: center; |
||||
border-radius: 6px; |
||||
background-color: #fff; |
||||
border-radius: 6px; |
||||
overflow: hidden; |
||||
h6 { |
||||
padding: 0 15px; |
||||
font-size: 18px; |
||||
line-height: 48px; |
||||
color: #fff; |
||||
background-color: #319bf7; |
||||
} |
||||
.icon { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 70px; |
||||
height: 70px; |
||||
margin: 20px auto; |
||||
border-radius: 4px; |
||||
background-color: #007eff; |
||||
} |
||||
.text { |
||||
margin-bottom: 10px; |
||||
color: #565656; |
||||
} |
||||
.inner { |
||||
padding: 20px; |
||||
} |
||||
/deep/.el-form-item { |
||||
margin-bottom: 25px; |
||||
} |
||||
/deep/.el-input__inner { |
||||
position: relative; |
||||
height: 52px; |
||||
line-height: 50px; |
||||
background-color: #fbfbfb; |
||||
border: 1px solid #e1e6f2; |
||||
border-radius: 4px !important; |
||||
} |
||||
.submit { |
||||
width: 100%; |
||||
padding: 0; |
||||
margin-top: 20px; |
||||
font-size: 18px; |
||||
line-height: 44px; |
||||
background-color: #007eff; |
||||
border-color: #007eff; |
||||
border-radius: 30px; |
||||
} |
||||
} |
||||
@media (max-width: 720px) { |
||||
.join { |
||||
width: 90%; |
||||
margin: 20px auto 0; |
||||
.submit { |
||||
margin-top: 0; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,68 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="inner"> |
||||
<div class="icon"> |
||||
<i class="el-icon-success icon"></i> |
||||
<p class="tips">加入成功</p> |
||||
</div> |
||||
<p class="text">你已加入城市合伙人计划</p> |
||||
<p class="text">请保存并用微信扫以下二维码打开城市合伙人小程序</p> |
||||
<img class="qrcode" src="@/assets/img/mini.jpg" alt=""> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
}; |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 100%; |
||||
background-color: #f3f6fa; |
||||
} |
||||
.inner { |
||||
width: 436px; |
||||
padding: 50px 0; |
||||
text-align: center; |
||||
border-radius: 6px; |
||||
background-color: #fff; |
||||
border-radius: 10px; |
||||
overflow: hidden; |
||||
.icon { |
||||
font-size: 40px; |
||||
color: #007eff; |
||||
} |
||||
.tips { |
||||
margin: 10px 0; |
||||
font-size: 20px; |
||||
} |
||||
.text { |
||||
margin-bottom: 15px; |
||||
font-size: 14px; |
||||
} |
||||
.qrcode { |
||||
width: 200px; |
||||
} |
||||
} |
||||
@media (max-width: 720px) { |
||||
.inner { |
||||
width: 90%; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue