From 040b72bb4a3fb76ddc9fd3423af98ef2412e6046 Mon Sep 17 00:00:00 2001
From: zhaoxiaoqiang <287285524@qq.com>
Date: Thu, 16 Sep 2021 10:43:20 +0800
Subject: [PATCH] 办单样式修改
---
src/views/user/register-home.vue | 738 +++++++++++++++++++++++++-------------------------------
1 files changed, 335 insertions(+), 403 deletions(-)
diff --git a/src/views/user/register-home.vue b/src/views/user/register-home.vue
index f10cfe2..0222a27 100644
--- a/src/views/user/register-home.vue
+++ b/src/views/user/register-home.vue
@@ -16,19 +16,15 @@
</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-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-button :color="$store.state.backColor" class="btn" @click="nextStep">下一步</van-button>
<!-- <van-cell v-if="ShowqrCode" :readonly="true" :value="form.licenseNo"
@@ -36,68 +32,41 @@
</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="请输入负责人手机号" />
+ <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>
+ <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>
+ <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"/>
+ <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-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;">
@@ -107,318 +76,292 @@
</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.form.inviteCode = 158875;
- 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 = {
+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: arr[0].code,
- name: arr[0].name
+ code: "",
+ name: "",
},
city: {
- code: arr[1].code,
- name: arr[1].name
+ code: "",
+ name: "",
},
area: {
- code: arr[2].code,
- name: arr[2].name
+ code: "",
+ name: "",
},
- }
- this.isShowArea = false;
- this.$refs.Area.reset()
+ dtlAddr: "", //详细地址
+ },
+ addrText: "",
+
+ //第二步
+ priName: "", //负责人姓名
+ priMblNo: "", //请输入负责人手机号
+ priEmail: "", //请输入联系人邮箱
+
+ protocol: "",
},
+ isShowArea: false,
+ getQr: false,
+ saveText: "下一步",
+ step: 0,
+ ShowAgreen: false,
+ Agreend: "",
+ ShowqrCode: true,
- nextStep() {
+ //第一步验证
+ 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/,
+ },
+ ],
- /**
- * 第一步
- * */
- if (this.step === 0) {
- if (!this.validatorForm(this.ruleOne)) return
- // if(!this.$route.query.orgId){
- // if (!this.getQr) {
- // this.$notify('请识别二维码');
- // return;
- // }
- // }
+ //第二步验证
+ 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() {
+ if (this.$route.query.orgId) {
+ this.form.orgId = this.$route.query.orgId || "";
+ this.form.orgType = this.$route.query.orgType || "";
+ this.ShowqrCode = false;
+ }
+ this.form.inviteCode = 158875;
+ 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 (this.step === 1) {
- if (!this.validatorForm(this.ruleTwo)) return
- this.saveText = '同意协议';
+ if (sysPlat === "2") {
+ sysPlat = 2;
}
-
-
-
- /**
- * 第三步
- * */
- 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.form.sysPlat = sysPlat;
+ this.$api
+ .merRegist(this.form)
+ .then((res) => {
this.$toast.success(`注册成功,请耐心等待审核！`);
- if(sessionStorage.isddxt == 1){
- this.$router.push('/?platNo=ddxt');
- }else{
- this.$router.push('/');
+ if (sessionStorage.isddxt == 1) {
+ this.$router.push("/?platNo=ddxt");
+ } else {
+ this.$router.push("/");
}
-
- }).catch(err=>{
+ })
+ .catch((err) => {
this.step -= 1;
});
- }
- this.step++;
- },
+ }
+ 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);
+ //代理所属渠道
+ getRegIDAndType() {
+ let _this = this;
+ 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;
}
- clearInterval(setInterId);
+ _this.getQr = true;
+ _this.SET_APP_LOADING(false);
}
- }, 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('无效的二维码');
+ 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) {
+ initWXToken(parUrl) {
+ this.$api
+ .getTokenInfo({
+ url: parUrl,
+ })
+ .then(
+ function(res) {
if (res.errorCode === 0) {
// 第二步骤 只需要首页地址分享 ,需要在每次变化时调用
wx.config({
@@ -427,88 +370,77 @@
timestamp: res.body.timestamp, // 必填，生成签名的时间戳
nonceStr: res.body.nonceStr, // 必填，生成签名的随机串
signature: res.body.signature, // 必填，签名，见附录1
- jsApiList: [
- 'checkJsApi',
- 'scanQRCode',
- 'getLocation'
- ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
+ jsApiList: ["checkJsApi", "scanQRCode", "getLocation"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
}
},
- function (error) {
+ function(error) {
if (error.response) {
- console.log(error.response);
}
}
);
- }
-
- }
- }
+ },
+ },
+};
</script>
<style scoped lang="less">
- .agreement-title {
- margin-top: 25px;
+.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;
}
-
- .agreenBox {
- width: 80vw;
- height: 70vh;
- padding: 60px 20px 30px 20px;
- position: relative;
+ .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;
}
-
- .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>
--
Gitblit v1.8.0