125 lines
4.6 KiB
Vue
125 lines
4.6 KiB
Vue
<route lang="jsonc" type="page">{
|
||
// "needLogin": true,
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}</route>
|
||
|
||
<template>
|
||
<view class="pb-30rpx">
|
||
<view class="order-list">
|
||
<navbar title="账单详情" custom-class='!bg-[#F6F7F8]'></navbar>
|
||
</view>
|
||
|
||
<!-- 订单详情 -->
|
||
<view class="mt-28rpx mx-32rpx bg-white rounded-16rpx py-30rpx relative">
|
||
<view class="absolute top-0 right-38rpx">
|
||
<!-- change_type: 1.预定2.续时3.续茶4.退款5.提现-->
|
||
<wd-img v-if="billDetails.change_type == 1" width="112rpx" height="112rpx" :src="`${OSS}images/store/bill/image1.png`"
|
||
mode="aspectFill" />
|
||
<wd-img v-if="billDetails.change_type == 2" width="112rpx" height="112rpx" :src="`${OSS}images/store/bill/image2.png`"
|
||
mode="aspectFill" />
|
||
</view>
|
||
<view class="flex items-center">
|
||
<view class="w-8rpx h-32rpx bg-[#4C9F44] mr-22rpx"></view>
|
||
<view class="font-bold text-28rpx leading-40rpx text-[#303133]">订单号：{{ billDetails.source_sn }}</view>
|
||
</view>
|
||
|
||
<view class="mt-38rpx text-center">
|
||
<view class="text-28rpx leading-40rpx text-[#606266]">金额</view>
|
||
<view class="mt-20rpx">
|
||
+ <price-format color="#000" :first-size="36" :second-size="36" :showSubscript="false" :price="billDetails.amount"></price-format>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-16rpx mb-20rpx border-b-2rpx border-b-solid border-[#E5E5E5] mx-18rpx"></view>
|
||
|
||
<view class="text-28rpx leading-40rpx text-[#606266] mx-28rpx">
|
||
<view class="flex justify-between items-center mb-16rpx">
|
||
<view class="w-150rpx">消费类型</view>
|
||
<view>{{ Bill.handleMapTransactionType(billDetails.change_type) }}</view>
|
||
</view>
|
||
<view class="flex justify-between items-center mb-16rpx">
|
||
<view class="w-150rpx">交易方式</view>
|
||
<view>{{ billDetails.pay_way_title }}</view>
|
||
</view>
|
||
<view class="flex justify-between items-center mb-16rpx">
|
||
<view class="w-150rpx">实际收入</view>
|
||
<view>{{ billDetails.amount }}</view>
|
||
</view>
|
||
<view class="flex justify-between items-center mb-16rpx">
|
||
<view class="w-150rpx">用户备注</view>
|
||
<view class="w-400rpx text-right">{{ billDetails.remark }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-26rpx mb-20rpx border-b-2rpx border-b-dashed border-[#E5E5E5] mx-18rpx"></view>
|
||
|
||
<view class="text-28rpx leading-40rpx text-[#606266] mx-28rpx">
|
||
<view class="flex justify-between items-center mb-16rpx">
|
||
<view>用户名</view>
|
||
<view>{{ billDetails.user_name }}</view>
|
||
</view>
|
||
<view class="flex justify-between items-center mb-16rpx">
|
||
<view>支付时间</view>
|
||
<view>{{ billDetails.create_time}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script lang="ts" setup>
|
||
import { getTeaSpecialistBillDetails } from '@/api/tes-specialist'
|
||
import { PayWayText } from '@/utils/pay'
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
// 账单明细
|
||
const id = ref<number>(0)
|
||
const billDetails = ref<any>({
|
||
id: 0,
|
||
amount: 0,
|
||
change_type: 0,
|
||
order: {
|
||
order_sn: '',
|
||
pay_way: '', // 支付方式 1余额支付 2微信支付 3门店支付
|
||
nickname: '',
|
||
mobile: '',
|
||
update_dtime: '',
|
||
remark: '', // 用户备注
|
||
}
|
||
})
|
||
|
||
onLoad(async (args) => {
|
||
id.value = Number(args.id) || 0
|
||
const res = await getTeaSpecialistBillDetails(id.value)
|
||
billDetails.value = res
|
||
console.log("🚀 ~ billDetails.value:", billDetails.value)
|
||
})
|
||
|
||
const Bill = {
|
||
/**
|
||
* 映射流水明细类型
|
||
*/
|
||
handleMapTransactionType: (type: number) => {
|
||
const typeMap: Record<number, string> = {
|
||
1: '包间预定',
|
||
2: '包间续费',
|
||
3: '提现',
|
||
4: '团购核销'
|
||
}
|
||
return typeMap[type] || '其他'
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $cz-page-background;
|
||
}
|
||
|
||
</style>
|