LocalLivingServicesUniapp/pages/finance/groupMealDetails.vue

<template>
  <view class="settle">
    <view class="fix">
      <view class="top"></view>
      <view class="head">
        <span class="cuIcon-back" @click="back"></span>
        <view class="case"> 结算详情-团餐 </view>
      </view>
    </view>

    <view class="settle-card">
      <view class="settle-header">
        <view class="amount">¥{{ settlementInfo.amountPayable }}</view>
      </view>
      <view class="settle-info">
        <view v-for="(item, index) in groupMealFields" :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(item.key)"
            ></image>
            <view class="tooltip" v-show="showTooltip === item.key">
              商户占比{{ settlementInfo.merchantCostRatio}}%
            </view>
          </view>
          <view class="value">{{ settlementInfo[item.valueField] }}</view>
        </view>
        <view class="remark"> 注：应收金额=成团价*商家分佣占比-拉新分佣成本</view>
      </view>
      <!-- 订单列表 -->
      <view class="settle-list">
        <GroupMealList :list="orderList"></GroupMealList>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/api/account';
import { groupMealFields } from './dictionary';
import GroupMealList from './components/group-meal-list.vue';

export default {
  name: 'SettlementDetails',
  components: {
    GroupMealList,
  },
  data() {
    return {
      orderId: '',
      settleStatus: '',
      settlementInfo: {},
      orderList: [],
      groupMealFields,
      showTooltip: null,
      tooltipTimer: null,
    };
  },
  mounted() {
    // 点击其他区域隐藏提示
    document.addEventListener('click', this.handleClickOutside);
  },
  beforeUnmount() {
    // 移除事件监听
    document.removeEventListener('click', this.handleClickOutside);
    // 清除定时器
    if (this.tooltipTimer) {
      clearTimeout(this.tooltipTimer);
    }
  },
  onLoad(options) {
		console.log(options)
    if (options.id) {
      this.orderId = options.id;
      this.settleStatus = options.settleStatus;
    }
  },
  onShow() {
    this.getDetails(this.orderId, this.settleStatus);
  },
  methods: {
    getDetails(id, settleStatus) {
			console.log(id, settleStatus)
      api
        .groupOrderClearDetail( id, settleStatus)
        .then((res) => {
          if (res.data.code === 200) {
            this.settlementInfo = res.data.result || {};
            this.orderList = res.data.result.groupProductList || [];
          } else {
            uni.showToast({
              title: res.data.msg || '获取结算详情失败',
              icon: 'none',
            });
          }
        })
        .catch(() => {
          uni.showToast({
            title: '获取结算详情失败',
            icon: 'none',
          });
        });
    },
    // 处理点击事件，显示提示并设置10秒自动隐藏
    toggleTooltip(key) {
      // 清除之前的定时器
      if (this.tooltipTimer) {
        clearTimeout(this.tooltipTimer);
      }
      // 显示当前提示，隐藏其他提示
      this.showTooltip = this.showTooltip === key ? null : key;

      // 如果是显示状态，设置10秒后自动隐藏
      if (this.showTooltip) {
        this.tooltipTimer = setTimeout(() => {
          this.showTooltip = null;
        }, 10000); // 10秒自动隐藏
      }
    },
    // 点击其他区域隐藏提示
    handleClickOutside(event) {
      // 检查点击目标是否在提示或图片上
      const tooltipElements = document.querySelectorAll('.tooltip, image[src*="icon-remind.png"]');
      let isClickOnTooltip = false;

      tooltipElements.forEach((element) => {
        if (element.contains(event.target)) {
          isClickOnTooltip = true;
        }
      });

      // 如果点击的不是提示或图片，隐藏所有提示
      if (!isClickOnTooltip) {
        this.showTooltip = null;
        // 清除定时器
        if (this.tooltipTimer) {
          clearTimeout(this.tooltipTimer);
        }
      }
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.settle {
  background: #f7f8fc;
  min-height: 100vh;
  font-family: Source Han Sans SC;
  padding-bottom: 100rpx;
  font-weight: 500;

  .fix {
    position: sticky;
    top: 0;
    /*#ifdef APP-PLUS*/
    .top {
      width: 100%;
      height: var(--status-bar-height);
      background: #fff;
    }

    /*#endif*/

    .head {
      width: 100%;
      height: 112rpx;
      padding: 20rpx;
      display: flex;
      align-items: center;
      background: #fff;
      position: relative;
      border-bottom: 1rpx solid #eeeeee;

      .cuIcon-back {
        font-size: 40rpx;
        margin-right: 40rpx;
      }

      .case {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 38rpx;
        color: #333333;
      }
    }
  }

  .settle-card {
    background-color: #fff;
    padding: 30rpx 31rpx 31rpx;

    .settle-header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .amount {
        font-size: 63rpx;
        color: #1f1f1f;
        margin-bottom: 41rpx;
      }
    }

    .settle-info {
      background-color: #fff;
      margin-bottom: 20rpx;

      .info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 21rpx;

        &:last-child {
          border-bottom: none;
        }

        .label {
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 31rpx;
          color: #666666;
          

          .tooltip {
            display: flex;
            align-items: center;
            justify-content: center;
						position: relative;
						padding: 0 5rpx;
            // width: 158rpx;
            height: 42rpx;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 4rpx 4rpx 4rpx 4rpx;
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 23rpx;
            color: #ffffff;
            margin-left: 10rpx;

            &::after {
              content: '';
              position: absolute;
              left: 0;
              bottom: 0;
              width: 0;
              height: 0;
							transform: translate(-100%,-50%);
              border-bottom: 10rpx solid transparent;
              border-right: 10rpx solid rgba(0, 0, 0, 0.6);
              border-top: 10rpx solid transparent;
              border-left: 0;
            }
          }
        }

        .value {
          font-size: 31rpx;
          color: #333333;
        }
      }
      .remark {
        font-weight: 400;
        font-size: 25rpx;
        color: #666666;
        margin-top: 10rpx;
      }
    }
    .settle-list {
      margin-top: 42rpx;
    }
  }
}
</style>