caimei-applets-mcare/pages/user/order/components/details/cm-payment-temp.vue

<template name="record">
	<view class="record-template">
		<!-- 支付记录 -->
		<view class="record-content">
			<view class="record-title">
				<view class="record-title-l">支付记录</view>
				<view class="record-title-r" v-if="!isEmpty">
					已支付：<text class="red">￥{{ receiptAmount != null ? receiptAmount.toFixed(2): '0.00'}}</text>
				</view>
			</view>
			<view class="record-empty" v-if="isEmpty">
			 	<text>暂无支付记录</text>
			</view>
			<view class="record-list" v-else>
				<view class="record-item" v-for="(record,index) in discernReceiptList" :key="index">
					<view class="record-item-t">
						<view class="item-time mm">￥{{record.associateAmount.toFixed(2)}}</view>
					</view>
					<view class="record-item-t">
						<view class="item-time tt">{{ record.receiptDate }}</view>
						<view class="item-time pp">{{ payTypeText(record) }}</view>
					</view>	
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'record',
		props:{
			discernReceiptList:{
				type:Array
			},
			receiptAmount:{
				type:Number
			}
		},
		data() {
			return{
				isEmpty:false,
				paymentData:'',
				typeText:'',
				isOpen:false,
			}
		},
		created(){
			this.initData(this.discernReceiptList)
		},
		computed: {

		},
		methods:{
			initData(res) {
				if(res.length > 0){
					this.isEmpty = false
					this.paymentData = res
				}else{
					this.isEmpty = true
				}
			},
			payTypeText(record) {
				//处理支付记录文字
				const map = {
					12: '企业网银',
					13: '微信支付',
					14: '支付宝',
					15: '微信支付',
					16: '余额抵扣',
					31: '线下支付凭证'
				}
				if(record.payType === 28 || record.payType === 29 ){
					return record.quickPayStr
				}else{
					return map[record.payType]
				}
			}
		}
	}
</script>

<style lang="scss">
	.record-template{
		width: 100%;
		height: auto;
		background: #FFFFFF;
		float: left;
		margin-top: 24rpx;
		.record-content{
			width: 702rpx;
			padding: 20rpx 24rpx;
			height: auto;
			.record-title{
				width: 100%;
				font-size: $font-size-28;
				color: $text-color;
				text-align: left;
				line-height: 40rpx;
				margin-bottom: 12rpx;
				float: left;
				.record-title-l{
					font-weight: bold;
					float: left;
				}
				.record-title-r{
					float: right;
					.red{
						color: #FF2A2A;
						font-weight: bold;
					}
				}
			}
			.record-empty{
				font-size: $font-size-28;
				color: $text-color;
				text-align: left;
				line-height: 40rpx;
			}
			.record-list{
				width: 100%;
				height: auto;
				float: left;
				margin-top: 12rpx;
				.record-item{
					height: auto;
					width: 100%;
					padding: 12rpx 0;
					font-size: $font-size-28;
					float: left;
					.record-item-t{
						width: 100%;
						height: 40rpx;
						display: flex;
						justify-content: center;
						flex-direction: row;
						.item-time{
							line-height: 48rpx;
							&.mm{
								flex: 1;
								color: $text-color;
								text-align: left;
							}
							&.pp{
								flex: 5;
								color: #999999;
								text-align: right;
							}
							&.tt{
								flex: 5;
								color: #999999;
								text-align: left;
							}
						}
					}
				}
			}
		}
	}
</style>