<template>
	<div class="formIndex">
		<div class="banner">
			<img v-if="pageData.mainJson.bannerImg != ''" :src="imgUrl + pageData.mainJson.bannerImg" alt="">
			<img v-else src="./img/banner.png" alt="">
			<div class="swipeBox">
				<van-notice-bar :scrollable="false" background="rgba(0,0,0,0.3)" color="#fff">
					<van-swipe vertical :autoplay="3000" duration="3000" :touchable="false" :show-indicators="false" loop
						class="notice-swipe">
						<van-swipe-item>134 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>135 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>150 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>195 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>159 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>172 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>183 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>178 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>187 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>197 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>133 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>187 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>174 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>137 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>150 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>159 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>189 **** **** 用户已领取</van-swipe-item>
						<van-swipe-item>147 **** **** 用户已领取</van-swipe-item>
					</van-swipe>
				</van-notice-bar>

			</div>
		</div>
		<div class="formBox">
			<div class="form">
				<div class="inputBox">
					<div class="label">电话：</div>
					<div class="input">
						<!-- <input type="text" placeholder="联系手机号"> -->
						<van-field :disabled="disabled == true" style="padding:0;font-size: 16px; " v-model="form.serial_number"
							placeholder="联系手机号" />
					</div>
				</div>
				<div class="inputBox">
					<div class="label">地址：</div>
					<div class="input">
						<van-field :disabled="disabled == true" readonly style="padding:0;font-size: 16px; " clickable
							:value="addresVal" placeholder="工程师上门地址" @click="disabled == false ? addressShow = true : ''" />
					</div>
				</div>
				<div v-if="addresVal != ''" class="inputBox">
					<div class="label">详细地址：</div>
					<div class="input">
						<!-- <input type="text" placeholder="街道门牌、楼层、房间号等"> -->
						<van-field :disabled="disabled == true" v-model="form.address" style="padding:0;font-size: 16px; "
							placeholder="街道门牌、楼层、房间号等" />
					</div>
				</div>
				<div v-if="isTime" class="inputBox" style="margin-bottom: 37.5px;">
					<div class="label">上门时间：</div>
					<div class="input">
						<!-- <input v-model="timeVal" type="text" @focus="timeShow = true" placeholder="选择工程师上门时间，非必选"> -->
						<van-field :disabled="disabled == true" style="padding:0;font-size: 16px; " readonly clickable
							:value="timeVal" placeholder="选择工程师上门时间，非必选" @click=" disabled == false ? timeShow = true : ''" />
					</div>
				</div>
				<div v-if="!isUp" class="btnBox" @click="submit()">
					<!-- 免费预约 -->
				</div>
				<div v-else class="btnBox bg">
					<!-- 免费预约 -->
				</div>
				<div class="statement" v-if="extJson.privacy == '1'">
					提交即视为您已同意<span class="statementSpan" @click="value2 = true">《关于客户个人信息收集、使用规则的公告》</span>
				</div>
			</div>

			<div class="content" style="height: auto;">
				<img src="./img/titile.png" class="title" alt="">
				<div class="explain">
					网速太慢?
				</div>
				<div class="imgBox">
					<img src="./img/1.png" class="img" alt="">
					<img src="./img/2.png" class="img" alt="">
					<img src="./img/3.png" class="img" alt="">
				</div>
				<div class="explain2">
					简单3步 即享网络提速
				</div>

				<div class="flexBox">
					<div class="left">step1</div>
					<div class="right">填写上方所需要的信息</div>
				</div>
				<div class="flexBox">
					<div class="left">step2</div>
					<div class="right">等待客服与您取得联系</div>
				</div>
				<div class="flexBox">
					<div class="left">step3</div>
					<div class="right">等待专业工程师上门服务</div>
				</div>
				<div class="explainBox">
					<div class="divTitle">会员权益发放说明: </div>
					<div class="p">1.工作人员上门后现场免费发放红包；</div>
					<div class="p">2.活动限时限量，每个账号仅能参与1次活动；</div>
					<!-- <div class="p">3.红包及权益使用规则以现场解释为准</div> -->
					<div class="divImg">
						<img src="./img/icon.png" alt="">
					</div>
				</div>


			</div>
			<div class="content" style="margin-top: 36px;height: 600px;">
				<img src="./img/titile.png" class="title" alt="">
				<div class="explain">
					智家工程师提供
				</div>
				<div class="flexBox2">
					<div class="left2">免费的</div>
					<div class="right2">
						<div>预约报名</div>
						<div class="d2">上门检测</div>
					</div>
				</div>
				<div class="flexBox2">
					<div class="left2">专业的</div>
					<div class="right2">
						<div>网络检测</div>
						<div class="d2">测速排障</div>
					</div>
				</div>
				<div class="flexBox2">
					<div class="left2">优惠的</div>
					<div class="right2">
						<div>组网方案</div>
						<div class="d2">提速升级</div>
					</div>
				</div>
			</div>
			<div class="footerBox" v-if="pageData.remarks.extendVal == '1'">
				<div class="footerLeft">
					<div>上门服务</div>
					<!-- <div style="margin-top: 13px;">18693110010</div> -->
				</div>
				<div class="flexRight">
					18693110010
					<!-- <img src="./img/logo.png" alt=""> -->
				</div>
			</div>
			<div class="footImg" v-if="pageData.mainJson.explainImg != ''">
				<img :src="imgUrl + pageData.mainJson.explainImg" alt="">
			</div>
			<div style="height: 60px;"></div>
		</div>
		<!-- 地区弹出层 -->
		<van-popup v-model="addressShow" position="bottom"
			:style="{ height: '35%', 'border-top-left-radius': '50px', 'border-top-right-radius': '50px', padding: '15px', 'box-sizing': 'border-box' }">
			<van-area @cancel="cancelClick(0)" @confirm="confirmClick($event, 0)" :area-list="areaList" />
		</van-popup>
		<!-- 时间弹出层 -->
		<van-popup v-model="timeShow" position="bottom"
			:style="{ height: '35%', 'border-top-left-radius': '50px', 'border-top-right-radius': '50px', padding: '15px', 'box-sizing': 'border-box' }">
			<van-picker @change="onChange" @cancel="cancelClick(1)" @confirm="confirmClick($event, 1)" show-toolbar
				:columns="columns" />
		</van-popup>

		<!-- 预约成功提示 -->
		<van-popup v-model="value" :voverlay="false" :style="{ 'top': '275px', 'border-radius': '20px' }">
			<div class="modalShow">
				<img class="successImg" src="./img/success.png" alt="">
				<div class="successTxt">
					已为您成功预约智家工程师请等待客服人员与您沟通~
				</div>
				<div class="successBtn" @click="value = false">
					我知道了
				</div>
			</div>
		</van-popup>

		<state-modal v-if="extJson.privacy == '1'" v-model="value2"></state-modal>
	</div>
