1hjz
/
1hjz-h5
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

提现页

feature/feature-compatible
fengchengzhi 7 years ago
parent
838268a563
commit
29fae10058
8 changed files with 303 additions and 135 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/service-evaluation/u578.png
  2. 248
      src/assets/styles/style.css
  3. 2
      src/main.js
  4. 4
      src/router/index.js
  5. 70
      src/view/my-money.vue
  6. 25
      src/view/put-money-success.vue
  7. 63
      src/view/put-money.vue
  8. 26
      src/view/service-evaluation.vue

BIN
src/assets/images/service-evaluation/u578.png
View File

Before After
Width: 27  |  Height: 27  |  Size: 910 B

248
src/assets/styles/style.css
View File

@ -452,6 +452,113 @@ html,body {
color:rgba(51,51,51,1);
}
/*****弹出框样式****/
.popup-box {
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
}
.popup-centent {
position: relative;
background:rgba(255,255,255,1);
margin-top: -2rem;
}
.popup-centent span.closeBtn {
position: absolute;
right: .15rem;
top: .1rem;
width: .3rem;
height: .3rem;
display: block;
}
.popup-centent span.closeBtn img {
width: 100%;
height: 100%;
display: block;
}
.my-money .popup-authorization {
width:5.6rem;
height:3.4rem;
border-radius: 5px;
/* padding: 0.3rem 0.4rem; */
display: flex;
justify-content: center;
flex-direction: column;
box-sizing: border-box;
}
.my-money .popup-authorization p {
font-size:0.36rem;
font-family:PingFang-SC-Medium;
color:rgba(0,0,0,1);
text-align: center;
margin-top: .3rem;
}
.my-money .popup-authorization a img {
display: block;
width: 1rem;
margin: auto;
margin-top: .3rem;
}
.my-money .popup-authorization span {
font-size:0.3rem;
font-family:PingFang-SC-Medium;
color:rgba(153,153,153,1);
display: inline-block;
margin: auto;
margin-top: 0.2rem;
}
.my-money .popup-authorization2 {
width:5.6rem;
height:3.4rem;
border-radius: 5px;
/* padding: 0.3rem 0.4rem; */
/* display: flex; */
/* justify-content: center;
flex-direction: column;
box-sizing: border-box; */
}
.my-money .popup-authorization2 .cue-title {
height:0.34rem;
font-size:0.36rem;
font-family:PingFang-SC-Medium;
color:rgba(0,0,0,1);
margin-top: .4rem;
margin-bottom: .4rem;
}
.my-money .popup-authorization2 p {
text-align: center;
font-size:0.28rem;
font-family:PingFang-SC-Medium;
color:rgba(102,102,102,1);
padding: 0 0.3rem;
margin-bottom: .4rem;
}
.my-money .popup-authorization2 button {
width: 100%;
height:1rem;
background:rgba(255,255,255,1);
position: absolute;
bottom: 0;
border: none;
font-size:0.36rem;
font-family:PingFang-SC-Medium;
color:rgba(0,186,134,1);
border-radius: 5px;
border-top: 1px solid #D2D3D5;
}
/*******提现申请******/
.page-content {
width: 100%;
@ -514,6 +621,9 @@ html,body {
font-family:PingFang-SC-Regular;
color:rgba(153,153,153,1);
}
.put-money .content-box .cash .cash-cue span.active {
color: #F45252;
}
.put-money .content-box .cash .money {
width: 100%;
display: block;
@ -581,107 +691,7 @@ html,body {
text-align: center;
}
.put-money .popup-box {
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.put-money .popup-authorization {
width:5.6rem;
height:3.4rem;
border-radius: 5px;
/* padding: 0.3rem 0.4rem; */
display: flex;
justify-content: center;
flex-direction: column;
box-sizing: border-box;
}
.put-money .popup-authorization p {
font-size:0.36rem;
font-family:PingFang-SC-Medium;
color:rgba(0,0,0,1);
text-align: center;
margin-top: .3rem;
}
.put-money .popup-authorization a img {
display: block;
width: 1rem;
margin: auto;
margin-top: .3rem;
}
.put-money .popup-authorization span {
font-size:0.3rem;
font-family:PingFang-SC-Medium;
color:rgba(153,153,153,1);
display: inline-block;
margin: auto;
margin-top: 0.2rem;
}
.put-money .popup-centent {
position: relative;
background:rgba(255,255,255,1);
margin-top: -2rem;
}
.put-money .popup-centent span.closeBtn {
position: absolute;
right: .15rem;
top: .1rem;
width: .3rem;
height: .3rem;
display: block;
}
.put-money .popup-centent span.closeBtn img {
width: 100%;
height: 100%;
display: block;
}
.put-money .popup-authorization2 {
width:5.6rem;
height:3.4rem;
border-radius: 5px;
/* padding: 0.3rem 0.4rem; */
/* display: flex; */
/* justify-content: center;
flex-direction: column;
box-sizing: border-box; */
}
.put-money .popup-authorization2 .cue-title {
height:0.34rem;
font-size:0.36rem;
font-family:PingFang-SC-Medium;
color:rgba(0,0,0,1);
margin-top: .4rem;
margin-bottom: .4rem;
}
.put-money .popup-authorization2 p {
text-align: center;
font-size:0.28rem;
font-family:PingFang-SC-Medium;
color:rgba(102,102,102,1);
padding: 0 0.3rem;
margin-bottom: .4rem;
}
.put-money .popup-authorization2 button {
width: 100%;
height:1rem;
background:rgba(255,255,255,1);
position: absolute;
bottom: 0;
border: none;
font-size:0.36rem;
font-family:PingFang-SC-Medium;
color:rgba(0,186,134,1);
border-radius: 5px;
border-top: 1px solid #D2D3D5;
}
.put-money-success .content-box {
width:6.9rem;
@ -746,8 +756,6 @@ html,body {
}
.service-evaluation .page-content {
background: #fff;
}
@ -769,6 +777,20 @@ html,body {
font-family:PingFang-SC-Medium;
color:rgba(102,102,102,1);
}
.service-evaluation .evaluate {
position: relative;
}
.service-evaluation .evaluate .evaluate-question-btn {
width: .5rem;
height: .5rem;
display: block;
background: url(../images/service-evaluation/u578.png) no-repeat;
background-size: 100%;
position: absolute;
right: .15rem;
top: .1rem;
}
.service-evaluation .evaluate .evaluate-tab {
display: flex;
align-items: center;
@ -831,6 +853,28 @@ html,body {
letter-spacing: 10px;
margin-top: 1.5rem;
}
.service-evaluation #popup-question {
position: absolute;
width: 90%;
left: 5%;
top: 7rem;
font-size: .3rem;
border: 1px solid #DDD;
border-radius: 5px;
padding: .3rem;
box-sizing: border-box;
}
.service-evaluation #popup-question .popup-body p {
line-height: .5rem;
}
.service-evaluation-status .evaluation-status-icon {
width: 2rem;
display: block;

2
src/main.js
View File

@ -8,6 +8,8 @@ import '@/assets/iconfont.css'
import '@/assets/styles/main.scss'
import '@/assets/styles/style.css'
import '@/common/rem.js'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(WechatPlugin)

4
src/router/index.js
View File

@ -6,7 +6,7 @@ const monthCard = resolve => require(['@/view/month-card'], resolve)
const myMoney = resolve => require(['@/view/my-money'], resolve)
const putMoney = resolve => require(['@/view/put-money'], resolve)
const serviceEvaluation = resolve => require(['@/view/service-evaluation'], resolve)
const putMoneySuccess = resolve => require(['@/view/put-moneySuccess'], resolve)
const putMoneySuccess = resolve => require(['@/view/put-money-success'], resolve)
const serviceEvaluationStatus = resolve => require(['@/view/service-evaluation-status'], resolve)
@ -33,7 +33,7 @@ let router = new Router({
component: putMoney
},
{
path: '/put-moneySuccess',
path: '/put-money-success',
name: '提现成功',
component: putMoneySuccess
},

70
src/view/my-money.vue
View File

@ -2,9 +2,10 @@
<template>
<div class="my-money">
<div class="page-top">
<a><img src="../assets/images/my-money/left.png"/></a>
<a @click="goBack()"><img src="../assets/images/my-money/left.png"/></a>
<span>我的钱包</span>
</div>
<div class="content">
<!--查看规则-->
<div class="rule">
@ -17,7 +18,7 @@
<!--余额-->
<div class="balance">
<div>余额：<span>500.00</span></div>
<a href="javascript:void(0)" class="put-money">提现</a>
<a href="javascript:void(0)" class="put-money" @click="toPutMoney ()">提现</a>
</div>
<!--收支明细-->
@ -54,9 +55,72 @@
</li>
</ul>
</div>
</div>
</div> <!--content end-->
<!--授权弹框-->
<div id="authorization" class="popup-box" v-show="isShowAuthorization">
<div class="popup-authorization popup-centent">
<span class="closeBtn"><img src="../assets/images/put-money/close.png" alt=""></span>
<p>提现需微信授权</p>
<a href="" ><img src="../assets/images/put-money/weixin.png" alt=""></a>
<span>点击授权</span>
</div>
</div>
<!--授权弹框2-->
<div id="authorization2" class="popup-box" v-show="isShowAuthorization2">
<div class="popup-authorization2 popup-centent">
<span class="closeBtn" @click="closePupup()" ><img src="../assets/images/put-money/close.png" alt=""></span>
<p class="cue-title">提示</p>
<p>请进入微信公众号“一号家政服务号”进行提现操作</p>
<button @click="closePupup()">确定</button>
</div>
</div>
</div>
</template>
<script>
export default{
data() {
return {
//隐藏弹框
isShowAuthorization: false,
isShowAuthorization2: false
}
},
methods:{
toPutMoney (){
//this.isWeixin()
if (!this.isShowAuthorization2 ){
this.$router.push({path:'/put-money'});
}
},
isWeixin() {
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
this.isShowAuthorization2 = true;
return false;
}
},
//点击关闭弹出框
closePupup() {
//ev.cancelBubble = true;
this.isShowAuthorization2 = false;
this.isShowAuthorization1 = false;
},
//返回上一页
goBack() {
history.go(-1)
}
},
mounted() {
//this.isWeixin ()
}
}
</script>

25
src/view/put-money-success.vue
View File

@ -1,4 +1,25 @@
<script src="../common/rem.js"></script>
<template>
<div class="put-money-success">
<div class="page-top">
<a><img src="../assets/images/my-money/left.png"/></a>
<span>提现申请</span>
</div>
<div class="page-content">
<div class="content-box">
<div class="box-top">
<img src="../assets/images/put-money/audit.png" alt="">
<p>提现审核中</p>
<span>1-3个工作日</span>
</div>
<div class="money-news">
<p>提现金额：￥ <span>800</span></p>
</div>
</div>
<button class="submitBtn">返回首页</button>
</div>
</div>
</template>
</template>

63
src/view/put-money.vue
View File

@ -2,7 +2,7 @@
<template>
<div class="put-money">
<div class="page-top">
<a><img src="../assets/images/my-money/left.png"/></a>
<a @click="goBack()"><img src="../assets/images/my-money/left.png"/></a>
<span>提现申请</span>
</div>
<div class="page-content">
@ -16,10 +16,10 @@
<p>1-3个工作日到账</p>
</div>
<div class="cash">
<div class="cash-cue">提现现金 <span>(请输入整数金额)</span></div>
<div class="cash-cue">提现现金 <span v-bind:class="{ active: isActive }">{{inputCue}}</span></div>
<label for="" class="money">
<span>￥</span>
<input type="text" placeholder="输入现金金额">
<input type="text" placeholder="输入现金金额" v-model="inputVal" v-on:change="inputValRule()">
</label>
<p>可提现余额：<span>800</span></p>
<button class="ative">提交申请</button>
@ -34,28 +34,41 @@
<p>已达本月提现5次上限</p>
</div>
<!--授权弹框-->
<div id="authorization" class="popup-box" style="visibility:hidden">
<div class="popup-authorization popup-centent">
<span class="closeBtn"><img src="../assets/images/put-money/close.png" alt=""></span>
<p>提现需微信授权</p>
<a href="" ><img src="../assets/images/put-money/weixin.png" alt=""></a>
<span>点击授权</span>
</div>
</div>
<!--授权弹框2-->
<div id="authorization2" class="popup-box" style="visibility:visible">
<div class="popup-authorization2 popup-centent">
<span class="closeBtn"><img src="../assets/images/put-money/close.png" alt=""></span>
<p class="cue-title">提示</p>
<p>请进入微信公众号“一号家政服务号”进行提现操作</p>
<button>确定</button>
</div>
</div>
</div>
</div>
</template>
</template>
<script>
export default{
data() {
return {
inputCue : '(请输入整数金额)',
//默认一开始输入款的值不符合验证规则
isActive:false,
inputVal: null,
}
},
methods:{
//验证输入款的值
inputValRule() {
var num = this.inputVal
var rule = /^[1-9]\d*$/;
if (!rule.test(num)) {
this.inputCue = '( 请输入正整数金额！)'
this.inputVal = ''
this.isActive = true
return
}
},
//返回上一页
goBack() {
history.go(-1)
}
},
mounted() {
//this.isWeixin ()
}
}
</script>

26
src/view/service-evaluation.vue
View File

@ -15,6 +15,7 @@
<div class="line"></div>
<!--服务评价-->
<div class="evaluate">
<span class="evaluate-question-btn"></span>
<div class="evaluate-tab">
<label>准时到达</label>
<ul>
@ -50,6 +51,29 @@
<!--提交意见-->
<textarea name="" id="" class="message">您的宝贵意见，将帮助我们提升服务</textarea>
<button class="submitBtn">提交</button>
</div>
<!--问题弹出框-->
<!-- <div id="popup-question" class="popup-box" style="display:block">
<div class=" popup-centent">
<span class="closeBtn"><img src="../assets/images/put-money/close.png" alt=""></span>
<p class="cue-title">提示</p>
<p>请进入微信公众号“一号家政服务号”进行提现操作</p>
<button>确定</button>
</div>
</div> -->
<div class="popup-centent" id="popup-question">
<span class="closeBtn"><img src="../assets/images/put-money/close.png" alt=""></span>
<div class="popup-body">
<p>准时到达：本次保洁师是否如约到达？</p>
<p>洁净标准：本次洁净服务质量,是否您满意？</p>
<p>专业高效：本次洁净服务速度,是否您满意？</p>
</div>
</div>
</div>
</template>
</template>
<script>
</script>
Write Preview
Loading…
Cancel
Save