feat(mine, wallet): 钱包账单详情页面搭建

src/common/api/order.js

@@ -168,6 +168,8 @@ let orderApiFun = function(vm){
 	let getAssets = async (params = {}) => await vm.$u.get(settle + vm.vuex_token + '/v3/total', params);
 	// 获取我的钱包-收入流水
 	let listStatement = async (params = {}) => await vm.$u.get(settle + vm.vuex_token + '/v2/statement', params);
+	// 获取我的钱包-收入流水
+	let listStatementDetails = async (params = {}) => await vm.$u.get(settle + vm.vuex_token + '/queryStatementByPayableNo', params);
 	// 获取我的钱包-支付单一览
 	let payableRecord = async (params = {}) => await vm.$u.post(settle + vm.vuex_token + '/payable/v2/queryPayableRecord', params, formType);
 	// 获取我的钱包-师傅提现
@@ -235,6 +237,7 @@ let orderApiFun = function(vm){
 		getAssets,
 		listStatement,
 		payableRecord,
+		listStatementDetails,
 		workerApplyPay,
 		allowLogin,
 		otherUser,

src/components/mine/settlement.vue

@@ -3,7 +3,7 @@
 		<view class="settlement-com-view" @click="$u.throttle(handleClick, 500)">
 			<view class="left-view">
 				<view class="time-view">{{timeText}}</view>
-				<view class="order-view">
+				<view class="order-view" @click="$u.throttle(showSettlement, 500)">
 					<text>提现编号：</text>
 					<text>{{data.payableRecordNumber}}</text>
 				</view>
@@ -27,6 +27,7 @@
 						paymentTime: new Date().getTime(),
 						payableRecordStatusText: '提现',
 						payableRecordNumber: 'EE999777',
+						payableRecordId: '',
 						settlementAmount: 9899
 					}
 				},
@@ -68,6 +69,9 @@
 		methods: {
 			handleClick() {
 				this.$emit('click', this.data.orderId)
+			},
+			showSettlement() {
+				this.$emit('open', this.data.payableRecordId)
 			}
 		}
 	}

src/pages.json

@@ -202,6 +202,16 @@
 						"navigationBarBackgroundColor": "#F4F5F7"
 					}
 				},
