caimei-applets-mcare/pages/user/order/components/details/voucherRecord.vue

<template name="refund">
	<view class="record-template" v-if="isEmpty">
		<!-- 支付凭证 -->
		<view class="record-content">
			<view class="record-title">线下支付凭证</view>
			<view class="record-list" v-for="(item,index) in voucherList">
				<view class="record-list-time">{{ item.addtime }}</view>
				<scroll-view scroll-x>
					<view class="tui-goods__list">
						<view class="tui-goods__item" @click.stop="previewImg(image.img)" v-for="image in item.imgs">
							<view class="tui-goods__imgbox">
								<image :src="image.img" mode="" class="tui-goods__img"></image>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="record-list-tmk" v-if="item.remarks">
					备注：{{ item.remarks }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"refund",
		props:{
			list:{
				type:Array
			},
		},
		data() {
			return{
				isEmpty:true,
				voucherList:[]
			}
		},
		created(){
			this.initData(this.list)
		},
		computed: {
		
		},
		methods:{
			initData(data) {
				this.voucherList = data
			},
			previewImg (image) {//顶部商品图片预览
				this.isPreviewImage = true
				let urls = []
				urls.push(image)
				uni.previewImage({
					urls: urls,
					current: 0
				})
			},
		}
	}
</script>

<style lang="scss">
	.record-template{
		width: 100%;
		height: auto;
		background: #FFFFFF;
		float: left;
		margin-top: 24rpx;
		padding-bottom: 40rpx;
		.record-content{
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;
			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;
				font-weight: bold;
				padding: 24rpx 0;
				box-sizing: border-box;
			}
			.record-list{
				width: 100%;
				padding: 0 24rpx 24rpx;
				box-sizing: border-box;
				overflow: hidden;
				.record-list-time{
					width: 100%;
					line-height: 37rpx;
					text-align: left;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #666666;
					font-size: $font-size-26;
					margin-bottom: 20rpx;
				}
				.record-list-tmk{
					width: 100%;
					line-height: 37rpx;
					text-align: justify;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #999999;
					font-size: $font-size-26;
					margin-top: 20rpx;
				}
			}
		}
	}
	.tui-goods__list {
		display: flex;
		align-items: center;
	}
	.tui-goods__item {
		background-color: #fff;
		width: 210rpx;
		height: 210rpx;
		border-radius: 6rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-shrink: 0;
		margin-right: 18rpx;
		border:1px solid #B8BFCA;
	}
	.tui-goods__imgbox {
		width: 210rpx;
		height: 210rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border-radius: 8rpx;
	}
	
	.tui-goods__img {
		width: 210rpx;
		height: 210rpx;
		display: block;
	}
</style>