caimei-applets-caimei/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">{{ record.payType | payTypeText }}</text>
								</view>
								<view class="list-item-cell">
									<text class="text row-3">{{ record.receiptDate }}</text>
								</view>
							</view>
						</view>
						<view class="list-none" v-else>暂无支付记录</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 {
			isIphoneX: this.$store.state.isIphoneX,
			dataList: [
				{
					receiptAmount: '1000',
					payType: 12,
					receiptDate: '2022-10-31 17:24:35'
				},
				{
					receiptAmount: '1000',
					payType: 13,
					receiptDate: '2022-10-31 17:24:35'
				},
				{
					receiptAmount: '1000',
					payType: 15,
					receiptDate: '2022-10-31 17:24:35'
				},
				{
					receiptAmount: '1000',
					payType: 17,
					receiptDate: '2022-10-31 17:24:35'
				}
			]
		}
	},
	filters: {
		NumFormat(value) {
			//处理金额
			if (value) {
				return Number(value).toFixed(2)
			} else {
				return '0.00'
			}
		},
		payTypeText(vaule) {
			//处理支付记录文字
			const map = {
				12: '企业网银',
				13: '微信支付',
				14: '支付宝',
				15: '微信支付',
				16: '余额抵扣',
				17: '建设银行借记卡（0053）'
			}
			return map[vaule]
		}
	},
	created() {
		// this.dataList = this.list
	},
	methods: {
		hidePopup() {
			this.$parent.popupShow = false
		}
	}
}
</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-none {
				line-height: 80rpx;
				font-size: $font-size-26;
				color: #999999;
				text-align: left;
			}
			.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>