</template>
<script>
import {
	Popup,
	Area,
	Picker,
	Field,
	Dialog,
	Button
} from 'vant';
import Vue from 'vue'
import addR from '../../common/addRecord'
Vue.use(Popup).use(Area).use(Picker).use(Field).use(Button)
// 引入地域列表
import { areaList } from '@vant/area-data';
import cityJs from './city.js'
import { kafkaApi, kafkaPoint, kafkaSmscode, ksPoint } from '../../api'
import { mapState } from 'vuex';
import util from '../../util'
import stateModal from './statement.vue'
import axios from 'axios';
const cities = {
	"今日": ['两小时以内', '13:00-18:00', '18:00-22:00'],
	"明日": ['08:00-12:00', '13:00-18:00', '18:00-22:00'],
};
let date = new Date()
let m = date.getMonth() + 1
// let mm = m < 10 ? '0' + m : m
let d = date.getDate()
let dateTime = ''
if (m == 4 || m == 6 || m == 9 || m == 11) {
	if (d == 29) {
		m = m + 1
		let mm = m < 10 ? '0' + m : m
		dateTime = `${mm}-01`
	} else if (d == 30) {
		m = m + 1
		let mm = m < 10 ? '0' + m : m
		dateTime = `${mm}-02`
	} else {
		let mm = m < 10 ? '0' + m : m
		d = d + 2
		if (d < 10) {
			let ddd = d < 10 ? '0' + d : d
			dateTime = `${mm}-${ddd}`
		} else {
			dateTime = `${mm}-${d}`
		}
		// console.log(dateTime)
	}
} else if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
	if (d == 30) {
		m = m + 1
		let mm = m < 10 ? '0' + m : m
		dateTime = `${mm}-01`
	} else if (d == 31) {
		m = m + 1
		let mm = m < 10 ? '0' + m : m
		dateTime = `${mm}-02`
	} else {
		let mm = m < 10 ? '0' + m : m
		d = d + 2
		if (d < 10) {
			let ddd = d < 10 ? '0' + d : d
			dateTime = `${mm}-${ddd}`
		} else {
			dateTime = `${mm}-${d}`
		}

		// dateTime = `${mm}-${dd}`
	}

}
// let dd = d < 10 ? '0' + d : d
let h = date.getHours()
cities[dateTime] = ['08:00-12:00', '13:00-18:00', '18:00-22:00']

