商户余额明细

src/pages.json

@@ -558,7 +558,9 @@
 				{
 					"path": "settledMerchant/balanceLog",
 					"style": {
-						"navigationBarTitleText": "流水明细"
+						"navigationBarTitleText": "流水明细",
+						"navigationBarTextStyle": "white",
+						"navigationStyle": "custom"
 					}
 				},
 				{

src/pagesC/settledMerchant/balanceLog.vue

@@ -1,19 +1,80 @@
 <template>
   <view class="container">
-    <!-- 顶部导航 -->
-    <view class="Tab_con flex_r flex_ac flex_jb">
-      <view
-        class="tab_list flex_r flex_ac"
-        :class="current == index ? 'active' : ''"
-        v-for="(item, index) in TabList"
-        :key="index"
-        @tap="SetStatus(index)"
-        >{{ item.title }}</view
-      >
+    <view class="hander-top">
+      <view class="icon-back-wrap" @click="onBack">
+        <image
+          class="icon-back"
+          src="@/static/preview/icon-back.png"
+          mode="widthFix"
+        />
+      </view>
+      <!-- <view class="count">数智钱包</view> -->
+      <view class="capsule"></view>
     </view>
-    <!-- 顶部导航-end -->
+    <div class="h_top">
+      <div class="balance_box">
+        <div class="b_teg">商户余额(元)</div>
+        <div class="dinB balance">￥{{ localInfo.merchant_money }}</div>
+        <div class="b_static flex_r flex_ac flex_jb">
+          <div>
+            <span>总收入</span>
+            <span class="fw">￥{{ total_money || 0 }}</span>
+          </div>
+          <div>
+            <span>今日收入</span>
+            <span class="fw">￥{{ day_income || 0 }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="btn_bar flex_r flex_jb">
+      <div
+        class="btn_item"
+        @click="getToCash"
+      >
+        <span class="ico iconfont">&#xe603;</span>
+        <span class="btn_txt">去提现</span>
+      </div>
+      <div
+        class="btn_item conv"
+        @click="goto('/pagesC/convert/index')"
+      >
+        <!-- <span class="ico iconfont">&#xe68a;</span> -->
+        <image class="ico" src="@/static/icon/convert.png" mode="widthFix" />
+        <span class="btn_txt">去转化</span>
+      </div>
+    </div>
+
     <!-- 资金列表 -->
-    <view class="con">
+    <div class="detailList" v-if="list.length">
+      <div class="tit"><span>流水明细</span></div>
+      <!-- 顶部导航 -->
+      <view class="Tab_con flex_r flex_ac flex_jb">
+        <view
+          class="tab_list flex_r flex_ac"
+          :class="current == index ? 'active' : ''"
+          v-for="(item, index) in TabList"
+          :key="index"
+          @tap="SetStatus(index)"
+          >{{ item.title }}</view
+        >
+      </view>
+      <!-- 顶部导航-end -->
+      <div class="li" v-for="(i, s) in list" :key="s">
+        <p class="flex_r flex_jb">
+          <span class="s1">{{ statusList[i.type_id] }}</span>
+          <span>
+            {{ i.act }}
+            <span class="s2">{{ parseFloat(i.num).toFixed(2) }}</span>
+          </span>
+        </p>
+        <p class="flex_r flex_jb">
+          <span class="s3">{{ i.create_time }}</span>
+          <span class="s3">余额￥{{ i.after }}</span>
+        </p>
+      </div>
+    </div>
+    <!-- <view class="con">
       <view class="list" v-for="(item, index) in list" :key="index">
         <view class="list_head flex_r flex_ac flex_jb">
           <view class="head_name">{{ item.remark }}</view>
@@ -25,7 +86,7 @@
         </view>
       </view>
       <not-goods v-if="haveGoods" textStr="暂无流水信息"></not-goods>
-    </view>
+    </view> -->
     <!-- 资金列表 -->
   </view>
 </template>
@@ -43,11 +104,15 @@ export default {
       current: 0,
       TabList: [
         { title: "全部", sauts: 0 },
-        { title: "收益", sauts: 1 },
+        { title: "收入", sauts: 1 },
         { title: "支出", sauts: 2 },
       ],
       list: [],
-      page:1
+      page:1,
+      localInfo: uni.getStorageSync("localInfo"),
+      total_money: 0,
+      day_income: 0,
+      statusList: {}
     };
   },
   onLoad(da) {
@@ -57,6 +122,7 @@ export default {
     this.page = 1;
     this.list = [];
     this.loadData();
+    this.getData()
   },
   methods: {
     loadData() {
@@ -69,8 +135,9 @@ export default {
       post("v1/merchant/commission", data).then((res) => {
         uni.hideLoading();
         if (res.code === 0) {
-          if (res.data.data.length > 0) {
-            this.list = this.list.concat(res.data.data);
+          this.statusList = JSON.parse(res.data.statusList)
+          if (res.data.data.data.length > 0) {
+            this.list = this.list.concat(res.data.data.data);
           } else {
             if (this.page == 1) {
               this.haveGoods = true;
@@ -91,6 +158,14 @@ export default {
         }
       });
     },
+    getData(){
+      post("v1/merchant/myShop").then((res) => {
+        if (res.code == 0) {
+          this.total_money = res.data.total_money,
+          this.day_income = res.data.day_income
+        }
+      });
+    },
     SetStatus(i) {
       this.current = i;
       this.page = 1;
@@ -98,16 +173,24 @@ export default {
       this.haveGoods = false;
       this.loadData();
     },
+    onBack() {
+      uni.navigateBack();
+    },
+    // 跳转到提现页面
+    getToCash(type) {
+      this.goto("/pages/cash/index", { type })
+    },
   },
 
   /**
    * 页面上拉触底事件的处理函数
    */
   onReachBottom() {
+    let _this = this
     if (this.page != -1) {
       setTimeout(function () {
-        ++this.page;
-        this.loadData();
+        ++_this.page;
+        _this.loadData();
       }, 800);
     }
   },
@@ -123,6 +206,7 @@ export default {
   box-sizing: border-box;
   font-size: 30rpx;
   color: #808080;
+
 }
 
 .Tab_con {
@@ -131,6 +215,7 @@ export default {
   background: #fff;
   padding: 0 30rpx;
   box-sizing: border-box;
+  border-bottom: 1rpx solid rgba($color: #d3aa79, $alpha: 0.3);
 }
 
 .active {
@@ -197,4 +282,156 @@ export default {
 }
 
 // 状态颜色-end
+
+.h_top {
+  background: linear-gradient(#d3aa79, #f3d6b2);
+  height: 420rpx;
+  position: relative;
+  .balance_box {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: 0 32rpx 38rpx;
+    width: 100%;
+    text-align: center;
+    .b_teg {
+      font-size: 28rpx;
+      margin-bottom: 3rpx;
+      // color: rgba($color: #000, $alpha: 0.65);
+    }
+    .balance {
+      font-size: 60rpx;
+      color: #333;
+    }
+    .b_static {
+      font-size: 28rpx;
+      padding: 30rpx 30rpx 0;
+      .fw{
+        font-weight: 700;
+      }
+    }
+  }
+}
+.hander-top {
+  position: absolute;
+  z-index: 1000;
+  top: 108rpx;
+  left: 0;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+
+  .icon-back-wrap {
+    width: 64rpx;
+    height: 64rpx;
+
+    .icon-back {
+      width: 64rpx;
+      height: 64rpx;
+    }
+  }
+
+  .count {
+    color: #222;
+    font-size: 35rpx;
+    line-height: 64rpx;
+  }
+  .capsule {
+    width: 120rpx;
+  }
+}
+
+.btn_bar {
+  padding: 30rpx 32rpx;
+  .btn_item {
+    width: 280rpx;
+    height: 70rpx;
+    line-height: 70rpx;
+    text-align: center;
+    background: rgba($color: #000, $alpha: 0.15);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10rpx;
+    &.corc {
+      background-color: #d3aa79;
+      color: #fff;
+    }
+    &.conv {
+      color: #fff;
+      background-color: #18bb88;
+    }
+    image {
+      width: 50rpx;
+      height: 50rpx;
+      background: #fff;
+      border-radius: 50%;
+    }
+  }
+  .ico {
+    color: #d3aa79;
+    width: 50rpx;
+    height: 50rpx;
+    background: #fff;
+    border-radius: 50%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    font-size: 36rpx;
+  }
+  .btn_txt {
+    height: 50rpx;
+    width: calc(76% - 50rpx);
+    line-height: 50rpx;
+  }
+}
+.detailList {
+  width: calc(100% - 64rpx);
+  padding: 0 10rpx;
+  border-radius: 12rpx;
+  margin-bottom: 36rpx;
+  margin-left: 32rpx;
+  background-color: #fff;
+
+  .tit {
+    padding: 28rpx 32rpx 10rpx;
+    span {
+      display: inline-block;
+      padding-left: 16rpx;
+      font-size: 32rpx;
+      font-weight: 700;
+      height: 32rpx;
+      line-height: 32rpx;
+      border-left: 8rpx solid #d3aa79;
+    }
+  }
+  .li {
+    padding: 22rpx 0;
+    border-bottom: 1px solid rgba($color: #d3aa79, $alpha: 0.3);
+    margin: 0 30rpx;
+    p {
+      margin-bottom: 8rpx;
+      font-size: 30rpx;
+      &:last-child {
+        margin-bottom: 0;
+        font-size: 25rpx;
+        color: #999;
+      }
+    }
+    .s2 {
+      font-weight: bold;
+      &::before {
+        content: "￥";
+        font-size: 25rpx;
+      }
+    }
+    &:last-child {
+      border: none;
+    }
+  }
+}
 </style>