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 = [{
path: 'readAgree',
name: 'readAgree',
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 @@
<div style="position:relative ">
<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">
<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 v-show="inQuery">
<van-button loading type="info" loading-text="查询中..." />
</div>
<div style="width: 90%;margin-left: 5%">
<van-cell-group >
<van-field v-model="value" placeholder="身份证/手机号/宽带账号"/>
......@@ -25,7 +27,7 @@
</van-popup>
</div>
<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');
background-repeat: no-repeat;
background-size: 100%;
......@@ -39,23 +41,26 @@
<van-popup v-model="duanxing"
style="width: 80%;height: 30%; display: flex; align-items: center;justify-content: center;">
<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
center
clearable
placeholder="请输入短信验证码"
style="width: 100%;height: 30%;"
v-model="yanzhengma"
>
<van-button slot="button" size="small" type="info"
@click.stop.prevent="getCode"
>{{codeMsg}}
</van-button>
</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">
<van-button round block type="info" native-type="submit" @click="welfareScheme">
确认
</van-button>
</div>
......@@ -78,6 +83,8 @@
name: "packageUpgrade",
data() {
return {
inQuery:false,
prompt:false,
value: '',
countdown: 0,// 倒计时秒数
codeMsg: '获取验证码', // 按钮上的文字
......@@ -91,6 +98,7 @@
sm: { span: 10 },
},
yanzhengma: '',
phone: '',
kefushow: false,
show: false,
duanxing: false
......@@ -130,13 +138,19 @@
if (this.value == "") {
return;
} else {
this.inQuery=true
let selectOrder = this.value;
if(this.countdown!=0){
this.inQuery=false
this.duanxing = true;
}else {
sendVerificationCode({selectOrder}).then(res => {
this.inQuery=false
if (res.state == 'error'){
this.show=true;
}else {
this.duanxing = true;
this.yanzhengma=res.data
this.phone=res.data
//初始化倒计时
this.countdown=60;
this.timer = setInterval(() => {
......@@ -153,7 +167,7 @@
}
}, 1000)
}
})
})}
}
},
......@@ -164,9 +178,23 @@
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>
......
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