完成 评价页面 和 提现页面的 布局

build/webpack.base.conf.js

@@ -1,5 +1,9 @@
 var path = require('path')
 var utils = require('./utils')
+
+var projectRoot = path.resolve(__dirname, '../')
+const vuxLoader = require('vux-loader')
+
 var config = require('../config')
 var vueLoaderConfig = require('./vue-loader.conf')
 
@@ -7,7 +11,7 @@ function resolve (dir) {
   return path.join(__dirname, '..', dir)
 }
 
-module.exports = {
+let webpackConfig = {
   entry: {
     app: './src/main.js'
   },
@@ -56,3 +60,8 @@ module.exports = {
     ]
   }
 }
+
+
+module.exports = vuxLoader.merge(webpackConfig, {
+  plugins: ['vux-ui', 'progress-bar', 'duplicate-style']
+})

package.json

@@ -16,7 +16,9 @@
     "lodash": "^4.17.4",
     "vue": "^2.5.9",
     "vue-router": "^2.8.1",
-    "vue-template-compiler": "^2.5.9"
+    "vue-template-compiler": "^2.5.9",
+    "vux": "^2.9.2",
+    "vux-loader": "^1.2.9"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",
@@ -45,6 +47,8 @@
     "rimraf": "^2.6.2",
     "sass-loader": "^6.0.6",
     "semver": "^5.4.1",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
     "style-loader": "^0.16.1",
     "url-loader": "^0.5.9",
     "vue-loader": "^11.1.4",

src/assets/styles/style.css

@@ -2,6 +2,21 @@
     margin: 0;
     padding: 0;
 }
+input:focus,button:focus,textarea:focus {
+    outline: none;
+}
+html,body {
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+    background:rgba(243,243,243,1);
+}
+
+#app {
+    width: 100%;
+    height: 100%; 
+}
+
 .m-page {
     width: 100%;
     height: 100%;
@@ -286,3 +301,548 @@
     display: none;
 }
 
