146 lines
3.8 KiB
Vue
146 lines
3.8 KiB
Vue
<template>
|
|
<view class="rech-details">
|
|
<view class="rech-layer">
|
|
<view class="rech-amount">
|
|
<text class="c" v-if="objNew.third_party_sn">充值金额</text>
|
|
<text class="c" v-else-if="objNew.transaction_sn">消费金额</text>
|
|
<view class="rech-add">
|
|
<text v-if="objNew.third_party_sn" class="m">+</text>
|
|
<text v-else-if="objNew.transaction_sn" class="m">-</text>
|
|
<text class="m">{{objNew.amount}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="rech-bill">
|
|
<view class="rech-row">
|
|
<text class="c">交易描述</text>
|
|
<text class="m">{{objNew.description}}</text>
|
|
</view>
|
|
<view v-if="!objNew.third_party_sn" class="rech-row">
|
|
<text class="c">订单id</text>
|
|
<text class="m">{{objNew.id}}</text>
|
|
</view>
|
|
<view v-if="!objNew.third_party_sn" class="rech-row">
|
|
<text class="c">业务类型</text>
|
|
<text class="m">{{objNew.related_business_type}}</text>
|
|
</view>
|
|
<view class="rech-row">
|
|
<text class="c">交易流水号</text>
|
|
<text class="m">{{objNew.business_sn}}</text>
|
|
|
|
</view>
|
|
<view v-if="objNew.third_party_sn " class="rech-row">
|
|
<text class="c">第三方流水号</text>
|
|
<text class="m">{{objNew.third_party_sn}}</text>
|
|
</view>
|
|
<view v-if="objNew.third_party_sn " class="rech-row">
|
|
<text class="c">充值方式</text>
|
|
<text v-if="objNew.payment_method == 1" class="m">微信</text>
|
|
<text v-else class="m">支付宝</text>
|
|
</view>
|
|
<view class="rech-row">
|
|
<text class="c">交易时间</text>
|
|
<text class="m">{{objNew.created_at}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
objNew:{}
|
|
};
|
|
},
|
|
onLoad(options){
|
|
this.objNew=JSON.parse(options.obj)
|
|
|
|
|
|
},
|
|
methods: {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.rech-details {
|
|
margin: 28rpx auto;
|
|
width: 700rpx;
|
|
height: 1234rpx;
|
|
border-radius: 24rpx;
|
|
background: #ffffff;
|
|
.rech-layer {
|
|
padding-top: 80rpx;
|
|
.rech-amount {
|
|
margin: 0 auto;
|
|
width: 206rpx;
|
|
height: 120rpx;
|
|
/* 自动布局 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0;
|
|
gap: 24rpx;
|
|
z-index: 0;
|
|
.c {
|
|
font-family: PingFangSC;
|
|
font-size: 32rpx;
|
|
font-weight: normal;
|
|
line-height: 48rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: normal;
|
|
color: #333333;
|
|
}
|
|
.rech-add{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.m {
|
|
font-family: PingFangSC;
|
|
font-size: 48rpx;
|
|
font-weight: 500;
|
|
line-height: 48rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: normal;
|
|
color: #272426;
|
|
}
|
|
}
|
|
.rech-bill {
|
|
height: 460rpx;
|
|
/* 自动布局 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
// justify-content: center;
|
|
// align-items: center;
|
|
padding: 60rpx 24rpx;
|
|
gap: 40rpx;
|
|
z-index: 1;
|
|
.rech-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.c {
|
|
display: block;
|
|
width: 180rpx;
|
|
font-family: PingFangSC;
|
|
font-size: 30rpx;
|
|
font-weight: normal;
|
|
line-height: 30rpx;
|
|
letter-spacing: normal;
|
|
color: #9b939a;
|
|
}
|
|
.m {
|
|
font-family: PingFangSC;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
line-height: 30rpx;
|
|
text-align: right;
|
|
letter-spacing: normal;
|
|
color: #272427;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |