Commit 327fe49d by 任建

qq

parent aac9b258
......@@ -95,10 +95,11 @@ class UserCtl extends CtlBase {
//支付
async h5payment(p, o, r) {
var rtn = await this.execClient.execPost(p, "https://igirl.gongsibao.com/api/tlapi/getH5PayUrl");
console.log(rtn);
return {
status:0,
msg:"成功",
data:rtn
data:JSON.parse(rtn.stdout)
};
}
......
......@@ -225,6 +225,14 @@ module.exports = {
],
},
"bizs": {
"fapiao": { "title": "我的发票", "config": null, "path": "/fapiao", "comname": "fapiao" },
"apply": { "title": "开票申请", "config": null, "path": "/apply", "comname": "apply" },
"checkstand": { "title": "收银台", "config": null, "path": "/checkstand", "comname": "checkstand" },
"paysuccess": { "title": "支付成功", "config": null, "path": "/paysuccess", "comname": "paysuccess" },
"pay": { "title": "支付", "config": null, "path": "/pay", "comname": "pay" },
"registerphone": { "title": "手机号注册", "config": null, "path": "/registerphone", "comname": "registerphone" },
"forgot": { "title": "忘记密码", "config": null, "path": "/forgot", "comname": "forgot" },
"phonelogin": { "title": "手机账号登录", "config": null, "path": "/phonelogin", "comname": "phonelogin" },
"userlogin": { "title": "验证码登录", "config": null, "path": "/userlogin", "comname": "userlogin" },
"order": { "title": "我的订单", "config": null, "path": "/order", "comname": "order" },
"invoice": { "title": "代开发票", "config": null, "path": "/invoice", "comname": "invoice" },
......
This source diff could not be displayed because it is too large. You can view the blob instead.
.invoice{
width: 100%;
height: 100%;
font-size: 14px;
display: flex;
flex-direction: column;
}
.invoice-header{
width: 100%;
height: .78rem;
background: #FAF6F7;
display: flex;
}
.invoice-header>span{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.invoice-header>span>img{
width: .17rem;
height: .3rem;
}
.invoice-header>p{
flex: 8;
display: flex;
justify-content: center;
align-items: center;
font-size:.3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(19,19,19,1);
}
.invoice-main{
flex: 1;
overflow: auto;
background: #F1F1F1;
}
.invoice-footer{
height: 1.1rem;
display: flex;
}
.footer-left{
flex: 1;
padding: .3rem;
display: flex;
}
.footer-left>p{
font-size:.32rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
line-height:.45rem;
}
.footer-left>span{
font-size:.36rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,106,0,1);
line-height:.5rem;
}
.footer-right{
width: 3.3rem;
height: 100%;
}
.footer-right>button{
width: 100%;
height: 100%;
background: #FF6A00;
border:1px solid #FF6A00;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
outline: none;
}
.invoice-main-items{
width: 100%;
}
.invoice-main-item{
width: 100%;
}
.invoice-main-item>div{
height: .77rem;
box-sizing: border-box;
padding: .19rem .3rem;
font-size:.28rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(57,56,61,1);
}
.invoice-main-item>.item-inp{
width: 100%;
height: 1.13rem;
padding: .35rem .3rem;
margin-bottom: 1px;
background: #fff;
}
.invoice-main-item>.item-inp>p{
float: left;
}
.item-inp>p>span{
color: #f00;
}
.item-inp>input,.item-inp>h4,.item-inp>div{
float: right;
margin: 0;
}
.invoice-main-item>.item-inp>input{
min-width: 4.8rem !important;
height: .4rem;
border: none;
outline: none;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
}
.item-inp>h4{
height:.4rem;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(147,147,147,1);
}
.item-inp>h4>img{
width: .12rem;
height: .21rem;
margin-left: .2rem;
}
.item-inp>div{
width:3rem;
height:.56rem;
border:1px solid rgba(170,170,170,1);
display: flex;
}
.item-inp>div>span{
width: .6rem;
height: 100%;
display: flex;
line-height: .5rem;
justify-content: center;
font-size:.32rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
}
.item-inp>div>span:first-child{
border-right: 1px solid #AAAAAA;
}
.item-inp>div>span:last-child{
border-left: 1px solid #AAAAAA;
}
.item-inp>div>p{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
}
.submitshen{
width: 100%;
height: 1.5rem;
padding: .44rem .27rem;
box-sizing: border-box;
}
.submitshen>button{
width: 100%;
height: 100%;
background: #FF6A00;
color: #fff;
border: 1px solid #FF6A00;
}
.shangchuan{
width: 100% !important;
height: 3.56rem !important;
display: flex;
padding: .35rem;
box-sizing: border-box;
border: none !important;
}
.shangchuan>h3{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.shangchuan>h3>span{
display: block;
width: 100%;
height: 100%;
background: #CCCBCB;
border: 1px solid #F1F1F1;
}
.shangchuan>p{
flex: none !important;
width: .4rem !important;
}
.shangchuan>h3>p{
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
line-height:.40rem;
}
\ No newline at end of file
<div class="invoice">
<div class="invoice-header">
<span @click="$router.go(-1)"><img src="/imgs/leftjian.png" alt=""></span>
<p>开票申请</p>
<span></span>
</div>
<div class="invoice-main">
<div class="invoice-main-items">
<div class="invoice-main-item">
<div>开票信息</div>
<div class="item-inp">
<p><span>*</span>购买方名称:</p>
<input type="text" placeholder="请输入购买方名称" v-model="gmfmc">
</div>
<div class="item-inp">
<p><span>*</span>纳税人识别号:</p>
<input type="text" placeholder="请输入纳税人识别号" v-model="nsrsbh1">
</div>
<div class="item-inp">
<p><span>*</span>地址:</p>
<input type="text" placeholder="请输入购买方营业执照地址" v-model="address1">
</div>
<div class="item-inp">
<p><span>*</span>电话:</p>
<input type="text" placeholder="请输入购买方电话" v-model="tel1">
</div>
<div class="item-inp">
<p><span>*</span>开户行:</p>
<input type="text" placeholder="请输入购买方开户行" v-model="khh1">
</div>
<div class="item-inp" style="margin-bottom:.2rem;">
<p><span>*</span>开户行帐号:</p>
<input type="text" placeholder="请输入购买方开户行帐号" v-model="khhzh1">
</div>
<!-- -->
<div class="item-inp">
<p><span>*</span>销售方名称:</p>
<input type="text" placeholder="请输入销售方名称" v-model="xsfmc">
</div>
<div class="item-inp">
<p><span>*</span>纳税人识别号:</p>
<input type="text" placeholder="请输入纳税人识别号" v-model="nsrsbh2">
</div>
<div class="item-inp">
<p>地址:</p>
<input type="text" placeholder="请输入销售方营业执照地址" v-model="address2">
</div>
<div class="item-inp">
<p>电话:</p>
<input type="text" placeholder="请输入销售方电话" v-model="tel2">
</div>
<div class="item-inp">
<p>开户行:</p>
<input type="text" placeholder="请输入销售方开户行" v-model="khh2">
</div>
<div class="item-inp">
<p>开户行帐号:</p>
<input type="text" placeholder="请输入销售方开户行帐号" v-model="khhzh2">
</div>
</div>
<!-- -->
<div class="invoice-main-item">
<div>发票信息</div>
<div class="item-inp">
<p>发票类型:</p>
<h4>普通发票</h4>
</div>
<div class="item-inp">
<p>发票内容:</p>
<input type="text" placeholder="请输入发票内容" v-model="fpnr">
</div>
<div class="item-inp">
<p><span>*</span>发票金额:</p>
<input type="text" placeholder="请输入发票金额" v-model="fpje">
</div>
<div class="item-inp">
<p><span>*</span>开票时间</p>
<h4>{{time}}</h4>
</div>
<div class="item-inp" style="height:auto;display: flex;flexDirection: column;">
<p>上传资料:</p>
<div class="shangchuan">
<h3>
<span></span>
<p>合同</p>
</h3>
<p></p>
<h3>
<span></span>
<p>结算单</p>
</h3>
</div>
</div>
</div>
<!-- -->
<div class="invoice-main-item">
<div>个人信息</div>
<div class="item-inp">
<p>姓名:</p>
<input type="text" placeholder="请输入您的姓名" v-model="name">
</div>
<div class="item-inp">
<p><span>*</span>手机号:</p>
<input type="text" placeholder="请输入手机号,方便我们与您联系" v-model="phone">
</div>
<div class="item-inp">
<p><span>*</span>邮箱:</p>
<input type="text" placeholder="请输入邮箱,方便我们给您发送发票" v-model="email">
</div>
<div class="item-inp">
<p><span>*</span>联系地址:</p>
<input type="text" placeholder="请输入邮寄纸质发票,请输入详细地址" v-model="useraddress">
</div>
</div>
<!-- 00 -->
</div>
</div>
<div class="submitshen"><button @click="submit()">提交申请</button></div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
time: null,
name: null,
phone: null,
email: null,
useraddress: null,
fpnr: null,
fpje: null,
gmfmc: null,
nsrsbh1: null,
address1: null,
tel1: null,
khh1: null,
khhzh1: null,
xsfmc: null,
nsrsbh2: null,
address2: null,
tel2: null,
khh2: null,
khhzh2: null,
}
},
mounted: function() {
},
created: function() {
this.time = new Date().toLocaleDateString();
},
methods: {
submit(){
let obj = {
invoiceTime: this.time,
merchantId: "18asf854584",
merchantAccount: this.khhzh2,
merchantName: this.xsfmc,
merchantCreditCode: this.nsrsbh2,
merchantAddr: this.address2,
merchantMobile: this.tel2,
merchantBank: this.khh2,
invoiceAmount: this.fpje,
statements: "wwww.baidu.com",
contract: "www.qq.com",
applyNo: "",
mailAddr: this.useraddress,
mailMobile: this.phone,
mailTo: this.name,
payWay: "",
payAccount: "",
};
this.$root.postReq("/web/auth/userCtl/invoice",obj).then(res => {
if(res.status == 0){
this.$root.pushx({
title:'',
name:'/fapiao'
})
}
})
}
},
vname: "gsb-invoice"
}
.checkstand{
width: 100%;
height: 100%;
font-size: 14px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.checkstand-top{
width: 100%;
height: 5.02rem;
background: url('/imgs/shouyintai.png') no-repeat;
background-size: 100%;
}
.checkstand-header{
width: 100%;
height: .78rem;
display: flex;
}
.checkstand-header>span{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size:.26rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
}
.checkstand-header>span>img{
width: .17rem;
height: .3rem;
}
.checkstand-header>p{
flex: 8;
display: flex;
justify-content: center;
align-items: center;
font-size:.3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:#fff;
}
.checkstand-main{
flex: 1;
background: #F1F1F1;
display: flex;
flex-direction: column;
position: relative;
}
.checkstand-asd{
width: 100%;
padding: 0 .3rem;
position: absolute;
top: -.8rem;
box-sizing: border-box;
}
.checkstand-asd>div{
width: 100%;
padding: .27rem .3rem .1rem;
background: #fff;
box-sizing: border-box;
}
.checkstand-asd>div>p{
width: 100%;
height: .52rem;
margin-bottom: .13rem;
}
.checkstand-asd>div>p>img{
float: left;
width: .54rem;
height: .5rem;
margin-right: .1rem;
}
.checkstand-asd>div>p>span{
float: left;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(102,102,102,1);
line-height:.40rem;
}
.checkstand-asd>div>p>i{
float: right;
width: .31rem;
height: .31rem;
border-radius:100px;
background: #FF6A00;
}
.money-top{
width: 100%;
height: 2.27rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: .4rem;
box-sizing: border-box;
background: #fff;
margin-top: .3rem;
}
.money-top>p{
font-size:.3rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
line-height:.42rem;
margin: .05rem;
}
.money-top>h3{
font-size:.4rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(255,106,0,1);
}
.money-top>h3>span{
font-size:.6rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(255,106,0,1);
}
.xinxi{
width: 100%;
height: 1.1rem;
background:rgba(255,255,255,1);
box-shadow:0px 2px 4px 0px rgba(192,192,192,0.5);
padding: .35rem .3rem;
box-sizing: border-box;
}
.xinxi>p{
float: left;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(102,102,102,1);
}
.xinxi>span{
float: right;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(34,34,34,1);
}
.checkstand-main>p{
width: 100%;
height: .66rem;
position: absolute;
left: 0;
bottom: .58rem;
padding: 0 .3rem;
box-sizing: border-box;
}
.checkstand-main>p>button{
width: 100%;
height: 100%;
background: #FF6A00;
border: 1px solid #FF6A00;
color: #fff;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
}
.price{
width: 100%;
height: 2.9rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.price>p{
color: #fff;
font-size:.45rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(255,255,255,1);
line-height:.56rem;
}
.price>span{
color: #fff;
font-size:.32rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
line-height:.45rem;
}
\ No newline at end of file
<div class="checkstand">
<div class="checkstand-top">
<div class="checkstand-header">
<span @click="$router.go(-1)"><img src="/imgs/whiteRight.png" alt=""></span>
<p>支付</p>
<span></span>
</div>
<div class="price">
<p>¥2500.00</p>
<span>支付金额</span>
</div>
</div>
<div class="checkstand-main">
<div class="checkstand-asd">
<div>
<P>
<img src="/imgs/weixin.png" alt="">
<span>微信支付</span>
<!-- <i></i> -->
</P>
<!-- <P>
<img src="/imgs/zhifubao.png" alt="">
<span>支付宝支付</span>
<i></i>
</P> -->
</div>
</div>
<p>
<button @click="goPay()">确认支付</button>
</p>
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
}
},
mounted: function() {
},
created: function() {
},
methods: {
goPay(){
this.$root.pushx({
title:'',
name:'/pay'
})
}
},
vname: "gsb-checkstand"
}
......@@ -35,7 +35,9 @@ button{
.employed-footer{
width:100%;
height:1.45rem;
height:.9rem;
display: flex;
background: #FDF9FA;
}
.employed-footer>img{
width: 100%;
......@@ -44,7 +46,7 @@ button{
.banner{
width: 100%;
height: 5.65rem;
height: 4.04rem;
box-sizing: border-box;
padding: .36rem;
background: url("/imgs/banner.png") no-repeat;
......@@ -118,11 +120,11 @@ button{
.employed-items{
padding: 0 .18rem;
box-sizing: border-box;
margin-bottom: .6rem;
box-shadow:0px 2px 26px 0px rgba(0,0,0,0.14);
}
.employed-item{
width: 100%;
margin-bottom: .6rem;
box-shadow:0px 2px 26px 0px rgba(0,0,0,0.14);
}
.item-main{
width: 100%;
......@@ -219,4 +221,107 @@ button{
}
.even-item>p{
width: 50%;
}
.liji{
width: 100%;
height: .8rem;
background:rgba(255,106,0,1);
color: #fff;
outline: none;
border: 1px solid rgba(255,106,0,1);
margin-bottom: .6rem;
}
.employed-footer>div{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.employed-footer>div>i{
flex:7;
display: flex;
justify-content: center;
align-items: center;
}
.employed-footer>div:nth-child(1)>i>img{
width: .49rem;
height: .42rem;
}
.employed-footer>div:nth-child(2)>i>img{
width: .38rem;
height: .39rem;
}
.employed-footer>div>span{
flex: 3;
font-size:.18rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(144,140,142,1);
}
.banner2{
width: 100%;
height: 3.18rem;
}
.banner2>img{
width: 100%;
height: 100%;
}
.my{
width: 100%;
height: 1rem;
background: #fff;
display: flex;
margin-top:.4rem;
}
.my>span{
flex:2;
display: flex;
justify-content: center;
align-items: center;
}
.my>span>img{
width: .22rem;
height: .24rem;
}
.my>p{
flex: 7;
display: flex;
align-items: center;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(19,19,19,1);
line-height:.40rem;
}
.my>i{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.my>i>img{
width: .09rem;
height: .17rem;
}
.btnkai{
width: 100%;
height: .66rem;
padding: 0 .57rem;
box-sizing: border-box;
margin-top: .5rem;
}
.btnkai>button{
width: 100%;
height: 100%;
background: #FF6A00;
border: 1px solid #FF6A00;
color: #fff;
}
\ No newline at end of file
<div class="employed">
<div class="employed-header">
<div class="employed-header" v-if="flag == 1">
公司宝个体户服务
</div>
<div class="employed-main">
<div class="employed-main" v-if="flag == 1">
<div class="banner">
<h1>个体户注册</h1>
<p>· 无需再购买地址,一价全含 </p>
<p>· 全程电子化登记,可远程异地办理,最快3天出照 </p>
<p>· 服务包括:园区审核、刻章备案、银行开户、税务报道</p>
<h3><span>3000</span>元/次</h3>
<div>
<button @click="goregistration()">立即购买</button>
<p>我的订单</p>
</div>
</div>
<div class="smfu">售卖服务</div>
<div class="smfu">个体套餐服务</div>
<div class="employed-items">
<div class="employed-item">
<hr>
......@@ -31,12 +26,9 @@
<p><img src="/imgs/duihao.png" alt=""><span>银行开户</span></p>
<p><img src="/imgs/duihao.png" alt=""><span>税务报道</span></p>
</div>
<h3><span>2000</span>元/次</h3>
<button @click="goadded()">立即购买</button>
</div>
</div>
<div class="employed-item">
<hr>
<div class="item-main">
<div class="item-main-header">
<h3>代理记账</h3>
......@@ -50,12 +42,9 @@
<p><img src="/imgs/duihao.png" alt=""><span>汇算清缴</span></p>
<p><img src="/imgs/duihao.png" alt=""><span>工商年报</span></p>
</div>
<h3><span>2000</span>元/年</h3>
<button @click="goaccount()">立即购买</button>
</div>
</div>
<div class="employed-item">
<hr>
<div class="item-main">
<div class="item-main-header">
<h3>代开发票</h3>
......@@ -69,13 +58,40 @@
<p><img src="/imgs/duihao.png" alt=""><span>发票寄送</span></p>
<p><img src="/imgs/duihao.png" alt=""><span>抄报反写</span></p>
</div>
<h3><span>9999</span>元/年</h3>
<button @click="goinvoice()">立即购买</button>
</div>
</div>
</div>
<button class="liji" @click="goCkeckstant()">立即购买</button>
</div>
<div class="forgot-header" style="" v-if="flag == 2">
<span @click=""></span>
<p style="color: #000;">我的</p>
<span></span>
</div>
<div class="employed-main" v-if="flag == 2">
<div class="banner2">
<img src="/imgs/banner2.png" alt="">
</div>
<div class="my" @click="goOrder()">
<span><img src="/imgs/wodedingdan.png" alt=""></span>
<p>我的订单</p>
<i><img src="/imgs/xianjiantou.png" alt=""></i>
</div>
<div class="my" @click="goFapiao()">
<span><img src="/imgs/wodefapiao.png" alt=""></span>
<p>我的发票</p>
<i><img src="/imgs/xianjiantou.png" at=""></i>
</div>
<p class="btnkai"><button @click="goApply()">开票申请</button></p>
</div>
<div class="employed-footer">
<img src="/imgs/phone.png" alt="">
<div @click="flag = 1">
<i><img src="/imgs/home.png" alt="" v-if="flag == 1"><img src="/imgs/homeno.png" alt="" v-if="flag == 2"></i>
<span>首页</span>
</div>
<div @click="flag = 2">
<i><img src="/imgs/wodeno.png" alt="" v-if="flag == 1"><img src="/imgs/wode.png" alt="" v-if="flag == 2"></i>
<span>我的</span>
</div>
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
}
},
mounted: function() {
template: '${tmpl}',
data: function() {
return {
flag: 1
}
},
created: function() {
mounted: function() {
},
created: function() {
if(window.location.hash.slice(-1) == '2'){
this.flag = window.location.hash.slice(-1)
}
},
methods: {
goCkeckstant(){
console.log(123123);
this.$root.pushx({
title: "",
name: "/checkstand"
});
},
methods: {
goregistration(){
this.$root.pushx({
title: "",
name: "/registration"
});
},
goadded(){
this.$root.pushx({
title: "",
name: "/added"
});
},
goaccount(){
this.$root.pushx({
title: "",
name: "/account"
});
},
goinvoice(){
this.$root.pushx({
title: "",
name: "/invoice"
});
},
goApply(){
this.$root.pushx({
title:'',
name: '/apply'
})
},
vname: "gsb-employed"
goOrder(){
this.$root.pushx({
title:'',
name: '/order'
})
},
goFapiao(){
this.$root.pushx({
title:'',
name: '/fapiao'
})
}
},
vname: "gsb-employed"
}
.fapiao{
width: 100%;
height: 100%;
font-size: 14px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.fapiao-header{
width: 100%;
height: .78rem;
display: flex;
background: #FAF6F7;
}
.fapiao-header>span{
flex: 1;
display: flex;
justify-content: center;
align-items: center
}
.fapiao-header>p{
flex: 8;
}
.fapiao-header>span>img{
width: .17rem;
height: .3rem;
}
.fapiao-header>p{
flex: 8;
display: flex;
justify-content: center;
align-items: center;
font-size:.3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(19,19,19,1);
}
.fapiao-main{
flex: 1;
background: #F1F1F1;
display: flex;
flex-direction: column;
}
.fapiao-items{
flex: 1;
overflow: auto;
position: relative
}
.fapiao-item{
width: 100%;
padding: 0 .23rem;
background: #fff;
margin-top: .2rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.top{
flex: 1;
border-bottom: 1px solid #D4D4D4;
}
.bom{
flex: 1;
}
.top>h3{
float: left;
font-size:.29rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(55,55,58,1);
line-height:.51rem;
}
.top>h4{
float: right;
font-size:.29rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(40,210,40,1);
line-height:.41rem;
}
.bom>h3{
float: left;
font-size:.26rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
line-height:.37rem;
}
.bom>h4{
float: right;
font-size:.36rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,106,0,1);
line-height:.50rem;
margin: .2rem 0;
}
\ No newline at end of file
<div class="fapiao">
<div class="fapiao-header">
<span @click="$router.go(-1)"><img src="/imgs/leftjian.png" alt=""></span>
<p>我的发票</p>
<span></span>
</div>
<div class="fapiao-main">
<div class="fapiao-items">
<div class="fapiao-item" v-for="(item,index) in orderList">
<div class="top">
<h3>{{item.merchantName}}</h3>
<h4>{{item.statusName}}</h4>
</div>
<div class="bom">
<h3>{{item.invoiceTime}}</h3>
<h4>¥{{item.invoiceAmount.toFixed(2)/100}}</h4>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
orderList: [],
}
},
mounted: function() {
this.$root.postReq("/web/auth/userCtl/invoicelist",{}).then(res => {
console.log(JSON.parse(res.stdout));
this.orderList =JSON.parse(res.stdout).data.rows;
})
},
created: function() {
},
methods: {
},
vname: "gsb-fapiao"
}
.forgot{
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
font-size: 14px;
}
.user-login-top{
width: 100%;
height: 4.3rem;
background: url("/imgs/touxiang.png") no-repeat;
background-size: 100%;
}
.forgot-header{
width: 100%;
height: .78rem;
display: flex;
}
.forgot-header>span{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.forgot-header>span>img{
width: .17rem;
height: .3rem;
}
.forgot-header>p{
flex: 8;
display: flex;
justify-content: center;
align-items: center;
font-size:.3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color: #fff;
box-sizing: border-box;
}
.forgot-main{
flex: 1;
overflow: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: .3rem;
}
.title-text{
text-align: center;
margin-top: .5rem;
font-size:.26rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(89,95,98,1);
line-height:.37rem;
}
.inp{
width: 100%;
padding: 0 .3rem;
margin-top: .58rem;
}
.username{
width: 100%;
height: .84rem;
position: relative;
}
.username>img{
width: .29rem;
height: .38rem;
position: absolute;
top: .25rem;
left: 0;
}
.username>div{
width: 100%;
height: 100%;
border-bottom: 1px solid #C8C8C8;
box-sizing: border-box;
}
.username>div>input{
width: 100%;
height: 100%;
border: none;
padding-left: .6rem;
outline: none;
box-sizing: border-box;
}
.username>button{
width: 1.5rem;
height: .40rem;
font-size: .22rem;
border-radius:5px;
border:1px solid rgba(255,106,0,1);
font-size:.22rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,106,0,1);
position: absolute;
bottom:.21rem;
right: 0;
background: #fff;
}
.username>span{
font-size: .28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(89,95,98,1);
position: absolute;
bottom:.21rem;
right: 0;
background: #fff;
}
.pwdLogin{
width: 100%;
margin: .1rem 0 .7rem 0;
font-size:.26rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,106,0,1);
line-height:.37rem;
}
.pwdLogin>span{
float: right;
}
.btnLogin{
width: 100%;
height:.8rem;
background:rgba(255,106,0,1);
border-radius:.1rem;
font-size:.3rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
border: none;
}
.username .flag{
border: 1px solid #C8C8C8;
color: #C8C8C8;
}
\ No newline at end of file
<div class="forgot">
<div class="user-login-top">
<div class="forgot-header">
<span @click="$router.go(-1)"><img src="/imgs/whiteRight.png" alt=""></span>
<p>忘记密码</p>
<span></span>
</div>
</div>
<div class="forgot-main">
<div class="title-text">通过你的手机136****9486来验证</div>
<div class="inp">
<div class="username"><img src="/imgs/shouji.png" alt=""> <div><input v-model="username" type="text" placeholder="请输入手机号码"></div><button :class="!flag ? \'flag\' : \'\'" @click="getYanzhengma()">获取验证码</button></div>
<div class="username"><img src="/imgs/yanzhengma.png" alt=""></i><div><input v-model="yanzhengma" type="text" placeholder="请输入验证码"></div><span v-if="time">{{time}}S</span></div>
<div class="username"><img src="/imgs/mima.png" alt=""></i><div><input v-model="password" :type="inpType" placeholder="请输入密码"></div><i @click="falgClick()" :class="flag1 ? \'iclick\' : \'\'"></i></div>
</div>
<div class="pwdLogin"><span></span></div>
<button class="btnLogin">确定</button>
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
username: null,
yanzhengma: null,
password: null,
flag:true,
flag1:false,
time:null,
inpType: 'password'
}
},
mounted: function() {
},
created: function() {
},
methods: {
getYanzhengma () {
if(this.flag){
this.flag = false;
this.time = 10;
/**
*
*
* */
let timer = setInterval(() => {
console.log(this.time);
if(this.time <= 1) {
this.flag = true;
this.time = null;
clearInterval(timer);
return ;
}
this.time--;
},1000)
}
},
falgClick () {
console.log("asdasd");
this.flag1 = !this.flag1;
if(this.flag1){
this.inpType = "text";
}else{
this.inpType = "password";
};
},
},
vname: "gsb-userlogin"
}
......@@ -19,7 +19,7 @@
<input type="text" placeholder="请输入手机号,方便我们与您联系" v-model="phone">
</div>
<div class="item-inp">
<p>邮箱</p>
<p><span>*</span>邮箱</p>
<input type="text" placeholder="请输入邮箱,方便我们给您发送文件" v-model="email">
</div>
<div class="item-inp">
......@@ -60,7 +60,7 @@
<div class="invoice-footer">
<div class="footer-left" v-if="type == \'按年购买\'">
<p>1件,合计:</p>
<p>{{count}}件,合计:</p>
<span>¥{{money}}</span>
</div>
<div class="footer-left" v-if="type == \'按次购买\'">
......
......@@ -61,9 +61,17 @@
},
submit(){
let resPhone = /^1[3456789]\d{9}$/;
let resEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if(!resPhone.test(this.phone)){
this.$message({
message: '手機號輸入不正確',
message: '手机号输入不正确',
type: 'warning'
});
return;
}
if(!resEmail.test(this.email)){
this.$message({
message: '邮箱输入不正确',
type: 'warning'
});
return;
......
......@@ -91,6 +91,8 @@
.order-item>div{
margin-bottom: .06rem;
height:.4rem;
display: flex;
align-items: center;
}
.order-item>div>h2{
margin: 0;
......@@ -125,7 +127,7 @@
}
.order-item>p{
position: absolute;
top: .55rem;
top: .7rem;
right: .3rem;
font-size:.24rem;
font-family:PingFangSC-Regular,PingFang SC;
......@@ -133,9 +135,12 @@
color:rgba(255,106,0,1);
line-height:.33rem;
}
.order-item>p>span{
font-size:.36rem;
}
.order-item>span{
position: absolute;
top: 1rem;
top: 1.36rem;
right: .3rem;
font-size:.24rem;
font-family:PingFangSC-Regular,PingFang SC;
......
......@@ -26,12 +26,13 @@
<h2>{{item.name}}</h2>
<p><span>{{item.state}}</span></p>
</div>
<h5>订 单 号:1234567</h5>
<h5 v-if="item.type == 1">注册城市:{{item.registerCity}}</h5>
<h5 v-if="item.type == 2">办理城市:{{item.manageCity}}</h5>
<h5 v-if="item.type == 3">记账类型:{{item.accountType}}</h5>
<h5 v-if="item.type == 4">开票类型:{{item.invoiceType}}</h5>
<h5>下单时间:{{item.time}}</h5>
<p>¥{{item.money.toFixed(2)}}</p>
<p>¥<span>{{item.money.toFixed(2)}}</span></p>
<span>×{{item.num}}</span>
</div>
</div>
......
......@@ -5,34 +5,10 @@
typeList: ["订单类型","订单状态"],
order: [{
type: 1,
name: '个体户注册',
registerCity: '上海市',
time: '2019-11-06 14:13:01',
money: 3000,
num: 2,
state: '已支付'
},{
type: 2,
name: '个体增值服务',
manageCity: '北京市',
time: '2019-11-06 14:13:01',
money: 2000,
num: 1,
state: '已支付'
},{
type: 3,
name: '代理记账',
accountType: '小规模',
time: '2019-11-06 14:13:01',
money: 2000,
num: 1,
state: '已支付'
},{
type: 4,
name: '代开发票',
invoiceType: '普通发票',
time: '2019-11-06 14:13:01',
money: 2000,
name: '个体套餐服务',
registerCity: '北京市',
time: '2019-12-10 14:13:01',
money: 2500,
num: 1,
state: '已支付'
}],
......
.pay{
width: 100%;
height: 100%;
font-size: 14px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.pay-header{
width: 100%;
height: .78rem;
display: flex;
background: #FAF6F7;
}
.pay-header>span{
flex: 2;
display: flex;
justify-content: center;
align-items: center;
font-size:.26rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
}
.pay-header>p{
flex: 8;
}
.pay-header>span>img{
width: .17rem;
height: .3rem;
}
.pay-header>p{
flex: 8;
display: flex;
justify-content: center;
align-items: center;
font-size:.3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(19,19,19,1);
}
.pay-main{
flex: 1;
background: #F1F1F1;
display: flex;
flex-direction: column;
}
.money-top{
width: 100%;
height: 2.27rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: .4rem;
box-sizing: border-box;
background: #fff;
margin-top: .3rem;
}
.money-top>p{
font-size:.3rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
line-height:.42rem;
margin: .05rem;
}
.money-top>h3{
font-size:.4rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(255,106,0,1);
}
.money-top>h3>span{
font-size:.6rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(255,106,0,1);
}
.xinxi{
width: 100%;
height: 1.1rem;
background:rgba(255,255,255,1);
box-shadow:0px 2px 4px 0px rgba(192,192,192,0.5);
padding: .35rem .3rem;
box-sizing: border-box;
}
.xinxi>p{
float: left;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(102,102,102,1);
}
.xinxi>span{
float: right;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(34,34,34,1);
}
.pay-main>p{
width: 100%;
height: .66rem;
position: absolute;
left: 0;
bottom: .58rem;
padding: 0 .3rem;
box-sizing: border-box;
}
.pay-main>p>button{
width: 100%;
height: 100%;
background: #FF6A00;
border: 1px solid #FF6A00;
color: #fff;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
}
\ No newline at end of file
<div class="pay">
<div class="pay-header">
<span @click="$router.go(-1)">取消</span>
<p>支付</p>
<span></span>
</div>
<div class="pay-main">
<div class="money-top">
<p>公司宝-订单编号 107120914445</p>
<h3>¥ <span>2500.00</span></h3>
</div>
<div class="xinxi">
<p>收款方</p>
<span>公司宝平台商户</span>
</div>
<p>
<button @click="zhifu()">立即支付</button>
</p>
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
}
},
mounted: function() {
},
created: function() {
},
methods: {
random(){
var num;
for (var i = 0; i < 3; i++) {
num = num + "" + Math.floor(Math.random() * 1000)
};
return num;
},
zhifu(){
this.$root.postReq("/web/auth/userCtl/h5payment", {
"company_id": 1,
"pay_title": "个体户套餐服务",
"total_sum": 250000,
"order_no": 'se' + this.random(),
"returl": "https://channelapp.gongsibao.com:4004/#/employed?num=2"
}).then(res => {
if (res.status == 0) {
window.open(res.data.payUrl)
}
})
}
},
vname: "gsb-pay"
}
.paysuccess{
width: 100%;
height: 100%;
font-size: 14px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.paysuccess-header{
width: 100%;
height: .78rem;
display: flex;
background: #FAF6F7;
}
.paysuccess-header>span{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size:.26rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
}
.paysuccess-header>p{
flex: 8;
}
.paysuccess-header>span>img{
width: .17rem;
height: .3rem;
}
.paysuccess-header>p{
flex: 8;
display: flex;
justify-content: center;
align-items: center;
font-size:.3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(19,19,19,1);
}
.paysuccess-main{
flex: 1;
background: #F1F1F1;
display: flex;
flex-direction: column;
}
.success-top{
width: 100%;
height: 5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: .4rem;
box-sizing: border-box;
}
.success-top>img{
width:1.75rem;
height:1.75rem;
margin: .27rem 0;
}
.success-top>p{
font-size:.36rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
line-height:.50rem;
}
.xinxi{
width: 100%;
height: 1.1rem;
background:rgba(255,255,255,1);
box-shadow:0px 2px 4px 0px rgba(192,192,192,0.5);
padding: .35rem .3rem;
box-sizing: border-box;
}
.xinxi>p{
float: left;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(102,102,102,1);
}
.xinxi>span{
float: right;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(34,34,34,1);
}
.paysuccess-main>p{
width: 100%;
height: .66rem;
padding: 0 .3rem;
box-sizing: border-box;
display: flex;
}
.paysuccess-main>p>button:nth-child(1){
flex: 4;
background: #fff;
border: 1px solid #FF6A00;
color: #000;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
}
.paysuccess-main>p>span{
flex: 1;
}
.paysuccess-main>p>button:nth-child(3){
flex: 4;
background: #FF6A00;
border: 1px solid #FF6A00;
color: #fff;
font-size:.28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
}
\ No newline at end of file
<div class="paysuccess">
<div class="paysuccess-header">
<span @click="$router.go(-1)"><img src="/imgs/leftjian.png" alt=""></span>
<p>支付</p>
<span></span>
</div>
<div class="paysuccess-main">
<div class="success-top">
<img src="/imgs/paysuccess.png" alt="">
<p>支付成功</p>
</div>
<p>
<button>再下一单</button>
<span></span>
<button>去开票</button>
</p>
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
}
},
mounted: function() {
},
created: function() {
},
methods: {
},
vname: "gsb-paysuccess"
}
.phonelogin{
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
font-size: 14px;
}
.user-login-top{
width: 100%;
height: 4.3rem;
background: url("/imgs/touxiang.png") no-repeat;
background-size: 100%;
}
.phonelogin-header{
width: 100%;
height: .78rem;
display: flex;
}
.phonelogin-header>span{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.phonelogin-header>span>img{
width: .17rem;
height: .3rem;
}
.phonelogin-header>p{
flex: 8;
display: flex;
justify-content: center;
align-items: center;
font-size:.3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color: #fff;
box-sizing: border-box;
}
.phonelogin-main{
flex: 1;
overflow: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: .3rem;
}
.inp{
width: 100%;
padding: 0 .3rem;
margin-top: .58rem;
}
.username{
width: 100%;
height: .84rem;
position: relative;
}
.username>img{
width: .29rem;
height: .38rem;
position: absolute;
top: .25rem;
left: 0;
}
.username>div{
width: 100%;
height: 100%;
border-bottom: 1px solid #C8C8C8;
box-sizing: border-box;
}
.username>div>input{
width: 100%;
height: 100%;
border: none;
padding-left: .6rem;
outline: none;
box-sizing: border-box;
}
.username>button{
width: 1.5rem;
height: .40rem;
font-size: .22rem;
border-radius:5px;
border:1px solid rgba(255,106,0,1);
font-size:.22rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,106,0,1);
position: absolute;
bottom:.21rem;
right: 0;
background: #fff;
}
.username>i{
width:.48rem;
height:.26rem;
background: url("/imgs/yanjing-2.png") no-repeat;
background-size: 100%;
position: absolute;
bottom:.28rem;
right: .02rem;
}
.iclick{
background: url("/imgs/yanjing.png") no-repeat !important;
background-size: 100% !important;
}
.pwdLogin{
width: 100%;
margin: .1rem 0 .7rem 0;
font-size:.26rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,106,0,1);
line-height:.37rem;
}
.pwdLogin>span{
float: right;
}
.btnLogin{
width: 100%;
height:.8rem;
background:rgba(255,106,0,1);
border-radius:.1rem;
font-size:.3rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
border: none;
}
.username .flag{
border: 1px solid #C8C8C8;
color: #C8C8C8;
}
.bottomList{
width: 100%;
margin-top: .2rem;
text-align: center;
font-size:.26rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(89,95,98,1);
line-height:.37rem;
}
\ No newline at end of file
<div class="phonelogin">
<div class="user-login-top">
<div class="phonelogin-header">
<span @click="$router.go(-1)"><img src="/imgs/whiteRight.png" alt=""></span>
<p>手机账号登录</p>
<span></span>
</div>
</div>
<div class="phonelogin-main">
<div class="inp">
<div class="username"><img src="/imgs/shouji.png" alt=""> <div><input v-model="username" type="text" placeholder="请输入手机号码"></div></div>
<div class="username"><img src="/imgs/mima.png" alt=""></i><div><input v-model="password" :type="inpType" placeholder="请输入密码"></div><i @click="falgClick()" :class="flag ? \'iclick\' : \'\'"></i></div>
</div>
<div class="pwdLogin"><span @click="goUser()">验证码登录</span></div>
<button class="btnLogin">登录</button>
<div class="bottomList"><span @click="goForgot()">忘记密码</span><span @click="goRegister()">立即注册</span></div>
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
username: null,
password: null,
flag:false,
inpType: 'password'
}
},
mounted: function() {
},
created: function() {
},
methods: {
falgClick () {
console.log("asdasd");
this.flag = !this.flag;
if(this.flag){
this.inpType = "text";
}else{
this.inpType = "password";
};
},
goUser () {
this.$root.pushx({
title: "",
name: "/userlogin"
})
},
goForgot () {
this.$root.pushx({
title: "",
name: "/forgot"
})
},
goRegister () {
this.$root.pushx({
title: "",
name: "/registerphone"
})
}
},
vname: "gsb-userlogin"
}
.registerphone{
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
font-size: 14px;
}
.user-login-top{
width: 100%;
height: 4.3rem;
background: url("/imgs/touxiang.png") no-repeat;
background-size: 100%;
}
.registerphone-header{
width: 100%;
height: .78rem;
display: flex;
}
.registerphone-header>span{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.registerphone-header>span>img{
width: .17rem;
height: .3rem;
}
.registerphone-header>p{
flex: 8;
display: flex;
justify-content: center;
align-items: center;
font-size:.3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color: #fff;
box-sizing: border-box;
}
.registerphone-main{
flex: 1;
overflow: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: .3rem;
}
.title-text{
text-align: center;
margin-top: .5rem;
font-size:.26rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(89,95,98,1);
line-height:.37rem;
}
.inp{
width: 100%;
padding: 0 .3rem;
margin-top: .58rem;
}
.username{
width: 100%;
height: .84rem;
position: relative;
}
.username>img{
width: .29rem;
height: .38rem;
position: absolute;
top: .25rem;
left: 0;
}
.username>div{
width: 100%;
height: 100%;
border-bottom: 1px solid #C8C8C8;
box-sizing: border-box;
}
.username>div>input{
width: 100%;
height: 100%;
border: none;
padding-left: .6rem;
outline: none;
box-sizing: border-box;
}
.username>button{
width: 1.5rem;
height: .40rem;
font-size: .22rem;
border-radius:5px;
border:1px solid rgba(255,106,0,1);
font-size:.22rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,106,0,1);
position: absolute;
bottom:.21rem;
right: 0;
background: #fff;
}
.username>span{
font-size: .28rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(89,95,98,1);
position: absolute;
bottom:.21rem;
right: 0;
background: #fff;
}
.pwdLogin{
width: 100%;
margin: .1rem 0 .7rem 0;
font-size:.26rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,106,0,1);
line-height:.37rem;
}
.pwdLogin>span{
float: right;
}
.btnLogin{
width: 100%;
height:.8rem;
background:rgba(255,106,0,1);
border-radius:.1rem;
font-size:.3rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
border: none;
}
.username .flag{
border: 1px solid #C8C8C8;
color: #C8C8C8;
}
.bottomtong{
width: 100%;
margin-top: .2rem;
text-align: center;
font-size:.22rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(90,96,99,1);
line-height:.3rem;
display: flex;
justify-content: center;
align-items: center;
}
.bottomtong>p{
width: .22rem;
height: .22rem;
border: 1px solid ##B3B3B3;
border-radius: .06rem;
margin-right: .2rem;
}
.bottomtong>span{
color: #FF6A00;
}
.checked{
background: url("/imgs/checked.png") no-repeat;
background-size: .23rem .23rem;
border: 1px solid rgba(255,106,0,1) !important;
}
\ No newline at end of file
<div class="registerphone">
<div class="user-login-top">
<div class="registerphone-header">
<span @click="$router.go(-1)"><img src="/imgs/whiteRight.png" alt=""></span>
<p>手机号注册</p>
<span></span>
</div>
</div>
<div class="registerphone-main">
<div class="inp">
<div class="username"><img src="/imgs/shouji.png" alt=""> <div><input v-model="username" type="text" placeholder="请输入手机号码"></div><button :class="!flag ? \'flag\' : \'\'" @click="getYanzhengma()">获取验证码</button></div>
<div class="username"><img src="/imgs/yanzhengma.png" alt=""></i><div><input v-model="yanzhengma" type="text" placeholder="请输入验证码"></div><span v-if="time">{{time}}S</span></div>
<div class="username"><img src="/imgs/mima.png" alt=""></i><div><input v-model="password" :type="inpType" placeholder="请输入密码"></div><i @click="falgClick()" :class="flag1 ? \'iclick\' : \'\'"></i></div>
</div>
<div class="pwdLogin"><span></span></div>
<button class="btnLogin">确认</button>
<div class="bottomtong"><p :class="checked ? \'checked\' : \'\'" @click="checkout()"></p> 注册即表示同意<span>《公司宝账号服务协议》</span><span>《服务条款》</span></div>
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
return {
username: null,
yanzhengma: null,
password: null,
flag:true,
flag1:false,
time:null,
inpType: 'password',
checked: false
}
},
mounted: function() {
},
created: function() {
},
methods: {
getYanzhengma () {
if(this.flag){
this.flag = false;
this.time = 10;
/**
*
*
* */
let timer = setInterval(() => {
console.log(this.time);
if(this.time <= 1) {
this.flag = true;
this.time = null;
clearInterval(timer);
return ;
}
this.time--;
},1000)
}
},
falgClick () {
console.log("asdasd");
this.flag1 = !this.flag1;
if(this.flag1){
this.inpType = "text";
}else{
this.inpType = "password";
};
},
checkout () {
this.checked = !this.checked;
}
},
vname: "gsb-userlogin"
}
......@@ -6,29 +6,127 @@
flex-direction: column;
font-size: 14px;
}
.user-login-top{
width: 100%;
height: 4.3rem;
background: url("/imgs/touxiang.png") no-repeat;
background-size: 100%;
}
.userlogin-header{
width: 100%;
height: .78rem;
display: flex;
}
.userlogin-header>span{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.userlogin-header>span>img{
width: .17rem;
height: .3rem;
}
.userlogin-header>p{
flex: 8;
display: flex;
justify-content: center;
align-items: center;
font-size:.3rem;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color: #fff;
box-sizing: border-box;
}
.userlogin-main{
flex: 1;
overflow: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: .6rem;
padding: .3rem;
}
.inp{
width: 100%;
padding: 0 .3rem;
margin-top: .58rem;
}
.username{
width: 100%;
height: 1rem;
display: flex;
height: .84rem;
position: relative;
}
.username>i{
flex: 1;
.username>img{
width: .29rem;
height: .38rem;
position: absolute;
top: .25rem;
left: 0;
}
.username>div{
flex: 9;
width: 100%;
height: 100%;
border-bottom: 1px solid #C8C8C8;
box-sizing: border-box;
}
.username>div>input{
width: 100%;
height: 100%;
border: none;
padding-left: .6rem;
outline: none;
box-sizing: border-box;
}
.username>button{
width: 1rem;
height: .48rem;
width: 1.5rem;
height: .40rem;
font-size: .22rem;
border-radius:5px;
border:1px solid rgba(255,106,0,1);
font-size:.22rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,106,0,1);
position: absolute;
bottom:.21rem;
right: 0;
background: #fff;
}
.username>span{
font-size: .28rem;
line-height: .48rem;
background: #000;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(89,95,98,1);
position: absolute;
bottom:.21rem;
right: 0;
background: #fff;
}
.pwdLogin{
width: 100%;
margin: .1rem 0 .7rem 0;
font-size:.26rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,106,0,1);
line-height:.37rem;
}
.pwdLogin>span{
float: right;
}
.btnLogin{
width: 100%;
height:.8rem;
background:rgba(255,106,0,1);
border-radius:.1rem;
font-size:.3rem;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
border: none;
}
.username .flag{
border: 1px solid #C8C8C8;
color: #C8C8C8;
}
\ No newline at end of file
<div class="userlogin">
<div class="order-header">
<span @click="$router.go(-1)"><img src="/imgs/leftjian.png" alt=""></span>
<p>验证码登录</p>
<span></span>
<div class="user-login-top">
<div class="userlogin-header">
<span @click="$router.go(-1)"><img src="/imgs/whiteRight.png" alt=""></span>
<p>验证码登录</p>
<span></span>
</div>
</div>
<div class="userlogin-main">
<div class="username"><i class="el-icon-s-custom"></i><div><input type="text"></div><button>获取验证码</button></div>
<div class="code"><i class="el-icon-s-finance"></i><div><input type="text"></div><span>36s</span></div>
<div class="pwdLogin"><span>密码登录</span></div>
<div class="btnLogin">登 录</div>
<div class="inp">
<div class="username"><img src="/imgs/shouji.png" alt=""> <div><input v-model="username" type="text" placeholder="请输入手机号码"></div><button :class="!flag ? \'flag\' : \'\'" @click="getYanzhengma()">获取验证码</button></div>
<div class="username"><img src="/imgs/yanzhengma.png" alt=""></i><div><input v-model="password" type="text" placeholder="请输入验证码"></div><span v-if="time">{{time}}S</span></div>
</div>
<div class="pwdLogin"><span @click="goPhone()">密码登录</span></div>
<button class="btnLogin">登录</button>
</div>
</div>
\ No newline at end of file
......@@ -2,7 +2,10 @@
template: '${tmpl}',
data: function() {
return {
username: null,
password: null,
flag:true,
time:null
}
},
mounted: function() {
......@@ -12,7 +15,32 @@
},
methods: {
getYanzhengma () {
if(this.flag){
this.flag = false;
this.time = 10;
/**
*
*
* */
let timer = setInterval(() => {
console.log(this.time);
if(this.time <= 1) {
this.flag = true;
this.time = null;
clearInterval(timer);
return ;
}
this.time--;
},1000)
}
},
goPhone () {
this.$root.pushx({
title: "",
name: "/phonelogin"
})
}
},
vname: "gsb-userlogin"
}
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