cansnow
110 lines
3.8 KiB
Vue
110 lines
3.8 KiB
Vue
<template>
|
|
<view>
|
|
<view class="u-p-40" style="background-color: #ffffff;">
|
|
<view class="header u-border-bottom"
|
|
style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 80rpx;">
|
|
<view>
|
|
<u-image width="100rpx" height="100rpx" :src="recordData.tradeIcon"
|
|
shape="circle"></u-image>
|
|
</view>
|
|
<view style="font-size:17px;margin-top: 20rpx;margin-bottom: 26rpx;color: #000000;">
|
|
{{target}}
|
|
</view>
|
|
<view style="font-size: 28px;color: #000000;font-weight: bold;">{{tradeValue}}</view>
|
|
</view>
|
|
<view class="center u-p-t-20">
|
|
<view>
|
|
<u-field class="field-class" v-model="tradeStatus" label="当前状态" :label-width="160"
|
|
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
|
</view>
|
|
<view>
|
|
<u-field class="field-class" v-model="receiveRemark" label="转账说明" :label-width="160"
|
|
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
|
</view>
|
|
<view>
|
|
<u-field class="field-class" v-model="transferTime" label="转账时间" :label-width="160"
|
|
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
|
</view>
|
|
<view>
|
|
<u-field class="field-class" v-model="transferWay" label="支付方式" :label-width="160"
|
|
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
|
</view>
|
|
<view>
|
|
<u-field class="field-class" v-model="transferCode" label="转账单号" :label-width="160"
|
|
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
|
<view style="padding-bottom: 30rpx;">
|
|
<text>账单服务</text>
|
|
</view>
|
|
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
|
<view>
|
|
<u-icon size="32" name="question-circle" color="#818ba4" label="对订单有疑惑" label-color="#818ba4"
|
|
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
|
</view>
|
|
<view class="">
|
|
<u-icon size="34" name="chat" color="#818ba4" label="定位到聊天位置"
|
|
label-color="#818ba4" margin-left="12" label-size="30" label-pos="right"></u-icon>
|
|
</view>
|
|
<view style="width: 30rpx;"> </view>
|
|
</view>
|
|
<view class="u-flex u-row-between u-col-center u-p-t-30">
|
|
<view>
|
|
<u-icon size="32" name="star" color="#818ba4" label="申请转账电子凭证" label-color="#818ba4"
|
|
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
|
</view>
|
|
<view class="">
|
|
<u-icon size="34" name="rmb-circle" color="#818ba4" label="查看往来转账"
|
|
label-color="#818ba4" margin-left="12" label-size="30" label-pos="right"></u-icon>
|
|
</view>
|
|
<view style="width: 30rpx;"> </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props:{
|
|
recordData:{
|
|
required:true,
|
|
type:Object,
|
|
default:function(){
|
|
return null
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
fieldStyle: {
|
|
color: '#000000',
|
|
padding: '0rpx',
|
|
margin: '0rpx',
|
|
height: '70rpx',
|
|
},
|
|
target: '转账-转给祁晶 华润质量',
|
|
tradeValue: '-1800.00',
|
|
tradeStatus: '对方已收钱',
|
|
receiveRemark: '微信转账',
|
|
transferWay: '交通银行储蓄卡(7961)',
|
|
transferTime: '2022年9月30日11:04:09',
|
|
transferCode: '1000050001202209300712408714345'
|
|
};
|
|
},
|
|
mounted(){
|
|
console.log("转账付款数据",this.recordData);
|
|
this.target=this.recordData.tradeTitle;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.field-class {
|
|
color: #909399 !important;
|
|
font-size: 28rpx !important;
|
|
margin: 0rpx !important;
|
|
padding: 0rpx !important;
|
|
}
|
|
</style> |