if (h < 6) {
	cities['今日'] = ['08:00-12:00', '13:00-18:00', '18:00-22:00']
} else if (h >= 6 && h < 8) {
	cities['今日'] = ['两小时以内', '08:00-12:00', '13:00-18:00', '18:00-22:00']
} else if (h < 13) {
	cities['今日'] = ['两小时以内', '13:00-18:00', '18:00-22:00']
} else if (h >= 13 && h < 18) {
	cities['今日'] = ['两小时以内', '18:00-22:00']
} else if (h >= 18 && h < 22) {
	cities['今日'] = ['两小时以内']
} else if (h >= 22) {
	delete cities['今日']
}
export default {
	data () {
		return {
			imgUrl: process.env.VUE_APP_IMGS_URL,
			areaList: {
			},
			addressShow: false,
			disabled: false,
			timeShow: false,
			isUp: false,
			value: false,
			value2: false,
			addresVal: "",
			phoneVal: "",
			timeVal: "",
			columns: cities['今日'] ? [
				{ values: Object.keys(cities) }, { values: cities['今日'] }
			] : [
				{ values: Object.keys(cities) }, { values: cities['明日'] }
			],
			form: {
				province_code: "",//省分编码 3位
				city_code: "",  //地市编码 4位
				province_name: "", //省分名称
				city_name: "",  //地市名称
				district_name: "",  //区县名称
				address: "",   //测速详细地址
				serial_number: "",  //手机号码
				appointment_time: "", //预约上门时间 格式2022-12-07 12:-2022-12-07 13:00或2022-12-07 12:00"，     非必填，如果未填，传空字符串
				create_time: "", //
				sms_code: "",	//验证码
				sms_code_type: '0', // 0 不带验证码 1 需要验证码
			},
			apiQuery: {},
			isTime: true, // 是否显示时间
		}
	},
	components: {
		stateModal
	},
	computed: {
		...mapState(['channelInfo', 'pageData']),
		extJson () {
			return this.pageData.remarks
		}
	},
	async created () {
		document.title = '智家工程师预约'
		// this.apiQuery = this.$route.query
		this.apiQuery = util.query2obj(location.search)
		// console.log(areaList.province_list[''])
		addR.showSP()
		await this.getIpcofig()
	},
	mounted () {
		let now = Date.now()
		let formTime = localStorage.getItem('formTime')
		if (formTime) {
			if ((now - formTime) < 24 * 60 * 60 * 1000) {
				let form = JSON.parse(localStorage.getItem('form'))
				this.form = form
				this.isUp = true
				this.disabled = true
				this.addresVal = `${form.province_name}/${form.city_name}/${form.district_name}`
				let time1 = form.appointment_time.split(' ')
				let month = time1[0].split('-')
				let time2 = time1[1].split('-')
				this.timeVal = `${month[1]}-${month[2]} ${time2[0]}-${time2[2]}-${time2[3]} ${time1[2]}`

			}
		}
		this.areaList = this.getAreaList()
		if (this.extJson.isDateTime == '0') {
			this.isTime = false
		} else {
			this.isTime = true
		}
	},
	methods: {
		// 发送验证码
		// sendCode () {
		// 	if (this.form.serial_number == '') {
		// 		this.$toast('请输入手机号')
		// 		return false
		// 	}
		// 	if (!/^1[23456789]\d{9}$/.test(this.form.serial_number)) {
		// 		return this.$toast("请输入正确手机号");
		// 	}
		// 	kafkaSmscode({ phone: this.form.serial_number }).then(res => {
		// 		if (res.code == 10000) {
		// 			this.$toast('验证码短信已发送，请及时查收！')
		// 			this.codeState = true
		// 			this.codeTask = setInterval(() => {
		// 				this.codeTime--
		// 				if (this.codeTime <= 0) {
		// 					clearInterval(this.codeTask)
		// 					this.codeState = false
		// 					this.codeTime = 60
		// 				}
		// 			}, 1000)
		// 		}

		// 	})
		// },
		// 获取ip地址
		getIpcofig () {
			axios.get('https://api.ipify.org?format=json').then(res => {
				let ip = res.data.ip
				if (ip) {
					this.getIpAddress(ip)
					addR.webIp(ip)
				} else {
					addR.ipConfig('')
				}
			}).catch(err => {
				addR.ipConfig('')
			})
		},
		//获取ip地址
		getIpAddress (ip) {
			axios({
				method: 'get',
				url: "https://api.vore.top/api/IPv4",
				params: {
					v4: ip
				}
			}).then(res => {
				let data = res.data
				console.log(`ip地址：${ip}，归属地：${data.ipdata.isp},${data.ipdata.info1}${data.ipdata.info2}${data.ipdata.info3}`)
				if (data.code == '200') {
					let ipConfig = `${ip},${data.ipdata.isp},${data.ipdata.info1}${data.ipdata.info2}${data.ipdata.info3}`
					addR.ipConfig(ipConfig)
				} else {
					addR.ipConfig(ip)
				}
			}).catch(err => {
				addR.ipConfig(ip)
			})
		},
		getAreaList () {
			let area = {
				province_list: {},
				city_list: {},
				county_list: {},
			}
			if (this.extJson.areaVal && this.extJson.areaVal.length > 0) {
				this.extJson.areaVal.forEach(val => {
					if (val.length > 1) {
						for (let key in areaList.province_list) {
							if (key == val[0]) {
								area.province_list[key] = areaList.province_list[key]
							}
						}
						for (let i in areaList.city_list) {
							if (val[1].substring(0, 4) == i.substring(0, 4)) {
								area.city_list[i] = areaList.city_list[i]
							}
						}
						for (let j in areaList.county_list) {
							if (val[1].substring(0, 4) == j.substring(0, 4)) {
								area.county_list[j] = areaList.county_list[j]
							}
						}
					} else {
						for (let key in areaList.province_list) {
							if (key == val[0]) {
								area.province_list[key] = areaList.province_list[key]
							}
						}
						for (let i in areaList.city_list) {
							if (val[0].substring(0, 3) == i.substring(0, 3)) {
								area.city_list[i] = areaList.city_list[i]
							}
						}
						for (let j in areaList.county_list) {
							if (val[0].substring(0, 3) == j.substring(0, 3)) {
								area.county_list[j] = areaList.county_list[j]
							}
						}
					}
				})
			} else {
				for (let key in areaList.province_list) {
					area.province_list[key] = areaList.province_list[key]
				}
				for (let i in areaList.city_list) {
					area.city_list[i] = areaList.city_list[i]
				}
				for (let j in areaList.county_list) {
					area.county_list[j] = areaList.county_list[j]
				}
			}
			return area
		},
		onChange (picker, values) {
			picker.setColumnValues(1, cities[values[0]]);
		},
		// 地区选择点击取消
		cancelClick (num) {
			if (num == 0) {
				this.addressShow = false
				this.addresVal = ''
				this.form.province_code = ''
				this.form.city_code = ''
			} else {
				this.timeShow = false
				this.timeVal = ''
			}
		},
		// 地区选择点击确认
		confirmClick (e, num) {
			// console.log(e)
			if (num == 0) {
				this.addresVal = ""
				e.forEach(element => {
					this.addresVal += element.name + '/'
				});
				this.form.province_name = e[0].name
				this.form.city_name = e[1].name
				this.form.district_name = e[2].name
				cityJs.cityList.forEach(val => {
					if (e[1].name.indexOf(val.name) != -1) {
						this.form.city_code = val.code
					}
				})
				cityJs.provinceList.forEach(v => {
					if (e[0].name.indexOf(v.name) != -1) {
						this.form.province_code = v.code
					}
				})
				this.addressShow = false
			} else {
				let date = new Date()
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				let mm = m < 10 ? '0' + m : m
				let d = date.getDate()
				let dd = d < 10 ? '0' + d : d
				let h = date.getHours()
				let M = date.getMinutes()
				let MM = M < 10 ? '0' + M : M
				let time = e[1].split('-')
				if (e[0] == '今日') {
					if (e[1] != '两小时以内') {
						this.timeVal = `${y}-${mm}-${dd} ${e[1]}`
						this.form.appointment_time = `${y}-${mm}-${dd} ${time[0]}-${y}-${mm}-${dd} ${time[1]}`
					} else {
						this.timeVal = `${e[1]}`
						this.form.appointment_time = `${y}-${mm}-${dd} ${h}:${MM}-${y}-${mm}-${dd} ${h + 2}:${MM}`
					}
				} else if (e[0] == '明日') {
					if (m == 4 || m == 6 || m == 9 || m == 11) {
						if (d == 30) {
							m = m + 1
							let mmm = m < 10 ? '0' + m : m
							this.timeVal = `${y}-${mmm}-01 ${e[1]}`
							this.form.appointment_time = `${y}-${mmm}-01 ${time[0]}-${y}-${mmm}-01 ${time[1]}`
						} else {
							if (d < 10) {
								d = d + 1
								let ddd = d < 10 ? '0' + d : d
								this.timeVal = `${y}-${mm}-${ddd} ${e[1]}`
								this.form.appointment_time = `${y}-${mm}-${ddd} ${time[0]}-${y}-${mm}-${ddd} ${time[1]}`
							} else {
								this.timeVal = `${y}-${mm}-${dd + 1} ${e[1]}`
								this.form.appointment_time = `${y}-${mm}-${dd + 1} ${time[0]}-${y}-${mm}-${dd + 1} ${time[1]}`
							}

						}
					} else if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
						if (d == 31) {
							m = m + 1
							let mmm = m < 10 ? '0' + m : m
							this.timeVal = `${y}-${mmm}-01 ${e[1]}`
							this.form.appointment_time = `${y}-${mmm}-01 ${time[0]}-${y}-${mmm}-01 ${time[1]}`
						} else {
							if (d < 10) {
								d = d + 1
								let ddd = d < 10 ? '0' + d : d
								this.timeVal = `${y}-${mm}-${ddd} ${e[1]}`
								this.form.appointment_time = `${y}-${mm}-${ddd} ${time[0]}-${y}-${mm}-${ddd} ${time[1]}`
							} else {
								this.timeVal = `${y}-${mm}-${dd + 1} ${e[1]}`
								this.form.appointment_time = `${y}-${mm}-${dd + 1} ${time[0]}-${y}-${mm}-${dd + 1} ${time[1]}`
							}
						}
					}
					// this.timeVal = `${y}-${mm}-${dd + 1} ${e[1]}`
					// this.form.appointment_time = `${y}-${mm}-${dd + 1} ${time[0]}-${y}-${mm}-${dd + 1} ${time[1]}`
				} else {
					if (m == 4 || m == 6 || m == 9 || m == 11) {
						if (d == 29) {
							m = m + 1
							let mmm = m < 10 ? '0' + m : m
							this.timeVal = `${y}-${mmm}-01 ${e[1]}`
							this.form.appointment_time = `${y}-${mmm}-01 ${time[0]}-${y}-${mmm}-01 ${time[1]}`
						} else if (d == 30) {
							m = m + 1
							let mmm = m < 10 ? '0' + m : m
							this.timeVal = `${y}-${mmm}-02 ${e[1]}`
							this.form.appointment_time = `${y}-${mmm}-02 ${time[0]}-${y}-${mmm}-02 ${time[1]}`
						} else {
							if (d < 10) {
								d = d + 2
								let ddd = d < 10 ? '0' + d : d
								this.timeVal = `${y}-${mm}-${ddd} ${e[1]}`
								this.form.appointment_time = `${y}-${mm}-${ddd} ${time[0]}-${y}-${mm}-${ddd} ${time[1]}`
							} else {
								this.timeVal = `${y}-${mm}-${dd + 2} ${e[1]}`
								this.form.appointment_time = `${y}-${mm}-${dd + 2} ${time[0]}-${y}-${mm}-${dd + 2} ${time[1]}`
							}
						}
					} else if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
						if (d == 30) {
							m = m + 1
							let mmm = m < 10 ? '0' + m : m
							this.timeVal = `${y}-${mmm}-01 ${e[1]}`
							this.form.appointment_time = `${y}-${mmm}-01 ${time[0]}-${y}-${mmm}-01 ${time[1]}`
						} else if (d == 31) {
							m = m + 1
							let mmm = m < 10 ? '0' + m : m
							this.timeVal = `${y}-${mmm}-02 ${e[1]}`
							this.form.appointment_time = `${y}-${mmm}-02 ${time[0]}-${y}-${mmm}-02 ${time[1]}`
						} else {
							if (d < 10) {
								d = d + 2
								let ddd = d < 10 ? '0' + d : d
								this.timeVal = `${y}-${mm}-${ddd} ${e[1]}`
								this.form.appointment_time = `${y}-${mm}-${ddd} ${time[0]}-${y}-${mm}-${ddd} ${time[1]}`
							} else {
								this.timeVal = `${y}-${mm}-${dd + 2} ${e[1]}`
								this.form.appointment_time = `${y}-${mm}-${dd + 2} ${time[0]}-${y}-${mm}-${dd + 2} ${time[1]}`
							}
						}
					}
					// this.timeVal = `${y}-${mm}-${dd + 2} ${e[1]}`
					// this.form.appointment_time = `${y}-${mm}-${dd + 2} ${time[0]}-${y}-${mm}-${dd + 2} ${time[1]}`
				}
				this.timeShow = false
			}
		},
		// 提交表单
		submit () {
			this.form.create_time = new Date().toLocaleString()
			if (!/^1[23456789]\d{9}$/.test(this.form.serial_number)) {
				return this.$toast("请输入正确手机号");
			}
			if (this.province_name == '' || this.city_name == '' || this.district_name == '' || this.form.address == '') {
				return this.$toast('请提交完整信息哦！')
			}
			if (this.extJson.intercept == '1') {
				if (this.extJson.interceptText != '') {
					let phone = this.form.serial_number.substring(0, 3)
					let isToast = this.extJson.interceptText.includes(phone)
					if (isToast) {
						Dialog.confirm({
							title: '提示',
							message: '联通号码暂不参与此次活动',
							showCancelButton: false,
							theme: 'round-button',
						})
						return false
					}
				}
			}
			let uuid = this.$md5(`${new Date().getTime()}` + `${this.getNums()}`)
			let order_id = `ZX-PM-${this.channelInfo.key}-${uuid}`
			this.form.sheet_id = order_id
			this.form.full_code = this.channelInfo.fullCode
			this.form.channel_key = this.channelInfo.key
			kafkaPoint(this.form).then(res => {
				if (res.code == 10000) {
					let formTime = Date.now()
					let form = JSON.stringify(this.form)
					localStorage.setItem('formTime', formTime)
					localStorage.setItem('form', form)
					addR.buySuccess()
					this.isUp = true
					this.value = true
					this.postApi()
				}
			}).catch(err => {
				if (err.code == 500) {
					Dialog.confirm({
						title: '提示',
						message: err.message,
						showCancelButton: false,
						theme: 'round-button',
					})
				}
			})
		},
		postApi () {
			let nowTime = new Date().getTime()
			if (this.apiQuery.callback) {
				let nowTime = new Date().getTime()
				let params = {
					callback: this.apiQuery.callback,
					event_type: 9,
					event_time: nowTime,
				}
				ksPoint(params).then(res => {
					console.log(res)
				})
			} else {
				let params = {
					event_type: "form",
					context: {
						ad: {
							callback: this.apiQuery.clickid
						},
					},
					timestamp: nowTime
				}
				console.log('api数据')
				console.log(params)
				kafkaApi(params).then(res => {
					console.log(res)
				})
			}

		},
		getNums () {
			var arr = [];//首先利用字面量生成一个空数组
			//利用Math.random乘100000来生成五位数（Number）
			var random_num = parseInt(Math.random() * 100000);
			//设置一个名为count的记录变量
			var count = 0;
			//for循环来为arr空数组来赋值
			for (var i = 0; i < 6; i++) {
				//给这个五位数（Number）求模，第一次循环的时候是个位，第二次循环时十位...
				var res = random_num % 10;
				//如果求模等于0，证明这次生成的数为0，退出本次循环
				if (random_num === 0) {
					continue;
				}
				//每一次循环都/10，然后求整，为了下一次循环求模创造条件
				random_num = parseInt(random_num / 10);
				//把每一次求模得到的数添加到数组
				arr.push(res);
				//count记录变量记录添加的次数
				count++;
			}
			// console.log()
			return arr.join('')
		}
	}
}
</script>