+
+/******我的钱包******/
+.page-top {
+    width: 100%;
+    height: 0.9rem;
+    background:rgba(0,186,134,1);
+    display: flex;
+    align-items: center;
+    position: relative;
+    position: fixed;
+    top: 0;
+}
+.page-top a {
+    height: 0.36rem;
+    display: inline-block;
+    position: absolute;
+    left: 0.3rem
+}
+.page-top a img {
+    height: 0.36rem;
+    display: block;
+}
+.page-top span {
+    display: inline-block;
+    margin: auto;
+    font-size:0.36rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(255,255,255,1);
+    letter-spacing: 1px;
+}
+.my-money .content {
+    padding-top: 0.9rem;
+}
+.my-money .rule {
+    width:100%;
+    height:1.18rem;    
+    border-radius:0rem;
+    padding: 0.1rem 0.1rem;
+    box-sizing: border-box;
+}
+.my-money .rule .rule-content {
+    width: 100%;
+    height: 100%;
+    background:rgba(255,251,238,1);
+    display: flex;
+    align-items: center;
+}
+.my-money .rule .rule-content img {
+    width: 0.9rem;
+    margin-left: .3rem
+}
+
+.my-money .rule .rule-content a.text {
+    font-family:Adobe Heiti Std R;
+    color:rgba(254,136,31,1);
+    font-size: 0.4rem;
+    margin-left: 0.2rem;
+    margin-right: auto;
+}
+
+.my-money .rule .rule-content a.icon {
+    height: 0.36rem;
+}
+.my-money .rule .rule-content a.icon img {
+    width: auto;
+    height: 0.36rem;
+    display: block;
+    margin-right: 0.3rem;
+}
+
+.my-money .balance {
+    height:1.7rem;
+    background:rgba(255,255,255,1);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.3rem;
+    padding: 0 0.3rem;
+}
+.my-money .balance .put-money {
+    width:1.68rem;
+    height:0.68rem;
+    background:rgba(72,201,147,1);
+    border-radius:0rem;
+    font-size:0.34rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(255,255,255,1);
+    text-align: center;
+    line-height: 0.68rem;
+}
+.my-money .balance >div {
+    font-size:0.36rem;
+    font-family:PingFang-SC-Regular;
+    color:rgba(102,102,102,1);
+    display: flex;
+    align-items: center;
+}
+.my-money .balance >div span {
+    font-size:0.7rem;
+    font-family:PingFang-SC-Heavy;
+    color:rgba(51,51,51,1);
+}
+
+.my-money .payments .title-span {
+    font-size:0.28rem;
+    color:rgba(102,102,102,1);
+    display: block;
+    line-height:0.38rem;
+    margin-top: 0.2rem;
+    margin-left: 0.2rem;
+}
+
+.my-money .payments >ul >li {
+    width: 100%;
+    height: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1px;
+    background: #fff;
+    padding: 0 0.3rem;
+    box-sizing: border-box;
+}
+
+.my-money .payments >ul >li .liLeft {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.my-money .payments >ul >li .liLeft .name {
+    font-size:0.3rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(51,51,51,1);
+}
+.my-money .payments >ul >li .liLeft .time {
+    font-size:0.22rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(153,153,153,1);
+}
+
+.my-money .payments >ul >li span {
+    font-size:0.36rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(254,152,64,1);
+}
+
+.my-money .payments >ul >li span.put {
+    color:rgba(51,51,51,1);
+}
+
+/*******提现申请******/
+.page-content {
+    width: 100%;
+    position: absolute;
+    top: 0.9rem;
+    bottom: 0;
+    overflow-y: scroll;
+}
+
+.put-money .content-box {
+    width: 7rem;
+    margin: auto;
+    margin-top: 0.3rem;
+    border: 1px solid #DCDCDC;
+    border-radius: 5px;
+    /* padding: 0.5rem 0.35rem 1rem; */
+    box-sizing: border-box;
+    background-color: #fff;
+}
+
+.put-money .content-box .account {
+    padding: 0.5rem 0.35rem 0.3rem;
+    border-bottom: 1px solid #DCDCDC;
+}
+
+.put-money .content-box .account div {
+    font-size:0.3rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(51,51,51,1); 
+    align-items: center;
+    display: flex;
+}
+
+.put-money .content-box .account div img {
+    width: 0.4rem;
+    height: 0.4rem;
+    margin-left: 3px;
+    margin-right: 5px; 
+}
+
+.put-money .content-box .account p {
+    font-size:0.2rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(153,153,153,1);
+    text-align: center;
+}
+
+.put-money .content-box .cash {
+    padding: 0.3rem 0.35rem 1rem;
+}
+
+.put-money .content-box .cash .cash-cue {
+    font-size:0.3rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(51,51,51,1);
+}
+
+.put-money .content-box .cash .cash-cue span {
+    font-size:0.24rem;
+    font-family:PingFang-SC-Regular;
+    color:rgba(153,153,153,1);
+}
+.put-money .content-box .cash .money {
+    width: 100%;
+    display: block;
+    border-bottom: 1px solid #D2D2D2;
+}
+.put-money .content-box .cash .money span {
+    font-size:0.6rem;
+    font-family:PingFang-SC-Regular;
+    color:rgba(51,51,51,1);
+}
+
+.put-money .content-box .cash .money input {
+    height: 0.8rem;
+    font-size: 0.36rem;
+    border: none;
+}
+
+.put-money .content-box .cash p {
+    font-size:0.3rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(153,153,153,1);
+    margin-top: 0.25rem;
+}
+
+.put-money .content-box .cash button {
+    width:4.68rem;
+    height:0.76rem;
+    background:rgba(0,186,134,.5);
+    border-radius: 5px;
+    color: #fff;
+    font-size:0.34rem;
+    border: none;
+    margin: auto;
+    display: block;
+    margin-top: 1rem;
+}
+
+.put-money .content-box .cash button.ative {
+    background:#00BA86;
+}
+
+
+.put-money #upper-limit {
+    position: absolute;
+    width: 3.2rem;
+    height: 2.9rem;
+    background: rgba(0,0,0,.6);
+    border-radius: 5px;
+    top: 2.8rem;
+    left: 2.15rem;
+    z-index: 10;
+}
+
+.put-money #upper-limit img {
+    width: 1rem;
+    height: 1rem;
+    display: block;
+    margin: .5rem auto;
+}
+
+.put-money #upper-limit p {
+    font-size:0.26rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(255,255,255,1);
+    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;
+    height:5.4rem;
+    background:rgba(255,255,255,1);
+    border-radius: 5px;
+    margin: auto;
+    margin-top: .3rem;
+}
+
+.put-money-success .content-box .box-top {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+
+.put-money-success .content-box .box-top img {
+    width: 1rem;
+    margin-top: .6rem;
+    margin-bottom: .3rem;
+}
+
+.put-money-success .content-box .box-top p {
+    font-size:0.3rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(0,186,134,1); 
+}
+.put-money-success .content-box .box-top span {
+    font-size:0.24rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(153,153,153,1);
+    margin-top: .2rem;
+}
+.put-money-success .content-box .money-news {
+    width: 90%;
+    font-size:0.3rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(51,51,51,1);
+    margin: auto;
+    margin-top: .7rem;
+    border-bottom: 1px solid #D2D2D2;
+}
+.put-money-success .content-box .money-news span {
+    font-size:0.6rem;
+    font-family:PingFang-SC-Bold;
+    color:rgba(51,51,51,1);
+    margin-left: 5px;
+}
+.put-money-success .submitBtn {
+    width:5rem;
+    height:0.8rem;
+    background:rgba(0,186,134,1);
+    border-radius:5px;
+    margin: auto;
+    display: block;
+    border: none;
+    font-size:0.36rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(255,255,255,1);
+    margin-top: .4rem;
+}
+
+
+
+
+.service-evaluation .page-content {
+    background: #fff;
+}
+.service-evaluation .page-content .line {
+    height: 5px;
+    background: #F4F4F4;
+}
+.service-evaluation .page-content .cleaners-news {
+    padding: 0.3rem 0 0.3rem 0.3rem;
+    background-color: #fff;
+}
+.service-evaluation .page-content .cleaners-news p:nth-child(1) {
+    font-size:0.32rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(51,51,51,1);
+}
+.service-evaluation .page-content .cleaners-news p:nth-child(2) {
+    font-size:0.26rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(102,102,102,1);
+}
+.service-evaluation .evaluate .evaluate-tab {
+    display: flex;
+    align-items: center;
+    padding: .3rem 0;
+    border-bottom: 1px solid #F4F4F4;
+}
+.service-evaluation .evaluate .evaluate-tab ul {
+    display: flex;
+    align-items: center;
+}
+.service-evaluation .evaluate .evaluate-tab ul li {
+    list-style: none;
+    display: inline-block;
+    width: .6rem;
+    height: .6rem;
+    margin-right: .3rem;
+    background: url(../images/service-evaluation/stars-1.png) no-repeat;
+    background-size: 100%;
+}
+.service-evaluation .evaluate .evaluate-tab label {
+    font-size:0.3rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(51,51,51,1);
+    margin-right: .4rem;
+    margin-left: .3rem;
+}
+.service-evaluation .evaluate .evaluate-tab ul li.ative {
+    width: .6rem;
+    height: .6rem;
+    background: url(../images/service-evaluation/stars-2.png) no-repeat;
+    background-size: 100%;
+}
+
+.service-evaluation .message {
+    width: 7rem;
+    height: 2rem;
+    display: block;
+    margin: auto;
+    margin-top: .4rem;
+    resize: none;
+    background: #F4F4F4;
+    border: none;
+    padding: .2rem;
+    box-sizing: border-box;
+    font-size: .3rem;
+    color:rgba(153,153,153,1);
+}    
+
+.service-evaluation .submitBtn {
+    width:5rem;
+    height:0.8rem;
+    background:rgba(0,186,134,1);
+    border-radius: 5px;
+    margin: auto;
+    display: block;
+    border: none;
+    font-size:0.36rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(255,255,255,1);
+    letter-spacing: 10px;
+    margin-top: 1.5rem;
+}
+.service-evaluation-status .evaluation-status-icon {
+    width: 2rem;
+    display: block;
+    margin: auto;
+    margin-top: 1.8rem;
+}
+.service-evaluation-status .evaluation-status-box span {
+    font-size:0.28rem;
+    font-family:PingFang-SC-Medium;
+    color:rgba(0,186,134,1);  
+    display: block;
+    margin: auto;
+    margin-top: 0.25rem;
+    text-align: center;
+}

src/common/rem.js

@@ -0,0 +1,13 @@
+window.onload = function(){
+    /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
+      为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
+    getRem(750,100)
+};
+window.onresize = function(){
+    getRem(750,100)
+};
+function getRem(pwidth,prem){
+    var html = document.getElementsByTagName("html")[0];
+    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+    html.style.fontSize = oWidth/pwidth*prem + "px";
+}

src/configs.js.default

@@ -1,20 +0,0 @@
-/**
- * 设置api请求的baseURL 
- */
-
-let configs = {
-    // 请求协议
-    protocol : 'http',
-    // 请求域名
-    host: 'api.lch.3ncto.com.cn',
-    // 基础路径
-    basePath: '/api2.php'
-}
-
-export default {
-  baseURL: configs.protocol + '://' + configs.host + configs.basePath,
-  // baseURL: '',
-  isDev: false,
-
-  locationUrl: 'http://192.168.40.160:8808'
-}

src/main.js

@@ -1,13 +1,20 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
+import {WechatPlugin, AjaxPlugin, LoadingPlugin, ToastPlugin, AlertPlugin} from 'vux'
 import App from './App'
 import router from './router'
 import '@/assets/iconfont.css'
 import '@/assets/styles/main.scss'
 import '@/assets/styles/style.css'
+import '@/common/rem.js'
 
 Vue.config.productionTip = false
+Vue.use(WechatPlugin)
+Vue.use(AjaxPlugin)
+Vue.use(LoadingPlugin)
+Vue.use(ToastPlugin)
+Vue.use(AlertPlugin)
 
 /* eslint-disable no-new */
 new Vue({
@@ -15,4 +22,4 @@ new Vue({
   router,
   template: '<App/>',
   components: {App}
-})
+})

src/router/index.js

@@ -3,6 +3,14 @@ import Router from 'vue-router'
 
 // 懒加载方式，当路由被访问的时候才加载对应组件
 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 serviceEvaluationStatus = resolve => require(['@/view/service-evaluation-status'], resolve)
+
+
+const demo = resolve => require(['@/view/demo'], resolve)
 
 Vue.use(Router)
 
@@ -13,6 +21,36 @@ let router = new Router({
           path: '/month-card',
           name: '领取优惠券',
           component: monthCard
+        },
+        {
+            path: '/my-money',
+            name: '我的钱包',
+            component: myMoney
+        },
+        {
+            path: '/put-money',
+            name: '提现申请',
+            component: putMoney
+        },
+        {
+            path: '/put-moneySuccess',
+            name: '提现成功',
+            component: putMoneySuccess
+        },
+        {
+            path: '/service-evaluation',
+            name: '服务评价',
+            component: serviceEvaluation
+        },
+        {
+            path: '/service-evaluation-status',
+            name: '服务评价状态',
+            component: serviceEvaluationStatus
+        },
+        {
+            path: '/demo',
+            name: 'demo',
+            component: demo
         }
     ]
 })

