Skip to content

G
gdtel-gztel-school-center-ui
Commit 5784846f by 黄森林
Options

app开发

parent b2eb9a3c
Showing with 149 additions and 10 deletions
src/config/router.config.js
...@@ -74,6 +74,11 @@ export const asyncRouterMap = [{ ...@@ -74,6 +74,11 @@ export const asyncRouterMap = [{
path: 'readAgree', path: 'readAgree',
name: 'readAgree', name: 'readAgree',
component: () => import('@views/hhr-view/newpackage/readAgree.vue') component: () => import('@views/hhr-view/newpackage/readAgree.vue')
},
{
path: 'welfareScheme',
name: 'welfareScheme',
component: () => import('@views/hhr-view/packageUpgrade/welfareScheme.vue')
} }
] ]
} }
......
src/views/hhr-view/packageUpgrade/packageUpgrade.vue
...@@ -2,8 +2,10 @@ ...@@ -2,8 +2,10 @@
<div style="position:relative "> <div style="position:relative ">
<img src="/picture/hhr/yrym-ruanyan-adv-bg.jpg" style="width: 100%; float: right"> <img src="/picture/hhr/yrym-ruanyan-adv-bg.jpg" style="width: 100%; float: right">
<img src="/picture/hhr/kefu.png" style="width: 10%;position:fixed ;right: 15px;top: 15px" @click="showPopup"> <img src="/picture/hhr/kefu.png" style="width: 10%;position:fixed ;right: 15px;top: 15px" @click="showPopup">
<div style="height: 700px;"></div>
<div style="font-size: 28px;text-align: center;background: white;position:fixed ;bottom: 0px;width: 100%" class="van-hairline--surround"> <div style="font-size: 28px;text-align: center;background: white;position:fixed ;bottom: 0px;width: 100%" class="van-hairline--surround">
<div v-show="inQuery">
<van-button loading type="info" loading-text="查询中..." />
</div>
<div style="width: 90%;margin-left: 5%"> <div style="width: 90%;margin-left: 5%">
<van-cell-group > <van-cell-group >
<van-field v-model="value" placeholder="身份证/手机号/宽带账号"/> <van-field v-model="value" placeholder="身份证/手机号/宽带账号"/>
...@@ -25,7 +27,7 @@ ...@@ -25,7 +27,7 @@
</van-popup> </van-popup>
</div> </div>
<div v-show="show"> <div v-show="show">
<van-popup v-model="show" style="width: 70%;height: 13%; display: flex; align-items: center;justify-content: center;"> <van-popup v-model="show" style="width: 70%;height: 16%; display: flex; align-items: center;justify-content: center;">
<div style=" background-image: url('./picture/hhr/div-tips-dialog.png'); <div style=" background-image: url('./picture/hhr/div-tips-dialog.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
...@@ -39,23 +41,26 @@ ...@@ -39,23 +41,26 @@
<van-popup v-model="duanxing" <van-popup v-model="duanxing"
style="width: 80%;height: 30%; display: flex; align-items: center;justify-content: center;"> style="width: 80%;height: 30%; display: flex; align-items: center;justify-content: center;">
<div> <div>
<div style="font-size: 20px; color: black;text-align: center;position: fixed;top: 3px;margin: 0px 0px 20px 0px;">{{yanzhengma}}</div> <div style="font-size: 20px; color: black;text-align: center;position: fixed;top: 3px;margin: 0px 0px 20px 0px;">{{phone}}</div>
<div style="margin: 50px 0px 0px 0px;"> <div style="margin: 50px 0px 0px 0px;width: 90%;margin-left: 5%">
<van-field <van-field
center center
clearable clearable
placeholder="请输入短信验证码" placeholder="请输入短信验证码"
style="width: 100%;height: 30%;" style="width: 100%;height: 30%;"
v-model="yanzhengma"
> >
<van-button slot="button" size="small" type="info" <van-button slot="button" size="small" type="info"
@click.stop.prevent="getCode" @click.stop.prevent="getCode"
>{{codeMsg}} >{{codeMsg}}
</van-button> </van-button>
</van-field> </van-field>
<div v-show="prompt" style="color:red;font-size: 20px; color: red;text-align: center;">
验证码有误
</div>
<van-button round block type="info" native-type="submit" @click="welfareScheme">
<van-button round block type="info" native-type="submit">
确认 确认
</van-button> </van-button>
</div> </div>
...@@ -78,6 +83,8 @@ ...@@ -78,6 +83,8 @@
name: "packageUpgrade", name: "packageUpgrade",
data() { data() {
return { return {
inQuery:false,
prompt:false,
value: '', value: '',
countdown: 0,// 倒计时秒数 countdown: 0,// 倒计时秒数
codeMsg: '获取验证码', // 按钮上的文字 codeMsg: '获取验证码', // 按钮上的文字
...@@ -91,6 +98,7 @@ ...@@ -91,6 +98,7 @@
sm: { span: 10 }, sm: { span: 10 },
}, },
yanzhengma: '', yanzhengma: '',
phone: '',
kefushow: false, kefushow: false,
show: false, show: false,
duanxing: false duanxing: false
...@@ -130,13 +138,19 @@ ...@@ -130,13 +138,19 @@
if (this.value == "") { if (this.value == "") {
return; return;
} else { } else {
this.inQuery=true
let selectOrder = this.value; let selectOrder = this.value;
if(this.countdown!=0){
this.inQuery=false
this.duanxing = true;
}else {
sendVerificationCode({selectOrder}).then(res => { sendVerificationCode({selectOrder}).then(res => {
this.inQuery=false
if (res.state == 'error'){ if (res.state == 'error'){
this.show=true; this.show=true;
}else { }else {
this.duanxing = true; this.duanxing = true;
this.yanzhengma=res.data this.phone=res.data
//初始化倒计时 //初始化倒计时
this.countdown=60; this.countdown=60;
this.timer = setInterval(() => { this.timer = setInterval(() => {
...@@ -153,7 +167,7 @@ ...@@ -153,7 +167,7 @@
} }
}, 1000) }, 1000)
} }
}) })}
} }
}, },
...@@ -164,9 +178,23 @@ ...@@ -164,9 +178,23 @@
this.kefushow = true this.kefushow = true
} }
}, },
duanxings(){ welfareScheme(){
if(this.yanzhengma==''){
return;
}
let selectOrder = this.value;
let verificationCode = this.yanzhengma
selectPackage({selectOrder,verificationCode}).then(res => {
if (res.state == 'error'){
this.prompt=true;
}else {
this.$router.push({
path: 'welfareScheme',
})
}
})
}, }
} }
} }
</script> </script>
......
src/views/hhr-view/packageUpgrade/welfareScheme.vue 0 → 100644
<template>
<div style="background-image: url('./picture/hhr/01.jpg');
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 150%; position:relative">
<div style="height:70px"></div>
<img src="/picture/hhr/kefu.png" style="width: 10%;position:fixed ;right: 15px;top: 15px" @click="showPopup">
<div style="background: white;" >
<div style="padding-top:20px">
<van-divider :style="{ borderColor: '#1989fa', padding: '0 16px' }">
<div style="font-size: 22px"> 福利方案</div>
</van-divider>
</div>
<div style="text-align: center;height:100%;margin: 10px 10px 10px 10px;background-color: rgba(128, 128, 128, 0.09);background:#adadad">
<div style=" border-bottom:2px solid green;font-size: 22px">
<van-row>
<van-col span="8"></van-col>
<van-col span="8">原套餐<br>(daiding)</van-col>
<van-col span="8">新套餐<br>(daiding)</van-col>
</van-row>
</div>
<div style=" border-bottom:2px solid green;font-size: 22px">
<van-row>
<van-col span="8">月租</van-col>
<van-col span="8">{{package}}</van-col>
<van-col span="8">(daiding)</van-col>
</van-row>
</div>
<div style=" border-bottom:2px solid green;font-size: 22px">
<van-row>
<van-col span="8">套餐</van-col>
<van-col span="8">(daiding)</van-col>
<van-col span="8">(daiding)</van-col>
</van-row>
</div>
<div style=" border-bottom:2px solid green;font-size: 22px">
<van-row>
<van-col span="8">语音</van-col>
<van-col span="8">(daiding)</van-col>
<van-col span="8">(daiding)</van-col>
</van-row>
</div>
<div style=" border-bottom:2px solid green;font-size: 22px">
<div style="margin: 10px 10px 10px 10px;">
<van-checkbox v-model="checked" shape="square">复选框</van-checkbox>
</div>
</div>
</div>
</div>
<div style="font-size: 28px;text-align: center;background: white;position:fixed ;bottom: 0px;width: 100%" class="van-hairline--surround">
<div style="width: 90%;margin-left: 5%;margin: 20px 5% 20px 5%;">
<van-button round block type="info" native-type="submit" @click="selectPackage">马上办理</van-button>
</div>
</div>
<div v-show="kefushow">
<van-popup v-model="kefushow"
style="width: 90%;height: 45%; display: flex; align-items: center;justify-content: center;">
<div style="border: 1px solid #e2e2e2;width: 92%;height: 90%;position: fixed;display: flex; align-items: center;justify-content: center;">
<div style="font-size: 20px; color: black;text-align: center;position: fixed;top: 3px">您的专属客服</div>
<img src="/picture/hhr/service-qrcode.jpg" style="width:55%;">
</div>
</van-popup>
</div>
</div>
</template>
<script>
import {selectPackage,sendVerificationCode} from "@/api/app/package"
import Vue from 'vue';
import {Field} from 'vant';
export default {
name: "packageUpgrade",
package:'',
data() {
return {
phone: '',
kefushow: false,
};
},
methods: {
selectPackage() {
},
showPopup() {
if(this.kefushow == true){
this.kefushow = false
}else {
this.kefushow = true
}
},
}
}
</script>
<style scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment