|
@@ -1,283 +1,279 @@
|
|
|
<template>
|
|
|
- <!-- 统一认证组件 -->
|
|
|
- <div class="jianCom">
|
|
|
- <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" :style="{
|
|
|
+ <!-- 统一认证组件 -->
|
|
|
+ <div class="jianCom">
|
|
|
+ <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" :style="{
|
|
|
'background-color': pageData.mainProduct.themeColor[0],
|
|
|
'border-color':pageData.mainProduct.themeColor[1],
|
|
|
}" @click="btnClick">
|
|
|
- {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
|
|
|
- </div>
|
|
|
- <div class="privacyBox">
|
|
|
- <van-checkbox v-model="checked" checked-color="#fc8940">
|
|
|
- <p style="margin: 0; padding: 0">
|
|
|
- 我已阅读并同意
|
|
|
- </p>
|
|
|
- </van-checkbox>
|
|
|
- <span class="span" style="color: #fc8940" @click="$emit('hideClick')">《隐私声明》</span>
|
|
|
- <span class="span" style="color: #fc8940" @click="$emit('ruleClick')">《产品说明》</span>
|
|
|
- </div>
|
|
|
- <div class="text"
|
|
|
- :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.e}`}:{'color':'#000'}">
|
|
|
- <span
|
|
|
- :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.s}`}:{'color':'#ea1313'}">{{ times }}</span>{{pageData.remarks.orderText!=='' && pageData.remarks.orderText?pageData.remarks.orderText:'用户已抢购成功'}}
|
|
|
- </div>
|
|
|
- <div class="tips">
|
|
|
- {{pageData.remarks.privacyText}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ {{ pageData.remarks.btnText ? pageData.remarks.btnText : "点我领取" }}
|
|
|
+ </div>
|
|
|
+ <div class="privacyBox">
|
|
|
+ <van-checkbox v-model="checked" checked-color="#fc8940">
|
|
|
+ <p style="margin: 0; padding: 0">
|
|
|
+ 我已阅读并同意
|
|
|
+ </p>
|
|
|
+ </van-checkbox>
|
|
|
+ <span class="span" style="color: #fc8940" @click="$emit('hideClick')">《隐私声明》</span>
|
|
|
+ <span class="span" style="color: #fc8940" @click="$emit('ruleClick')">《产品说明》</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="text" :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.e}`}:{'color':'#000'}">
|
|
|
+ <span :style="productJson.length>0 && productJson[0].rushC.e!==''?{'color':`${productJson[0].rushC.s}`}:{'color':'#ea1313'}">{{ times }}</span>{{pageData.remarks.orderText!=='' && pageData.remarks.orderText?pageData.remarks.orderText:'用户已抢购成功'}}
|
|
|
+ </div> -->
|
|
|
+ <div class="tips">
|
|
|
+ {{pageData.remarks.privacyText}}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- getNewCode
|
|
|
- } from '../../../api'
|
|
|
- import {
|
|
|
- Dialog
|
|
|
- } from "vant";
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- imgUrl: process.env.VUE_APP_IMGS_URL,
|
|
|
- productJson: [],
|
|
|
- checked: false,
|
|
|
- times: 0,
|
|
|
- loginForm: {
|
|
|
- phone: "",
|
|
|
- vcode: "",
|
|
|
- },
|
|
|
- codeState: {
|
|
|
- state: false,
|
|
|
- time: 60,
|
|
|
- task: null,
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- props: {
|
|
|
- pageData: Object,
|
|
|
- isBuy: String
|
|
|
- },
|
|
|
- created() {
|
|
|
- if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne!==null) {
|
|
|
- this.productJson = this.pageData.mainProduct.cacheSeatOne
|
|
|
- }
|
|
|
- if (this.pageData.remarks.privacy && this.pageData.remarks.privacy !== '' && this.pageData.remarks
|
|
|
- .privacy !==
|
|
|
- null) {
|
|
|
- if (this.pageData.remarks.privacy === '1') {
|
|
|
- this.checked = true
|
|
|
- }
|
|
|
- }
|
|
|
- let start = this.pageData.remarks.orderNum && this.pageData.remarks.orderNum !== '' ? Number(this.pageData
|
|
|
- .remarks.orderNum) : 0
|
|
|
- let add = this.pageData.remarks.orderAdd && this.pageData.remarks.orderAdd !== '' ? Number(this.pageData
|
|
|
- .remarks.orderAdd) : 1
|
|
|
- let now = new Date().getTime();
|
|
|
- let times = (now - 1600476800000) / 180000;
|
|
|
- this.times = String(Math.ceil(times * add) + start)
|
|
|
- },
|
|
|
- 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("请输入验证码");
|
|
|
- }
|
|
|
- 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,
|
|
|
+ productJson: [],
|
|
|
+ checked: false,
|
|
|
+ times: 0,
|
|
|
+ loginForm: {
|
|
|
+ phone: "",
|
|
|
+ vcode: "",
|
|
|
+ },
|
|
|
+ codeState: {
|
|
|
+ state: false,
|
|
|
+ time: 60,
|
|
|
+ task: null,
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ pageData: Object,
|
|
|
+ isBuy: String
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ if (this.pageData.mainProduct.cacheSeatOne && this.pageData.mainProduct.cacheSeatOne !== null) {
|
|
|
+ this.productJson = this.pageData.mainProduct.cacheSeatOne
|
|
|
+ }
|
|
|
+ if (this.pageData.remarks.privacy && this.pageData.remarks.privacy !== '' && this.pageData.remarks
|
|
|
+ .privacy !==
|
|
|
+ null) {
|
|
|
+ if (this.pageData.remarks.privacy === '1') {
|
|
|
+ this.checked = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let start = this.pageData.remarks.orderNum && this.pageData.remarks.orderNum !== '' ? Number(this.pageData
|
|
|
+ .remarks.orderNum) : 0
|
|
|
+ let add = this.pageData.remarks.orderAdd && this.pageData.remarks.orderAdd !== '' ? Number(this.pageData
|
|
|
+ .remarks.orderAdd) : 1
|
|
|
+ let now = new Date().getTime();
|
|
|
+ let times = (now - 1600476800000) / 180000;
|
|
|
+ this.times = String(Math.ceil(times * add) + start)
|
|
|
+ },
|
|
|
+ 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("请输入验证码");
|
|
|
+ }
|
|
|
+ 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">
|
|
|
- .jianCom {
|
|
|
- @keyframes scale {
|
|
|
- from {
|
|
|
- transform: scale(1);
|
|
|
- }
|
|
|
+.jianCom {
|
|
|
+ @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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .text {
|
|
|
- line-height: 50px;
|
|
|
- font-size: 26px;
|
|
|
- // font-weight: bold;
|
|
|
- color: #0d0d0d;
|
|
|
- text-align: center;
|
|
|
+ .text {
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 26px;
|
|
|
+ // font-weight: bold;
|
|
|
+ color: #0d0d0d;
|
|
|
+ text-align: center;
|
|
|
|
|
|
- span {
|
|
|
- color: #ea1313;
|
|
|
- font-weight: bold
|
|
|
- }
|
|
|
- }
|
|
|
+ span {
|
|
|
+ color: #ea1313;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .tips {
|
|
|
- font-size: 20px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- opacity: 0.8;
|
|
|
- text-align: center;
|
|
|
- transform: scale(0.85, 0.85);
|
|
|
- width: 100%;
|
|
|
- margin-left: -10%;
|
|
|
- color: #707070;
|
|
|
- line-height: 40px;
|
|
|
- padding: 18px 10%
|
|
|
- }
|
|
|
- }
|
|
|
+ .tips {
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ opacity: 0.8;
|
|
|
+ text-align: center;
|
|
|
+ transform: scale(0.85, 0.85);
|
|
|
+ width: 100%;
|
|
|
+ margin-left: -10%;
|
|
|
+ color: #707070;
|
|
|
+ line-height: 40px;
|
|
|
+ padding: 18px 10%;
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|