caimei-applets-mcare/pages/user/pay/components/cm-record-popup.vue

<template name="record">
	<view class="record-template">
		<!-- 支付记录 -->
		<tui-bottom-popup :radius="true" :show="show">
			<view class="tui-popup-box clearfix">
				<view class="title">
					支付记录
					<view class="title-close">
						<text class="iconfont icon-iconfontguanbi" @click="hidePopup"></text>
					</view>
				</view>
				<view class="tui-popup-main coupon">
					<scroll-view class="tui-popup-scroll" scroll-y="true">
						<view class="list-main" v-if="dataList.length > 0">
							<view class="list-item" v-for="(record, index) in dataList" :key="index">
								<view class="list-item-cell">
									<text class="text row-1">￥{{ record.receiptAmount | NumFormat }}</text>
									<text class="text row-2">{{ payTypeText(record) }}</text>
								</view>
								<view class="list-item-cell">
									<text class="text row-3">{{ record.receiptDate }}</text>
								</view>
							</view>
						</view>
						<view class="list-main-none" v-else>
							<image
								class="none-image"
								:src="staticUrl + 'icon_echart_none@2x.png'"
								mode=""
							></image>
							<view class="none-text">暂无支付记录</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
export default {
	name: 'record',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			staticUrl:this.global.staticUrl,
			isIphoneX: this.$store.state.isIphoneX,
			dataList: []
		}
	},
	filters: {
		NumFormat(value) {
			//处理金额
			if (value) {
				return Number(value).toFixed(2)
			} else {
				return '0.00'
			}
		},
		
	},
	created() {
		this.dataList = this.list
	},
	methods: {
		hidePopup() {
			this.$parent.popupShow = false
		},
		payTypeText(record) {
			//处理支付记录文字
			const map = {
				12: '企业网银',
				13: '微信支付',
				14: '支付宝',
				15: '微信支付',
				16: '余额抵扣',
			}
			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;
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 220rpx;
	padding: 24rpx 32rpx 0 32rpx;
	.title {
		font-size: $font-size-32;
		color: $text-color;
		line-height: 68rpx;
		text-align: center;
		float: left;
		width: 100%;
		height: 68rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		position: relative;
		font-weight: bold;
		.title-close {
			width: 68rpx;
			height: 68rpx;
			text-align: center;
			line-height: 68rpx;
			position: absolute;
			right: 0;
			top: 0;
			.iconfont {
				color: #b2b2b2;
				font-size: 40rpx;
			}
		}
	}
	.tui-popup-main {
		width: 100%;
		float: left;
		padding-top: 10rpx;
		.tui-popup-scroll {
			width: 100%;
			height: 600rpx;
			.list-main-none{
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.none-image {
					width: 220rpx;
					height: 220rpx;
					margin-bottom: 20rpx;
				}
				.none-text {
					font-size: $font-size-28;
					color: #999999;
					line-height: 44rpx;
				}
			}
			.list-main {
				height: auto;
				display: flex;
				flex-direction: column;
				.list-item {
					width: 100%;
					height: auto;
					box-sizing: border-box;
					padding: 24rpx 0;
					border-bottom: 1px solid #e1e1e1;
					&:last-child {
						border-bottom: none;
					}
					.list-item-cell {
						width: 100%;
						height: 44rpx;
						display: flex;
						flex: 1;
						line-height: 44rpx;
						font-size: $font-size-26;
						color: $text-color;
						.text {
							flex: 1;
							&.row-1 {
								flex: 3;
							}
							&.row-2 {
								flex: 7;
							}
							&.row-3 {
								color: #999999;
							}
						}
					}
				}
			}
		}
	}
}
</style>