shangfutong-ui/jeepay-ui-uapp-merchant/pages/memberCenter/rechargeRecord/detail.vue

148 lines
4.1 KiB
Vue

<template>
<view class="content">
<view class="mbr-info">
<image :src="vdata.record.avatarUrl" />
<text class="mbr-info-name">{{ vdata.record.mbrName }}</text>
<text class="mbr-info-amount">{{ '+' + cal.cert2Dollar(vdata.record.entryAmount) }}</text>
</view>
<view class="account-line"></view>
<view class="account-history">
<view class="account-history-item"><text>充值状态</text>
<text class="order-text">{{ datamap.rechargeRecordImage(vdata.record.state).text }}</text>
</view>
<view class="account-history-item">
<text>充值订单号</text>
<text>{{ vdata.record.rechargeRecordId }}
<text class="info-copy" @tap="copyInfo(vdata.record.rechargeRecordId)">复制</text>
</text>
</view>
<view class="account-history-item"><text>会员ID</text><text>{{ vdata.record.mbrId }}</text></view>
<view class="account-history-item"><text>会员手机号</text><text>{{ vdata.record.mbrTel }}</text></view>
<view class="account-history-item"><text>支付金额</text><text>{{ cal.cert2Dollar(vdata.record.payAmount) }}</text></view>
<view class="account-history-item"><text>赠送金额</text><text>{{ cal.cert2Dollar(vdata.record.giveAmount) }}</text></view>
<view class="account-history-item"><text>到账金额</text><text>{{ cal.cert2Dollar(vdata.record.entryAmount) }}</text></view>
<view v-if="vdata.record.payOrderId" class="account-history-item">
<text>支付订单号</text>
<text>{{ vdata.record.payOrderId }}
<text class="info-copy" @tap="copyInfo(vdata.record.payOrderId)">复制</text>
</text>
</view>
<view class="account-history-item"><text>异步通知地址</text><text>{{ vdata.record.notifyUrl }}</text></view>
<view class="account-history-item"><text>创建时间</text><text>{{ vdata.record.createdAt }}</text></view>
<view class="account-history-item"><text>支付成功时间</text><text>{{ vdata.record.successTime }}</text></view>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { reqLoad, API_URL_MEMBER_RECHARGE_RECORDS } from '@/http/apiManager.js'
import infoBox from '@/commons/utils/infoBox.js';
import cal from '@/commons/utils/cal.js'
import go from '@/commons/utils/go.js'
import emit from '@/commons/utils/emit.js'
import ent from '@/commons/utils/ent.js'
import datamap from '@/commons/utils/datamap.js'
onLoad((options) => {
refData(options.rechargeRecordId)
})
const vdata = reactive({
record : { }
})
// 监听 更新事件
onUnload(() => uni.$off(emit.ENAME_REF_MEMBER_RECHARGE_RECORD_DETAIL))
uni.$on(emit.ENAME_REF_MEMBER_RECHARGE_RECORD_DETAIL, function(data){
refData(vdata.record.rechargeRecordId)
})
function refData(rechargeRecordId){
reqLoad.getById(API_URL_MEMBER_RECHARGE_RECORDS, rechargeRecordId).then(({bizData}) => {
vdata.record = bizData
})
}
const copyInfo = (val) => {
uni.setClipboardData({ data: val}).then(() => {
infoBox.showSuccessToast('复制成功')
})
}
</script>
<style lang="scss" scoped>
.content {
width: 630rpx;
margin: 0 auto;
}
.mbr-info {
height: 376rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.mbr-info-name {
padding-top: 10rpx;
color: #828282ff;
font-size: 30rpx;
}
.mbr-info-amount {
padding-top: 10rpx;
color: #000000ff;
font-size: 50rpx;
font-weight: 500;
}
}
.account-line {
border-bottom: 1rpx solid #0000001a;
}
.account-history {
padding-top: 60rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
.account-history-item {
display: flex;
flex-direction: row;
justify-content: flex-start;
opacity: 1;
padding: 13rpx 0 12rpx;
text:first-child {
width: 180rpx;
color: #999999;
font-size: 26rpx;
font-weight: 400;
}
text:nth-child(2) {
width: 450rpx;
word-break: break-all;
color: #000000;
font-size: 26rpx;
font-weight: 400;
.info-copy {
padding-left: 20rpx;
color: #2d6dccff;
font-size: 26rpx;
}
}
}
}
</style>