Skip to content

G
gdtel-gztel-school-center-ui
Commit aa8c8085 by 董有沛
Options

Merge branch 'master' of http://172.18.101.172:9091/dedema/school-center-ui

parents b8637d09 50e11ce8
Showing with 800 additions and 666 deletions
src/components/tools/UserPassword.vue
...@@ -20,23 +20,6 @@ ...@@ -20,23 +20,6 @@
<a-form-item <a-form-item
:labelCol="labelCol" :labelCol="labelCol"
:wrapperCol="wrapperCol" :wrapperCol="wrapperCol"
label="验证码">
<a-input
v-decorator="['inputCode',validatorRules.inputCode]"
type="text"
placeholder="请输入验证码">
</a-input>
<a-button
type="primary"
htmlType="submit"
@click.stop.prevent="getCode"
>{{codeMsg}}
</a-button>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="新密码"> label="新密码">
<a-input type="password" placeholder="请输入新密码" v-decorator="[ 'newPwd', validatorRules.newPwd]"/> <a-input type="password" placeholder="请输入新密码" v-decorator="[ 'newPwd', validatorRules.newPwd]"/>
</a-form-item> </a-form-item>
...@@ -107,35 +90,6 @@ ...@@ -107,35 +90,6 @@
} }
}, },
methods: { methods: {
getCode() {
// 验证码60秒倒计时
if (!this.timer) {
postAction(this.codeurl).then((res)=>{
if (res.code==200){
this.$notification.success({
message: res.data,
});
return null;
}
this.$notification.error({
message: res.data,
});
})
this.timer = setInterval(() => {
if (this.countdown > 0 && this.countdown <= 60) {
this.countdown--;
if (this.countdown !== 0) {
this.codeMsg = "重新发送(" + this.countdown + ")";
} else {
clearInterval(this.timer);
this.codeMsg = "获取验证码";
this.countdown = 60;
this.timer = null;
}
}
}, 1000)
}
},
//密码加密 //密码加密
getPass(text){ getPass(text){
/*let keyss = setMaxDigits(130); /*let keyss = setMaxDigits(130);
...@@ -180,11 +134,11 @@ ...@@ -180,11 +134,11 @@
that.confirmLoading = true; that.confirmLoading = true;
values.oldPwd=encodeURIComponent(this.getPass(values.oldPwd)) values.oldPwd=encodeURIComponent(this.getPass(values.oldPwd))
values.newPwd=encodeURIComponent(this.getPass(values.newPwd)) values.newPwd=encodeURIComponent(this.getPass(values.newPwd))
values.inputCode=encodeURIComponent(this.getPass(values.inputCode)) values.inputCode=encodeURIComponent(this.getPass("XXXXXX"))
values.rePwd=values.newPwd values.rePwd=values.newPwd
let params = Object.assign(values) let params = Object.assign(values)
postAction(this.url,params).then((res)=>{ postAction(this.url,params).then((res)=>{
if(res.code){ if(res.code!=200){
that.$message.error(res.message); that.$message.error(res.message);
that.close(); that.close();
}else{ }else{
......
src/config/router.config.js
...@@ -16,11 +16,6 @@ export const asyncRouterMap = [{ ...@@ -16,11 +16,6 @@ export const asyncRouterMap = [{
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login') component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
}, },
{ {
path: 'register',
name: 'register',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/register')
},
{
path: 'ueditor2', path: 'ueditor2',
name: 'ueditor2', name: 'ueditor2',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/ueditor2') component: () => import(/* webpackChunkName: "user" */ '@/views/user/ueditor2')
...@@ -46,9 +41,14 @@ export const asyncRouterMap = [{ ...@@ -46,9 +41,14 @@ export const asyncRouterMap = [{
component: () => import('@views/hhr-view/newpackage/newPackageTips.vue') component: () => import('@views/hhr-view/newpackage/newPackageTips.vue')
}, },
{ {
path: 'orderNewCar', path: 'newPackageTips',
name: 'orderNewCar', name: 'newPackageTips',
component: () => import('@views/hhr-view/newpackage/orderNewCar.vue') component: () => import('@views/hhr-view/newpackage/newPackageTips.vue')
},
{
path: 'chooseCard',
name: 'chooseCard',
component: () => import('@views/hhr-view/newpackage/chooseCard.vue')
}, },
{ {
path: 'danKuan', path: 'danKuan',
...@@ -64,6 +64,16 @@ export const asyncRouterMap = [{ ...@@ -64,6 +64,16 @@ export const asyncRouterMap = [{
path: 'packageUpgrade', path: 'packageUpgrade',
name: 'packageUpgrade', name: 'packageUpgrade',
component: () => import('@views/hhr-view/packageUpgrade/packageUpgrade.vue') component: () => import('@views/hhr-view/packageUpgrade/packageUpgrade.vue')
},
{
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/hhrCustomer.vue
...@@ -39,13 +39,16 @@ ...@@ -39,13 +39,16 @@
<div style="background-image: url('./picture/hhr/b2.png');width: 256px; height: 64px;margin: 20px auto; background-repeat: no-repeat;background-size: 100%;" @click="rongHe"></div> <div style="background-image: url('./picture/hhr/b2.png');width: 256px; height: 64px;margin: 20px auto; background-repeat: no-repeat;background-size: 100%;" @click="rongHe"></div>
<div style="height: 250px"></div> <div style="height: 250px"></div>
</div> </div>
<van-popup v-model="kefushow" style="width: 90%;height: 45%; display: flex; align-items: center;justify-content: center;">
<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="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> <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%;" > <img src="/picture/hhr/service-qrcode.jpg" style="width:55%;" >
</div> </div>
</van-popup> </van-popup>
</div> </div>
</div>
</template> </template>
......
src/views/hhr-view/newpackage/chooseCard.vue 0 → 100644
<template>
<div class="div-bg">
<div style="display: flex; ">
<img src="/picture/hhr/kefu.png" style="width: 10%;position:fixed ;right: 15px;top: 15px"
@click="showPopup">
</div>
<div class="div-pkg-card-top">
<div class="div-pkg-cards">
<div class="div-pkg-card">
<div class="div-pkg-fee">
<img src="/picture/hhr/pkg-fee-tag.png" height="36px" style="margin-top: -5px;">
<div class="div-pkg-fee-font">
10元/月
</div>
</div>
<img class="pkg-logo" src="/picture/hhr/xueshengzhenglog.png">
<div class="pkg-explain">10元/月</div>
<div class="div-pkg-btns">
<div id="btn-details"><a href="/gdtel-xyzx-hhr/customer/index.do?id=11519&amp;cardId=49">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div>
<div class="btns-split">&nbsp;</div>
<div id="btn-dopay"><a href="/gdtel-xyzx-hhr/customer/create.do?id=11519&amp;cardId=49">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div>
</div>
</div>
</div>
<div class="div-pkg-cards">
<div class="div-pkg-card">
<div class="div-pkg-fee">
<img src="/picture/hhr/pkg-fee-tag.png" height="36px" style="margin-top: -5px;">
<div class="div-pkg-fee-font">
28元/月
</div>
</div>
<img class="pkg-logo" src="/picture/hhr/heiniuka.png">
<div class="pkg-explain">30G国内+40G定向大流量</div>
<div class="div-pkg-btns">
<div id="btn-details"><a href="/gdtel-xyzx-hhr/customer/index.do?id=11519&amp;cardId=49">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div>
<div class="btns-split">&nbsp;</div>
<div id="btn-dopay"><a href="/gdtel-xyzx-hhr/customer/create.do?id=11519&amp;cardId=49">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div>
</div>
</div>
</div>
<div class="div-pkg-cards">
<div class="div-pkg-card">
<div class="div-pkg-fee">
<img src="/picture/hhr/pkg-fee-tag.png" height="36px" style="margin-top: -5px;">
<div class="div-pkg-fee-font">
28元/月
</div>
</div>
<img class="pkg-logo" src="/picture/hhr/heiniuka.png">
<div class="pkg-explain">30G国内+40G定向大流量</div>
<div class="div-pkg-btns">
<div id="btn-details"><a href="/gdtel-xyzx-hhr/customer/index.do?id=11519&amp;cardId=49">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div>
<div class="btns-split">&nbsp;</div>
<div id="btn-dopay"><a href="/gdtel-xyzx-hhr/customer/create.do?id=11519&amp;cardId=49">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div>
</div>
</div>
</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>
export default {
name: "chooseCard",
data(){
return{
kefushow:false
}
},
methods:{
showPopup(){
this.kefushow=true
},
}
}
</script>
<style scoped>
.div-bg {
background-image: url(/picture/hhr/01.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 100%;
border: 0;
overflow-y: scroll;
}
.div-pkg-cards {
position: relative;
margin-top: 20px;
margin-bottom: 20px;
}
#btn-dopay {
width: 49.5%;
float: right;
height: 100%;
text-align: center;
background-image: url(/picture/hhr/btn_choosecard_dopay.png);
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
}
.btns-split {
width: 1px;
float: left;
background-color: rgb(110, 126, 190);
height: 100%;
}
#btn-details {
width: 49.5%;
float: left;
height: 100%;
text-align: center;
border-top: 1px;
background-image: url(/picture/hhr/btn_choosecard_details.png);
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
}
.div-pkg-btns {
position: absolute;
width: 80%;
height: 50px;
line-height: 50px;
bottom: 0;
border-color: rgb(110, 126, 190);
border-style: solid;
border-top-width: 1px;
border-left-width: 0;
border-right-width: 0;
border-bottom-width: 0;
}
.pkg-explain {
float: left;
padding: 10px;
width: 60%;
font-size: 16px;
color: black;
}
.pkg-logo {
width: 128px;
max-height: 50px;
margin: 10px;
float: left;
}
.div-pkg-card-top {
margin-top: 20%;
}
.div-pkg-card {
width: 80%;
height: 180px;
margin: auto;
margin-top: 30px;
border-radius: 10px;
background-color: rgb(191, 220, 252);
box-shadow: #4962bd 10px 10px;
background-image: url(/picture/hhr/sim-bg.png);
background-repeat: no-repeat;
background-size: 90px;
background-position: 90% 50%;
}
.div-pkg-fee-font {
background-color: rgb(248, 204, 70);
display: inline-block;
line-height: 36px;
height: 100%;
font-size: 18px;
font-weight: bold;
color: black;
}
.div-pkg-fee {
float: right;
margin-top: 20px;
padding-right: 0;
height: 36px;
}
</style>
src/views/hhr-view/newpackage/newPackageTips.vue
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<div style="position:fixed ;bottom: 0px;width: 100%"> <div style="position:fixed ;bottom: 0px;width: 100%">
<van-button type="info" :round="true" size="large" @click="ordercar">我要领卡</van-button> <van-button type="info" :round="true" size="large" @click="ordercar">我要领卡</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;"> <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="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> <div style="font-size: 20px; color: black;text-align: center;position: fixed;top: 3px">您的专属客服</div>
...@@ -12,6 +13,8 @@ ...@@ -12,6 +13,8 @@
</div> </div>
</van-popup> </van-popup>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -28,7 +31,7 @@ ...@@ -28,7 +31,7 @@
this.kefushow=true this.kefushow=true
}, },
ordercar(){ ordercar(){
this.$router.push({path: 'orderNewCar'}) this.$router.push({path: 'chooseCard'})
} }
} }
} }
......
src/views/hhr-view/newpackage/orderNewCar.vue
<template> <template>
<div style="position:fixed"> <div style=" background-image: url('./picture/hhr/01.jpg');
<img src="/picture/hhr/01.jpg" style="width: 100%; float: right"> background-repeat: no-repeat;
<img src="/picture/hhr/kefu.png" style="width: 10%;position:fixed ;right: 5%;top: 3%" @click="showPopup"> background-size: 100%;
<span style="width: 20%;position:fixed ;right: -2%;top: 8%;font-size: 13px">联系客服</span> width: 100%;
<img src="/picture/hhr/question.png" style="width: 10%;position:fixed ;right: 22%;top: 3%"> height: 150%; position:relative">
<span style="width: 20%;position:fixed ;right: 15%;top: 8%;font-size: 13px">常见问题</span> <div style="display: flex; ">
<div style="position:fixed;top: 11%;width: 100%;background-color: white;"> <img src="/picture/hhr/question.png" style="width: 10%;margin-left: 70%;margin-top: 5%">
<div style="padding-left: 12px;padding-top: 20px ;color: black;text-align: left;width: 100%;height: 20%;line-height: 10px"> <img src="/picture/hhr/kefu.png" style="width: 10%;margin-left: 5%;margin-top: 5%" @click="showPopup">
</div>
<div style="display: flex; ">
<p style="width: 20%;font-size: 13px;margin-left: 65%;">常见问题</p>
<p style="width: 20%;font-size: 13px;">联系客服</p>
</div>
<div style="width: 100%;background-color: white;line-height: 13px;font-size: 13px;">
<div style="padding-top: 5%;padding-left: 5%">
<div style="width: 15%;height: 80px;float: left; margin-right: 10px"> <div style="width: 15%;height: 80px;float: left; margin-right: 10px">
<img src="/picture/hhr/sim-bg.png" style="width: 100%;"> <img src="/picture/hhr/sim-bg.png" style="width: 100%;">
</div> </div>
<p >天翼学生证</p> <p style="font-weight: 900" >天翼学生证</p>
<p >10元/月</p> <p style="font-weight: 900">10元/月</p>
<p style="color: red">适用于中小学生,号码卡将统一配送至学生</p> <p style="color: red">适用于中小学生,号码卡将统一配送至学生</p>
<p style="color: red"> 所在学校,由学校发放给学生。</p> <p style="color: red"> 所在学校,由学校发放给学生。</p>
</div> </div>
<h2 style ="font-weight:900" >
<div style="border-top:1px solid #e2e2e2; margin-top: 35px">
<h2 style ="font-weight:900;font-size: 20px;margin-top: -10px;margin-left:10% " >
请填写有效信息 请填写有效信息
</h2> </h2>
</div>
<!-- 领卡表单部分-->
<div>
<van-cell-group> <van-cell-group>
<van-field left-icon="user-o" label="学生姓名" v-model="value" placeholder="请输入用户名" /> <van-field left-icon="user-o" label="学生姓名" v-model="value" placeholder="请输入用户名" />
<van-field left-icon="user-o" label="学校" v-model="value" placeholder="请输入9月开学时就读的院校名称" /> <van-field left-icon="location-o" label="学校" v-model="value" placeholder="请输入9月开学时就读的院校名称" />
<van-field <van-field
left-icon="user-o" left-icon="location-o"
readonly readonly
clickable clickable
name="area" name="area"
...@@ -38,26 +50,62 @@ ...@@ -38,26 +50,62 @@
@cancel="showArea = false" @cancel="showArea = false"
/> />
</van-popup> </van-popup>
<van-field left-icon="user-o" label="班级" v-model="value" placeholder="请输入学生所属班级" /> <van-field left-icon="contact" label="班级" v-model="value" placeholder="请输入学生所属班级" />
<van-field left-icon="user-o" label="学号" v-model="value" placeholder="请输入学生学号" /> <van-field left-icon="contact" label="学号" v-model="value" placeholder="请输入学生学号" />
<van-field left-icon="user-o" label="家长名称" v-model="value" placeholder="请输入家长名称" /> <van-field left-icon="friends-o" label="家长名称" v-model="value" placeholder="请输入家长名称" />
<van-field left-icon="user-o" label="家长身份证" v-model="value" placeholder="请输入家长身份证" /> <van-field left-icon="phone-o" label="家长联系号码" v-model="value" placeholder="请输入家长联系号码" />
<van-field left-icon="user-o" label="备注" v-model="value" placeholder="请输入备注" /> <van-field left-icon="other-pay" label="家长身份证" v-model="value" placeholder="请输入家长身份证" />
<van-field left-icon="records" label="备注" v-model="value" placeholder="请输入备注" />
</van-cell-group> </van-cell-group>
<h2 style="margin-top: 20px">请家长持本人以下证件拍照上传，16岁以上学生可学生本人拍照上传</h2> </div>
<div style="line-height: 20px;margin-left:10%;margin-top: 3%;width: 90%">
<h2 style ="font-weight:900;font-size: 20px;">请家长持本人以下证件拍照上传，16岁以上学生可学生本人拍照上传</h2>
</div>
<p style="color: red;width: 95%;margin: auto;line-height: 18px">根据工信部令第25号规定，用户预受理电信业务需上传身份证国徽照、人像照、半身照三张照片。系统需对您上传的三张照片进行身份证资料核验，成功提交后系统会自动给您发送短信，您可通过短信中的链接查询审核状态，请您耐心等待系统核验结果，谢谢。</p>
<van-grid :border="false" :column-num="3"> <van-grid :border="false" :column-num="3">
<van-grid-item @click="tips"> <van-grid-item @click="tips(1)">
<div v-show="uploadFileshow.zmian">
<img id='img_imgfilezmian' style="width: 80%">
</div>
<div v-show="!uploadFileshow.zmian">
<van-image src="/picture/hhr/upload01.png" /> <van-image src="/picture/hhr/upload01.png" />
</div>
</van-grid-item > </van-grid-item >
<van-grid-item @click="tips"> <van-grid-item @click="tips(2)">
<div v-show="uploadFileshow.fmina">
<img id='img_imgfilefmina' style="width: 80%">
</div>
<div v-show="!uploadFileshow.fmina">
<van-image src="/picture/hhr/upload02.png" /> <van-image src="/picture/hhr/upload02.png" />
</div>
</van-grid-item > </van-grid-item >
<van-grid-item @click="tips"> <van-grid-item @click="tips(3)">
<div v-show="uploadFileshow.txiang">
<img id='img_imgfiletxiang' style="width: 80%">
</div>
<div v-show="!uploadFileshow.txiang">
<van-image src="/picture/hhr/upload03.png" /> <van-image src="/picture/hhr/upload03.png" />
</div>
</van-grid-item> </van-grid-item>
</van-grid> </van-grid>
<div style="height: 130px" >
</div>
</div>
<!-- 领卡确认部分-->
<div style="background-color:white;position: fixed;bottom: 0%;width: 100%">
<div style="margin-left: 8%;font-size: 16px;text-align:left">
<span>
<div style="width: 100%;display: flex;padding-top: 2%">
<van-checkbox v-model="Agree" shape="square" style="width: 13%" checked-color="#07c160">
</van-checkbox>
<span >同意 <a @click="readagreeurl">《中国电信股份有限公司广州分公司全业务服务协议》 </a>内容</span>
</div>
</span>
</div>
<div style="width: 80%;margin-left: 10%;margin-top: 5%;margin-bottom: 2%">
<van-button :round="true" size="large" type="info">马上领卡</van-button>
</div>
</div> </div>
<van-popup v-model="kefushow" style="width: 90%;height: 45%; display: flex; align-items: center;justify-content: center;"> <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="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> <div style="font-size: 20px; color: black;text-align: center;position: fixed;top: 3px">您的专属客服</div>
...@@ -65,9 +113,29 @@ ...@@ -65,9 +113,29 @@
</div> </div>
</van-popup> </van-popup>
<div>
<van-dialog v-model="sfzshow.zmian" :before-close="closeOnClickOverlay1" :closeOnClickOverlay="true" >
<h2 style="font-weight: 900;text-align: center;margin-top: 5%">证件上传示例</h2>
<img src="/picture/hhr/backidcard.jpg" style="width: 100%">
<p style="text-align: center;">注意照片亮度均匀、图像清晰</p>
</van-dialog>
</div>
<div>
<van-dialog v-model="sfzshow.fmina" :before-close="closeOnClickOverlay1" :closeOnClickOverlay="true">
<h2 style="font-weight: 900;text-align: center;margin-top: 5%">证件上传示例</h2>
<img src="/picture/hhr/backidcard.jpg" style="width: 100%">
<p style="text-align: center;">注意照片亮度均匀、图像清晰</p>
</van-dialog>
</div>
<div>
<van-dialog v-model="sfzshow.txiang" :before-close="closeOnClickOverlay1" :closeOnClickOverlay="true">
<h2 style="font-weight: 900;text-align: center;margin-top: 5%">拍摄正面自拍照</h2>
<p style="color: red;width: 80%;text-align: center;margin-left: 10%">(请打开摄像头拍摄自拍照上传，不要上传证件照)</p>
<img src="/picture/hhr/hand_idcard.png" style="width: 100%">
<p style="text-align: center;">请在光线较好的环境下拍摄，并露出人像五官，面部无遮挡。</p>
</van-dialog>
</div>
<div v-show="false"><van-uploader id="upload_file" :after-read="afterRead" /> </div>
</div> </div>
</template> </template>
...@@ -79,6 +147,7 @@ ...@@ -79,6 +147,7 @@
name: "orderNewCar", name: "orderNewCar",
data(){ data(){
return{ return{
Agree: false,
kefushow:false, kefushow:false,
list:[1,2], list:[1,2],
value: '', value: '',
...@@ -90,46 +159,45 @@ ...@@ -90,46 +159,45 @@
// 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明 // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
{ url: 'https://cloud-image', isImage: true } { url: 'https://cloud-image', isImage: true }
], ],
sfzshow:false sfzshow:{
zmian:false,
fmina:false,
txiang:false
},
uploadFileshow:{
zmian:false,
fmina:false,
txiang:false
},
uploadstatu:0
} }
} }
, ,
methods:{ methods:{
fileChange(el){ readagreeurl(){
if (!el.target.files[0].size) return;//判断是否有文件数量 this.$router.push({path: 'readAgree'})
this.fileListg(el.target.files);//获取files文件组传入处理
el.target.value = ''//清空val值，以便可以重复添加一张图片
}, },
fileListg(files){ // 选择文件
for (let i = 0; i < files.length; i++) { afterRead(file) {
this.fileAdd(files[i]); let imgurl="img_imgfile"
if (this.uploadstatu==1){
this.uploadFileshow.zmian = true
imgurl=imgurl+'zmian'
} }
}, if (this.uploadstatu==2){
fileAdd(file){ this.uploadFileshow.fmina= true
this.size = this.size + file.size;//总大小 imgurl=imgurl+'fmina'
let reader = new FileReader();
reader.vue = this;
reader.readAsDataURL(file);
reader.onload = function () {
file.src = this.result;
this.vue.imgList.push({
file
});
} }
}, if (this.uploadstatu==3){
bytesToSize(bytes){ this.uploadFileshow.txiang = true
if (bytes === 0) return '0 B'; imgurl=imgurl+'txiang'
let k = 1000, // or 1024 }
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], var img = document.getElementById(imgurl);
i = Math.floor(Math.log(bytes) / Math.log(k)); var reader = new FileReader();
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; reader.onload = function (evt) {
}, img.src = evt.target.result;
handelup(e) { }
document.getElementById('upload_file').click() reader.readAsDataURL(file.file);
},
// 选择文件
afterRead(e) {
console.log("this.$refs.uploader.onChange")
}, },
showPopup(){ showPopup(){
this.kefushow=true this.kefushow=true
...@@ -138,18 +206,30 @@ ...@@ -138,18 +206,30 @@
this.value = values.map(item => item.name).join('/'); this.value = values.map(item => item.name).join('/');
this.showArea = false; this.showArea = false;
}, },
tips(){ tips(val){
Dialog.setDefaultOptions({ if (val==1){
}) this.sfzshow.zmian=true
Dialog.alert({ this.uploadstatu=1
// title: '证件上传示例', }if (val==2){
message: `<div style="font-weight:1000;font-size:12px"> this.sfzshow.fmina=true
<img src="/picture/hhr/idcard.jpg" style="width:100%;height: 100%" > this.uploadstatu=2
<p >注意照片亮度均匀、图像清晰</p> }
</div>` if (val==3){
}).then(() => { this.sfzshow.txiang=true
// on close this.uploadstatu=3
}); }
},
closeOnClickOverlay1(val,done){
for (let keyName in this.sfzshow) {
if (this.sfzshow[keyName] == true) {
this.sfzshow[keyName] = false
break
}
}
if (val=='confirm'){
done();
document.getElementById("upload_file").click();
}
} }
} }
} }
......
src/views/hhr-view/newpackage/readAgree.vue 0 → 100644
<template>
<body>
<div><h1 style=":15pt; margin:0pt; text-align:center"><span
style="background-color:#ffffff; color:#666666; font-family:等线; font-size:15pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">（中国电信股份有限公司广州分公司）</span>
</h1>
<h2 style=":16pt; margin:0pt; text-align:center"><span
style="background-color:#ffffff; color:#666666; font-family:方正黑体_GBK; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">业务服务协议</span>
</h2>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">为维护双方权益，根据相关法律、法规的规定，在平等、自愿、公平、诚实信用的基础上，客户与中国电信股份有限公司广州分公司（以下简称</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">“电信公司”）就电信业务服务的相关事宜达成</span>
</p>
<p style=":12.6pt; margin:0pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">如下协议：</span>
</p>
<h3 style=":36pt; margin:0pt; text-align:center; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">第一条</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">服务范围</span>
</h3>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">1．1电信公司在其通信网络与设施覆盖范围内向客户提供其所选择的电信业务服务，客户按照本协议约定的条件接受服务。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">1．2电信公司在国家核准范围内经营通信业务及其他相关业务，并根据不同业务性质制定相关业务条款与业务规则，客户自愿申请开通电信公司提供的业务并经电信公司受理确认后，双方均受相关业务条款及业务规则的约束。</span>
</p>
<h3 style=":36pt; margin:0pt; text-align:center; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">第二条</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">业务登记</span>
</h3>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">2．1客户进行业务登记时，应提交以下资料：</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">2．1．1个人客户：提供真实有效的本人身份证件原件。委托他人办理业务的，代办人应同时提供委托人、代办人的有效身份证件原件；代办人在此种情况应对代办事务承担连带责任。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">2．1．2单位客户：提供真实有效的本单位注册登记证照资料（复印件应加盖单位公章），并提供经办人有效身份证件原件。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">2．1．3电信公司合理要求的其他有效资料。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">2．2客户使用客户密码通过10000号客户服务热线、网上营业厅、自助服务终端等办理业务时，可以不提供第2·1条中的资料，另有约定除外。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">2．3客户户籍所在地或注册登记地不在本地的，客户应按电信公司要求办理相应担保手续，或者持有效证件办理预付费方式的业务。</span>
</p>
<h3 style=":36pt; margin:0pt; text-align:center; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">第三条</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">客户资料</span>
</h3>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">3．1客户登记办理业务时，应向电信公司提供真实、有效的客户资料，本协议有效期内客户资料变更时应及时按电信公司业务流程规定通知电信公司。若客户提供的资料不真实或无效，则电信公司有权立即终止服务，并解除本协议及根据此类客户资料签订的其他业务协议。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">3．2电信公司对客户资料依法保密，但为建立与客户沟通渠道、改善服务工作、推介业务等，电信公司可以适当使用本协议涉及的客户资料。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">3．3客户密码是客户依据电信公司相关规则设定并用于在10000、营业厅和网上营业厅等渠道办理相关业务的身份确认凭证，凡使用客户密码定制、变更电信业务的行为均被视为客户或客户授权的行为。客户密码是客户的重要资料，客户应及时修改初始密码，并注意保密。客户密码遗失或被盗时，应及时进行修改或挂失。因客户原因造成的客户密码丢失或被他人获取造成的损失，由客户自行承。</span>
</p>
<h3 style=":36pt; margin:0pt; text-align:center; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">第四条</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">业务使用</span>
</h3>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">4．1客户有权自主选择使用电信公司提供的各类电信业务，有权自主选择取得入网许可、与所选择的电信业务相匹配的客户端设备。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">4．2客户使用电信业务时，应遵守国家法律、法规、规章等相关规定。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">4．3未经电信公司同意并办理有关手续，客户将本协议的全部或部分转让给第三方的，对电信公司不发生法律效力。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">4．4本协议终止后，电信公司有权收回客户原使用的业务号码，并在一定期限后分配给其他客户使用。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">4．5客户可自愿订购或退订第三方通过电信公司的通信服务网络平台提供的增值电信应用服务（包括但不限于信息服务）。若客户通过电信公司网络平台定制、收发第三方提供的增值电信应用服务，客户同意电信公司根据该第三方的授权，向客户代收信息费等服务费用。若客户对收取的服务费用有异议，电信公司可协助客户与该第三方协商解决。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">4．6电信公司适时公布客户</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">消费积分及使用业务规则，客户可根据当时业务规则规定享受积分服务和差异化服务。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">4．7电信公司提供客户租用的通信终端设备所有权归电信公司，电信公司提供与业务使用期一致的维护保修服务，客户在使用期间应妥善保护，如有人为损坏，须承担赔偿责任。客户在办理终端设备换装业务或注销所有与该设备相关业务时，应向电信公司归还原终端设备，如归还的终端设备配件不齐全、损坏或不能正常使用，需按相应终端设备的成本价支付违约金。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">4．8山于通信技术特点，通信终端设备在电力中断时无法运行，客户需提供电源保证设备正常使用，以便电信公司提供电话、宽带等相应通信服务。</span>
</p>
<h3 style=":36pt; margin:0pt; text-align:center; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">第五条</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">费用标准和费用交纳</span>
</h3>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">5．1电信公司按照依法确定的资费标准向客户收取电信费用，客户应按约定方式按时、足额支付各项电信费用。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">5．2客户接受服务所产生的各项电信费用由电信公司获入网许可的计费系统实时记录，并作为双方资费结算的依据。话费及相关通信服务费以人民币结算。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">5．3根据选择的电信业务种类，客户按预付费或后付费方式支付电信费用。除特殊约定外，后付费方式下客户按月支付电信费用，计费周期为一个月，根据客户办理入网的情况约定每个计费周期起算时间，具体的计费周期以客户确认的业务受理登记单为准；在当个计费周期内发生的通话、信息、数据通信及其他服务和代收费服务，如因结算时间的延误，未能在当个计费周期内结算的，将顺延到之后的计费周期中结算；计费周期起算之后第5日起的一个月内支付上一计费周期的费用。预付费方式下客户需预存金额，当账户余额不足以支付客户拟使用业务的电信费用时，需及时充值方可使用。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">5．4电信公司可根据客户的电话消费情况约定其话费信用额度，并由电信公司在客户办理电话入网手续时明示或另行告知，客户累计未付的通信费用达到或超出信用额度时，应及时通过付费卡充值、现金交纳或银行划扣分次结算等方式支付通信费用，否则电信公司有权暂停服务（不受约定缴费期限的限制）。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">5．5客户如选择或终止银行托收、银行代扣等方式支付电信费用时，需到银行等托收机构或电信公司营业厅办理相应手续，并将视为电信公司取得客户的合法授权，委托开户银行从客户登记的单位账户或个人银行结算账户（含卡类账户）内以自动转账方式支付客户在电信公司消费的电信费用。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">5．6客户逾期不交纳电信费用的，电信公司有权要求补交，并可以按照所欠费用每日加收3‰的违约金。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">5．7客户在欠费情况下，应补交欠费和相应的违约金后才能办理其它业务。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">5．8如遇国家或电信公司统一调整费用标准的，自国家或电信公司规定的调整时间起按新标准执行。</span>
</p>
<h3 style=":36pt; margin:0pt; text-align:center; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">第六条</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">服务质量与客户服务</span>
</h3>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">6．1电信公司在承诺的网络覆盖范围内，按照国家规定的标准和服务规范向客户提供服务。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">6．2电信公司在营业场所公布电信业务的服务项目、服务时限、服务范围、资费标准、使用规则、交费规定等内容。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">6．3电信公司通过10000号客户服务热线、营业厅、网上营业厅等多种渠道提供业务受理、咨询、查询、障碍申告等服务。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">6．4电信公司负责其提供的网络的安装调测和维护，客户负责自带入网终端设备的安装、调测和维护。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">6．5电信公司在本协议外以公告等书面形式公开做出的服务承诺，自动成为本协议的组成部分，但为客户设定义务或不合理地加重责任的除外。</span>
</p>
<h3 style=":36pt; margin:0pt; text-align:center; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">第七条</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">协议中止和解除</span>
</h3>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">7．1除另有约定外，客户在清偿所有电信费用及相应的违约金后，可以办理业务暂停、注销或过户手续。业务暂停期间需支付有关费用，业务注销、过户后本协议相应解除。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">7．2客户有下列情形之一的，电信公司可以暂停向客户提供本协议约定的部分或全部服务，并收取暂停期间发生的费用：不具备相应法定资格或条件的；提供客户资料不真实或无效的；客户所提供或接入的设备未取得入网许可，或可能影响网络安全或网络服务质量的；未办理相关手续，自行改变电信业务使用性质的；除法律另有规定外，对于后付费业务，未按期足额交纳电信费用的；对于预付费业务，帐户余额低于0元，或超过约定有效期的；以及法律法规规定或电信公司依法确定的、可以暂停服务的其他情形。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">7．3客户有下列情形之一的，电信公司可以终止服务并终止本协议：以担保等方式取得使用权的客户，违反保证条款或有确切证据证明担保人无能力履行保证义务的；擅自利用电信业务非法进行电信业务经营的；移动业务超过收费约定期限30日仍不交纳电信费用的；使用充值卡拨打的固定电话连续超过90日零话务的；新装电信业务超过收费约定期限90日的；客户对需外线施工的电信业务提出暂缓装机超过60日的；其他电信业务出现7．2所述情形，暂停服务超过60日的；以及法律法规规定或电信公司依法确定的、可以终止服务的其他情形。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">7．4客户在电信业务使用过程中如有违反相关法律、法规、规章规定的行为，或按政府管理部门提出相应要求的，电信公司将暂停或终止提供电信服务。</span>
</p>
<h3 style=":36pt; margin:0pt; text-align:center; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">第八条</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">不可抗力及免责</span>
</h3>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">8．1如由于战争、骚乱、恐怖主义、自然灾害、罢工、政府行为、国家法律法规或规章变动、网络安全、网络无法覆盖、停电、通信线路被人为破坏，导致本协议无法继续履行的，受影响方无须承担违约责任，但应尽快通知对方。</span>
</p>
<h3 style=":36pt; margin:0pt; text-align:center; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">第九条</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">争议解决</span>
</h3>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">9．1凡因本合同引起的或与本合同有关的任何争议，双方应协商解决，协商不成的，任何一方可采用以下第（）种方式来解决争议：</span>
</p>
<p style=":12.6pt; margin:0pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">（1）提请广州仲裁委员会按照仲裁规则进行仲裁；</span>
</p>
<p style=":12.6pt; margin:0pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">（2）</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-decoration:underline; text-transform:none; vertical-align:baseline">&#xa0;</span>
</p>
<h3 style=":36pt; margin:0pt; text-align:center; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">第十条</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">&#xa0;</span><span
style="background-color:#ffffff; color:#666666; font-family:微软雅黑; font-size:16pt; font-style:normal; font-weight:bold; text-transform:none; vertical-align:baseline">附则</span>
</h3>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">10．1业务登记单、补充协议为本协议的组成部分。业务登记单或补充协议内容与本协议内容冲突时，以业务登记单或补充协议为准；当业务登记单与补充协议内容冲突时，以最新签署的内容为准。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">10．2电信公司保留因技术进步或国家政策变动等原因对电信业务的服务功能、操作方法、业务号码等做出调整的权利，但调整时应提前告知客户并提供相应解决方案。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">10．3客户新增、变更服务项目时，新填写的业务登记单为本协议之补充协议，新登记单未明确事项适用本协议相关约定。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">10．4除本协议另有约定外，一方对因本协议项下违约行为而导致的另一方可得利益损失、商业信誉损失以及数据丢失等损失不承担责任。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">10．5电信公司可以采用电话、广播、短信、电视、公开张贴、信函、报纸或互联网等方式进行业务公告及业务通知。</span>
</p>
<p style=":12.6pt; margin:0pt; text-indent:21pt"><span
style="background-color:#ffffff; color:#666666; font-family:宋体-简; font-size:12pt; font-style:normal; text-transform:none; vertical-align:baseline">10．6本协议自双方在业务登记单上签字或盖章之日起生效。</span>
</p>
<p style="font-size:10.5pt; :115%; margin:0pt 0pt 10pt; orphans:0; text-align:justify; widows:0">
<span style="font-family:Calibri; font-size:10.5pt">&#xa0;</span></p></div>
<div style="width: 100%;position: fixed;bottom: 0%;background-color: white" @click="agreefun">
<van-button :round="true" size="large" type="info">同意</van-button>
</div>
<div class="cnzz" style="display: none;">
</div>
</body>
</template>
<script>
export default {
name: "readAgree",
methods:{
agreefun(){
this.$router.push({path: 'orderNewCar'})
}
}
}
</script>
src/views/hhr-view/packageUpgrade/packageUpgrade.vue
<template> <template>
<div style=" background-image: url('./picture/hhr/yrym-ruanyan-adv-bg.jpg'); <div style="position:relative ">
background-repeat: no-repeat; <img src="/picture/hhr/yrym-ruanyan-adv-bg.jpg" style="width: 100%; float: right">
background-size: 100%;
width: 100%;
height: 100%;">
<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;height: 100px" class="van-hairline--surround"> <div v-show="inQuery">
<van-cell-group style=""> <van-button loading type="info" loading-text="查询中..." />
</div>
<div style="width: 90%;margin-left: 5%">
<van-cell-group >
<van-field v-model="value" placeholder="身份证/手机号/宽带账号"/> <van-field v-model="value" placeholder="身份证/手机号/宽带账号"/>
</van-cell-group> </van-cell-group>
</div>
<div style="width: 90%;margin-left: 5%">
<van-button round block type="info" native-type="submit" @click="selectPackage">优惠查询</van-button> <van-button round block type="info" native-type="submit" @click="selectPackage">优惠查询</van-button>
</div>
</div> </div>
...@@ -24,7 +27,7 @@ ...@@ -24,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%;
...@@ -34,28 +37,35 @@ ...@@ -34,28 +37,35 @@
</div> </div>
</van-popup> </van-popup>
</div> </div>
<div v-show="duanxing"> <div v-show="duanxing" >
<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 style="font-size: 20px; color: black;text-align: center;position: fixed;top: 3px;margin: 0px 0px 20px 0px;">{{phone}}</div>
<div style="font-size: 20px; color: black;text-align: center;position: fixed;top: 3px">{{yanzhengma}}</div> <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>
</van-popup> </van-popup>
</div> </div>
...@@ -73,6 +83,8 @@ ...@@ -73,6 +83,8 @@
name: "packageUpgrade", name: "packageUpgrade",
data() { data() {
return { return {
inQuery:false,
prompt:false,
value: '', value: '',
countdown: 0,// 倒计时秒数 countdown: 0,// 倒计时秒数
codeMsg: '获取验证码', // 按钮上的文字 codeMsg: '获取验证码', // 按钮上的文字
...@@ -86,6 +98,7 @@ ...@@ -86,6 +98,7 @@
sm: { span: 10 }, sm: { span: 10 },
}, },
yanzhengma: '', yanzhengma: '',
phone: '',
kefushow: false, kefushow: false,
show: false, show: false,
duanxing: false duanxing: false
...@@ -125,13 +138,19 @@ ...@@ -125,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(() => {
...@@ -148,7 +167,7 @@ ...@@ -148,7 +167,7 @@
} }
}, 1000) }, 1000)
} }
}) })}
} }
}, },
...@@ -159,9 +178,23 @@ ...@@ -159,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>
src/views/user/Login.vue
...@@ -39,31 +39,6 @@ ...@@ -39,31 +39,6 @@
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="0">
<a-col :span="14">
<a-form-item>
<a-input
:disabled="!loginBtn"
v-decorator="['phonecode',validatorRules.phoneCode]"
size="large"
type="text"
placeholder="请输入手机验证码">
<a-icon slot="prefix" type="message" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
</a-col>
<a-col :span="10">
<a-button
size="small"
type="primary"
htmlType="submit"
class="code-button"
@click.stop.prevent="getCode"
:disabled="!loginBtn">{{codeMsg}}
</a-button>
<!-- <j-graphic-code @success="generateCode" style="float: right"></j-graphic-code>-->
</a-col>
</a-row>
<a-form-item> <a-form-item>
<a-input <a-input
:disabled="!loginBtn" :disabled="!loginBtn"
...@@ -75,7 +50,7 @@ ...@@ -75,7 +50,7 @@
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/> <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input> </a-input>
</a-form-item> </a-form-item>
<div class="register">忘记密码?<router-link :to="{path: '/user/register'}">找回密码</router-link></div> <!-- <div class="register">忘记密码?<router-link :to="{path: '/user/register'}">找回密码</router-link></div>-->
<a-form-item style="margin-top:24vw/@vw"> <a-form-item style="margin-top:24vw/@vw">
<a-button <a-button
...@@ -174,17 +149,6 @@ export default { ...@@ -174,17 +149,6 @@ export default {
let data = { let data = {
username: username, username: username,
} }
getPhoneCode(data).then(res => {
if (res.code == 200) {
this.$notification.success({
message: res.message ? res.message :"发送成功",
});
return null;
}
this.$notification.error({
message: res.message ? res.message :"发送错误",
});
})
//初始化倒计时 //初始化倒计时
this.countdown=60; this.countdown=60;
this.timer = setInterval(() => { this.timer = setInterval(() => {
...@@ -209,12 +173,12 @@ export default { ...@@ -209,12 +173,12 @@ export default {
smsCode: "xxxx" smsCode: "xxxx"
}; };
// 使用账户密码登陆 // 使用账户密码登陆
that.form.validateFields(['username', 'password', 'inputCode',"phonecode"], {force: true}, (err, values) => { that.form.validateFields(['username', 'password', 'inputCode'], {force: true}, (err, values) => {
if (!err) { if (!err) {
loginParams.username = values.username; loginParams.username = values.username;
loginParams.password = encodeURIComponent(this.getPass(values.password)); loginParams.password = encodeURIComponent(this.getPass(values.password));
loginParams.remember = that.formLogin.remember; loginParams.remember = that.formLogin.remember;
loginParams.phonecode=encodeURIComponent(this.getPass(values.phonecode)); loginParams.phonecode=encodeURIComponent(this.getPass("XXXXXX"));
//console.log(loginParams); //console.log(loginParams);
that.Login(loginParams).then(() => { that.Login(loginParams).then(() => {
this.departConfirm({}); this.departConfirm({});
......
src/views/user/register.vue deleted 100644 → 0
<template>
<div class="main clearfix">
<div class="caption">
</div>
<div class="form">
<span class="form_title">密码重置</span>
<a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
<a-form-item>
<a-input
size="large"
v-decorator="['username',validatorRules.username,{ validator: this.handleUsernameOrEmail }]"
type="text"
placeholder="请输入账号">
<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
<a-row :gutter="0">
<a-col :span="14">
<a-form-item>
<a-input
v-decorator="['inputCode',validatorRules.inputCode]"
size="large"
type="text"
@change="inputCodeChange"
placeholder="请输入验证码">
<a-icon
slot="prefix"
v-if=" inputCodeContent==verifiedCode "
type="smile"
:style="{ color: 'rgba(0,0,0,.25)' }"/>
<a-icon slot="prefix" v-else type="frown" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
</a-col>
<a-col :span="10">
<a-button
size="small"
type="primary"
htmlType="submit"
class="code-button"
:loading="loginBtn"
@click.stop.prevent="getCode"
:disabled="loginBtn">{{codeMsg}}
</a-button>
<!-- <j-graphic-code @success="generateCode" style="float: right"></j-graphic-code>-->
</a-col>
</a-row>
<a-form-item>
<a-input
v-decorator="['password',validatorRules.password]"
size="large"
type="password"
autocomplete="false"
placeholder="新密码(6-12位数字和字母组合)">
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
<a-form-item>
<a-input
v-decorator="['password2',validatorRules.password2]"
size="large"
type="password"
autocomplete="false"
placeholder="再次输入密码">
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
<router-link :to="{name: '/user/Login'}" class="back_login">返回登录</router-link>
<a-button
size="small"
type="primary"
htmlType="submit"
class="login-button"
:loading="loginBtn"
@click.stop.prevent="handleSubmit"
:disabled="loginBtn">确定
</a-button>
</a-form>
<!-- <two-step-captcha-->
<!-- v-if="requiredTwoStepCaptcha"-->
<!-- :visible="stepCaptchaVisible"-->
<!-- @success="stepCaptchaSuccess"-->
<!-- @cancel="stepCaptchaCancel">-->
<!-- </two-step-captcha>-->
</div>
</div>
</template>
<script>
import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
import {mapActions} from "vuex"
import {timeFix} from "@/utils/util"
import Vue from 'vue'
import {ACCESS_TOKEN} from "@/store/mutation-types"
import JGraphicCode from '@/components/jeecg/JGraphicCode'
import {setMaxDigits , RSAKeyPair , encryptedString} from '@/utils/RSA'
import {
register,registercode
} from '@/api/system'
export default {
components: {
TwoStepCaptcha,
JGraphicCode
},
data() {
return {
customActiveKey: "tab1",
loginBtn: false,
// login type: 0 email, 1 username, 2 telephone
loginType: 0,
requiredTwoStepCaptcha: false,
stepCaptchaVisible: false,
form: this.$form.createForm(this),
formLogin: {
username: "",
password: "",
captcha: "",
mobile: ""
},
validatorRules: {
username: {rules: [{required: true, message: '请输入手机号码!', validator: 'click'}]},
password: {rules: [{required: true, message: '请输入密码!', validator: 'click'}]},
password2: {rules: [{required: true, message: '请再次输入密码!'},{validator: this.validateToNextPassword}]},
mobile: {rules: [{validator: this.validateMobile}]},
captcha: {rule: [{required: true, message: '请输入验证码!'}]},
inputCode: {rules: [{required: true, message: '请输入验证码!'}, {validator: this.validateInputCode}]}
},
codeDisabled: false,// 是否禁用按钮
countdown: 60,// 倒计时秒数
codeMsg: '获取验证码', // 按钮上的文字
timer: null,// 定时器
verifiedCode: "",
inputCodeContent: "",
inputCodeNull: true,
}
},
created() {
Vue.ls.remove(ACCESS_TOKEN)
this.getRouterData();
},
methods: {
// handler
handleUsernameOrEmail(rule, value, callback) {
const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
if (regex.test(value)) {
this.loginType = 0
} else {
this.loginType = 1
}
callback()
},
handleTabClick(key) {
this.customActiveKey = key
// this.form.resetFields()
},
getCode(){
// 验证码60秒倒计时
if (!this.timer) {
let data={
account:this.form.getFieldValue("username")
}
registercode(data).then(res=>{
if (res.code==200){
this.$notification.success({
message: res.data,
});
return null;
}
this.$notification.error({
message: res.data,
});
})
this.timer = setInterval(() => {
if (this.countdown > 0 && this.countdown <= 60) {
this.countdown--;
if (this.countdown !== 0) {
this.codeMsg = "重新发送(" + this.countdown + ")";
} else {
clearInterval(this.timer);
this.codeMsg = "获取验证码";
this.countdown = 60;
this.timer = null;
this.codeDisabled = false;
}
}
}, 1000)
}
},
handleSubmit() {
let that = this
let loginParams = {
smsCode: "xxxx"
};
let data={
account:"",
verificationCode:"",
newPwd:"",
rePwd:''
}
// 确定修改密码
that.form.validateFields(['username', 'password', 'password2', 'inputCode'], {force: true}, (err, values) => {
if (!err) {
values.password = encodeURIComponent(this.getPass(values.password));
values.password2 = encodeURIComponent(this.getPass(values.password2));
let data = {
account: values.username,
verificationCode: values.inputCode,
newPwd: values.password,
rePwd: values.password
}
register(data).then(res => {
if (res.code==200) {
this.registerSuccess(res.data);
return null;
}
this.registerRrror(res.data)
})
}
})
},
requestFailed(err) {
this.$notification['error']({
message: '登录失败',
description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
duration: 4,
});
this.loginBtn = false;
},
registerSuccess(data) {
this.$notification.success({
message: data,
description: `${timeFix()}，请再次登录`,
});
},
registerRrror(data) {
this.$notification.warn({
message: data,
});
},
validateMobile(rule, value, callback) {
if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
callback();
} else {
callback("您的手机号码格式不正确!");
}
},
validateInputCode(rule, value, callback) {
if (!value || this.verifiedCode == this.inputCodeContent) {
callback();
} else {
callback("您输入的验证码不正确!");
}
},
inputCodeChange(e) {
},
getRouterData() {
this.$nextTick(() => {
this.form.setFieldsValue({
'username': this.$route.params.username
});
})
},
validateToNextPassword (rule, value, callback) {
const form = this.form;
if (value!= form.getFieldValue("password")) {
callback("两次输入的密码不一样！");
}
callback();
},
//密码加密
getPass(text){
/*let keyss = setMaxDigits(130);
keyss = new RSAKeyPair("10001","","a5d210338760bdbe2baabef73c410582e812dad8d9669d8c6ebfe026450e5cc10005290f17a0474c7351031edbff81bd8217a518bdf1a02855f53105ead0370e8a9e30b8560feab1d333a0b055b29419476b0eea1ea54315662ddfc46ec066f076e9490ec34c825afad9e44cf38e5ab600f3136acfe3a0ac0e672e2cb8e50371");
let password = encryptedString(keyss,text);*/
let publicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCAcsbUyeRD2lQGPEnu5LbXOL2lycUJwK/8BsoZD3b932l4JehAvOKR/YNzs6EG4gnZ7gaXLCnWbE5kB1wuUooo6bv8fSAg0W5QmM1TH8zaIImdAaN6c8mw5dUS/2VJ/2GHI54R1NJziX9VHecpf2DrHnWngETsNytmXaVl3JiXywIDAQAB";
let encrypt = new window.JSEncrypt();
encrypt.setPublicKey(publicKey);
var encryptPwd = encrypt.encryptLong(text);
return encryptPwd;
//return text;
}
}
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/style';
.main{
.caption{
width: 666vw/@vw;
height: 792vw/@vw;
background: url("~@/assets/bg_content.png") no-repeat center;
background-size: cover;
float: left;
}
.form{
width: calc(100% - 666vw/@vw);
height: 792vw/@vw;
box-sizing: border-box;
padding:80vw/@vw 80vw/@vw 0 60vw/@vw;
float:left;
.form_title{
font-size:40vw/@vw;
font-family:PingFang SC;
font-weight:500;
color:rgba(51,51,51,1);
display: inline-block;
height: 55vw/@vw;
margin: 25vw/@vw 0vw/@vw 50vw/@vw 0;
border-bottom: 6vw/@vw solid #57bbff;
}
/deep/ .ant-form-item{
margin-bottom: 24vw/@vw;
}
@media (min-width: 1920px) {
/deep/.ant-input-affix-wrapper .ant-input-prefix{
font-size: 22vw/@vw;
top: 38% !important;
}
}
@media (min-width: 1400px) {
/deep/.ant-input-affix-wrapper .ant-input-prefix{
font-size: 22vw/@vw;
top: 40.5% !important;
}
}
/deep/.ant-input-affix-wrapper .ant-input-prefix{
font-size: 22vw/@vw;
top: 39%;
}
/deep/ .user-layout-login div .ant-input{
width:100%;
height:68vw/@vw;
margin-bottom: 15vw/@vw;
padding-left: 44vw/@vw;
background:rgba(245,245,245,1);
border:1vw/@vw solid rgba(221,221,221,1);
opacity:0.5;
border-radius:4vw/@vw;
&::-webkit-input-placeholder {
font-size:24vw/@vw;
font-family:PingFang SC;
font-weight:500;
color:#333;
line-height:88vw/@vw;
}
&::-moz-placeholder {
font-size:24vw/@vw;
font-family:PingFang SC;
font-weight:500;
color:#333;
line-height:88vw/@vw;
}
&:-ms-input-placeholder {
font-size:24vw/@vw;
font-family:PingFang SC;
font-weight:500;
color:#333;
line-height:88vw/@vw;
}
}
/deep/ #gc-canvas{
height: 67vw/@vw;
}
.code-button{
width:calc(100% - 10vw/@vw);
height:68vw/@vw;
margin-left: 10vw/@vw;
background:#e6e6e6;
/*border-radius:40vw/@vw;*/
font-size:24vw/@vw;
font-family:PingFang SC;
font-weight:bold;
color:#adadad;
}
.back_login{
width:290vw/@vw;
height:80vw/@vw;
margin-right: 10vw/@vw;
background:rgba(87,148,255,1);
border-radius:40vw/@vw;
font-size:36vw/@vw;
font-family:PingFang SC;
font-weight:bold;
color:rgba(255,255,255,1);
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
line-height: 80vw/@vw;
display: inline-block;
white-space: nowrap;
text-align: center;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
}
/deep/ .user-layout-login button.login-button{
width:290vw/@vw;
height:80vw/@vw;
background:rgba(87,148,255,1);
border-radius:40vw/@vw;
font-size:36vw/@vw;
font-family:PingFang SC;
font-weight:bold;
color:rgba(255,255,255,1);
}
}
}
/*.user-layout-login {
margin-top: 20px;
label {
font-size: 14px;
}
.getCaptcha {
display: block;
width: 100%;
height: 40px;
}
.forge-password {
font-size: 14px;
}
button.login-button {
padding: 0 15px;
font-size: 16px;
height: 40px;
width: 100%;
}
.user-login-other {
text-align: left;
margin-top: 24px;
line-height: 22px;
.item-icon {
font-size: 24px;
color: rgba(0, 0, 0, .2);
margin-left: 16px;
vertical-align: middle;
cursor: pointer;
transition: color .3s;
&:hover {
color: #1890ff;
}
}
.register {
float: right;
}
}
}*/
</style>
<style>
.valid-error .ant-select-selection__placeholder {
color: #f5222d;
}
</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