<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-23 17:52:37
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-14 18:10:05
|
* @Description:
|
-->
|
<template>
|
<div class="register-home ">
|
<div style="min-height: 570px;">
|
<v-navbar title="注册" fixed back>
|
<div slot="left-back" style="display: flex;">
|
<svg class="icon" aria-hidden="true" style="width:25px;height:44px;" @click="back">
|
<use xlink:href="#iconzuojiantou"></use>
|
</svg>
|
</div>
|
</v-navbar>
|
|
|
<div class="register-home-box">
|
|
|
<!-- 步骤一 -->
|
<div class="step1" v-if="step == 0">
|
<van-field v-model.trim="form.merName" clearable maxlength='80' placeholder="请输入商户名称" />
|
<van-field v-model.trim="form.licenseNo" clearable maxlength='20' placeholder="请输入营业执照号" />
|
<van-field v-model.trim="form.legalName" clearable maxlength='12' placeholder="请输入法人姓名" />
|
<van-field v-model.trim="form.legalIdNo" clearable maxlength='18' placeholder="请输入法人身份证号" />
|
<van-field v-model.trim="form.addrText" clearable :readonly="true" right-icon="arrow"
|
@click="isShowArea = !isShowArea" placeholder="请选择省市区" />
|
<van-field v-model.trim="form.dtlAddr" clearable maxlength='64' placeholder="请输入您的详细地址" />
|
<!-- 扫码进入页面的没有邀请码 -->
|
<van-field v-if="ShowqrCode" v-model.trim="form.inviteCode"
|
:placeholder="getQr ? '已扫描':'邀请码'" />
|
<van-button :color="$store.state.backColor" class="btn" @click="nextStep">下一步</van-button>
|
<!-- <van-cell v-if="ShowqrCode" :readonly="true" :value="form.licenseNo"
|
placeholder="邀请码">
|
</van-cell> -->
|
</div>
|
|
|
|
|
|
|
|
|
<!-- 步骤二 -->
|
<div class="step2" v-if="step == 1">
|
<van-field v-model.trim="form.priName" clearable maxlength='12' placeholder="请输入负责人姓名" />
|
<van-field v-model.trim="form.priMblNo" type="tel" clearable maxlength='11' placeholder="请输入负责人手机号" />
|
|
<div class="tips" :style="{color:$store.state.backColor}">*该手机号将作为登录用户名，密码将通过短信下发至手机</div>
|
|
<van-field style="margin-top: 0.3rem" v-model.trim="form.priEmail" clearable placeholder="请输入联系人邮箱" />
|
|
|
<van-button :color="$store.state.backColor" class="btn" @click="nextStep">下一步</van-button>
|
</div>
|
|
|
|
|
|
|
|
|
<!-- 步骤三 -->
|
<div class="step3" v-if="step == 2">
|
|
<div>
|
<p class="content-box">
|
<b> 【审慎阅读】</b>您的申请注册流程中点击同意前，应当认真阅读以下协议。请您务必审慎阅读、充分理解协议中相关条款内容。阅读协议的过程中，<u>如果您不同意相关协议或其中任何条款规定，您应立即停止注册程序。</u>
|
</p>
|
<div class="agreement-title" :style="{color:$store.state.backColor}" @click="showAgreementFunc(1)">《平台使用协议》</div>
|
<!--<div class="agreement-title" @click="showAgreementFunc(2)">《智分期商户协议》</div>-->
|
</div>
|
|
<van-button :color="$store.state.backColor" class="btn" @click="nextStep">{{ saveText }}</van-button>
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
<van-popup v-model="ShowAgreen">
|
<div class="agreenBox">
|
<div class="agreen-html" v-html="Agreend"></div>
|
<div class="close-agreen" @click="ShowAgreen = false">
|
<van-icon name="close" :color="$store.state.backColor"/>
|
</div>
|
</div>
|
</van-popup>
|
|
|
<van-popup v-model="isShowArea" position="bottom" :close-on-click-overlay="false">
|
<van-area ref='Area' :area-list='areaList' @cancel="closeAreaModal" @confirm="setAreaValue"></van-area>
|
</van-popup>
|
</div>
|
<div style="font-size: 12px; color: #666;text-align: center;width: 100%;margin-top: 20px;">
|
客服电话：028-60102895
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import createUserProtocol from '@/utils/createUserProtocol';
|
import {
|
SET_APP_LOADING
|
} from '@/store/mutations-types';
|
import {
|
mapState,
|
mapMutations
|
} from 'vuex';
|
export default {
|
name: "register-home",
|
data() {
|
return {
|
form: {
|
//第一步
|
inviteCode: '', //邀请码
|
merName: '', //商户名称
|
licenseNo: '', //营业执照号
|
legalName: '', //法人姓名
|
legalIdNo: '', //法人身份证号
|
orgId: '',
|
orgType: '',
|
// orgId: '100001',
|
// orgType: '1',
|
dtlAddr: '',
|
addr: {
|
province: {
|
code: '',
|
name: ''
|
},
|
city: {
|
code: '',
|
name: ''
|
},
|
area: {
|
code: '',
|
name: ''
|
},
|
dtlAddr: '' //详细地址
|
},
|
addrText: '',
|
|
|
//第二步
|
priName: '', //负责人姓名
|
priMblNo: '', //请输入负责人手机号
|
priEmail: '', //请输入联系人邮箱
|
|
protocol: ''
|
},
|
isShowArea: false,
|
getQr: false,
|
|
saveText: '下一步',
|
step: 0,
|
ShowAgreen: false,
|
Agreend: '',
|
|
|
ShowqrCode:true,
|
|
//第一步验证
|
ruleOne: [
|
{
|
key: "legalName",
|
message: "请输入法人代表姓名",
|
type: "isEmpty"
|
},
|
{
|
key: "legalIdNo",
|
message: "请输入法人代表身份证号",
|
type: "isEmpty"
|
},
|
{
|
key: "legalIdNo",
|
message: "请输入正确的身份证号",
|
type: "isIdCard"
|
},
|
{
|
key: "addrText",
|
message: "请选择省市区",
|
type: "isEmpty"
|
},
|
{
|
key: "dtlAddr",
|
message: "请输入详细地址",
|
rule: /\S/
|
},
|
],
|
|
|
|
|
//第二步验证
|
ruleTwo: [{
|
key: "priName",
|
message: "请输入负责人姓名",
|
type: "isEmpty"
|
},
|
{
|
key: "priMblNo",
|
message: "请输入负责人手机号",
|
type: "isEmpty"
|
},
|
{
|
key: "priMblNo",
|
message: "请输入正确的负责人手机号",
|
type: "isTel"
|
},
|
{
|
key: "priEmail",
|
message: "请输入联系人邮箱",
|
type: "isEmpty"
|
},
|
{
|
key: "priEmail",
|
message: "请输入正确的联系人邮箱",
|
type: "isEmail"
|
},
|
],
|
|
|
|
}
|
},
|
computed: {
|
...mapState(['areaList']),
|
orgId() {
|
return this.$route.query.orgId || '';
|
}
|
},
|
created() {
|
console.log(localStorage.sib_mer_sysPlat == 'undefined')
|
if(this.$route.query.orgId){
|
this.form.orgId = this.$route.query.orgId || '';
|
this.form.orgType = this.$route.query.orgType || '';
|
this.ShowqrCode = false;
|
}
|
this.initWXToken(location.origin + location.pathname);
|
},
|
methods: {
|
...mapMutations([SET_APP_LOADING]),
|
back() {
|
if (this.step === 0) {
|
this.$router.go(-1)
|
}
|
this.step--;
|
},
|
|
//显示协议
|
showAgreementFunc(which) {
|
this.ShowAgreen = true;
|
let protocol = createUserProtocol(this.form); //协议二
|
this.form.protocol = protocol;
|
which === 1 ? this.Agreend = agreement5 : this.Agreend = protocol;
|
},
|
|
// 验证form参数
|
validatorForm(rule = []) {
|
return this.$validator(this.form, rule).check(item => {
|
this.$notify(item.message)
|
})
|
},
|
|
//关闭地区弹窗
|
closeAreaModal() {
|
this.isShowArea = false;
|
this.$refs.Area.reset()
|
},
|
|
|
//保存 地区选择
|
setAreaValue(arr) {
|
this.form.addrText = arr[0].name + '-' + arr[1].name + '-' + arr[2].name;
|
this.form.addr = {
|
province: {
|
code: arr[0].code,
|
name: arr[0].name
|
},
|
city: {
|
code: arr[1].code,
|
name: arr[1].name
|
},
|
area: {
|
code: arr[2].code,
|
name: arr[2].name
|
},
|
}
|
this.isShowArea = false;
|
this.$refs.Area.reset()
|
},
|
|
|
|
nextStep() {
|
|
/**
|
* 第一步
|
* */
|
if (this.step === 0) {
|
if (!this.validatorForm(this.ruleOne)) return
|
// if(!this.$route.query.orgId){
|
// if (!this.getQr) {
|
// this.$notify('请识别二维码');
|
// return;
|
// }
|
// }
|
}
|
|
|
/**
|
* 第二步
|
* */
|
if (this.step === 1) {
|
if (!this.validatorForm(this.ruleTwo)) return
|
this.saveText = '同意协议';
|
}
|
|
|
|
/**
|
* 第三步
|
* */
|
if (this.step === 2) {
|
this.form.addr.dtlAddr = this.form.dtlAddr
|
this.form.protocol = createUserProtocol(this.form); //协议二
|
let sysPlat = localStorage.sib_mer_sysPlat
|
if (sysPlat === 'undefined' || sysPlat === '1') {
|
sysPlat = 1
|
}
|
if (sysPlat === '2') {
|
sysPlat = 2
|
}
|
this.form.sysPlat = sysPlat
|
console.log(this.form);
|
this.$api.merRegist(this.form).then(res => {
|
this.$toast.success(`注册成功,请耐心等待审核！`);
|
if(sessionStorage.isddxt == 1){
|
this.$router.push('/?platNo=ddxt');
|
}else{
|
this.$router.push('/');
|
}
|
|
}).catch(err=>{
|
this.step -= 1;
|
});
|
}
|
this.step++;
|
},
|
|
|
|
//代理所属渠道
|
getRegIDAndType() {
|
let _this = this;
|
console.log('js 调用原生android 方法=====》');
|
window.sessionStorage.removeItem('scene_regInfos');
|
if (window.android && window.android.fetchQrCode) {
|
_this.SET_APP_LOADING(true);
|
window.android.fetchQrCode();
|
let count = 0;
|
let setInterId = setInterval(function () {
|
let _tempStr = window.sessionStorage.getItem(
|
'scene_regInfos'
|
);
|
count++;
|
if (_tempStr && _tempStr.length > 0) {
|
// QRGoBack 这个值不能修改这里的只是和android 值同步的
|
if (_tempStr == 'QRGoBack') {
|
// _this.getQr = false;
|
_this.SET_APP_LOADING(false);
|
} else {
|
_tempStr = JSON.parse(_tempStr);
|
_this.form.orgId = _tempStr.orgId;
|
_this.form.orgType = _tempStr.orgType;
|
if(_tempStr.orgId){
|
// _this.ShowqrCode = false;
|
}
|
_this.getQr = true;
|
_this.SET_APP_LOADING(false);
|
}
|
clearInterval(setInterId);
|
}
|
}, 60);
|
} else {
|
wx.scanQRCode({
|
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
|
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
|
success: function (res) {
|
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
|
if (result && (result + '').indexOf('orgId') > -1) {
|
result = JSON.parse(result);
|
_this.form.orgId = result.orgId;
|
_this.form.orgType = result.orgType;
|
if(result.orgId){
|
// _this.ShowqrCode = false;
|
}
|
_this.getQr = true;
|
} else {
|
_this.$notify('无效的二维码');
|
}
|
}
|
});
|
}
|
},
|
|
|
initWXToken(parUrl) {
|
this.$api.getTokenInfo({
|
url: parUrl
|
}).then(
|
function (res) {
|
if (res.errorCode === 0) {
|
// 第二步骤 只需要首页地址分享 ,需要在每次变化时调用
|
wx.config({
|
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
|
appId: res.body.appId,
|
timestamp: res.body.timestamp, // 必填，生成签名的时间戳
|
nonceStr: res.body.nonceStr, // 必填，生成签名的随机串
|
signature: res.body.signature, // 必填，签名，见附录1
|
jsApiList: [
|
'checkJsApi',
|
'scanQRCode',
|
'getLocation'
|
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
|
});
|
}
|
},
|
function (error) {
|
if (error.response) {
|
console.log(error.response);
|
}
|
}
|
);
|
}
|
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.agreement-title {
|
margin-top: 25px;
|
color: @c-default;
|
}
|
|
|
.agreenBox {
|
width: 80vw;
|
height: 70vh;
|
padding: 60px 20px 30px 20px;
|
position: relative;
|
}
|
|
.agreen-html {
|
width: 100%;
|
height: 100%;
|
overflow: scroll;
|
box-sizing: border-box;
|
}
|
|
|
.close-agreen {
|
.lh(30px);
|
.flex(center, center);
|
|
.van-icon {
|
font-size: @font-16;
|
}
|
}
|
|
|
.register-home {
|
padding-top: 44px;
|
padding-bottom: 100px;
|
|
.van-cell {
|
margin-top: 10px;
|
}
|
|
.register-home-box {
|
padding: 10px 20px 50px;
|
|
|
}
|
|
.tips {
|
font-size: @font-12;
|
padding-left: 0.32rem;
|
margin-top: 8px;
|
color: @c-default;
|
}
|
|
.btn {
|
width: 340px;
|
height: 44px;
|
border: none;
|
margin: 40px auto;
|
font-size: @font-16;
|
border-radius: 22px;
|
background-color: @c-bg-default;
|
color: @c-text-fff;
|
}
|
}
|
</style>
|