<style lang="scss" scoped>
.formIndex {
	@keyframes scale {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(0.8);
		}
	}

	.banner {
		width: 750px;
		height: 1518px;
		position: relative;

		img {
			width: 100%;
			height: 100%;
		}

		.swipeBox {
			width: 100%;
			position: absolute;
			bottom: 600px;

			// line-height: 40px;
			// z-index: 999;
			::v-deep .notice-swipe {
				height: 40px;
				line-height: 40px;
				// background: #000000;
			}

		}
	}

	.formBox {
		margin-top: -571px;
		width: 100%;
		height: 2977px;
		background: #FFFFFF;
		border-radius: 100px 100px 0px 0px;
		position: relative;
		z-index: 1;

		.form {
			width: 100%;
			padding: 80px 46px 66px 75px;
			box-sizing: border-box;

			.inputBox {
				width: 100%;
				display: flex;
				height: 51px;
				font-size: 35px;
				font-family: HYQiHei_70S;
				color: #000000;
				// font-weight: 600;
				align-items: center;
				margin-bottom: 43px;
				// letter-spacing: 3px;

				.label {
					width: 190px;
					margin-right: 10px;
				}

				.input {
					flex: 1;

					input {
						margin: 0;
						padding: 0;
						border: none;
						outline: none;
						font-size: 32px;
						font-family: HYQiHei_70S;
						color: #ADADAD;
					}
				}

				.smsBtn {
					width: 172px;
					height: 67px;
					border-radius: 20px;
					border: 3px solid #686868;
					line-height: 67px;
					text-align: center;
					font-size: 27px;
					font-family: HYQiHei_70S;
					color: #686868;
				}
			}

			.btnBox {
				width: 601px;
				height: 113px;
				background-image: url('./img/btn.png');
				background-repeat: no-repeat;
				background-size: cover;
				// background: #EA1818;
				animation-name: scale;
				animation-duration: 0.5s;
				animation-timing-function: ease-in-out;
				animation-iteration-count: infinite;
				animation-direction: alternate-reverse;
			}

			.bg {
				background-image: url('./img/btn2.png') !important;
				background-repeat: no-repeat;
				background-size: cover;
			}

			.statement {
				// width: 90%;
				// margin: 0 auto;
				font-size: 28px;
				// text-align: center;
				color: #909090;
				margin-top: 20px;

				.statementSpan {
					color: #2884E8;
					text-decoration: underline;
				}
			}
		}
	}

	.content {
		width: 690px;
		height: 954px;
		background: #F9F9F9;
		border-radius: 100px;
		margin: 0 auto;
		box-sizing: border-box;

		.title {
			display: block;
			width: 124px;
			height: 15px;
			margin: 0 auto;
			padding-top: 22px;
		}

		.explain {
			text-align: center;
			font-size: 66px;
			font-family: HYYakuHei-HEW, HYYakuHei;
			font-weight: 600;
			color: #000000;
			letter-spacing: 13px;
			margin-top: 60px;
		}

		.imgBox {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 0 12px;
			box-sizing: border-box;

			.img {
				width: 164px;
				height: 199px;
				display: block;
				margin-top: 62px;
			}
		}

		.explain2 {
			font-size: 49px;
			font-family: HYk2gj;
			color: #4AA4FF;
			font-weight: 600;
			letter-spacing: 8px;
			padding: 64px 65px 48px 39px;
		}

		.flexBox {
			height: 54px;
			padding-left: 40px;
			display: flex;
			flex-direction: row;
			font-family: HYQiHei_70S;
			margin-bottom: 43px;

			.left {
				font-size: 37px;
				color: #4AA4FF;
				margin-right: 47px;
			}

			.right {
				font-size: 35px;
				color: #686868;
				// font-weight: 600;
			}
		}

		.explainBox {
			padding: 15px 40px;
			box-sizing: border-box;

			.divTitle {
				color: #373737;
				font-size: 35px;
				font-family: HYQiHei_90S;
				font-weight: 600;

			}

			.p {
				margin-top: 21px;
				font-size: 35px;
				color: #686868;
				letter-spacing: 1px;
				line-height: 51px;
				font-weight: 400;
			}

			.divImg {
				width: 100%;
				height: 150px;
				margin: 38px 0 130px 0;

				img {
					width: 100%;
					height: auto;
				}
			}
		}

		.flexBox2 {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 65px 57px 0 54px;

			.left2 {
				width: 247px;
				height: 247px;
				background: #4AA4FF;
				border-radius: 50%;
				line-height: 247px;
				text-align: center;
				font-size: 53px;
				font-family: HYYakuHei-HEW, HYYakuHei;
				font-weight: 600;
				color: #FFFFFF;
				letter-spacing: 10px;
			}

			.right2 {
				font-size: 53px;
				font-family: HYYakuHei-HEW, HYYakuHei;
				font-weight: 600;
				color: #575757;
				letter-spacing: 10px;

				.d2 {
					margin-top: 27px;
				}
			}
		}
	}

	.footerBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 112px 65px 121px 67px;
		font-size: 45px;
		font-family: HYYakuHei-FEW, HYYakuHei;
		font-weight: 600;
		color: #000000;
	}

	.modalShow {
		box-sizing: border-box;
		width: 518px;
		height: 539px;
		background-color: #fff;
		border-radius: 40px;
		text-align: center;

		.successImg {
			display: block;
			width: 284px;
			height: 284px;
			margin: 12px auto;
		}

		.successTxt {
			width: 368px;
			height: 123px;
			font-size: 28px;
			color: #000000;
			letter-spacing: 2px;
			margin: 0 auto;
			line-height: 41px;
		}

		.successBtn {
			width: 370px;
			height: 65px;
			background: #2884E8;
			border-radius: 40px;
			line-height: 65px;
			margin: 0 auto;
			font-size: 28px;
			font-family: HYQiHei_70S;
			color: #FFFFFF;
			letter-spacing: 2px;
		}
	}

	.footImg {
		width: 100%;
		// height: 100%;
		margin-top: 40px;

		img {
			width: 100%;
			height: auto;
		}
	}
}
</style>