结算优化

pages/finance/accountRecord.vue

@@ -38,7 +38,6 @@
 
 <script>
 import api from '@/api/account';
-import accountMenus from './dictionary';
 import AccountList from './components/account-list.vue';
 
 export default {
@@ -50,7 +49,6 @@ export default {
     return {
       navTitle: '账户明细',
       settlementTabs: ['全部', '结算', '提现'],
-      accountMenus,
       params: {},
       currentTab: 0,
       type: '',
@@ -102,13 +100,11 @@ export default {
             const records = res.data.result.records;
             const total = res.data.result.total;
 
-            // 更新数据列表
             if (page.num === 1) {
               this.accountData = records;
             } else {
               this.accountData = this.accountData.concat(records);
             }
-            // 结束上拉加载
             this.mescroll.endSuccess(records.length, total);
             if (this.accountData.length < 5) {
               this.$refs.mescrollRef.upLoadType = 'NO_DATA';
@@ -122,7 +118,7 @@ export default {
           this.mescroll.endErr();
         });
     },
-    // 构造请求参数
+    // 请求参数
     buildParams(page) {
       let params = {
         pageSize: page.size,
@@ -159,10 +155,8 @@ export default {
       if (this.mescroll) {
         this.mescroll.resetUpScroll();
       }
-      // 清空数据列表
       this.accountData = [];
     },
-    //返回
     back() {
       uni.navigateBack({
         delta: 1,

pages/finance/balance.vue

@@ -70,7 +70,7 @@
 <script>
 import api from '@/api/account';
 import { formatAmount } from '@/common/util/util';
-import accountMenus from './dictionary';
+import { accountMenus } from './dictionary';
 import AccountList from './components/account-list.vue';
 
 export default {
@@ -143,7 +143,7 @@ export default {
     mescrollInit(mescroll) {
       this.mescroll = mescroll;
     },
-    // 下拉刷新回调
+    // 下拉刷新
     downCallback() {
       this.mescroll.resetUpScroll();
       this.accountData = [];

pages/finance/dictionary.js

@@ -1,28 +1,99 @@
-const accountMenus = [
-        {
-          type: 'settlement',
-          title: '结算记录',
-          icon: '/static/finance/account/settlement.png',
-          path: '/packageC/pages/mine/settlementRecord/index',
-        },
-        {
-          type: 'pending',
-          title: '待结算明细',
-          icon: '/static/finance/account/pending.png',
-          path: '/packageC/pages/mine/settlementRecord/index',
-        },
-        {
-          type: 'auditing',
-          title: '提现审核中',
-          icon: '/static/finance/account/auditing.png',
-          path: '/packageC/pages/mine/settlementRecord/index',
-        },
-        {
-          type: 'completed',
-          title: '已提现明细',
-          icon: '/static/finance/account/completed.png',
-          path: '/packageC/pages/mine/settlementRecord/index',
-        },
-      ]
+export const accountMenus = [
+  {
+    type: 'settlement',
+    title: '结算记录',
+    icon: '/static/finance/account/settlement.png',
+    path: '/packageC/pages/mine/settlementRecord/index',
+  },
+  {
+    type: 'pending',
+    title: '待结算明细',
+    icon: '/static/finance/account/pending.png',
+    path: '/packageC/pages/mine/settlementRecord/index',
+  },
+  {
+    type: 'auditing',
+    title: '提现审核中',
+    icon: '/static/finance/account/auditing.png',
+    path: '/packageC/pages/mine/settlementRecord/index',
+  },
+  {
+    type: 'completed',
+    title: '已提现明细',
+    icon: '/static/finance/account/completed.png',
+    path: '/packageC/pages/mine/settlementRecord/index',
+  },
+];
 
-export default accountMenus 
+export const orderFields = [
+  {
+    title: '订单编号',
+    valueField: 'orderId',
+    isShowTip: false,
+  },
+  {
+    title: '商品名称',
+    valueField: 'productName',
+    isShowTip: false,
+  },
+  {
+    title: '下单时间',
+    valueField: 'buyTime',
+    isShowTip: false,
+  },
+  {
+    title: '核销时间',
+    valueField: 'writeOffTime',
+    isShowTip: false,
+  },
+  {
+    title: '订单金额',
+    valueField: 'orderPrice',
+    isShowTip: false,
+  },
+  {
+    title: '实付金额',
+    valueField: 'actualPayAmount',
+    isShowTip: false,
+  },
+  {
+    title: '应收金额',
+    valueField: 'payableToMerchant',
+    isShowTip: false,
+  },
+  {
+    title: '邀新分佣成本',
+    valueField: 'inviteNewUserCommissionMerchantCost',
+    rateField: 'inviteNewUserCommissionMerchantRate',
+    isShowTip: true,
+    key: 'inviteNew',
+  },
+  {
+    title: '优惠券成本',
+    valueField: 'couponMerchantCost',
+    rateField: 'couponMerchantRate',
+    isShowTip: true,
+    key: 'coupon',
+  },
+  {
+    title: '会员折扣成本',
+    valueField: 'memberDiscountMerchantCost',
+    rateField: 'memberDiscountMerchantRate',
+    isShowTip: true,
+    key: 'member',
+  },
+  {
+    title: '金豆抵扣成本',
+    valueField: 'jinbiMerchantCost',
+    rateField: 'jinbiMerchantRate',
+    isShowTip: true,
+    key: 'jinbi',
+  },
+  {
+    title: '推广分佣成本',
+    valueField: 'distributorCommissionMerchantCost',
+    rateField: 'distributorCommissionMerchantRate',
+    isShowTip: true,
+    key: 'distributor',
+  },
+]

pages/finance/orderDetails.vue

@@ -14,99 +14,19 @@
         <view class="title">应收金额</view>
       </view>
       <view class="order-info">
-        <view class="info">
-          <view class="label">订单编号</view>
-          <view class="value">{{ orderInfo.orderId }}</view>
-        </view>
-        <view class="info">
-          <view class="label">商品名称</view>
-          <view class="value">{{ orderInfo.productName }}</view>
-        </view>
-        <view class="info">
-          <view class="label">下单时间</view>
-          <view class="value">{{ orderInfo.buyTime }}</view>
-        </view>
-        <view class="info">
-          <view class="label">核销时间</view>
-          <view class="value">{{ orderInfo.writeOffTime }}</view>
-        </view>
-        <view class="info">
-          <view class="label">订单金额</view>
-          <view class="value">{{ orderInfo.orderPrice }}</view>
-        </view>
-        <view class="info">
-          <view class="label">实付金额</view>
-          <view class="value">{{ orderInfo.actualPayAmount }}</view>
-        </view>
-        <view class="info">
-          <view class="label">应收金额 </view>
-          <view class="value">{{ orderInfo.payableToMerchant }}</view>
-        </view>
-        <view class="info">
-          <view class="label">
-            邀新分佣成本
-            <image
-              src="/static/finance/status/icon-remind.png"
-              mode="aspectFit"
-              style="width: 33rpx; height: 33rpx; margin-left: 8rpx"
-              @click.stop="toggleTooltip('showTooltip')"
-            ></image>
-            <view class="tooltip" v-show="showTooltip">商户占比{{orderInfo.inviteNewUserCommissionMerchantRate}}%</view>
-          </view>
-          <view class="value">{{ orderInfo.inviteNewUserCommissionMerchantCost }}</view>
-        </view>
-        <view class="info">
-          <view class="label">
-            优惠券成本
-            <image
-              class="tip-img"
-              src="/static/finance/status/icon-remind.png"
-              mode="aspectFit"
-              style="width: 33rpx; height: 33rpx; margin-left: 8rpx"
-              @click.stop="toggleTooltip('showTooltip1')"
-            ></image>
-            <view class="tooltip" v-show="showTooltip1">商户占比{{orderInfo.couponMerchantRate}}%</view>
-          </view>
-          <view class="value">{{ orderInfo.couponMerchantCost }}</view>
-        </view>
-        <view class="info">
+        <view v-for="(item, index) in orderFields" :key="index" class="info">
           <view class="label">
-            会员折扣成本
+            {{ item.title }}
             <image
+              v-if="item.isShowTip"
               src="/static/finance/status/icon-remind.png"
               mode="aspectFit"
               style="width: 33rpx; height: 33rpx; margin-left: 8rpx"
-              @click.stop="toggleTooltip('showTooltip2')"
+              @click.stop="toggleTooltip(item.key)"
             ></image>
-            <view class="tooltip" v-show="showTooltip2">商户占比{{orderInfo.memberDiscountMerchantRate}}%</view>
+            <view class="tooltip" v-show="showTooltip === item.key"> 商户占比{{ orderInfo[item.rateField] }}% </view>
           </view>
-          <view class="value">{{ orderInfo.memberDiscountMerchantCost }}</view>
-        </view>
-        <view class="info">
-          <view class="label">
-            金豆抵扣成本
-            <image
-              src="/static/finance/status/icon-remind.png"
-              mode="aspectFit"
-              style="width: 33rpx; height: 33rpx; margin-left: 8rpx"
-              @click.stop="toggleTooltip('showTooltip3')"
-            ></image>
-            <view class="tooltip" v-show="showTooltip3">商户占比{{orderInfo.jinbiMerchantRate}}%</view>
-          </view>
-          <view class="value">{{ orderInfo.jinbiMerchantCost }}</view>
-        </view>
-        <view class="info">
-          <view class="label">
-            推广分佣成本
-            <image
-              src="/static/finance/status/icon-remind.png"
-              mode="aspectFit"
-              style="width: 33rpx; height: 33rpx; margin-left: 8rpx"
-              @click.stop="toggleTooltip('showTooltip4')"
-            ></image>
-            <view class="tooltip" v-show="showTooltip4">商户占比{{orderInfo.distributorCommissionMerchantRate}}%</view>
-          </view>
-          <view class="value">{{ orderInfo.distributorCommissionMerchantCost }}</view>
+          <view class="value">{{ orderInfo[item.valueField] }}</view>
         </view>
       </view>
 
@@ -120,19 +40,17 @@
 
 <script>
 import api from '@/api/account';
+import {orderFields} from './dictionary';
 
 export default {
   name: 'OrderDetails',
   data() {
     return {
       orderId: '',
-      showTooltip: false,
-      showTooltip1: false,
-      showTooltip2: false,
-      showTooltip3: false,
-      showTooltip4: false,
       orderInfo: {},
-      tooltipTimer: null
+      showTooltip: null,
+      tooltipTimer: null,
+      orderFields,
     };
   },
   mounted() {
@@ -148,8 +66,8 @@ export default {
     }
   },
   onLoad(options) {
-    if (options.id) {
-      this.orderId = options.id;
+    if (options.orderId) {
+      this.orderId = options.orderId;
     }
   },
   onShow() {
@@ -169,44 +87,36 @@ export default {
       });
     },
     // 处理点击事件，显示提示并设置10秒自动隐藏
-    toggleTooltip(tooltipName) {
+    toggleTooltip(key) {
       // 清除之前的定时器
       if (this.tooltipTimer) {
         clearTimeout(this.tooltipTimer);
       }
       // 显示当前提示，隐藏其他提示
-      this.showTooltip = tooltipName === 'showTooltip';
-      this.showTooltip1 = tooltipName === 'showTooltip1';
-      this.showTooltip2 = tooltipName === 'showTooltip2';
-      this.showTooltip3 = tooltipName === 'showTooltip3';
-      this.showTooltip4 = tooltipName === 'showTooltip4';
-      
+      this.showTooltip = this.showTooltip === key ? null : key;
+
       // 如果是显示状态，设置10秒后自动隐藏
-      if (this[tooltipName]) {
+      if (this.showTooltip) {
         this.tooltipTimer = setTimeout(() => {
-          this[tooltipName] = false;
+          this.showTooltip = null;
         }, 10000); // 10秒自动隐藏
       }
     },
     // 点击其他区域隐藏提示
     handleClickOutside(event) {
       // 检查点击目标是否在提示或图片上
-      const tooltipElements = document.querySelectorAll('.tooltip, .tip-img, image[src*="icon-remind.png"]');
+      const tooltipElements = document.querySelectorAll('.tooltip, image[src*="icon-remind.png"]');
       let isClickOnTooltip = false;
-      
-      tooltipElements.forEach(element => {
+
+      tooltipElements.forEach((element) => {
         if (element.contains(event.target)) {
           isClickOnTooltip = true;
         }
       });
-      
+
       // 如果点击的不是提示或图片，隐藏所有提示
       if (!isClickOnTooltip) {
-        this.showTooltip = false;
-        this.showTooltip1 = false;
-        this.showTooltip2 = false;
-        this.showTooltip3 = false;
-        this.showTooltip4 = false;
+        this.showTooltip = null;
         // 清除定时器
         if (this.tooltipTimer) {
           clearTimeout(this.tooltipTimer);
@@ -344,4 +254,4 @@ export default {
   color: #666666;
   margin-top: 10rpx;
 }
-</style>
+</style>