提现

src/main/phone/src/components/payMethods.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class='payMethods'>
+    <div class='payMethods' @click="choose">
         <div class="imgContent">
             <slot></slot>
         </div>
@@ -8,6 +8,8 @@
             <div class="title">{{title}}</div>
             <div class="sub">{{sub}}</div>
         </div>
+
+        <img class="chooseImg" :src="chooseImg" alt="">
     </div>
 </template>
 <script>
@@ -21,11 +23,24 @@ export default {
         sub: {
             type: String,
             default: ""
+        },
+        isChoose: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        chooseImg() {
+            if (this.isChoose) {
+                return require("../assets/icon_xuanzhong.png");
+            } else {
+                return require("../assets/icon_weixuanzhong.png");
+            }
         }
     },
-    computed:{
-        chooseImg(){
-            
+    methods:{
+        choose(){
+            this.$emit('choose')
         }
     }
 };
@@ -40,5 +55,28 @@ export default {
         width: 59px;
         text-align: center;
     }
+
+    .center {
+        margin-left: 12px;
+        flex-grow: 1;
+        .title {
+            font-size: 14px;
+            color: rgba(255, 255, 255, 1);
+            line-height: 20px;
+            margin: 0;
+        }
+
+        .sub {
+            font-size: 13px;
+            color: rgba(114, 119, 133, 1);
+            line-height: 18px;
+            margin-top: 5px;
+        }
+    }
+
+    .chooseImg{
+        width: 26px;
+        height: 26px;
+    }
 }
 </style>

src/main/phone/src/main.less

@@ -10,3 +10,31 @@
     background-color: #c2524d;
     border-color: #c2524d;
 }
+
+.van-button {
+    border-radius: 0;
+}
+
+.list {
+    .van-cell {
+        background-color: #2e3049;
+        color: #fff;
+        padding: 18px 0;
+
+        &::after {
+            left: 0;
+            border-bottom: 1px solid #000;
+        }
+    }
+
+    .van-field__control {
+        text-align: right;
+        background-color: transparent !important;
+        color: #fff;
+    }
+
+    &::after {
+        border: none;
+        border-bottom: 1px solid #000;
+    }
+}

src/main/phone/src/router.js

@@ -55,6 +55,34 @@ const router = new Router({
         title: "提现",
         checkLogin: true
       }
+    },
+    {
+      path: "/fieldListAlipay",
+      name: "fieldListAlipay",
+      component: resolve =>
+        require(["./views/cashOut/FieldListAlipay"], resolve),
+      meta: {
+        title: "提现",
+        checkLogin: true
+      }
+    },
+    {
+      path: "/fieldListBank",
+      name: "fieldListBank",
+      component: resolve => require(["./views/cashOut/FieldListBank"], resolve),
+      meta: {
+        title: "提现",
+        checkLogin: true
+      }
+    },
+    {
+      path: "/applaySuccess",
+      name: "applaySuccess",
+      component: resolve => require(["./views/cashOut/ApplaySuccess"], resolve),
+      meta: {
+        title: "提现结果",
+        checkLogin: true
+      }
     }
   ]
 });