+				{
+					"path": "wallet/itemizedBills",
+					"style": {
+						"navigationBarTitleText": "账单详情",
+						"enablePullDownRefresh": false,
+						"disableScroll": true,
+						"navigationStyle": "custom",
+						"navigationBarBackgroundColor": "#F4F5F7"
+					}
+				},
 				{
 					"path": "cert/index",
 					"style": {

src/pages/mine/wallet/itemizedBills.vue

+<template>
+  <view class="itemized-bills">
+    <w-navbar title="账单详情" />
+    <view class="content-wrap" v-for="(item, index) in bills" :key="index">
+      <view class="header">
+        <view class="header-title">结算单号：{{ item.statementNumber }}</view>
+      </view>
+      <view class="body">
+        <view class="item u-flex u-row-between">
+          <view>结算类型：{{ item.businessSettlementTypeText }}</view>
+          <view>结算金额：{{ "￥" + item.settlementAmount }}</view>
+        </view>
+
+        <view class="order-item" v-if="item.order">
+          <u-read-more
+            :toggle="true"
+            :shadow-style="shadowStyle"
+            :text-indent="0"
+            close-text="查看更多"
+            open-text="点击收起"
+            show-height="72"
+          >
+            <view class="order-item-row u-flex">
+              <view class="order-item-label">工单编号：</view>
+              <view class="order-item-value">{{ item.order.orderNumber }}</view>
+            </view>
+            <view class="order-item-row u-flex">
+              <view class="order-item-label">合作厂商：</view>
+              <view class="order-item-value">{{ item.order.partnerCompanyName }}</view>
+            </view>
+            <view class="order-item-row u-flex">
+              <view class="order-item-label">
+                <view class="brand-text">品牌：</view>
+              </view>
+              <view class="order-item-value">{{ item.order.lianbaoBrandName }}</view>
+            </view>
+            <view class="order-item-row u-flex">
+              <view class="order-item-label">客户信息：</view>
+              <view class="order-item-value">{{ item.order.contactName }}</view>
+            </view>
+            <view class="order-item-row u-flex">
+              <view class="order-item-label">联系方式：</view>
+              <view class="order-item-value">{{ item.order.contactMobilephone }}</view>
+            </view>
+            <view class="order-item-row u-flex u-col-start">
+              <view class="order-item-label">客户地址：</view>
+              <view class="order-item-value">{{ item.order.contactFullAddress }}</view>
+            </view>
+          </u-read-more>
+        </view>
+      </view>
+    </view>
+    <u-gap height="60"></u-gap>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      payableRecordId: "",
+      bills: [],
+      shadowStyle: {
+        backgroundImage: "none",
+        paddingTop: "0",
+        marginTop: "20rpx",
+      },
+    };
+  },
+  computed: {},
+  onLoad(e) {
+    getApp().trackPage("账单详情页");
+    if (e && e.payableRecordId) {
+      this.payableRecordId = e.payableRecordId;
+      this.loadItemizedBills();
+    }
+  },
+  methods: {
+    async loadItemizedBills() {
+      let res = await this.$u.api.listStatementDetails({payableRecordId: this.payableRecordId});
+      if (res && res.code == 200 && res.data) {
+        this.bills = res.data || []
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.itemized-bills {
+  height: 100vh;
+  overflow-y: auto;
+  background-color: #f4f5f7;
+
+  .content-wrap {
+    margin: 20rpx 30rpx;
+    padding: 0 30rpx;
+    background: #ffffff;
+    border-radius: 12px;
+    display: flow-root;
+
+    .header {
+      padding: 30rpx 0;
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #333333;
+      line-height: 32rpx;
+
+      .header-title {
+        height: 32rpx;
+        border-left: 4rpx solid #2272ff;
+        border-top-left-radius: 2rpx;
+        border-bottom-left-radius: 2rpx;
+        padding-left: 20rpx;
+      }
+    }
+
+    .body {
+      border-top: 2rpx solid #f4f5f7;
+      padding-top: 30rpx;
+
+      .item {
+        margin-bottom: 38rpx;
+        font-size: 28rpx;
+        font-weight: 500;
+        color: #333333;
+      }
+
+      .order-item {
+        margin-bottom: 30rpx;
+        background: #f4f5f7;
+        padding: 0 28rpx;
+
+        .order-item-row {
+          line-height: 40rpx;
+          margin-top: 28rpx;
+          font-size: 26rpx;
+          font-weight: 500;
+
+          .order-item-label {
+            width: 130rpx;
+            color: #666666;
+            text-align: justify; 
+            text-align-last: justify; 
+            text-justify: inter-ideograph;
+            align-self: flex-start;
+
+            .brand-text {
+                text-align: justify;
+            }
+          }
+          .order-item-value {
+            width: 444rpx;
+            color: #333333;
+          }
+          
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/mine/wallet/settlement.vue

@@ -27,7 +27,7 @@
 						<u-loading color="#2272FF" :show="loading"></u-loading>
 					</view>
 					<view v-else v-for="(item, index) in info.payableRecordExtendDtos" :key="index">
-						<Settlement :data="item"></Settlement>
+						<Settlement :data="item" @open="openItemizedBills"></Settlement>
 					</view>
 				</view>
 				<view class="list-view-empty" v-else>
@@ -99,6 +99,9 @@
 			    this.date = e.target.value
 				this.loadPayRecord()
 			},
+			openItemizedBills(payableRecordId) {
+				this.$u.route({url: "pages/mine/wallet/itemizedBills", params: {payableRecordId: payableRecordId}})
+			},
 		}
 	}
 </script>