src/view/demo.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <group>
+      <x-switch :title="''"  v-model="show"></x-switch>
+     
+    </group>
+  </div>
+</template>
+
+<script>
+import { TransferDom, Actionsheet, Group, XSwitch, Toast } from 'vux'
+
+export default {
+  components: {
+    Actionsheet,
+    Group,
+    XSwitch,
+    Toast
+  },
+  directives: {
+    TransferDom
+  },
+  data () {
+    return {
+        show: '123'
+    }
+  },
+  methods: {
+    log (str) {
+      console.log(str)
+    }
+  }
+}
+</script>
+
+<style>
+.popup0 {
+  padding-bottom:15px;
+  height:200px;
+}
+.popup1 {
+  width:100%;
+  height:100%;
+}
+</style>

src/view/my-money.vue

@@ -0,0 +1,62 @@
+
+<template>
+	<div class="my-money">
+		<div class="page-top">
+			<a><img src="../assets/images/my-money/left.png"/></a>
+			<span>我的钱包</span>
+		</div>
+		<div class="content">
+			<!--查看规则-->
+			<div class="rule">
+				<div class="rule-content">
+					<img src="../assets/images/my-money/money.png" alt="">
+					<a href="javascript:void(0)" class="text">查看推荐奖励规则</a>
+					<a href="javascript:void(0)" class="icon"><img src="../assets/images/my-money/right.png"/></a>
+				</div>
+			</div>
+			<!--余额-->
+			<div class="balance">
+				<div>余额：<span>500.00</span></div>
+				<a href="javascript:void(0)" class="put-money">提现</a>
+			</div>
+
+			<!--收支明细-->
+			<div class="payments">
+				<span class="title-span">收支明细</span>
+				<ul>
+					<li>
+						<div class="liLeft">
+							<div class="name">推荐保洁师</div>
+							<div class="time">2017-09-05</div>
+						</div>
+						<span>+500</span>
+					</li>
+					<li>
+						<div class="liLeft">
+							<div class="name">提现</div>
+							<div class="time">2017-09-05</div>
+						</div>
+						<span class="put">-500</span>
+					</li>
+					<li>
+						<div class="liLeft">
+							<div class="name">推荐用户下单</div>
+							<div class="time">2017-09-05</div>
+						</div>
+						<span>+500</span>
+					</li>
+					<li>
+						<div class="liLeft">
+							<div class="name">推荐保洁师服务</div>
+							<div class="time">2017-09-05</div>
+						</div>
+						<span>+200</span>
+					</li>
+				</ul>
+			</div>
+		</div>
+		
+	</div>
+</template>
+
+

