|
|
@@ -1,262 +1,359 @@
|
|
|
<template>
|
|
|
- <view class="order">
|
|
|
- <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="order">
|
|
|
+ <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="order-card">
|
|
|
- <view class="order-header">
|
|
|
- <view class="amount">{{ orderInfo.payableToMerchant }}</view>
|
|
|
- <view class="title">应收金额</view>
|
|
|
- </view>
|
|
|
- <view class="order-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(item.key)"
|
|
|
- ></image>
|
|
|
- <view class="tooltip" v-show="showTooltip === item.key"> 商户占比{{ orderInfo[item.rateField] }}% </view>
|
|
|
- </view>
|
|
|
- <view class="value">{{ orderInfo[item.valueField] }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 备注说明 -->
|
|
|
- <view class="remark">
|
|
|
- 注：应收金额=订单金额*商品分佣占比-邀新分佣成本-优惠券成本-会员折扣成本-金豆抵扣成本-推广分佣成本</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="order-card">
|
|
|
+ <view class="order-header">
|
|
|
+ <view class="amount">{{ orderInfo.payableToMerchant }}</view>
|
|
|
+ <view class="title">应收金额</view>
|
|
|
+ </view>
|
|
|
+ <block v-if="jumpType == 'SETTLE_TSMAIN'">
|
|
|
+ <view class="order-info">
|
|
|
+ <view v-for="(item, index) in serveMealFields" :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"> 商户占比{{ orderInfo[item.rateField] }}%
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="value">{{ orderInfo[item.valueField] }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 备注说明 -->
|
|
|
+ <view class="remark line">注：应收金额=订单金额*商品分佣占比-平台优惠券成本-金豆成本</view>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <uni-table
|
|
|
+ class="service-table"
|
|
|
+ border
|
|
|
+ :empty-text="'暂无数据'"
|
|
|
+ v-if="orderInfo.merchantServiceOrderDetailVoList && orderInfo.merchantServiceOrderDetailVoList.length"
|
|
|
+ >
|
|
|
+ <uni-tr>
|
|
|
+ <uni-th align="center">服务名称/数量</uni-th>
|
|
|
+ <uni-th align="center">实付总价</uni-th>
|
|
|
+ </uni-tr>
|
|
|
+ <uni-tr
|
|
|
+ v-for="(item, index) in orderInfo.merchantServiceOrderDetailVoList"
|
|
|
+ :key="item.serviceOrderSubNo || index"
|
|
|
+ >
|
|
|
+ <uni-td align="center">
|
|
|
+ <text class="service-name">{{ item.serviceName }}</text>
|
|
|
+ </uni-td>
|
|
|
+ <uni-td align="center">{{ formatOrderMoney(item.orderMoney) }}</uni-td>
|
|
|
+ </uni-tr>
|
|
|
+ </uni-table>
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <view class="order-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(item.key)"></image>
|
|
|
+ <view class="tooltip" v-show="showTooltip === item.key"> 商户占比{{ orderInfo[item.rateField] }}%
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="value">{{ orderInfo[item.valueField] }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 备注说明 -->
|
|
|
+ <view class="remark">注：应收金额=订单金额*商品分佣占比-邀新分佣成本-优惠券成本-会员折扣成本-金豆抵扣成本-推广分佣成本</view>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import api from '@/api/account';
|
|
|
-import {orderFields} from './dictionary';
|
|
|
+ import api from '@/api/account';
|
|
|
+ import {
|
|
|
+ orderFields,
|
|
|
+ serveMealFields
|
|
|
+ } from './dictionary';
|
|
|
|
|
|
-export default {
|
|
|
- name: 'OrderDetails',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- orderId: '',
|
|
|
- orderInfo: {},
|
|
|
- showTooltip: null,
|
|
|
- tooltipTimer: null,
|
|
|
- orderFields,
|
|
|
- orderType:''
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // 点击其他区域隐藏提示
|
|
|
- document.addEventListener('click', this.handleClickOutside);
|
|
|
- },
|
|
|
- beforeUnmount() {
|
|
|
- // 移除事件监听
|
|
|
- document.removeEventListener('click', this.handleClickOutside);
|
|
|
- // 清除定时器
|
|
|
- if (this.tooltipTimer) {
|
|
|
- clearTimeout(this.tooltipTimer);
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(options) {
|
|
|
- if (options.id) {
|
|
|
- this.orderId = options.id;
|
|
|
- }
|
|
|
- if (options.orderType) {
|
|
|
- this.orderType = options.orderType;
|
|
|
- }
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.getOrderDetails(this.orderId,this.orderType);
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getOrderDetails(id,orderType) {
|
|
|
- api.orderClearDetail(id,orderType).then((res) => {
|
|
|
- if (res.data.code === 200) {
|
|
|
- this.orderInfo = res.data.result;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- back() {
|
|
|
- uni.navigateBack({
|
|
|
- delta: 1,
|
|
|
- });
|
|
|
- },
|
|
|
- // 处理点击事件，显示提示并设置10秒自动隐藏
|
|
|
- toggleTooltip(key) {
|
|
|
- // 清除之前的定时器
|
|
|
- if (this.tooltipTimer) {
|
|
|
- clearTimeout(this.tooltipTimer);
|
|
|
- }
|
|
|
- // 显示当前提示，隐藏其他提示
|
|
|
- this.showTooltip = this.showTooltip === key ? null : key;
|
|
|
+ export default {
|
|
|
+ name: 'OrderDetails',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orderId: '',
|
|
|
+ orderInfo: {},
|
|
|
+ showTooltip: null,
|
|
|
+ tooltipTimer: null,
|
|
|
+ orderFields,
|
|
|
+ serveMealFields,
|
|
|
+ orderType: '',
|
|
|
+ jumpType: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 点击其他区域隐藏提示
|
|
|
+ document.addEventListener('click', this.handleClickOutside);
|
|
|
+ },
|
|
|
+ beforeUnmount() {
|
|
|
+ // 移除事件监听
|
|
|
+ document.removeEventListener('click', this.handleClickOutside);
|
|
|
+ // 清除定时器
|
|
|
+ if (this.tooltipTimer) {
|
|
|
+ clearTimeout(this.tooltipTimer);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ console.log('options', options)
|
|
|
+ if (options.jumpType) {
|
|
|
+ this.jumpType = options.jumpType;
|
|
|
+ }
|
|
|
+ if (options.id) {
|
|
|
+ this.orderId = options.id;
|
|
|
+ }
|
|
|
+ if (options.orderType) {
|
|
|
+ this.orderType = options.orderType;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getOrderDetails(this.orderId, this.orderType);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getOrderDetails(id, orderType) {
|
|
|
+ if (this.jumpType == 'SETTLE_TSMAIN') {
|
|
|
+ api.groupSeverDetail(id, orderType).then((res) => {
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.orderInfo = res.data.result;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ api.orderClearDetail(id, orderType).then((res) => {
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ this.orderInfo = res.data.result;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- // 如果是显示状态，设置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;
|
|
|
+ },
|
|
|
+ back() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 处理点击事件，显示提示并设置10秒自动隐藏
|
|
|
+ toggleTooltip(key) {
|
|
|
+ // 清除之前的定时器
|
|
|
+ if (this.tooltipTimer) {
|
|
|
+ clearTimeout(this.tooltipTimer);
|
|
|
+ }
|
|
|
+ // 显示当前提示，隐藏其他提示
|
|
|
+ this.showTooltip = this.showTooltip === key ? null : key;
|
|
|
|
|
|
- tooltipElements.forEach((element) => {
|
|
|
- if (element.contains(event.target)) {
|
|
|
- isClickOnTooltip = true;
|
|
|
- }
|
|
|
- });
|
|
|
+ // 如果是显示状态，设置10秒后自动隐藏
|
|
|
+ if (this.showTooltip) {
|
|
|
+ this.tooltipTimer = setTimeout(() => {
|
|
|
+ this.showTooltip = null;
|
|
|
+ }, 10000); // 10秒自动隐藏
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatOrderMoney(money) {
|
|
|
+ if (money === null || money === undefined || money === '') {
|
|
|
+ return '--';
|
|
|
+ }
|
|
|
+ const num = Number(money);
|
|
|
+ if (Number.isNaN(num)) {
|
|
|
+ return '--';
|
|
|
+ }
|
|
|
+ return `¥ ${num.toFixed(2)}`;
|
|
|
+ },
|
|
|
+ // 点击其他区域隐藏提示
|
|
|
+ handleClickOutside(event) {
|
|
|
+ // 检查点击目标是否在提示或图片上
|
|
|
+ const tooltipElements = document.querySelectorAll('.tooltip, image[src*="icon-remind.png"]');
|
|
|
+ let isClickOnTooltip = false;
|
|
|
|
|
|
- // 如果点击的不是提示或图片，隐藏所有提示
|
|
|
- if (!isClickOnTooltip) {
|
|
|
- this.showTooltip = null;
|
|
|
- // 清除定时器
|
|
|
- if (this.tooltipTimer) {
|
|
|
- clearTimeout(this.tooltipTimer);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ tooltipElements.forEach((element) => {
|
|
|
+ if (element.contains(event.target)) {
|
|
|
+ isClickOnTooltip = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 如果点击的不是提示或图片，隐藏所有提示
|
|
|
+ if (!isClickOnTooltip) {
|
|
|
+ this.showTooltip = null;
|
|
|
+ // 清除定时器
|
|
|
+ if (this.tooltipTimer) {
|
|
|
+ clearTimeout(this.tooltipTimer);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.order {
|
|
|
- background: #f7f8fc;
|
|
|
- min-height: 100vh;
|
|
|
- font-family: Source Han Sans SC;
|
|
|
- font-weight: 500;
|
|
|
+ .order {
|
|
|
+ background: #f7f8fc;
|
|
|
+ min-height: 100vh;
|
|
|
+ font-family: Source Han Sans SC;
|
|
|
+ font-weight: 500;
|
|
|
|
|
|
- .fix {
|
|
|
- position: sticky;
|
|
|
- top: 0;
|
|
|
+ .fix {
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
|
|
|
- /*#ifdef APP-PLUS*/
|
|
|
- .top {
|
|
|
- width: 100%;
|
|
|
- height: var(--status-bar-height);
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
+ /*#ifdef APP-PLUS*/
|
|
|
+ .top {
|
|
|
+ width: 100%;
|
|
|
+ height: var(--status-bar-height);
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
|
|
|
- /*#endif*/
|
|
|
+ /*#endif*/
|
|
|
|
|
|
- .head {
|
|
|
- width: 100%;
|
|
|
- height: 112rpx;
|
|
|
- padding: 20rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background: #fff;
|
|
|
- position: relative;
|
|
|
- border-bottom: 1rpx solid #eeeeee;
|
|
|
+ .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;
|
|
|
- }
|
|
|
+ .cuIcon-back {
|
|
|
+ font-size: 40rpx;
|
|
|
+ margin-right: 40rpx;
|
|
|
+ }
|
|
|
|
|
|
- .case {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- font-weight: 500;
|
|
|
- font-size: 38rpx;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .case {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 38rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .order-card {
|
|
|
- padding: 42rpx 31rpx 85rpx;
|
|
|
- overflow: hidden;
|
|
|
- background: #ffffff;
|
|
|
- height: 95vh;
|
|
|
- }
|
|
|
-}
|
|
|
+ .order-card {
|
|
|
+ padding: 42rpx 31rpx 85rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #ffffff;
|
|
|
+ height: 95vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.order-header {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
+ .order-header {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .amount {
|
|
|
- font-size: 63rpx;
|
|
|
- color: #1f1f1f;
|
|
|
- }
|
|
|
+ .amount {
|
|
|
+ font-size: 63rpx;
|
|
|
+ color: #1f1f1f;
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #666666;
|
|
|
- margin: 11rpx 0 42rpx;
|
|
|
- }
|
|
|
-}
|
|
|
+ .title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666666;
|
|
|
+ margin: 11rpx 0 42rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.order-info {
|
|
|
- .info {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding-bottom: 21rpx;
|
|
|
+ .order-info {
|
|
|
+ .info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 21rpx;
|
|
|
|
|
|
- .label {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 31rpx;
|
|
|
- color: #666666;
|
|
|
- position: relative;
|
|
|
+ .label {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 31rpx;
|
|
|
+ color: #666666;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .tooltip {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- 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;
|
|
|
+ .tooltip {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ 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;
|
|
|
- right: 158rpx;
|
|
|
- bottom: 14rpx;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-bottom: 10rpx solid transparent;
|
|
|
- border-right: 10rpx solid rgba(0, 0, 0, 0.6);
|
|
|
- border-top: 10rpx solid transparent;
|
|
|
- border-left: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ right: 158rpx;
|
|
|
+ bottom: 14rpx;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ 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;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ .value {
|
|
|
+ font-size: 31rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.remark {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 25rpx;
|
|
|
- color: #666666;
|
|
|
- margin-top: 10rpx;
|
|
|
-}
|
|
|
-</style>
|
|
|
+ .remark {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 25rpx;
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ .line{
|
|
|
+ color: #449AFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .service-table {
|
|
|
+ margin-top: 31rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ .service-name {
|
|
|
+ font-size: 27rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .service-table {
|
|
|
+ .uni-table-th {
|
|
|
+ height: 67rpx !important;
|
|
|
+ background: #f5f7fa;
|
|
|
+ font-size: 29rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .uni-table-td {
|
|
|
+ height: 54rpx !important;
|
|
|
+ text-align: center !important;
|
|
|
+ font-size: 27rpx !important;
|
|
|
+ color: #666666 !important;
|
|
|
+ }
|
|
|
+ .table--border {
|
|
|
+ border-color: #ebeef5 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
