Merge branch 'dev' of http://192.168.2.2:8099/jsowell/jsowell-charger-web into dev

jsowell-ui/src/views/homeIndex/homeIndex.vue

@@ -4,68 +4,62 @@
     <hr />
     <div style="display: flex;justify-content: space-between;flex-wrap: wrap;">
       <div class="box">
-        <div>总充电电量(度)</div>
-        <div class="box-text">
-          <b class="box-h1">{{ generalSituation.totalChargingDegree }}</b>
-          <el-image
-            style="width: 80px; height: 80px;"
+        <el-image class="box-image"
             :src="require('@/assets/images/lightning.png')"
-          ></el-image>
+           />
+        <div class="flex1">
+          <b class="box-h1">{{ generalSituation.totalChargingDegree }}</b>
+          <div>总充电电量(度)</div>
+          <div class="progress" />
         </div>
-        <div class="progress"></div>
       </div>
       <div class="box">
-        <div>总充电费用(元)</div>
-        <div class="box-text">
-          <b class="box-h1">{{ generalSituation.totalChargingAmount}}</b>
-          <!-- <image src="/assets/images/login-background.jpg"></image> -->
-          <el-image
-            style="width: 80px; height: 80px"
-            :src="require('@/assets/images/zongfeiyong.png')"
-          ></el-image>
-        </div>
-        <div class="progress"></div>
+         <el-image class="box-image"
+            :src="require('@/assets/images/zongfeiyong.png')" />
+          <div class="flex1">
+            <b class="box-h1">{{ generalSituation.totalChargingAmount}}</b>
+            <div>总充电费用(元)</div>
+            <div class="progress" />
+          </div>
       </div>
       <div class="box">
-        <div>总充电订单数(笔)</div>
-        <div class="box-text">
+        <el-image
+            class="box-image"
+            :src="require('@/assets/images/dingdan.png')" />
+        <div class="flex1">
           <b class="box-h1">{{ generalSituation.totalChargingQuantity}}</b>
-          <el-image
-            style="width: 80px; height: 80px"
-            :src="require('@/assets/images/dingdan.png')"
-          ></el-image>
-        </div>
-        <div class="progress"></div>
+          <div>总充电订单数(笔)</div>
+          <div class="progress" />
+        </div>    
       </div>
       <div class="box">
-        <div>总充电设备数量(座)</div>
-        <div class="box-text">
+        <el-image
+            class="box-image"
+            :src="require('@/assets/images/shebei.png')" />
+        <div class="flex1">
           <b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>
-          <el-image
-            style="width: 80px; height: 80px"
-            :src="require('@/assets/images/shebei.png')"
-          ></el-image>
+          <div>总充电设备数量(座)</div>
+          <div class="progress" />
         </div>
-        <div class="progress"></div>
       </div>
       <div class="box"  v-hasRole="['admin', 'common']">
-        <div>总客户余额(元)</div>
-        <div class="box-text">
-          <b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
-
-          <el-image
-            style="width: 80px; height: 80px"
+        <el-image
+            class="box-image"
             :src="require('@/assets/images/yue.png')"
           ></el-image>
+        <div class="flex1">
+          <b class="box-h1">{{ generalSituation.totalMemberAmount }}</b>
+          <div>总客户余额(元)</div>
+          <div class="progress" />
+        </div>  
         </div>
-        <div class="progress"></div></div>
 <!--      <div class="box">-->
 <!--        <div>总服务费金额</div>-->
 <!--        <div class="box-text">-->
 <!--          <b class="box-h1">{{ generalSituation.totalPileQuantity }}</b>-->
 <!--          <i>元</i>-->
 <!--          <el-image-->
-<!--            style="width: 80px; height: 80px"-->
+<!--            class="box-image"-->
 <!--            :src="require('@/assets/images/shebei.png')"-->
 <!--          ></el-image>-->
 <!--        </div>-->
