535 lines
14 KiB
Vue
535 lines
14 KiB
Vue
<!--
|
|
* @Descripttion:
|
|
* @version:
|
|
* @Author: kBank
|
|
* @Date: 2022-11-21 15:11:22
|
|
-->
|
|
<template>
|
|
<view >
|
|
<view v-if="!pkCountry" class="content1">
|
|
<!-- <view class="index_header">
|
|
<view>注册</view>
|
|
</view> -->
|
|
<!-- <view class="tit" v-if="!pkCountry">{{ '嗨粉扫天下' }}</view> -->
|
|
<!-- 海粉 -->
|
|
<view class="formed1"
|
|
>
|
|
<u-form :model="form"
|
|
labelWidth="80px"
|
|
ref="uForm"
|
|
:rules="rules">
|
|
<u-form-item label=""
|
|
prop="memberCode">
|
|
<u-input v-model="form.memberCode"
|
|
type="number"
|
|
disabled>
|
|
<u--text :text="howHeader"
|
|
slot="prefix"
|
|
margin="0 3px 0 0"
|
|
type="tips"></u--text>
|
|
</u-input>
|
|
</u-form-item>
|
|
<u-form-item label=""
|
|
prop="memberName">
|
|
<u-input v-model="form.memberName"
|
|
:placeholder="'请输入会员姓名'" />
|
|
</u-form-item>
|
|
<u-form-item label=""
|
|
prop="phone">
|
|
<u-input v-model="form.phone" @blur="setMemberCode"
|
|
:placeholder="'请输入联系方式'" type="number" maxlength="20" />
|
|
</u-form-item>
|
|
|
|
<u-form-item label=""
|
|
prop="loginPassword">
|
|
<u-input :password="isPwd"
|
|
:placeholder="'请输入登录密码'"
|
|
v-model="form.loginPassword">
|
|
<template slot="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="payPassword">
|
|
<u-input :password="isPwd2"
|
|
:placeholder="'请输入支付密码'"
|
|
v-model="form.payPassword">
|
|
<template slot="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="code">
|
|
<u-input v-model="form.code"
|
|
:placeholder="'请输入验证码'">
|
|
<template slot="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>
|
|
<view v-else class="content">
|
|
<!-- <view class="tit" >{{ '海粉扫天下' }}</view>
|
|
<view class="formed"
|
|
>
|
|
<u-form :model="form"
|
|
ref="uForm1"
|
|
:rules="rules1"
|
|
labelWidth="80px">
|
|
<u-form-item label=""
|
|
prop="memberName">
|
|
<u-input v-model="form.memberName"
|
|
:placeholder="'请输入真实姓名'" />
|
|
</u-form-item>
|
|
<u-form-item label=""
|
|
prop="phone">
|
|
<u-input v-model="form.phone"
|
|
:placeholder="'请输入联系方式'" />
|
|
</u-form-item>
|
|
<u-form-item label=""
|
|
prop="code">
|
|
<u-input v-model="form.code"
|
|
:placeholder="'请输入验证码'">
|
|
<template slot="suffix">
|
|
<view class="getCode"
|
|
@tap="getVilCode">{{ getCode }}</view>
|
|
</template>
|
|
</u-input>
|
|
</u-form-item>
|
|
<u-form-item label=""
|
|
@click="selCountry">
|
|
<view class="picker">
|
|
<u-input v-model="form.pkCountryName"
|
|
disabled
|
|
disabledColor="#ffffff"
|
|
:placeholder="'请选择自然国'"
|
|
border="none"></u-input>
|
|
<u-icon name="arrow-right"></u-icon>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="">
|
|
<view class="picker">
|
|
<u-input v-model="form.jsName"
|
|
disabled
|
|
disabledColor="#ffffff"
|
|
:placeholder="'请选择结算国'"
|
|
border="none"></u-input>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label=""
|
|
prop="loginPassword">
|
|
<u-input :password="isPwd1"
|
|
:placeholder="'请输入登录密码'"
|
|
v-model="form.loginPassword">
|
|
<template slot="suffix">
|
|
<u-icon name="eye"
|
|
@tap="isPwd1=!isPwd1"
|
|
v-if="!isPwd1"></u-icon>
|
|
<u-icon name="eye-off"
|
|
@tap="isPwd1=!isPwd1"
|
|
v-else></u-icon>
|
|
</template>
|
|
</u-input>
|
|
</u-form-item>
|
|
<u-form-item label=""
|
|
prop="payPassword">
|
|
<u-input :password="isPwd2"
|
|
:placeholder="'请输入支付密码'"
|
|
v-model="form.payPassword">
|
|
<template slot="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>
|
|
<u-button type="success"
|
|
class="uBtn"
|
|
shape="circle"
|
|
color="linear-gradient(to right, #005BAC, #005BAC )"
|
|
:loading="isLoading"
|
|
:loadingText="'注册中'"
|
|
@click="hiLogin">{{ '立即注册' }}</u-button>
|
|
<u-picker :show="isCountry"
|
|
keyName="label"
|
|
immediateChange
|
|
@confirm="confirmPopup"
|
|
@cancel="isCountry = false"
|
|
:columns="countryList"></u-picker>
|
|
|
|
</view> -->
|
|
</view>
|
|
<view class="mask" v-if="isTrue">
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as api from '@/config/goods'
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
isTrue:false,
|
|
howHeader: 'HF',
|
|
pkParent: '',
|
|
form: {
|
|
memberName: '',
|
|
},
|
|
isLoading: false,
|
|
getCode: '获取验证码',
|
|
isSend: false,
|
|
beginTime: 60,
|
|
timer: '',
|
|
pkCountry: '',
|
|
isCountry: false,
|
|
countryList: [],
|
|
isPwd: true,
|
|
isPwd1: true,
|
|
isPwd2: true,
|
|
rules: {
|
|
memberCode: [
|
|
{
|
|
required: true,
|
|
asyncValidator: this.memberCodeRule,
|
|
trigger: ['blur'],
|
|
},
|
|
],
|
|
memberName: [
|
|
{
|
|
required: true,
|
|
message:'请输入会员姓名',
|
|
trigger: [ 'blur'],
|
|
},
|
|
],
|
|
phone: [
|
|
{
|
|
required: true,
|
|
message: '请输入联系方式',
|
|
trigger: [ 'blur'],
|
|
},
|
|
],
|
|
code: [
|
|
{
|
|
required: true,
|
|
message: '请输入验证码',
|
|
trigger: ['blur'],
|
|
},
|
|
],
|
|
loginPassword: [
|
|
{
|
|
required: true,
|
|
message: '请输入登录密码',
|
|
trigger: ['blur'],
|
|
},
|
|
],
|
|
payPassword: [
|
|
{
|
|
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'],
|
|
},
|
|
],
|
|
loginPassword: [
|
|
{
|
|
required: true,
|
|
message: '请输入登录密码',
|
|
trigger: ['change', 'blur'],
|
|
},
|
|
],
|
|
payPassword: [
|
|
{
|
|
required: true,
|
|
message: '请输入支付密码',
|
|
trigger: ['change', 'blur'],
|
|
},
|
|
],
|
|
},
|
|
}
|
|
},
|
|
onReady() {},
|
|
onLoad(options) {
|
|
this.pkParent = options.code
|
|
this.pkCountry = options.country || ''
|
|
this.getGenerate()
|
|
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: {
|
|
setMemberCode(){
|
|
// this.form.memberCode = this.form.phone
|
|
this.$set(this.form,'memberCode',this.form.phone)
|
|
},
|
|
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() {
|
|
api.checkShare().then((res) => {
|
|
if(res.code != 200){
|
|
this.isTrue = true
|
|
}else{
|
|
this.isTrue = false
|
|
}
|
|
})
|
|
// 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((res) => {
|
|
this.isLoading = true
|
|
api
|
|
.regShareMember(
|
|
Object.assign({}, this.form, { parent: this.pkParent })
|
|
)
|
|
.then((res) => {
|
|
this.isLoading = false
|
|
if (res.code == 200) {
|
|
uni.redirectTo({
|
|
url:
|
|
'/pages/shareRegist/success?allData=' +
|
|
JSON.stringify(res.data),
|
|
})
|
|
}
|
|
})
|
|
})
|
|
},
|
|
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()
|
|
api
|
|
.verification({
|
|
phone: this.form.phone,
|
|
})
|
|
.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{
|
|
background-image: url('@/static/images/haiRgeiest1.jpg');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
height: 100vh;
|
|
}
|
|
.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;
|
|
}
|
|
.tit{
|
|
font-size: 48px;
|
|
font-family: PangMenZhengDao-Regular, PangMenZhengDao;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
padding-top: 80px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.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 {
|
|
padding: 0 120rpx;
|
|
padding-top: 550rpx;
|
|
}
|
|
.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: #fff;
|
|
}
|
|
.mask{
|
|
position: fixed;
|
|
background: rgba(0,0,0,0.5);
|
|
width: 100%;
|
|
height: 100vh;
|
|
top: 0;
|
|
}
|
|
</style>
|