142 lines
3.1 KiB
Vue
142 lines
3.1 KiB
Vue
<template>
|
||
<view class="bill-detail-page">
|
||
<view class="navbox">
|
||
<view class="status_bar"></view>
|
||
<uni-nav-bar
|
||
left-icon="left"
|
||
title="详情"
|
||
@clickLeft="goBack"
|
||
color="#8B2316"
|
||
:border="false"
|
||
backgroundColor="#eeeeee"
|
||
></uni-nav-bar>
|
||
</view>
|
||
|
||
<view class="detail-content">
|
||
<view class="detail-row">
|
||
<text class="label">交易号：</text>
|
||
<text class="value">{{ detail.tradeNo || '-' }}</text>
|
||
</view>
|
||
<view class="detail-row">
|
||
<text class="label">类型：</text>
|
||
<text class="value">{{ detail.typeName || '-' }}</text>
|
||
</view>
|
||
<view class="detail-row">
|
||
<text class="label">金额：</text>
|
||
<text class="value amount" :class="amountClass">{{ detail.accountStr || '-' }}元</text>
|
||
</view>
|
||
<view class="detail-row">
|
||
<text class="label">用户：</text>
|
||
<text class="value">{{ detail.userName || '-' }}</text>
|
||
</view>
|
||
<view class="detail-row">
|
||
<text class="label">时间：</text>
|
||
<text class="value">{{ formatDateTime(detail.createTime) }}</text>
|
||
</view>
|
||
<view class="detail-row">
|
||
<text class="label">备注：</text>
|
||
<text class="value">{{ detail.remark || '' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
|
||
const detail = ref({})
|
||
const from = ref('')
|
||
|
||
onLoad((options) => {
|
||
if (options.from) {
|
||
from.value = decodeURIComponent(options.from)
|
||
}
|
||
})
|
||
|
||
const amountClass = computed(() => {
|
||
const amount = Number(detail.value?.accountStr || 0)
|
||
return amount < 0 ? 'negative' : 'positive'
|
||
})
|
||
|
||
const formatDateTime = (value) => {
|
||
if (!value) return '-'
|
||
const text = String(value).trim()
|
||
const date = new Date(text)
|
||
if (Number.isNaN(date.getTime())) return text
|
||
const y = date.getFullYear()
|
||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||
const d = String(date.getDate()).padStart(2, '0')
|
||
const hh = String(date.getHours()).padStart(2, '0')
|
||
const mm = String(date.getMinutes()).padStart(2, '0')
|
||
const ss = String(date.getSeconds()).padStart(2, '0')
|
||
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
|
||
}
|
||
|
||
const goBack = () => {
|
||
if (from.value === 'billDetails') {
|
||
uni.navigateBack()
|
||
return
|
||
}
|
||
uni.redirectTo({
|
||
url: '/pages_app/myAccount/billDetails?from=myAccount'
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
const cache = uni.getStorageSync('billDetailItem')
|
||
detail.value = cache || {}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.bill-detail-page {
|
||
min-height: 100vh;
|
||
background: #f3f3f3;
|
||
}
|
||
|
||
.detail-content {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: calc(var(--status-bar-height) + 44px);
|
||
bottom: 0;
|
||
overflow-y: auto;
|
||
box-sizing: border-box;
|
||
background: #ffffff;
|
||
padding: 0 24rpx;
|
||
}
|
||
|
||
.detail-row {
|
||
min-height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1rpx solid #efefef;
|
||
}
|
||
|
||
.label {
|
||
font-size: 30rpx;
|
||
color: #2c2c2c;
|
||
}
|
||
|
||
.value {
|
||
flex: 1;
|
||
text-align: right;
|
||
font-size: 30rpx;
|
||
color: #666666;
|
||
margin-left: 20rpx;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.amount {
|
||
&.positive {
|
||
color: #8B2316;
|
||
}
|
||
|
||
&.negative {
|
||
color: #3f3f3f;
|
||
}
|
||
}
|
||
</style>
|