提交 37bb14f5 authored 作者: lihuihui's avatar lihuihui

添加支付

上级 a8b1fbe5
......@@ -8,4 +8,6 @@ export default class ArticleAction {
getBanner (obj) { return articleApi.getBanner(obj).then(res => res) }
sendCheckedCode (obj) { return articleApi.sendCheckedCode(obj).then(res => res) }
register (obj) { return articleApi.register(obj).then(res => res) }
register2 (obj) { return articleApi.register2(obj).then(res => res) }
getUserInfo (obj) { return articleApi.getUserInfo(obj).then(res => res) }
}
......@@ -15,4 +15,8 @@ export default class ScoreAPI extends BaseAPI {
sendCheckedCode = (obj = {}) => this.post('/api/usercenter/user/send-code', obj)
// 注册
register = (obj = {}) => this.post('/api/usercenter/user/register', obj)
// 注册
register2 = (obj = {}) => this.post('/api/usercenter/user/register-and-login-by-mobile', obj)
// 获取用户信息
getUserInfo = () => this.get('/api/passport/account/get-user-info')
}
......@@ -196,6 +196,8 @@ export default {
}
},
mounted() {
// this.loginSuccess()
this.user = JSON.parse(window.sessionStorage.userInfo)
},
methods: {
goPage(path, n) {
......@@ -225,6 +227,8 @@ export default {
this.passport.logout()
this.isLogin = false
window.G.UserInfo = {}
window.sessionStorage.userInfo = JSON.stringify({})
this.$router.go(0)
// window.location.href = window.location.href
// this.$router.push('/')
},
......@@ -235,8 +239,11 @@ export default {
},
loginSuccess(data) {
this.passport.checkLoginStatus((isLogin, user = {}) => {
window.sessionStorage.userInfo = JSON.stringify(user)
this.isLogin = isLogin
this.user = user
// window.G.UserInfo = user
// this.$router.go(0)
this.$router.push('/my')
})
}
......
<template>
<div class="pay-pop-box">
<div class="content-box" v-if="!isCodeShow">
<i class="el-icon-close" @click="$emit('closePayPop')"></i>
<div class="tips-cen">
<div class="name">课程名称:</div>
<div class="js">2021年第一期“1+x金融产品数字化营销职业技能等级证书“(中极)”师资培训费</div>
</div>
<div class="tips-cen mar-t-20">
<div class="name">培训费用:</div>
<div class="money">1780<span></span></div>
</div>
<div class="tips-top">
<div class="name">支付方式:</div>
<div class="pay-method">
<div :class="payMethod === 0 ? 'li active' : 'li'" @click="tabPayMethod(0)">
<div class="icon"></div>
<div class="pay-text">支付宝支付</div>
</div>
<div :class="payMethod === 1 ? 'li active' : 'li'" @click="tabPayMethod(1)">
<div class="icon"></div>
<div class="pay-text">微信支付</div>
</div>
</div>
</div>
<div class="pay-btn" @click="isCodeShow = true">去支付</div>
<div class="tips-text">注:请核对报名表信息,支付后将不能修改报名信息。</div>
</div>
<div class="content-box ewm-code" v-if="isCodeShow">
<i class="el-icon-close" @click="$emit('closePayPop')"></i>
<div class="title">{{ payMethod ? '微信支付' : '支付宝支付' }}</div>
<div class="ewm-box">
<div class="block"></div>
<div class="text">微信扫一扫支付</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
payMethod: 0,
isCodeShow: false
}
},
methods: {
tabPayMethod(n) {
this.payMethod = n
}
}
}
</script>
<style lang="scss" scoped>
.pay-pop-box{
width: 100%;
height: 100%;
.content-box{
&.ewm-code{
padding: 21px 21px 88px;
.title{
font-size: 18px;
color: #333333;
line-height: 25px;
}
.ewm-box{
width: 220px;
margin: 43px auto 0;
text-align: center;
.block{
height: 220px;
border: 1px solid #D0D0D0;
}
.text{
font-size: 16px;
color: #999999;
line-height: 22px;
margin-top: 6px;
}
}
}
padding: 51px 64px 82px;
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
width: 735px;
height: 426px;
background: #FFFFFF;
border-radius: 2px;
.el-icon-close{
color: #999999;
position: absolute;
top: 17px;
right: 24px;
font-size: 24px;
cursor: pointer;
}
.tips-cen{
display: flex;
align-items: center;
&.mar-t-20{
margin-top: 20px;
}
.name{
font-size: 16px;
color: #333333;
margin-right: 10px;
}
.js{
width: 495px;
font-size: 16px;
color: #333333;
line-height: 22px;
}
.money{
color: rgba(192, 21, 64, 1);
font-size: 34px;
span{
color: rgba(51, 51, 51, 1);
font-size: 20px;
}
}
}
.tips-top{
display: flex;
margin-top: 15px;
.name{
font-size: 16px;
color: #333333;
line-height: 22px;
margin-right: 10px;
}
.pay-method{
.li{
cursor: pointer;
&:nth-child(1){
.icon{
width: 25px;
height: 25px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/36ab2af8e8c7a20bff0d0d8ab926ac15.png);
background-size: 100% 100%;
}
&.active{
.icon{
background: url(https://zws-imgs-pub.ezijing.com/static/public/43ef4cf31c815154f751631db5d14ae7.png);
background-size: 100% 100%;
}
}
}
&:nth-child(2){
margin-top: 15px;
.icon{
width: 26px;
height: 23px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/166a68450955d55376ce1e6295f2dac9.png);
background-size: 100% 100%;
}
&.active{
.icon{
background: url(https://zws-imgs-pub.ezijing.com/static/public/e7db788a3194460535d6543cc358a5f5.png);
background-size: 100% 100%;
}
}
}
display: flex;
align-items: center;
.icon{
margin-right: 13px;
}
.text{
font-size: 16px;
color: #999999;
line-height: 22px;
}
}
}
}
.pay-btn{
width: 120px;
height: 38px;
background: #C01540;
border-radius: 2px;
margin: 28px 0 0 91px;
color: #fff;
text-align: center;
line-height: 38px;
cursor: pointer;
}
.tips-text{
font-size: 14px;
color: #BF1A09;
line-height: 20px;
margin-top: 15px;
}
}
}
</style>
......@@ -61,10 +61,10 @@
<el-form-item label="发票内容" id="sh" label-width="110px">
<el-input v-model="form.invoice_detail" readonly></el-input>
</el-form-item>
<el-form-item label="手机号码" label-width="110px">
<el-form-item label="手机号码" label-width="110px" v-if="!isLogin">
<el-input v-model="form.mobile"></el-input>
</el-form-item>
<el-form-item label="验证码" label-width="110px">
<el-form-item label="验证码" label-width="110px" v-if="!isLogin">
<el-input style="width: 166px" v-model="form.checked_code"></el-input>
<el-button
style="border-radius: 3px; width: 118px"
......@@ -106,17 +106,20 @@
</el-form-item>
</el-form>
</div>
<pay-pop v-if="isPayPopShow" @closePayPop="closePayPop" class="payPop"/>
</div>
</template>
<script>
import action from '@action'
import breadcrumb from '@/components/breadcrumb'
import payPop from './components/payPop'
const IDCARD_REG = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/
const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
const EMAIL_REG = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
export default {
components: {
breadcrumb
breadcrumb,
payPop
},
data() {
return {
......@@ -148,10 +151,23 @@ export default {
mobile: '',
checked_code: ''
},
isBtnDisabled: false
isBtnDisabled: false,
isPayPopShow: false,
isLogin: false
}
},
created() {
action.articleAction.getUserInfo().then(res => {
if (res && res.code === 0) {
this.isLogin = true
}
})
},
mounted() {
if (this.isLogin) {
this.form.mobile = '13111111111'
this.form.checked_code = '1234'
}
// $('#name label').html('姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名')
$('#sex label').html('性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别')
$('#mz label').html('民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族')
......@@ -161,6 +177,9 @@ export default {
// $('#sh label').html('税&nbsp;&nbsp;&nbsp;号')
},
methods: {
closePayPop() {
this.isPayPopShow = false
},
/* onSubmit() {
let flag = true
Object.keys(this.form).map(item => {
......@@ -239,25 +258,53 @@ export default {
})
.catch(err => {
}) */
// 登录了走报名表单 没有登录走注册登录后再走报名表单
if (this.isLogin) {
this.sendEnrollInfo()
.then(res => this.defaultRegister())
.then(res => {
this.message('报名信息提交成功!','success', 6000)
setTimeout(() => {
this.message('手机号注册成功!','success', 6000)
}, 300)
this.message('报名信息修改成功!','success', 6000)
// setTimeout(() => {
// this.message('手机号注册成功!','success', 6000)
// }, 300)
})
.catch(error => {
if (error && error.type === 'register') {
this.message('报名信息提交成功!','success', 6000)
setTimeout(() => {
this.message('注册失败,' + error.msg + ',请重新注册','error', 6000)
}, 300)
// this.message('报名信息提交成功!','success', 6000)
// setTimeout(() => {
// this.message('注册失败,' + error.msg + ',请重新注册','error', 6000)
// }, 300)
} else {
let errorMsg = error.msg || ''
this.message('报名信息提交失败!' + errorMsg,'error', 6000)
}
})
} else {
this.defaultRegister().then(res => {
this.message('报名信息提交成功!','success', 6000)
setTimeout(() => {
this.$router.go(0)
}, 1000)
})
// this.sendEnrollInfo()
// .then(res => this.defaultRegister())
// .then(res => {
// this.message('报名信息提交成功!','success', 6000)
// setTimeout(() => {
// this.message('手机号注册成功!','success', 6000)
// }, 300)
// })
// .catch(error => {
// if (error && error.type === 'register') {
// this.message('报名信息提交成功!','success', 6000)
// setTimeout(() => {
// this.message('注册失败,' + error.msg + ',请重新注册','error', 6000)
// }, 300)
// } else {
// let errorMsg = error.msg || ''
// this.message('报名信息提交失败!' + errorMsg,'error', 6000)
// }
// })
}
}
},
sendEnrollInfo() {
......@@ -321,16 +368,48 @@ export default {
}, 1000)
},
defaultRegister() {
// let param = {
// account: this.form.mobile,
// code: this.form.checked_code,
// username: this.randomNickname(),
// password: '123456',
// secret: true,
// service: 'sofia.ezijing.com'
// }
// let promise = new Promise((resolve, reject) => {
// action.articleAction.register(param).then(res => {
// if (res && res.code === 0) {
// //code: 0注册成功 5已注册
// resolve({
// type: 'register',
// state: 'success',
// msg: 'success'
// })
// } else if (res && res.code === 5) {
// reject({
// type: 'register',
// state: 'fail',
// msg: res.msg || '此手机号已经被注册'
// })
// } else {
// reject({
// type: 'register',
// state: 'fail',
// msg: res.msg || '注册失败'
// })
// }
// })
// })
let param = {
account: this.form.mobile,
mobile: this.form.mobile,
code: this.form.checked_code,
username: this.randomNickname(),
password: '123456',
secret: true,
service: 'sofia.ezijing.com'
// password: '123456',
// secret: true,
// service: 'sofia.ezijing.com'
}
let promise = new Promise((resolve, reject) => {
action.articleAction.register(param).then(res => {
action.articleAction.register2(param).then(res => {
if (res && res.code === 0) {
//code: 0注册成功 5已注册
resolve({
......@@ -429,4 +508,13 @@ export default {
}
}
}
.payPop{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba( #000000, .5);
z-index: 9999;
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论