@@ -101,7 +129,6 @@ router.beforeEach((to, from, next) => {
     } else if (!to.matched.length) {
       next("/404");
     } else {
-      console.log("aaaaaa");
       if (to.name == "login") {
         next("/");
       } else {

src/main/phone/src/views/Home.vue

@@ -81,7 +81,7 @@ export default {
                 return;
             }
 
-             if (this.userInfo.moneyCoin < this.configInfo.minMoney) {
+            if (this.userInfo.moneyCoin < this.configInfo.minMoney) {
                 this.$toast(`当前积分余额不足，不能提现`);
                 return;
             }
@@ -97,100 +97,100 @@ export default {
 <style lang='less'>
 .user {
     padding: 58px 30px 30px;
-}
-
-.userContent {
-    background: rgba(58, 62, 97, 1);
-    border-radius: 2px;
-    height: 343px;
-    position: relative;
-    // overflow: hidden;
-    border: 1px solid rgba(58, 62, 97, 1);
-
-    .img {
-        width: 76px;
-        height: 76px;
-        border-radius: 43px;
-        background-position: center center;
-        background-repeat: no-repeat;
-        background-size: cover;
-        position: absolute;
-        top: -43px;
-        left: 50%;
-        transform: translateX(-50%);
-    }
 
-    .name {
-        font-size: 18px;
-        font-weight: bold;
-        color: rgba(255, 255, 255, 1);
-        text-align: center;
-        line-height: 25px;
-        margin-top: 58px;
-    }
-
-    .money {
-        display: flex;
-        align-items: center;
-        margin-top: 47px;
-        justify-content: center;
-
-        img {
-            width: 24px;
-            height: 24px;
-            margin-right: 8px;
+    .userContent {
+        background: rgba(58, 62, 97, 1);
+        border-radius: 2px;
+        height: 343px;
+        position: relative;
+        // overflow: hidden;
+        border: 1px solid rgba(58, 62, 97, 1);
+
+        .img {
+            width: 76px;
+            height: 76px;
+            border-radius: 43px;
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            position: absolute;
+            top: -43px;
+            left: 50%;
+            transform: translateX(-50%);
         }
-        span {
-            font-size: 28px;
+
+        .name {
+            font-size: 18px;
             font-weight: bold;
-            color: rgba(255, 183, 38, 1);
-            line-height: 40px;
+            color: rgba(255, 255, 255, 1);
+            text-align: center;
+            line-height: 25px;
+            margin-top: 58px;
         }
-    }
 
-    .sub {
-        font-size: 14px;
-        color: rgba(114, 119, 133, 1);
-        line-height: 20px;
-        margin-top: 9px;
-        text-align: center;
-    }
+        .money {
+            display: flex;
+            align-items: center;
+            margin-top: 47px;
+            justify-content: center;
 
-    .button {
-        width: 252px;
-        height: 48px;
-        line-height: 48px;
-        margin: 56px auto 0;
-        display: block;
-    }
-}
-
-.configContent {
-    height: 160px;
-    background: rgba(58, 62, 97, 1);
-    border-radius: 2px;
-    margin: 15px 0 0;
-    padding: 30px 53px;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    .config-item {
-        display: flex;
-        align-items: center;
+            img {
+                width: 24px;
+                height: 24px;
+                margin-right: 8px;
+            }
+            span {
+                font-size: 28px;
+                font-weight: bold;
+                color: rgba(255, 183, 38, 1);
+                line-height: 40px;
+            }
+        }
 
-        .title {
+        .sub {
             font-size: 14px;
             color: rgba(114, 119, 133, 1);
             line-height: 20px;
+            margin-top: 9px;
+            text-align: center;
         }
 
-        .val {
-            font-size: 14px;
-            font-weight: bold;
-            color: rgba(255, 255, 255, 1);
-            line-height: 20px;
-            margin-left: 30px;
+        .button {
+            width: 252px;
+            height: 48px;
+            line-height: 48px;
+            margin: 56px auto 0;
+            display: block;
+        }
+    }
+
+    .configContent {
+        height: 160px;
+        background: rgba(58, 62, 97, 1);
+        border-radius: 2px;
+        margin: 15px 0 0;
+        padding: 30px 53px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .config-item {
+            display: flex;
+            align-items: center;
+
+            .title {
+                font-size: 14px;
+                color: rgba(114, 119, 133, 1);
+                line-height: 20px;
+            }
+
+            .val {
+                font-size: 14px;
+                font-weight: bold;
+                color: rgba(255, 255, 255, 1);
+                line-height: 20px;
+                margin-left: 30px;
+            }
         }
     }
 }

src/main/phone/src/views/cashOut/ApplaySuccess.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class='main'>
+        <img class="img" src="../../assets/icon_chenggong.png" alt="">
+
+        <div class="title">申请提交成功<br />钱款将在72小时内到账，请注意查收
+        </div>
+        <van-button type="primary" class="button" @click="submit">确认提现
+        </van-button>
+    </div>
+</template>
+<script>
+export default {
+    name: "",
+    data() {
+        return {};
+    },
+    methods: {
+        submit() {
+            this.$router.go(-2);
+        }
+    }
+};
+</script>
+<style lang='less'>
+.main {
+    padding: 0 15px;
+    .img {
+        width: 112px;
+        height: 112px;
+        margin: 48px auto 0;
+        display: block;
+    }
+
+    .title {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 1);
+        line-height: 20px;
+        margin-top: 26px;
+        text-align: center;
+    }
+
+    .button {
+        width: 100%;
+        height: 48px;
+        font-size: 16px;
+        font-weight: bold;
+        margin: 19px 0;
+    }
+}
+</style>

src/main/phone/src/views/cashOut/ChooseWay.vue

@@ -11,31 +11,39 @@
 
         <div class="methods">
             <div class="methodstitle">选择提现方式</div>
-            
-            <pay-methods title='支付宝' sub='支持有支付宝，网银的用户使用'>
-                <img src="../../assets/icon_zhifubao.png" style="width:50px;height:50px" alt="">
+
+            <pay-methods title='支付宝' sub='支持有支付宝，网银的用户使用'
+                :isChoose="methods=='alipay'" @choose="methods='alipay'">
+                <img src="../../assets/icon_zhifubao.png"
+                    style="width:50px;height:50px" alt="">
             </pay-methods>
 
-             <pay-methods title='银行转账' sub='支持各大银联银行转账' >
-                <img src="../../assets/pay1.png" style="width:59px;height:37px" alt="">
+            <pay-methods title='银行转账' sub='支持各大银联银行转账'
+                :isChoose="methods=='bank'" @choose="methods='bank'">
+                <img src="../../assets/pay1.png" style="width:59px;height:37px"
+                    alt="">
             </pay-methods>
 
         </div>
 
+        <van-button type="primary" class="button" @click="submit">确认
+        </van-button>
+
         <van-number-keyboard v-model="value" :show="show"
             @blur="show = false" />
     </div>
 </template>
 <script>
 import { mapState } from "vuex";
-import payMethods from '../../components/payMethods'
+import payMethods from "../../components/payMethods";
 export default {
     name: "chooseWay",
     data() {
         return {
             show: false,
             value: "",
-            configInfo: {}
+            configInfo: {},
+            methods: "alipay"
         };
     },
     computed: {
@@ -73,8 +81,33 @@ export default {
                 }
             });
     },
-    methods: {},
-    components:{
+    methods: {
+        submit() {
+            if (!this.value) {
+                this.$toast(`请输入提现金额`);
+                return;
+            }
+
+            if (this.methods == "alipay") {
+                this.$router.push({
+                    name: "fieldListAlipay",
+                    query: {
+                        moeny: this.value
+                    },
+                    params: { isNext: 1 }
+                });
+            } else {
+                this.$router.push({
+                    name: "fieldListBank",
+                    query: {
+                        moeny: this.value
+                    },
+                    params: { isNext: 1 }
+                });
+            }
+        }
+    },
+    components: {
         payMethods
     }
 };
@@ -118,4 +151,11 @@ export default {
     line-height: 22px;
     padding: 28px 0 13px;
 }
+
+.button {
+    height: 48px;
+    width: 100%;
+    font-size: 16px;
+    margin: 20px 0;
+}
 </style>

src/main/phone/src/views/cashOut/FieldListAlipay.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class='fieldListAlipay'>
+        <van-cell-group class="list">
+            <van-field v-model="name" label="姓名" placeholder="请输入收款人姓名" />
+
+            <van-field v-model="alipay" label="支付宝账户"
+                placeholder="请输入支付宝账户/手机号码" />
+        </van-cell-group>
+
+        <van-button :type="disabled?'default':'primary'" class="button"
+            :disabled='disabled' @click="submit">确认提现
+        </van-button>
+    </div>
+
+</template>
+<script>
+import { mapState } from "vuex";
+export default {
+    name: "fieldListAlipay",
+    data() {
+        return {
+            name: "",
+            alipay: ""
+        };
+    },
+    computed: {
+        ...mapState(["userInfo"]),
+        disabled() {
+            if (this.name && this.alipay) {
+                return false;
+            } else {
+                return true;
+            }
+        }
+    },
+    methods: {
+        submit() {
+            this.$http
+                .post({
+                    url: "/memberCoinTixian/save",
+                    data: {
+                        money: this.$route.query.moeny,
+                        alipay: this.alipay,
+                        dealUser: this.name,
+                        userId: this.userInfo.id
+                    }
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.$router.replace({
+                            name: "applaySuccess",
+                            params: { isNext: 1 }
+                        });
+                    }
+                });
+        }
+    }
+};
+</script>
+<style lang='less'>
+.fieldListAlipay {
+    padding: 10px 15px;
+}
+
+.button {
+    margin: 80px 0 30px;
+    width: 100%;
+    height: 48px;
+    font-size: 16px;
+    font-weight: bold;
+}
+</style>

src/main/phone/src/views/cashOut/FieldListBank.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class='fieldListBank'>
+        <van-cell-group class="list">
+            <van-field v-model="name" label="姓名" placeholder="请输入收款人姓名" />
+
+            <van-field v-model="bankCard" label="银行卡账号"
+                placeholder="请输入收款人储蓄卡号" />
+
+            <van-field v-model="bankName" label="银行" placeholder="请输入银行" />
+        </van-cell-group>
+
+        <van-button :type="disabled?'default':'primary'" class="button"
+            :disabled='disabled' @click="submit">确认提现
+        </van-button>
+    </div>
+
+</template>
+<script>
+import { mapState } from "vuex";
+export default {
+    name: "fieldListBank",
+    data() {
+        return {
+            name: "",
+            bankCard: "",
+            bankName: ""
+        };
+    },
+    computed: {
+        ...mapState(["userInfo"]),
+        disabled() {
+            if (this.name && this.bankCard && this.bankName) {
+                return false;
+            } else {
+                return true;
+            }
+        }
+    },
+    methods: {
+        submit() {
+            this.$http
+                .post({
+                    url: "/memberCoinTixian/save",
+                    data: {
+                        money: this.$route.query.moeny,
+                        bankCard: this.bankCard,
+                        bankName: this.bankName,
+                        dealUser: this.name,
+                        userId: this.userInfo.id
+                    }
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.$router.replace({
+                            name: "applaySuccess",
+                            params: { isNext: 1 }
+                        });
+                    }
+                });
+        }
+    }
+};
+</script>
+<style lang='less'>
+.fieldListBank {
+    padding: 10px 15px;
+}
+
+.button {
+    margin: 80px 0 30px;
+    width: 100%;
+    height: 48px;
+    font-size: 16px;
+    font-weight: bold;
+}
+</style>

src/main/webapp/phone/css/chunk-11f5c3bc.7563ddd4.css

@@ -0,0 +1 @@
+.fieldListAlipay{padding:10px 15px}.button{margin:80px 0 30px;width:100%;height:48px;font-size:16px;font-weight:700}

src/main/webapp/phone/css/chunk-17843a0f.20ecf470.css

@@ -0,0 +1 @@
+.fieldListBank{padding:10px 15px}.button{margin:80px 0 30px;width:100%;height:48px;font-size:16px;font-weight:700}

src/main/webapp/phone/css/chunk-2380fd8e.500db2d6.css

@@ -0,0 +1 @@
+.payMethods{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:86px;border-top:1px solid #000}.payMethods .imgContent{width:59px;text-align:center}.payMethods .center{margin-left:12px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.payMethods .center .title{font-size:14px;color:#fff;line-height:20px;margin:0}.payMethods .center .sub{font-size:13px;color:#727785;line-height:18px;margin-top:5px}.payMethods .chooseImg{width:26px;height:26px}.chooseWay{padding:0 15px}.top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:80px;border-bottom:1px solid #000}.top .name{font-size:16px;font-weight:700;color:#fff}.top .sub{font-size:13px;color:#fe9900;line-height:18px;margin-top:5px}.top input{background-color:transparent;border:none;text-align:right;font-size:13px;color:#fff}.methodstitle{font-size:16px;font-weight:700;color:#fff;line-height:22px;padding:28px 0 13px}.button{height:48px;width:100%;font-size:16px;margin:20px 0}

src/main/webapp/phone/css/chunk-474b536c.966f2ee3.css

@@ -1 +0,0 @@
-.payMethods{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:86px;border-top:1px solid #000}.payMethods .imgContent{width:59px;text-align:center}.chooseWay{padding:0 15px}.top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:80px;border-bottom:1px solid #000}.top .name{font-size:16px;font-weight:700;color:#fff}.top .sub{font-size:13px;color:#fe9900;line-height:18px;margin-top:5px}.top input{background-color:transparent;border:none;text-align:right;font-size:13px;color:#fff}.methodstitle{font-size:16px;font-weight:700;color:#fff;line-height:22px;padding:28px 0 13px}

src/main/webapp/phone/css/chunk-7b6dcc74.a2fb8179.css

@@ -0,0 +1 @@
+.main{padding:0 15px}.main .img{width:112px;height:112px;margin:48px auto 0;display:block}.main .title{font-size:14px;color:#fff;line-height:20px;margin-top:26px;text-align:center}.main .button{width:100%;height:48px;font-size:16px;font-weight:700;margin:19px 0}

src/main/webapp/phone/index.html

@@ -1,3 +1,3 @@
 <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=icon_logo.ico><title>全民电竞</title><style>body {
             background-color: #2e3049;
-        }</style><link href=css/chunk-328b5d5a.8dd0244a.css rel=prefetch><link href=css/chunk-3866ce2a.819b39e4.css rel=prefetch><link href=css/chunk-474b536c.966f2ee3.css rel=prefetch><link href=css/chunk-820d1570.42cef544.css rel=prefetch><link href=js/chunk-2d22d746.fcfd2b03.js rel=prefetch><link href=js/chunk-328b5d5a.e22bcc69.js rel=prefetch><link href=js/chunk-3866ce2a.acbb7949.js rel=prefetch><link href=js/chunk-474b536c.281621a6.js rel=prefetch><link href=js/chunk-820d1570.014ea4dc.js rel=prefetch><link href=css/app.14f8f0f7.css rel=preload as=style><link href=css/chunk-vendors.598da5eb.css rel=preload as=style><link href=js/app.e273b2db.js rel=preload as=script><link href=js/chunk-vendors.2796d7d9.js rel=preload as=script><link href=css/chunk-vendors.598da5eb.css rel=stylesheet><link href=css/app.14f8f0f7.css rel=stylesheet></head><body><div id=app></div><script src=js/chunk-vendors.2796d7d9.js></script><script src=js/app.e273b2db.js></script></body></html>
+        }</style><link href=css/chunk-11f5c3bc.7563ddd4.css rel=prefetch><link href=css/chunk-17843a0f.20ecf470.css rel=prefetch><link href=css/chunk-2380fd8e.500db2d6.css rel=prefetch><link href=css/chunk-328b5d5a.8dd0244a.css rel=prefetch><link href=css/chunk-3866ce2a.819b39e4.css rel=prefetch><link href=css/chunk-7b6dcc74.a2fb8179.css rel=prefetch><link href=css/chunk-820d1570.42cef544.css rel=prefetch><link href=js/chunk-11f5c3bc.0d864717.js rel=prefetch><link href=js/chunk-17843a0f.fb706248.js rel=prefetch><link href=js/chunk-2380fd8e.ca1a4db3.js rel=prefetch><link href=js/chunk-2d22d746.fcfd2b03.js rel=prefetch><link href=js/chunk-328b5d5a.e22bcc69.js rel=prefetch><link href=js/chunk-3866ce2a.acbb7949.js rel=prefetch><link href=js/chunk-7b6dcc74.00ae861c.js rel=prefetch><link href=js/chunk-820d1570.014ea4dc.js rel=prefetch><link href=css/app.a72e34bc.css rel=preload as=style><link href=css/chunk-vendors.598da5eb.css rel=preload as=style><link href=js/app.ca800195.js rel=preload as=script><link href=js/chunk-vendors.2796d7d9.js rel=preload as=script><link href=css/chunk-vendors.598da5eb.css rel=stylesheet><link href=css/app.a72e34bc.css rel=stylesheet></head><body><div id=app></div><script src=js/chunk-vendors.2796d7d9.js></script><script src=js/app.ca800195.js></script></body></html>

src/main/webapp/phone/js/chunk-7b6dcc74.00ae861c.js

@@ -0,0 +1,2 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-7b6dcc74"],{"295b":function(t,n,a){t.exports=a.p+"img/icon_chenggong.d9490eba.png"},"4dda":function(t,n,a){"use strict";a.r(n);var s=function(){var t=this,n=t.$createElement,s=t._self._c||n;return s("div",{staticClass:"main"},[s("img",{staticClass:"img",attrs:{src:a("295b"),alt:""}}),t._m(0),s("van-button",{staticClass:"button",attrs:{type:"primary"},on:{click:t.submit}},[t._v("确认提现\n    ")])],1)},i=[function(){var t=this,n=t.$createElement,a=t._self._c||n;return a("div",{staticClass:"title"},[t._v("申请提交成功"),a("br"),t._v("钱款将在72小时内到账，请注意查收\n    ")])}],c={name:"",data:function(){return{}},methods:{submit:function(){this.$router.go(-2)}}},e=c,r=(a("a8ab"),a("2877")),u=Object(r["a"])(e,s,i,!1,null,null,null);n["default"]=u.exports},"60d5":function(t,n,a){},a8ab:function(t,n,a){"use strict";var s=a("60d5"),i=a.n(s);i.a}}]);
+//# sourceMappingURL=chunk-7b6dcc74.00ae861c.js.map