|
|
@@ -1,24 +1,282 @@
|
|
|
<template>
|
|
|
<div class="report-buy">
|
|
|
<div class="j-main">
|
|
|
- 介绍页面
|
|
|
+ <van-cell-group title="请填写订单信息">
|
|
|
+ <van-field v-model="userInfo.email" class="field" center placeholder="输入邮箱地址" @blur="checkPass('email')" :error-message="errorMsg.email" />
|
|
|
+ <transition name="van-slide-right">
|
|
|
+ <van-field v-show="true" class="field" center v-model="userInfo.code" @blur="checkPass('code')" placeholder="输入邮箱验证码" :error-message="errorMsg.code">
|
|
|
+ <template #button>
|
|
|
+ <!-- <countdown-button @click="sendCode" :countdown="120" :disabled="sendButtonDisabled"></countdown-button> -->
|
|
|
+ <countdown-button @click="sendCode" :countdown="120"></countdown-button>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </transition>
|
|
|
+ <van-field v-model="userInfo.phone" class="field" center type="tel" placeholder="输入手机号" @blur="checkPass('phone')" :error-message="errorMsg.phone" />
|
|
|
+ <van-field v-model="userInfo.company" class="field" center autosize @blur="checkPass('company')" type="textarea" rows="1" maxlength="50" placeholder="输入公司名称" :error-message="errorMsg.company" />
|
|
|
+ </van-cell-group>
|
|
|
+ <div class="tips">
|
|
|
+ <p v-for="(item, index) in tipText" :key="index">* {{item}}</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="j-button-group j-footer">
|
|
|
- <router-link tag="button" class="j-button-confirm" to="/pay">立即支付</router-link>
|
|
|
- <!-- <button class="j-button-confirm">立即支付</button> -->
|
|
|
+ <div class="j-footer" ref="footer">
|
|
|
+ <div class="price-container">
|
|
|
+ <div class="price-top">
|
|
|
+ <span class="price-t-label">支付金额：</span>
|
|
|
+ <span class="price-t-count-now">
|
|
|
+ <span class="cn-l">¥</span>
|
|
|
+ <span class="cn-r">{{ orderInfo.price }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="price-bottom">
|
|
|
+ <span class="price-b-label">原价：</span>
|
|
|
+ <span class="price-b-count-o">
|
|
|
+ <span class="co-l">¥</span>
|
|
|
+ <span class="co-r">{{ orderInfo.before_price }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-cell class="statement" clickable @click="toggleStatementState" center :border="false">
|
|
|
+ <template #icon>
|
|
|
+ <van-checkbox v-model="iAgreee" icon-size="17" checked-color="#2ABED1" ref="iAgreeeCheckbox" />
|
|
|
+ </template>
|
|
|
+ <template #title>
|
|
|
+ <p class="state">
|
|
|
+ <span>我已阅读，理解并接受</span>
|
|
|
+ <a class="link highlight-text" @click="serviceTerms" href="/jyapp/front/staticPage/dataExport_serviceterms.html">《剑鱼标讯线上购买与服务条款》</a>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <div class="j-button-group">
|
|
|
+ <button class="j-button-confirm" @click="onSubmit" :disabled="confirmDisabled">立即支付</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
-<script>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
import { Component, Vue } from 'vue-property-decorator'
|
|
|
+import { Field, Cell, CellGroup, Checkbox, CheckboxGroup } from 'vant'
|
|
|
+import countdownButton from '@/components/common/CountDownButton.vue'
|
|
|
+import { inputFocusHideFooter } from '@/utils/globalFunctions'
|
|
|
|
|
|
@Component({
|
|
|
- name: 'buy'
|
|
|
+ name: 'buy',
|
|
|
+ components: {
|
|
|
+ [Field.name]: Field,
|
|
|
+ [Cell.name]: Cell,
|
|
|
+ [CellGroup.name]: CellGroup,
|
|
|
+ [Checkbox.name]: Checkbox,
|
|
|
+ [CheckboxGroup.name]: CheckboxGroup,
|
|
|
+ countdownButton
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
-export default class Buy extends Vue {}
|
|
|
+export default class Buy extends Vue {
|
|
|
+ tipText = [
|
|
|
+ '数据报告将以邮件形式发至您的邮箱',
|
|
|
+ '数据报告一经购买不支持退货、退款',
|
|
|
+ '购买、售后等问题，请联系剑鱼标讯客服微信号：jianyu360'
|
|
|
+ ]
|
|
|
+
|
|
|
+ // 订单金额等数据
|
|
|
+ orderInfo = {
|
|
|
+ price: 123,
|
|
|
+ before_price: 2990
|
|
|
+ }
|
|
|
+
|
|
|
+ // 用户信息(需要提交)
|
|
|
+ userInfo = {
|
|
|
+ email: '',
|
|
|
+ phone: '',
|
|
|
+ code: '',
|
|
|
+ company: ''
|
|
|
+ }
|
|
|
+
|
|
|
+ allRegPass = false
|
|
|
+ iAgreee = false
|
|
|
+
|
|
|
+ // 错误提示信息
|
|
|
+ errorMsg = {
|
|
|
+ email: '',
|
|
|
+ phone: '',
|
|
|
+ code: '',
|
|
|
+ company: ''
|
|
|
+ }
|
|
|
+
|
|
|
+ // 错误提示验证对照表
|
|
|
+ errorMsgMap = {
|
|
|
+ email: {
|
|
|
+ reg: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
|
|
|
+ text: '邮箱格式输入错误'
|
|
|
+ },
|
|
|
+ phone: {
|
|
|
+ reg: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
|
|
|
+ text: '手机号格式输入错误'
|
|
|
+ },
|
|
|
+ code: {
|
|
|
+ reg: '',
|
|
|
+ text: '验证码输入错误'
|
|
|
+ },
|
|
|
+ company: {
|
|
|
+ reg: '',
|
|
|
+ text: '必填项'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ get confirmDisabled () {
|
|
|
+ return !this.iAgreee || !this.allRegPass
|
|
|
+ }
|
|
|
+
|
|
|
+ // get sendButtonDisabled () {
|
|
|
+ // const type = 'email'
|
|
|
+ // const reg = this.errorMsgMap[type].reg
|
|
|
+ // const email = this.userInfo[type]
|
|
|
+ // return !reg.test(email)
|
|
|
+ // }
|
|
|
+
|
|
|
+ toggleStatementState () {
|
|
|
+ this.iAgreee = !this.iAgreee
|
|
|
+ }
|
|
|
+
|
|
|
+ mounted () {
|
|
|
+ const inputs: any = document.querySelectorAll('.field .van-field__control')
|
|
|
+ inputFocusHideFooter(inputs, this.$refs.footer)
|
|
|
+ }
|
|
|
+
|
|
|
+ checkPass (type) {
|
|
|
+ const r = this.errorMsgMap[type]
|
|
|
+ const info = this.userInfo[type]
|
|
|
+ // 数据为空不显示校验失败提示，直接认定校验失败
|
|
|
+ this.checkAllPass()
|
|
|
+ if (!info) return false
|
|
|
+
|
|
|
+ let pass = true
|
|
|
+ if (r.reg) {
|
|
|
+ // 有正则的就根据正则替换
|
|
|
+ pass = r.reg.test(info)
|
|
|
+ } else {
|
|
|
+ // 判断是不是company
|
|
|
+ if (type === 'code') {
|
|
|
+ pass = !!info
|
|
|
+ } else if (type === 'company') {
|
|
|
+ // 判断是不是company
|
|
|
+ pass = !!info
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (pass) {
|
|
|
+ this.errorMsg[type] = ''
|
|
|
+ } else {
|
|
|
+ this.errorMsg[type] = this.errorMsgMap[type].text
|
|
|
+ }
|
|
|
+ return pass
|
|
|
+ }
|
|
|
+
|
|
|
+ checkAllPass () {
|
|
|
+ const info = this.userInfo
|
|
|
+ const regArr: any = []
|
|
|
+ for (const key in info) {
|
|
|
+ const r = this.errorMsgMap[key]
|
|
|
+ let pass = true
|
|
|
+ if (r.reg) {
|
|
|
+ // 有正则的就根据正则替换
|
|
|
+ pass = r.reg.test(info[key])
|
|
|
+ } else {
|
|
|
+ // 判断是不是company
|
|
|
+ if (key === 'code') {
|
|
|
+ pass = !!info[key]
|
|
|
+ } else if (key === 'company') {
|
|
|
+ pass = !!info[key]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(r, key, pass)
|
|
|
+ regArr.push(pass)
|
|
|
+ }
|
|
|
+ const f = regArr.indexOf(false) === -1
|
|
|
+ this.allRegPass = f
|
|
|
+ return f
|
|
|
+ }
|
|
|
+
|
|
|
+ serviceTerms () {
|
|
|
+ console.log('serviceTerms')
|
|
|
+ }
|
|
|
+
|
|
|
+ sendCode (cb) {
|
|
|
+ const reg = this.errorMsgMap.email.reg
|
|
|
+ const email = this.userInfo.email
|
|
|
+ const emailPass = reg.test(email)
|
|
|
+ if (!emailPass) return
|
|
|
+ cb && cb()
|
|
|
+ console.log('sendCode')
|
|
|
+ }
|
|
|
+
|
|
|
+ onSubmit () {
|
|
|
+ console.log(JSON.stringify(this.userInfo))
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .report-buy {}
|
|
|
+ .report-buy {
|
|
|
+ .tips {
|
|
|
+ padding: 8px 14px;
|
|
|
+ color: #9B9CA3;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ .field {
|
|
|
+ // min-width: 54px;
|
|
|
+ .van-field__body {
|
|
|
+ min-height: 30px;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #171826;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .j-footer {
|
|
|
+ .price-container {
|
|
|
+ padding: 8px 16px 4px;
|
|
|
+ background-color: #fff;
|
|
|
+ .price-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .price-t-label {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #9B9CA3;
|
|
|
+ }
|
|
|
+ .price-t-count-now {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #FB483D;
|
|
|
+ .cn-l {
|
|
|
+ margin-right: 4px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-bottom {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: 3px;
|
|
|
+ font-size: 11px;
|
|
|
+ color: #9B9CA3;
|
|
|
+ line-height: 14px;
|
|
|
+ .co-r {
|
|
|
+ margin-left: 4px;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .statement {
|
|
|
+ padding-top: 0;
|
|
|
+ padding-bottom: 0;
|
|
|
+ border: none;
|
|
|
+ font-size: 12px;
|
|
|
+ .van-cell__title {
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
