|
|
@@ -1,235 +1,233 @@
|
|
|
<template>
|
|
|
- <!-- 统一认证组件 -->
|
|
|
- <div class="jianTog">
|
|
|
- <div v-if="isBuy !== '已订购' && pageData.remarks.isBuy !== 1 " class="buyBoxText">
|
|
|
- <div class="textBox">
|
|
|
- <div class="input">
|
|
|
- <input type="text" v-model="loginForm.phone" placeholder="请输入联通手机号" />
|
|
|
- </div>
|
|
|
- <div class="input">
|
|
|
- <input type="text" v-model="loginForm.vcode" v-on:input="checkVcode" placeholder="验证码"
|
|
|
- maxlength="6" />
|
|
|
- <span class="getcode" :class="{ code: 1, number: codeState.state }"
|
|
|
- @click="getCode()">{{ codeState.state ? codeState.time + "s" : "获取验证码" }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="btn" v-if="indexNum === 0" :style="{
|
|
|
+ <!-- 统一认证组件 -->
|
|
|
+ <div class="jianTog">
|
|
|
+ <div v-if="isBuy !== '已订购' && pageData.remarks.isBuy !== 1 " class="buyBoxText">
|
|
|
+ <div class="textBox">
|
|
|
+ <div class="input">
|
|
|
+ <input type="text" v-model="loginForm.phone" placeholder="请输入联通手机号" />
|
|
|
+ </div>
|
|
|
+ <div class="input">
|
|
|
+ <input type="text" v-model="loginForm.vcode" v-on:input="checkVcode" placeholder="验证码" maxlength="6" />
|
|
|
+ <span class="getcode" :class="{ code: 1, number: codeState.state }" @click="getCode()">{{ codeState.state ? codeState.time + "s" : "获取验证码" }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn" v-if="indexNum === 0" :style="{
|
|
|
'background-color': pageData.mainProduct.themeColor[0],
|
|
|
'border-color':pageData.mainProduct.themeColor[1],
|
|
|
}" @click="btnClick">
|
|
|
- {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
|
|
|
- </div>
|
|
|
+ {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="btn" v-else :style="{
|
|
|
+ <div class="btn" v-else :style="{
|
|
|
'background-color': pageData.mainProduct.themeColor[0],
|
|
|
'border-color':pageData.mainProduct.themeColor[1],
|
|
|
}" @click="btnClick">
|
|
|
- {{ pageData.remarks.btnTextAss ? pageData.remarks.btnTextAss : "点我领取" }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ {{ pageData.remarks.btnTextAss ? pageData.remarks.btnTextAss : "点我领取" }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- getNewCode
|
|
|
- } from '../../../api'
|
|
|
- import {
|
|
|
- Dialog
|
|
|
- } from "vant";
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- imgUrl: process.env.VUE_APP_IMGS_URL,
|
|
|
- loginForm: {
|
|
|
- phone: "",
|
|
|
- vcode: "",
|
|
|
- },
|
|
|
- codeState: {
|
|
|
- state: false,
|
|
|
- time: 60,
|
|
|
- task: null,
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- props: {
|
|
|
- pageData: Object,
|
|
|
- isBuy: String,
|
|
|
- checked: Boolean,
|
|
|
- indexNum: Number
|
|
|
- },
|
|
|
- methods: {
|
|
|
- btnClick() {
|
|
|
- if (this.checked === false) {
|
|
|
- this.$toast.fail("请先勾选隐私声明");
|
|
|
- } else {
|
|
|
- let {
|
|
|
- phone,
|
|
|
- vcode
|
|
|
- } = this.loginForm;
|
|
|
- if (!/^1[23456789]\d{9}$/.test(phone)) {
|
|
|
- return this.$toast("请输入正确手机号");
|
|
|
- }
|
|
|
- if (!vcode) {
|
|
|
- return this.$toast("请输入验证码");
|
|
|
- }
|
|
|
- let str = phone.slice(0,3)
|
|
|
- let str2 = phone.slice(0,4)
|
|
|
- if(str === '167' || str === '171' || str2 ==='1704' || str2 ==='1707' || str2 ==='1708'|| str2 ==='1709'){
|
|
|
- Dialog({
|
|
|
- message: '您的号码为虚拟运营商号码，不支持办理此业务',
|
|
|
- theme: 'round-button',
|
|
|
- })
|
|
|
- return false
|
|
|
- }
|
|
|
- this.$emit("btnClick", this.loginForm);
|
|
|
- this.loginForm = {}
|
|
|
- }
|
|
|
- },
|
|
|
- checkVcode() {
|
|
|
- if (this.loginForm.vcode.length > 6) {
|
|
|
- this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
|
|
|
- }
|
|
|
- },
|
|
|
- getCode() {
|
|
|
- if (this.codeState.state) return;
|
|
|
- let {
|
|
|
- phone
|
|
|
- } = this.loginForm;
|
|
|
- if (!/^1[23456789]\d{9}$/.test(phone)) {
|
|
|
- return this.$toast("请输入正确手机号");
|
|
|
- }
|
|
|
- let str = phone.slice(0,3)
|
|
|
- let str2 = phone.slice(0,4)
|
|
|
- let number = this.$store.state.fictitious.split(',')
|
|
|
- let isDialog = true
|
|
|
- if(number !== ''){
|
|
|
- number.forEach(element => {
|
|
|
- if(element===str || element===str2){
|
|
|
- isDialog = false
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- if(isDialog === false){
|
|
|
- Dialog({
|
|
|
- message: '您的号码为虚拟运营商号码，不支持办理此业务',
|
|
|
- theme: 'round-button',
|
|
|
- })
|
|
|
- return false
|
|
|
- }
|
|
|
- if (this.checked === false) {
|
|
|
- return this.$toast.fail("请先勾选隐私声明");
|
|
|
- }
|
|
|
- let params = {
|
|
|
- cpid: this.pageData.mainProduct.cpid,
|
|
|
- spid: this.pageData.mainProduct.spid,
|
|
|
- type: '',
|
|
|
- userid: phone
|
|
|
- }
|
|
|
- getNewCode(params).then(res => {
|
|
|
- if (res.code === 10000) {
|
|
|
- this.$toast("验证码已发送");
|
|
|
- this.codeState.state = true;
|
|
|
- this.codeState.task = setInterval(() => {
|
|
|
- if (this.codeState.time <= 0) {
|
|
|
- clearInterval(this.codeState.task);
|
|
|
- this.codeState.task = null;
|
|
|
- this.codeState.state = false;
|
|
|
- this.codeState.time = 60;
|
|
|
- } else {
|
|
|
- this.codeState.time--;
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
- this.$store.commit("setUser", {
|
|
|
- userid: res.data,
|
|
|
- phone: this.loginForm.phone,
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- }, res => {
|
|
|
- this.$toast(res.message);
|
|
|
- })
|
|
|
+import {
|
|
|
+ getNewCode
|
|
|
+} from '../../../api'
|
|
|
+import {
|
|
|
+ Dialog
|
|
|
+} from "vant";
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ imgUrl: process.env.VUE_APP_IMGS_URL,
|
|
|
+ loginForm: {
|
|
|
+ phone: "",
|
|
|
+ vcode: "",
|
|
|
+ },
|
|
|
+ codeState: {
|
|
|
+ state: false,
|
|
|
+ time: 60,
|
|
|
+ task: null,
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ pageData: Object,
|
|
|
+ isBuy: String,
|
|
|
+ checked: Boolean,
|
|
|
+ indexNum: Number
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ btnClick () {
|
|
|
+ if (this.checked === false) {
|
|
|
+ this.$toast.fail("请先勾选隐私声明");
|
|
|
+ } else {
|
|
|
+ let {
|
|
|
+ phone,
|
|
|
+ vcode
|
|
|
+ } = this.loginForm;
|
|
|
+ if (!/^1[23456789]\d{9}$/.test(phone)) {
|
|
|
+ return this.$toast("请输入正确手机号");
|
|
|
+ }
|
|
|
+ if (!vcode) {
|
|
|
+ return this.$toast("请输入验证码");
|
|
|
+ }
|
|
|
+ let str = phone.slice(0, 3)
|
|
|
+ let str2 = phone.slice(0, 4)
|
|
|
+ if (str === '167' || str === '171' || str2 === '1704' || str2 === '1707' || str2 === '1708' || str2 === '1709') {
|
|
|
+ Dialog({
|
|
|
+ message: '您的号码为虚拟运营商号码，不支持办理此业务',
|
|
|
+ theme: 'round-button',
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.$emit("btnClick", this.loginForm);
|
|
|
+ this.loginForm = {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkVcode () {
|
|
|
+ if (this.loginForm.vcode.length > 6) {
|
|
|
+ this.loginForm.vcode = this.loginForm.vcode.slice(0, 6);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCode () {
|
|
|
+ if (this.codeState.state) return;
|
|
|
+ let {
|
|
|
+ phone
|
|
|
+ } = this.loginForm;
|
|
|
+ if (!/^1[23456789]\d{9}$/.test(phone)) {
|
|
|
+ return this.$toast("请输入正确手机号");
|
|
|
+ }
|
|
|
+ let str = phone.slice(0, 3)
|
|
|
+ let str2 = phone.slice(0, 4)
|
|
|
+ let number = this.$store.state.fictitious.split(',')
|
|
|
+ let isDialog = true
|
|
|
+ if (number !== '') {
|
|
|
+ number.forEach(element => {
|
|
|
+ if (element === str || element === str2) {
|
|
|
+ isDialog = false
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (isDialog === false) {
|
|
|
+ Dialog({
|
|
|
+ message: '您的号码为虚拟运营商号码，不支持办理此业务',
|
|
|
+ theme: 'round-button',
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (this.checked === false) {
|
|
|
+ return this.$toast.fail("请先勾选隐私声明");
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ cpid: this.pageData.mainProduct.cpid,
|
|
|
+ spid: this.pageData.mainProduct.spid,
|
|
|
+ type: '',
|
|
|
+ userid: phone
|
|
|
+ }
|
|
|
+ getNewCode(params).then(res => {
|
|
|
+ if (res.code === 10000) {
|
|
|
+ this.$toast("验证码已发送");
|
|
|
+ this.codeState.state = true;
|
|
|
+ this.codeState.task = setInterval(() => {
|
|
|
+ if (this.codeState.time <= 0) {
|
|
|
+ clearInterval(this.codeState.task);
|
|
|
+ this.codeState.task = null;
|
|
|
+ this.codeState.state = false;
|
|
|
+ this.codeState.time = 60;
|
|
|
+ } else {
|
|
|
+ this.codeState.time--;
|
|
|
}
|
|
|
+ }, 1000);
|
|
|
+ this.$store.commit("setUser", {
|
|
|
+ userid: res.data,
|
|
|
+ phone: this.loginForm.phone,
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
+ }, res => {
|
|
|
+ this.$toast(res.message);
|
|
|
+ })
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .jianTog {
|
|
|
- @keyframes scale {
|
|
|
- from {
|
|
|
- transform: scale(1);
|
|
|
- }
|
|
|
+.jianTog {
|
|
|
+ @keyframes scale {
|
|
|
+ from {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
|
|
|
- to {
|
|
|
- transform: scale(0.8);
|
|
|
- }
|
|
|
- }
|
|
|
+ to {
|
|
|
+ transform: scale(0.8);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .buyBoxText {
|
|
|
- width: 690px;
|
|
|
- margin: 20px 30px;
|
|
|
- background-color: #fff;
|
|
|
- padding-bottom: 40px;
|
|
|
+ .buyBoxText {
|
|
|
+ width: 690px;
|
|
|
+ margin: 20px 30px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding-bottom: 40px;
|
|
|
|
|
|
- .btn {
|
|
|
- margin-top: 60px;
|
|
|
- width: 690px;
|
|
|
- height: 100px;
|
|
|
- border-radius: 50px;
|
|
|
- line-height: 100px;
|
|
|
- font-size: 40px;
|
|
|
- font-weight: bold;
|
|
|
- border-style: solid;
|
|
|
- border-width: 4px;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- animation-name: scale;
|
|
|
- animation-duration: 0.6s;
|
|
|
- animation-timing-function: linear;
|
|
|
- animation-iteration-count: infinite;
|
|
|
- animation-direction: alternate-reverse;
|
|
|
- }
|
|
|
+ .btn {
|
|
|
+ margin-top: 60px;
|
|
|
+ width: 690px;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 50px;
|
|
|
+ line-height: 100px;
|
|
|
+ font-size: 40px;
|
|
|
+ font-weight: bold;
|
|
|
+ border-style: solid;
|
|
|
+ border-width: 4px;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ animation-name: scale;
|
|
|
+ animation-duration: 0.6s;
|
|
|
+ animation-timing-function: linear;
|
|
|
+ animation-iteration-count: infinite;
|
|
|
+ animation-direction: alternate-reverse;
|
|
|
+ }
|
|
|
|
|
|
- .textBox {
|
|
|
- // width: 750px;
|
|
|
- padding: 0 50px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .textBox {
|
|
|
+ // width: 750px;
|
|
|
+ padding: 0 50px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .input {
|
|
|
- height: 117px;
|
|
|
- margin: 0 auto;
|
|
|
- border-bottom: 2px solid #595959;
|
|
|
- position: relative;
|
|
|
+ .input {
|
|
|
+ height: 117px;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-bottom: 2px solid #595959;
|
|
|
+ position: relative;
|
|
|
|
|
|
- input {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- border: none;
|
|
|
- outline: none;
|
|
|
- width: 100%;
|
|
|
- font-size: 34px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #757575;
|
|
|
- background-color: transparent;
|
|
|
- position: absolute;
|
|
|
- bottom: 22px;
|
|
|
- left: 28px;
|
|
|
- }
|
|
|
+ input {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 34px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #757575;
|
|
|
+ background-color: transparent;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 22px;
|
|
|
+ left: 28px;
|
|
|
+ }
|
|
|
|
|
|
- .getcode {
|
|
|
- font-size: 34px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #0D0D0D;
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- bottom: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .getcode {
|
|
|
+ font-size: 34px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0d0d0d;
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ bottom: 24px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