@@ -360,16 +354,26 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
 .box {
+  display: flex;
+  height: 100px;
   padding: 10px;
-  font-size: 18px;
+  /* font-size: 18px; */
   color: #ffffff;
   background-color: #1ab3b3;
   border-radius: 8px;
   box-shadow: 0 15px 10px -11px #1ab394;
   margin-right: 24px;
   margin-bottom: 20px;
+  .box-image{
+    width: 60px;
+     height: 60px;
+  }
+  .flex1{
+    flex: 1;
+    margin-left: 5px;
+  }
 }
 .box-h1 {
   /* margin-top: -14px; */
@@ -377,9 +381,10 @@ export default {
 }
 .box-text {
   margin-top: 0px;
+
 }
 .progress {
   border: 3px solid #fff;
-  margin-right: 30%;
+  margin-top: 5px;
 }
 </style>

jsowell-ui/src/views/pile/merchant/components/walletSummary.vue

@@ -1,57 +1,36 @@
 <template>
     <div class="app-container">
-        <div style="display: flex; padding: 10px">
-            <!-- <div style="width: 25%">
-                <h2>钱包汇总</h2>
-                <p>运营商：举视新能源</p>
-                <p>商家性质：企业</p>
-               <p>开户状态：进件成功</p>
-                <p>开户行名称：中国农业银行股份有限公司</p>
-                <p>收款卡号：46456412</p>
-                <p>预留手机号：452584</p>
-            </div> -->
-            <div class="main" style="flex: 1; align-items: baseline">
-                <div class="bord"></div>
-                <div class="card">
-                    <p class="center">账户余额</p>
-                    <div class="center" >
-                        <span class="number">{{adapayMember.acctBalance}}</span>
-                         （元）</div>
-                    <p style="text-align: justify">
-                        账户余额 = 可用余额 + 冻结余额
-                    </p>
-                </div>
-                <div class="bord"></div>
-                <div class="card">
-                    <p class="center">可用余额</p>
-                    <div class="center">
-                        <span class="number">{{adapayMember.avlBalance}} </span>
-                        （元）</div>
-                    <p>该余额大于0时，才可发起取现</p>
-                </div>
-                <div class="bord"></div>
-                <div class="card">
-                    <p class="center">冻结余额</p>
-                    <div class="center" style="margin-top:20px"> 
-                    <span class="number">{{adapayMember.frzBalance}}</span>
-                         （元）</div>
-                    <p>当配置了自动结算功能，在每日发起结算时会将可用余额转为冻结金额。该部分金额不允许取现。</p>
-                </div>
-                <div class="bord"></div>
-                <div class="card">
-                    <p class="center">昨日日终余额</p>
-                    <div class="center" style="margin-top:20px">
-                        <span class="number">{{adapayMember.lastAvlBalance}}</span>
-                        元
-                    </div>
-                    <!-- <button>昨</button> -->
-                </div>
-                <div class="bord"></div>
-                <!-- <div class="card">
-                    <p>已提现</p>
-                    <p>165（元）</p>
-                    <p>以成功提现到绑定银行卡的金额汇总</p>
-                </div> -->
+        <div class="main">
+            <div class="main-right">
+                <p class="center">账户余额(元)</p>
+                <p class="center number">{{adapayMember.acctBalance}}</p>
+                <p class="center">注:
+                    <span class="text">账户余额 = 可用余额 + 冻结余额</span>
+                </p>
+            </div>
+            <div class="main-right">
+                <p class="center">可用余额(元)</p>
+                <p class="center number">{{adapayMember.avlBalance}}</p>
+                <!-- <el-button type="primary" style="margin-left: 25%;" v-if="adapayMember.avlBalance > 0" @click="dialogVisible = true">提现申请</el-button> -->
+                <!-- <p class="center " v-else>注: -->
+                <p class="center">注:
+                    <span class="text">该余额大于0时，才可发起取现</span>
+                </p>
+                
+            </div>
+            <div class="main-right">
+                <p class="center">冻结金额(元)</p>
+                <p class="center number">{{adapayMember.frzBalance}}</p>
+                <p class="center ">注:
+                    <span class="text">当配置了自动结算功能，在每日发起结算时会将可用余额转为冻结金额。该部分金额不允许取现。</span>
+                </p>
+            </div>
+            <div class="main-right">
+                <p class="center">昨日日终余额(元)</p>
+                <p class="center number">{{adapayMember.lastAvlBalance}}</p>
+                <p class="center">注: 
+                    <span class="text">一</span>
+                </p>
             </div>
         </div>
         <el-tabs
@@ -133,6 +112,28 @@
             </el-tab-pane>
             <el-tab-pane label="订单流水" name="second">订单流水</el-tab-pane>
         </el-tabs>
+        <el-dialog title="提现申请" :visible.sync="dialogVisible" width="33%" :before-close="handleClose">
+            温馨提示
+            <div style="font-size:12px;color:gray">
+                <p>1.提现将在3个工作日内审核到账,节假日审核顺延</p>
+                <p>2.部分流量方的充电订单存在账期,需要一定周期后才开始执行清分</p>
+                <p>3.提现为银行自动付款,根据银行要求会收取手续费,请知悉</p>
+                <p>4.订单收入包含了第三方的分成收入金额,已自动扣除万车充分成金额</p>
+            </div>
+            <p>可提现(元): 
+                <span class="number">{{adapayMember.avlBalance}}</span>
+            </p>
+            <p>实际到账(元):
+                <span class="number">0</span>
+            </p>
+            <p>手续费(元):
+                <span class="number">10.00</span>
+            </p>
+            <span slot="footer" class="dialog-footer">
+              <el-button @click="dialogVisible = false">取 消</el-button>
+              <el-button type="primary" @click="dialogVisible = false">提交</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 
@@ -150,10 +151,18 @@ export default {
             //图标，可根据自己的需求匹配
             icon: "el-icon-caret-bottom",
             createTimeRange:'',
-            adapayMember:{}
+            adapayMember:{},
+            dialogVisible: false
         };
     },
     methods: {
+        handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
         handleClick(tab, event) {
             console.log(tab, event);
         },
@@ -193,10 +202,25 @@ export default {
 .center{
     text-align: center;
 }
+.text{
+    font-size: 12px;
+    color: red;
+}
 .main {
     display: flex;
     justify-content: space-between;
-    align-items: baseline;
+    // align-items: baseline;
+    .main-right{
+        width: 310px;
+        margin-right: 20px;
+        border: 1px solid #e6ebf5;
+        border-radius: 10px;
+        padding: 10px;
+        transition: all .2s linear;
+    }
+}
+.main-right:hover{
+    box-shadow: 0 0 5px 3px #999;
 }
 .bord {
     position: relative;