|
|
@@ -0,0 +1,281 @@
|
|
|
+<template>
|
|
|
+ <view class="invite-proxy">
|
|
|
+ <custom-nav noback="noback" transparent="transparent" ref="ltm" title=" " />
|
|
|
+ <view class="content">
|
|
|
+ <view class="app-item item">
|
|
|
+ <text>邀请人</text>
|
|
|
+ <text>{{ recom_nickname }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="app-item item">
|
|
|
+ <text>邀请码</text>
|
|
|
+ <text>{{ invite_code }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="app-item item">
|
|
|
+ <text>联系方式</text>
|
|
|
+ <text>{{ recom_mobile }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="!logged" class="form">
|
|
|
+ <navigator url="../phone-area/phone-area" class="phone-area">
|
|
|
+ <text class="text">国家/地区</text>
|
|
|
+ <text class="area">{{ areaName }}（{{ areaCode == '86' ? '+' : '' }}{{ areaCode }}）</text>
|
|
|
+ <text class="icon cuIcon-right"></text>
|
|
|
+ </navigator>
|
|
|
+ <view class="item">
|
|
|
+ <text class="icon cuIcon-mobilefill"></text>
|
|
|
+ <input maxlength="11" type="number" v-model="phone" placeholder="请输入手机号" />
|
|
|
+ <text v-if="phone" class="cuIcon-roundclosefill" @tap="clearPhone"></text>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <text class="icon cuIcon-markfill"></text>
|
|
|
+ <input maxlength="6" type="number" v-model="verifycode" placeholder="请输入6位验证码" />
|
|
|
+ <text v-if="verifycode" class="cuIcon-roundclosefill" @tap="clearVerify"></text>
|
|
|
+ <view class="countdown" @tap="getCode">
|
|
|
+ 发送验证码 <text v-if="countDown">{{ ' ' + countDown }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="!logged" class="app-item item item-space">
|
|
|
+ <text>微信昵称</text>
|
|
|
+ <input v-model="wx_nickname" placeholder="请填写微信昵称" />
|
|
|
+ </view>
|
|
|
+ <view v-if="!logged" class="app-item item">
|
|
|
+ <text>真实姓名</text>
|
|
|
+ <input v-model="real_name" maxlength="32" placeholder="请填写真实姓名" />
|
|
|
+ </view>
|
|
|
+ <view v-if="!logged" class="app-item item">
|
|
|
+ <text>身份证号</text>
|
|
|
+ <input type="text" @input="inputChange" v-model="id_card_num" maxlength="18" placeholder="请填写身份证号" />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <button v-if="isREG && !logged" class="big-btn bg" @tap="submit">立即加入</button>
|
|
|
+ <view id="erweima" style="display: none;"></view>
|
|
|
+ <image class="showCan" v-if="src" :src="src" ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { _API_GetVerifyCode, _API_Reg, _API_Login, _API_LoginWX, _API_GzhWebInit } from '@/apis/verify.js'
|
|
|
+ import { _API_SubAuthInfo } from '@/apis/user.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: '欢迎加入大卫博士',
|
|
|
+ recom_nickname: '',
|
|
|
+ recom_mobile: '',
|
|
|
+ invite_code: '',
|
|
|
+ wx_nickname: '',
|
|
|
+ real_name: '',
|
|
|
+ id_card_num: '',
|
|
|
+ areaName: '中国大陆', // 手机号地区名称
|
|
|
+ areaCode: '86', // 手机号地区代码
|
|
|
+ phone: '', // 手机号
|
|
|
+ verifycode: '', // 验证码
|
|
|
+ countDown: 0, // 倒计时
|
|
|
+ isREG: true,
|
|
|
+ src: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ logged() { return this.$store.state.app.token }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // uni.reLaunch({ url: '../index/index' }) // 跳转到登陆
|
|
|
+ // setTimeout(() => uni.$emit('noopening'))
|
|
|
+ // return
|
|
|
+ // uni.navigateBack()
|
|
|
+
|
|
|
+ // location.href = `http://api.app.jiuweiyun.cn/api/gzh/${encodeURIComponent(this.recom_nickname)}/${this.recom_mobile}/${this.invite_code}`
|
|
|
+ },
|
|
|
+ onLoad({ data }) {
|
|
|
+ this.recom_nickname = JSON.parse(data).nickname
|
|
|
+ this.recom_mobile = JSON.parse(data).mobile
|
|
|
+ this.invite_code = JSON.parse(data).invite_code
|
|
|
+
|
|
|
+ uni.showLoading({ mask: true })
|
|
|
+ uni.$on('CHOOSEPHONECODE', (name, code) => { // 监听 chooseArea 事件更新
|
|
|
+ this.areaName = name // 修改选择的手机号地区名称
|
|
|
+ this.areaCode = code // 修改选择的手机号地区代码
|
|
|
+ })
|
|
|
+
|
|
|
+ if (this.$store.state.app.token) {
|
|
|
+ const script = document.createElement('script')
|
|
|
+ script.type = 'text/javascript'
|
|
|
+ script.src = 'http://res.wx.qq.com/open/js/jweixin-1.6.0.js'
|
|
|
+ document.getElementsByTagName('head')[0].appendChild(script)
|
|
|
+ script.onload = () => {
|
|
|
+ _API_GzhWebInit().then(res => {
|
|
|
+ console.log(res)
|
|
|
+ window.history.replaceState({}, '', `/api/gzh/${encodeURIComponent(this.recom_nickname)}/${encodeURIComponent(this.recom_mobile)}/${encodeURIComponent(this.invite_code)}`)
|
|
|
+ $('#erweima').qrcode({ width: 333, height: 333, text: window.location.href })
|
|
|
+ setTimeout(() => {
|
|
|
+ wx.config(res)
|
|
|
+ wx.ready(() => {
|
|
|
+ wx.onMenuShareAppMessage({
|
|
|
+ title: `我是${this.$store.state.userinfo.nickname}, 邀请你加入大卫博士`,
|
|
|
+ desc: '传递健康，改变命运。',
|
|
|
+ link: window.location.href,
|
|
|
+ imgUrl: 'http://api.app.jiuweiyun.cn/public/uploads/logo.jpg',
|
|
|
+ success () {
|
|
|
+ uni.hideLoading()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ wx.error(res => {
|
|
|
+ uni.hideLoading()
|
|
|
+ this.src = document.getElementsByTagName('canvas')[0].toDataURL("image/png")
|
|
|
+ alert('微信分享初始化失败，请分享二维码给好友以邀请')
|
|
|
+ })
|
|
|
+ }, 123)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.hideLoading()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ inputChange() {
|
|
|
+ this.id_card_num = this.id_card_num.trim()
|
|
|
+ },
|
|
|
+ getCode() { // 点击获取手机验证码
|
|
|
+ if (this.phone.length) { // 手机号是否输入
|
|
|
+ if (this.countDown) { // 如果正在倒计时
|
|
|
+ uni.toast('验证码已发送,请稍后重试')
|
|
|
+ } else {
|
|
|
+ uni.showLoading({ mask: true }) // 显示 loading
|
|
|
+ _API_GetVerifyCode({ mobile: this.phone, code: this.areaCode, type: 'invite' }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ if (res.data.status == 0) { // 登录 // 0、 1 代表用户是登录 或 注册
|
|
|
+ this.isREG = false // 隐藏提交
|
|
|
+ uni.toast('该手机号已注册！请直接登陆！') // 提示邀请码发送成功
|
|
|
+ } else {
|
|
|
+ this.isREG = true // 显示提交
|
|
|
+ uni.toast('验证码发送成功') // 提示邀请码发送成功
|
|
|
+ this.countDown = 120 // 倒计时时长
|
|
|
+ this.timer = setInterval(() => { // 开始倒计时
|
|
|
+ this.countDown --
|
|
|
+ if (this.countDown <= 0) { // 倒计时结束清除倒计时
|
|
|
+ this.countDown = 0
|
|
|
+ clearInterval(this.timer)
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ } else if (res.code == 900) {
|
|
|
+ this.isREG = false // 隐藏提交
|
|
|
+ uni.toast('该手机号已注册！请直接登陆！') // 提示邀请码发送成功
|
|
|
+ } else { // code 300 表示禁止获取验证码，禁止登陆
|
|
|
+ uni.toast('获取验证码失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.toast('手机号格式不正确，请重新输入')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submit() { // 点击登录/注册
|
|
|
+ if (!this.phone.length) { uni.toast('手机号格式不正确，请重新输入'); return }
|
|
|
+ if (!(this.verifycode.length == 6)) { uni.toast('验证码格式不正确，请重新输入'); return }
|
|
|
+ if (!this.wx_nickname.length) {
|
|
|
+ uni.toast('微信昵称不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.real_name.match(/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/)) {
|
|
|
+ uni.toast('真实姓名不符合要求')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.id_card_num.match(/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/)) {
|
|
|
+ uni.toast('身份号码不合法')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.showLoading({ mask: true }) // 显示 loading
|
|
|
+ _API_Reg({
|
|
|
+ mobile: this.phone,
|
|
|
+ verify_code: this.verifycode,
|
|
|
+ recom_code: this.invite_code,
|
|
|
+ code: this.areaCode
|
|
|
+ }).then(res => {
|
|
|
+ uni.showLoading({ mask: true }) // 显示 loading
|
|
|
+ if (res.code == 200) { // 注册成功
|
|
|
+ this.$store.commit('app/LOGIN', res.data.token) // 保存 token
|
|
|
+ _API_SubAuthInfo({ // 提交信息
|
|
|
+ wechatname: this.wx_nickname,
|
|
|
+ realname: this.real_name,
|
|
|
+ cre_num: this.id_card_num
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === 200) { // 提交成功
|
|
|
+ this.$store.commit('userinfo/UPDATA_USERINFO', { cert_status: 1 })
|
|
|
+ uni.redirectTo({ url:'../auth-progress/auth-progress' }) // redirect 到 审核进度页面
|
|
|
+ } else if (res.code === 300) {
|
|
|
+ uni.showToast({ title: res.message })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (res.code == 300) { // 验证码不正确
|
|
|
+ uni.toast('验证码错误')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .invite-proxy {
|
|
|
+ @include page();
|
|
|
+ .showCan {
|
|
|
+ width: 90vw;
|
|
|
+ height: 90vw;
|
|
|
+ margin: 5vw;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ .form {
|
|
|
+ padding: 30rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ .phone-area {
|
|
|
+ @include flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ .text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .area {
|
|
|
+ color: #42b983;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ @include flex();
|
|
|
+ height: 110rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: $app-sec-text-color;
|
|
|
+ border-bottom: 1rpx solid #B2B2B2;
|
|
|
+ .icon, .cuIcon-roundclosefill {
|
|
|
+ margin: 0 20rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ flex: 1;
|
|
|
+ height: 84rpx;
|
|
|
+ margin-left: 15rpx;
|
|
|
+ }
|
|
|
+ .countdown {
|
|
|
+ @include flex();
|
|
|
+ height: 50rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ background: #FFEFF0;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ border-radius: 33rpx;
|
|
|
+ color: $app-base-color;
|
|
|
+ text {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
yinchengnuo