605 lines
15 KiB
Vue
605 lines
15 KiB
Vue
<!--
|
|
* @Descripttion:
|
|
* @version:
|
|
* @Author: kBank
|
|
* @Date: 2022-11-21 15:11:22
|
|
-->
|
|
<template>
|
|
<view>
|
|
<view v-if="!pkCountry" class="content1">
|
|
<!-- <view class="title">欢迎注册</view> -->
|
|
<view class="formed1">
|
|
<u-form
|
|
:model="form"
|
|
labelWidth="90px"
|
|
ref="uForm"
|
|
labelPosition="top"
|
|
:rules="rules"
|
|
>
|
|
<!-- <u-form-item label="推荐编号" prop="parentCode">
|
|
<u-input v-model="form.parentCode" disabled> </u-input>
|
|
</u-form-item> -->
|
|
<u-form-item label="会员姓名" prop="memberName">
|
|
<u-input
|
|
class="custom-input"
|
|
v-model="form.memberName"
|
|
:placeholder="'请输入会员姓名'"
|
|
/>
|
|
</u-form-item>
|
|
<u-form-item label="联系方式" prop="phone">
|
|
<u-input
|
|
class="custom-input"
|
|
v-model="form.phone"
|
|
:placeholder="'请输入联系方式'"
|
|
type="number"
|
|
maxlength="20"
|
|
/>
|
|
</u-form-item>
|
|
|
|
<!--
|
|
<u-form-item label="登录密码" prop="loginPwd">
|
|
<u-input
|
|
:password="isPwd"
|
|
:placeholder="'请输入登录密码'"
|
|
v-model="form.loginPwd"
|
|
>
|
|
<template #suffix>
|
|
<u-icon name="eye" @tap="isPwd = !isPwd" v-if="!isPwd"></u-icon>
|
|
<u-icon name="eye-off" @tap="isPwd = !isPwd" v-else></u-icon>
|
|
</template>
|
|
</u-input>
|
|
</u-form-item>
|
|
<u-form-item label="支付密码" prop="payPwd">
|
|
<u-input
|
|
:password="isPwd2"
|
|
:placeholder="'请输入支付密码'"
|
|
v-model="form.payPwd"
|
|
>
|
|
<template #suffix>
|
|
<u-icon
|
|
name="eye"
|
|
@tap="isPwd2 = !isPwd2"
|
|
v-if="!isPwd2"
|
|
></u-icon>
|
|
<u-icon name="eye-off" @tap="isPwd2 = !isPwd2" v-else></u-icon>
|
|
</template>
|
|
</u-input>
|
|
</u-form-item>
|
|
<u-form-item label="验证码" prop="smsCode">
|
|
<u-input v-model="form.smsCode" :placeholder="'请输入验证码'">
|
|
<template #suffix>
|
|
<view class="getCode" @tap="getVilCode">{{ getCode }}</view>
|
|
</template>
|
|
</u-input>
|
|
</u-form-item>
|
|
-->
|
|
</u-form>
|
|
<u-button
|
|
type="success"
|
|
class="uBtn"
|
|
shape="circle"
|
|
color="linear-gradient(to right, #005BAC, #005BAC )"
|
|
:loading="isLoading"
|
|
:loadingText="'注册中'"
|
|
@click="toLogin"
|
|
>{{ '欢迎注册' }}</u-button
|
|
>
|
|
</view>
|
|
</view>
|
|
<u-modal
|
|
:show="showSuccessModal"
|
|
title="注册成功"
|
|
:show-cancel-button="true"
|
|
cancel-text="复制"
|
|
confirm-text="自动登录"
|
|
@confirm="onModalConfirm"
|
|
@cancel="onModalCancel"
|
|
@close="showSuccessModal = false"
|
|
>
|
|
<view class="slot-content" v-if="successData">
|
|
<view class="success-item">
|
|
<text class="item-label">会员编号:</text>
|
|
<text class="item-value">{{ successData.memberCode }}</text>
|
|
</view>
|
|
<view class="success-item">
|
|
<text class="item-label">会员姓名:</text>
|
|
<text class="item-value">{{ successData.memberName }}</text>
|
|
</view>
|
|
<view class="success-item">
|
|
<text class="item-label">联系方式:</text>
|
|
<text class="item-value">{{ successData.phone }}</text>
|
|
</view>
|
|
<view class="success-item">
|
|
<text class="item-label">登录密码:</text>
|
|
<text class="item-value">{{ successData.loginPassword }}</text>
|
|
</view>
|
|
<view class="success-item">
|
|
<text class="item-label">支付密码:</text>
|
|
<text class="item-value">{{ successData.payPassword }}</text>
|
|
</view>
|
|
<view class="success-item">
|
|
<text class="item-label">登录地址:</text>
|
|
<text class="item-value">{{ successData.urlAddress }}</text>
|
|
</view>
|
|
</view>
|
|
</u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as api from '@/config/goods'
|
|
import {
|
|
getMemberCode,
|
|
getPhoneCode,
|
|
getRegister,
|
|
autoLogin,
|
|
} from '@/config/share'
|
|
import { setToken } from '@/config/auth.js'
|
|
import store from '@/store'
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
isTrue: false,
|
|
howHeader: 'HF',
|
|
pkParent: '',
|
|
form: {
|
|
memberName: '',
|
|
smsCode: '',
|
|
loginPwd: '',
|
|
payPwd: '',
|
|
parentCode: '',
|
|
phone: '',
|
|
},
|
|
isLoading: false,
|
|
getCode: '获取验证码',
|
|
isSend: false,
|
|
beginTime: 60,
|
|
timer: '',
|
|
pkCountry: '',
|
|
isCountry: false,
|
|
countryList: [],
|
|
isPwd: true,
|
|
isPwd1: true,
|
|
isPwd2: true,
|
|
showSuccessModal: false,
|
|
successData: null,
|
|
rules: {
|
|
parentCode: [
|
|
{
|
|
required: true,
|
|
message: '请输入推荐编号',
|
|
trigger: ['blur'],
|
|
},
|
|
],
|
|
memberName: [
|
|
{
|
|
required: true,
|
|
message: '请输入会员姓名',
|
|
trigger: ['blur'],
|
|
},
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
return this.$u.test.chinese(value)
|
|
},
|
|
message: '请输入中文',
|
|
trigger: ['blur'],
|
|
},
|
|
],
|
|
phone: [
|
|
{
|
|
required: true,
|
|
message: '请输入联系方式',
|
|
trigger: ['blur'],
|
|
},
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
return this.$u.test.mobile(value)
|
|
},
|
|
message: '手机号格式不正确',
|
|
trigger: ['blur'],
|
|
},
|
|
],
|
|
smsCode: [
|
|
{
|
|
required: true,
|
|
message: '请输入验证码',
|
|
trigger: ['blur'],
|
|
},
|
|
],
|
|
loginPwd: [
|
|
{
|
|
required: true,
|
|
message: '请输入登录密码',
|
|
trigger: ['blur'],
|
|
},
|
|
],
|
|
payPwd: [
|
|
{
|
|
required: true,
|
|
message: '请输入支付密码',
|
|
trigger: ['blur'],
|
|
},
|
|
],
|
|
},
|
|
rules1: {
|
|
memberName: [
|
|
{
|
|
required: true,
|
|
message: '请输入真实姓名',
|
|
trigger: ['change', 'blur'],
|
|
},
|
|
],
|
|
phone: [
|
|
{
|
|
required: true,
|
|
message: '请输入联系方式',
|
|
trigger: ['change', 'blur'],
|
|
},
|
|
],
|
|
code: [
|
|
{
|
|
required: true,
|
|
message: '请输入验证码',
|
|
trigger: ['change', 'blur'],
|
|
},
|
|
],
|
|
loginPwd: [
|
|
{
|
|
required: true,
|
|
message: '请输入登录密码',
|
|
trigger: ['change', 'blur'],
|
|
},
|
|
],
|
|
payPwd: [
|
|
{
|
|
required: true,
|
|
message: '请输入支付密码',
|
|
trigger: ['change', 'blur'],
|
|
},
|
|
],
|
|
},
|
|
}
|
|
},
|
|
onReady() {},
|
|
onLoad(options) {
|
|
this.pkParent = options.code
|
|
this.pkCountry = options.country || ''
|
|
if (this.pkCountry) {
|
|
// this.getCountry()
|
|
this.form.pkCountry = this.pkCountry
|
|
uni.setStorageSync('pkCountry', this.pkCountry)
|
|
// uni.redirectTo({
|
|
// url: '/pages/shareArea/hiList?pkParent=' + this.pkParent,
|
|
// })
|
|
// this.$refs.uForm1.setRules(this.rules1)
|
|
} else {
|
|
// 获取前缀
|
|
// 校验0元购
|
|
this.getHeader()
|
|
// this.$refs.uForm.setRules(this.rules)
|
|
}
|
|
},
|
|
onShow() {},
|
|
methods: {
|
|
getUseInfo() {
|
|
getUseInfo().then(res => {
|
|
this.userInfo = res.data
|
|
})
|
|
},
|
|
selCountry() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确认更换自然国',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
this.isCountry = true
|
|
}
|
|
},
|
|
})
|
|
},
|
|
memberCodeRule(rule, value, callback) {
|
|
if (!value) {
|
|
callback(new Error('请输入会员编号'))
|
|
} else {
|
|
if (value.length < 10 || value.length > 20) {
|
|
callback(new Error('请输入10-20位数字'))
|
|
} else {
|
|
api.validateMember(value).then(res => {
|
|
if (res.code == 200) {
|
|
callback()
|
|
} else {
|
|
callback(new Error(res.msg))
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
getHeader() {
|
|
getMemberCode(this.pkParent).then(res => {
|
|
this.$set(this.form, 'parentCode', res.data)
|
|
console.log(this.form)
|
|
})
|
|
// api.prefix(this.pkParent).then((res) => {
|
|
// this.howHeader = res.msg
|
|
// })
|
|
},
|
|
getGenerate() {
|
|
api.generate().then(res => {
|
|
uni.setStorageSync('mToken', res.msg)
|
|
})
|
|
},
|
|
toLogin() {
|
|
this.$refs.uForm.validate().then(() => {
|
|
this.isLoading = true
|
|
// getRegister(Object.assign({}, this.form, { parentCode: this.pkParent }))
|
|
getRegister(this.form)
|
|
.then(res => {
|
|
this.isLoading = false
|
|
if (res.code == 200) {
|
|
this.successData = res.data
|
|
this.showSuccessModal = true
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg || '注册失败',
|
|
icon: 'none',
|
|
})
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.isLoading = false
|
|
uni.showToast({
|
|
title: '注册请求失败',
|
|
icon: 'none',
|
|
})
|
|
})
|
|
})
|
|
},
|
|
onModalConfirm() {
|
|
if (this.successData) {
|
|
this.handleAutoLogin(this.successData)
|
|
}
|
|
},
|
|
onModalCancel() {
|
|
if (this.successData) {
|
|
const modalContent = `会员编号: ${this.successData.memberCode}\n会员姓名: ${this.successData.memberName}\n联系方式: ${this.successData.phone}\n登录密码: ${this.successData.loginPassword}\n支付密码: ${this.successData.payPassword}\n登录地址: ${this.successData.urlAddress}`
|
|
uni.setClipboardData({
|
|
data: modalContent,
|
|
success: function () {
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
icon: 'success',
|
|
})
|
|
},
|
|
})
|
|
}
|
|
},
|
|
handleAutoLogin(loginData) {
|
|
autoLogin({
|
|
username: loginData.memberCode,
|
|
password: loginData.loginPassword,
|
|
uuid: loginData.uuid,
|
|
})
|
|
.then(loginRes => {
|
|
if (loginRes.code === 200) {
|
|
uni.showToast({
|
|
title: '登录成功',
|
|
icon: 'success',
|
|
duration: 1500,
|
|
})
|
|
setToken(loginRes.data.access_token)
|
|
store.dispatch('GetInfo').then(res => {
|
|
uni.switchTab({ url: '/pages/index/index' })
|
|
})
|
|
|
|
// setTimeout(() => {
|
|
// uni.reLaunch({
|
|
// url: '/pages/index/index',
|
|
// })
|
|
// }, 1500)
|
|
} else {
|
|
uni.showToast({
|
|
title: loginRes.msg || '自动登录失败',
|
|
icon: 'none',
|
|
})
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.log(err)
|
|
uni.showToast({
|
|
title: '自动登录请求失败',
|
|
icon: 'none',
|
|
})
|
|
})
|
|
},
|
|
hiLogin() {
|
|
this.$refs.uForm1.validate().then(res => {
|
|
this.isLoading = true
|
|
api
|
|
.hiRegister(Object.assign({}, this.form, { pkParent: this.pkParent }))
|
|
.then(res => {
|
|
this.isLoading = false
|
|
if (res.code == 200) {
|
|
uni.redirectTo({
|
|
url:
|
|
'/pages/shareRegist/success?allData=' +
|
|
JSON.stringify(res.data),
|
|
})
|
|
}
|
|
})
|
|
})
|
|
},
|
|
confirmPopup(e) {
|
|
this.form.pkCountry = e.value[0].id
|
|
this.form.pkCountryName = e.value[0].label
|
|
this.isCountry = false
|
|
},
|
|
getCountry() {
|
|
api.getCountry().then(res => {
|
|
this.countryList = [
|
|
res.data.map(item => {
|
|
return {
|
|
label: item.shortName,
|
|
id: item.pkId,
|
|
}
|
|
}),
|
|
]
|
|
this.countryList[0].forEach(item => {
|
|
if (this.pkCountry == item.id) {
|
|
this.form.jsName = item.label
|
|
this.form.pkCountryName = item.label
|
|
}
|
|
})
|
|
})
|
|
},
|
|
// 获取验证码
|
|
getVilCode() {
|
|
this.startTime()
|
|
getPhoneCode({
|
|
phone: this.form.phone,
|
|
parentCode: this.pkParent,
|
|
})
|
|
.then(res => {})
|
|
.catch(err => {
|
|
this.beginTime = 0
|
|
})
|
|
},
|
|
// 倒计时
|
|
startTime() {
|
|
if (this.isSend) return
|
|
this.isSend = true
|
|
this.getCode = this.beginTime + ' s'
|
|
let that = this
|
|
this.timer = setInterval(() => {
|
|
this.beginTime--
|
|
this.getCode = this.beginTime + ' s'
|
|
if (this.beginTime < 0) {
|
|
clearInterval(this.timer)
|
|
this.getCode = '获取验证码'
|
|
this.beginTime = 60
|
|
this.isSend = false
|
|
}
|
|
}, 1000)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content1 {
|
|
height: 100vh;
|
|
overflow: auto;
|
|
background-image: url('@/static/images/regist-bg.jpg');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
// padding-top: 35vh;
|
|
}
|
|
.content {
|
|
background-image: url('@/static/images/huan.jpg');
|
|
// background-image: url('@/static/images/regiestBg.jpg');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
height: 100vh;
|
|
}
|
|
.title {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
text-align: center;
|
|
padding-top: 120rpx;
|
|
padding-bottom: 80rpx;
|
|
}
|
|
.index_header {
|
|
background: #f9f9f9;
|
|
height: 330rpx;
|
|
|
|
font-size: 18px;
|
|
font-family:
|
|
PingFang SC-Semibold,
|
|
PingFang SC;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
}
|
|
.formed {
|
|
padding: 0 120rpx;
|
|
}
|
|
.formed1 {
|
|
width: 70%;
|
|
margin-top: 37vh;
|
|
.custom-input {
|
|
border-radius: 60rpx;
|
|
}
|
|
}
|
|
.getCode {
|
|
font-size: 10px;
|
|
font-family:
|
|
PingFang SC-Regular,
|
|
PingFang SC;
|
|
font-weight: 400;
|
|
color: #005bac;
|
|
}
|
|
.uBtn {
|
|
margin-top: 120rpx;
|
|
}
|
|
.picker {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
border-width: 0.5px !important;
|
|
border-color: #dadbde !important;
|
|
border-style: solid;
|
|
border-radius: 4px;
|
|
padding: 6px 9px;
|
|
background: #fff;
|
|
}
|
|
::v-deep .u-input {
|
|
background: rgb(233, 233, 233);
|
|
}
|
|
.mask {
|
|
position: fixed;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
width: 100%;
|
|
height: 100vh;
|
|
top: 0;
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
.slot-content {
|
|
padding: 30rpx 20rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.success-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10rpx 0;
|
|
}
|
|
.item-label {
|
|
color: #606266;
|
|
margin-right: 20rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.item-value {
|
|
color: #303133;
|
|
word-break: break-all;
|
|
text-align: right;
|
|
}
|
|
</style>
|