BD-LDBD-UNI/pages/maintenance/evaluate/history/index.vue

<template>
	<view class="history">
		<view class="history-card" v-for="(item, index) in dataList" :key="index">
			<view class="header">
				<image :src="baseImgUrl + item.carLogo" alt="">
					<view class="title">
						{{item.carModelName}}
					</view>
			</view>
			<view class="content">
				{{item.describes}}
			</view>
			<view class="history-img" v-if="item.status==1">
				<view v-for="(items, indexs) in item.imgUrls.split(',')" :key="indexs">
					<image v-if="items.indexOf('png'||'jpg')!= -1" :src="baseImgUrl+items" alt="">
				</view>
				<video v-if="item.videoUrl != ''" :src="baseImgUrl+item.videoUrl"></video>
			</view>
			<view class="bottom">
				<view class="leftView">
					<view class="history-type" :style="item.status==1?'color: #FF6000;':'color: #005CFF;'">
						{{item.status==1?'评估中':'已评估'}}
					</view>
					<view class="history-time">
						{{item.time}}
					</view>
				</view>
				<view class="rightView" @click="toDetail(item.id)">
					估价详情
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getEvaluationList
	} from "@/api/maintain.js"
	export default {
		data: function() {
			return {
				baseImgUrl: "https://biaodianfuhao.oss-cn-beijing.aliyuncs.com/",
				dataList: [],
				pageNo: 1,
				pageSize: 20,
			}
		},
		onLoad() {
			this.getPage()
		},
		onReachBottom() {
			this.getPage()
		},
		methods: {
			getPage() {
				let that = this;
				getEvaluationList({
					pageNo: that.pageNo,
					pageSize: that.pageSize
				}).then((res) => {
					that.dataList = that.dataList.concat(res.data.rows)
					console.log(that.dataList);
					that.pageNo++
				})
			},
			toDetail(id) {
				this.$yrouter.push({
					path: "/pages/maintenance/evaluate/history/detail?id=" + id
				});
			}
		},
	}
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}

	.history {
		.history-card {
			width: 650rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 20rpx;
			padding: 30rpx;

			.header {
				display: flex;

				image {
					width: 130rpx;
					height: 130rpx;
					background: #FFFFFF;
					border: 2rpx solid #F4F4F4;
					border-radius: 10rpx;
				}

				.title {
					width: 455rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 44rpx;
					padding-left: 32rpx;
				}
			}

			.content {
				height: 162rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				padding: 25rpx 51rpx 32rpx 29rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 40rpx;
				margin-top: 18rpx;
			}

			.history-img {
				display: flex;
				overflow-y: auto;

				image {
					width: 116rpx;
					height: 116rpx;
					background: #F9A9A9;
					border-radius: 8rpx;
					margin: 18rpx 18rpx 0 0;
				}

				video {
					width: 116rpx;
					height: 116rpx;
					background: #F9A9A9;
					border-radius: 8rpx;
					margin: 18rpx 18rpx 0 0;
				}
			}

			.bottom {
				display: flex;
				justify-content: space-between;

				margin-top: 28rpx;


				.leftView {
					.history-type {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
					}

					.history-time {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 31rpx;
					}
				}

				.rightView {
					width: 180rpx;
					height: 64rpx;
					background: linear-gradient(0deg, #005AFF 0%, #0078FF 100%);
					border-radius: 32rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 64rpx;
					text-align: center;
				}
			}
		}
	}
</style>