src/view/put-money-success.vue

@@ -0,0 +1,4 @@
+<script src="../common/rem.js"></script>
+<template>
+
+</template>

src/view/put-money.vue

@@ -0,0 +1,61 @@
+
+<template>
+    <div class="put-money">
+		<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="account">
+                    <div>
+                        <span>到账账号：</span>
+                        <img src="../assets/images/put-money/money-icon.png" alt="">
+                        <span>微信钱包零钱</span>
+                    </div>
+                    <p>1-3个工作日到账</p>
+                </div>
+                <div class="cash">
+                    <div class="cash-cue">提现现金 <span>(请输入整数金额)</span></div>
+                    <label for="" class="money">
+                        <span>￥</span>
+                        <input type="text" placeholder="输入现金金额">
+                    </label>
+                    <p>可提现余额：<span>800</span></p>
+                    <button class="ative">提交申请</button>
+                </div>
+            </div>
+        </div>
+
+        <!--弹出框-->
+        <!--提现上限-->
+        <div id="upper-limit" style="display:none">
+            <img src="../assets/images/put-money/cue.png" alt="">
+            <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>
+   
+
+</template>

src/view/put-moneySuccess.vue

@@ -0,0 +1,25 @@
+
+<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>
+
+

src/view/service-evaluation-status.vue

