forked from angelo/web-retail-h5
529 lines
14 KiB
Vue
529 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 = 1
|
|
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)
|
|
},
|
|
|
|
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() {
|
|
return new Promise((resolve, reject) => {
|
|
api.generate().then(res => {
|
|
resolve(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>
|