@@ -0,0 +1,25 @@
+
+<template>
+    <div class="service-evaluation-status">
+        <div class="page-top">
+			<a><img src="../assets/images/my-money/left.png"/></a>
+			<span>服务评价</span>
+		</div>
+        <div class="page-content">
+            <div class="evaluation-status-box">
+                <!--
+                    评价成功
+                    ../assets/images/service-evaluation/evaluation-status-0.png
+                    //不可重复评价
+                    ../assets/images/service-evaluation/evaluation-status-1.png
+                    //已过期
+                    ../assets/images/service-evaluation/evaluation-status-2.png
+                    //账号不一致
+                    ../assets/images/service-evaluation/evaluation-status-3.png
+                -->
+                <img src="../assets/images/service-evaluation/evaluation-status-0.png" class="evaluation-status-icon">
+                <span>评价成功</span>
+            </div>
+        </div>
+    </div>
+</template>

src/view/service-evaluation.vue

@@ -0,0 +1,55 @@
+
+<template>
+    <div class="service-evaluation">
+        <div class="page-top">
+			<a><img src="../assets/images/my-money/left.png"/></a>
+			<span>服务评价</span>
+		</div>
+        <div class="page-content">
+            <!--保洁师信息-->
+            <div class="line"></div>
+            <div class="cleaners-news">
+                <p>保洁师：<span>林同学</span></p>
+                <p>服务日期：<span>2018-10-01 08:00-12:00</span></p>
+            </div>
+            <div class="line"></div>
+            <!--服务评价-->
+            <div class="evaluate">
+                <div class="evaluate-tab">
+                    <label>准时到达</label>
+                    <ul>
+                        <li></li>
+                        <li></li>
+                        <li></li>
+                        <li></li>
+                        <li></li>
+                    </ul>
+                </div>
+                <div class="evaluate-tab">
+                    <label>洁净标准</label>
+                    <ul>
+                        <li class="ative"></li>
+                        <li></li>
+                        <li></li>
+                        <li></li>
+                        <li></li>
+                    </ul>
+                </div>
+                <div class="evaluate-tab">
+                    <label>专业高效</label>
+                    <ul>
+                        <li></li>
+                        <li></li>
+                        <li></li>
+                        <li></li>
+                        <li></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="line"></div>
+            <!--提交意见-->
+            <textarea name="" id="" class="message">您的宝贵意见，将帮助我们提升服务</textarea>
+            <button class="submitBtn">提交</button>
+        </div>
+    </div>
+</template>