jinjian1.1/pages/mine/history.vue

<template>
	<view class="">
		<u-subsection :list="list" fontSize='30' :current="current" @change="sectionChange"></u-subsection>
		<scroll-view :scroll-y="true" upper-threshold='100'>
			<view class="main">
				<block v-for="(item, index) in content" :key="index">
					<view class="list u-padding-10">
						<u-row gutter="16">
							<u-col span="4">
								<image class="img" :src="item.img"></image>
							</u-col>
							<u-col span="8">
								<u-row align="center" class="center">
									<u-col>
										<view class="title">
											{{ item.title }}
										</view>
									</u-col>
									<u-col>
										<view class="date">
											进件日期： {{ item.date }}
										</view>
									</u-col>
									<u-col>
										<view class="status">
											进件状态：<span :style="'color:'+item.color+';'">{{item.status}}</span>
										</view>
									</u-col>
								</u-row>
							</u-col>
						</u-row>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return { //审核中包含 1进件中（我们平台审核）、2审核中（银盛审核）、3待签约（银盛审核）
				list: ['审核中', '已审核', '已驳回'],
				current: 0,
				content: [{
						img: 'https://yuledui.oss-cn-qingdao.aliyuncs.com/oss/uploads/2023-12-18/af4d4fff602033f59678d149faafcafe_20231218123312.jpg',
						date: '2021年12月20日',
						color: '#01BEFF',
						title: '兔喜喜便利店',
						status: "进件中",
						channel: "邮储"
					},
					{
						img: 'https://yuledui.oss-cn-qingdao.aliyuncs.com/oss/uploads/2023-07-04/b7919f8c7136c847f915eaf8140b182b_20230704090103.jpg',
						date: '2021年12月20日',
						color: '#01BEFF',
						title: '李沧区孙鹏海产品店',
						status: "进件中",
						channel: "邮储"
					},
					{
						img: 'https://yuledui.oss-cn-qingdao.aliyuncs.com/oss/uploads/2023-07-04/9c7e5cdd3ec31191817a082365dcd786_20230704081852.jpg',
						date: '2021年12月20日',
						color: 'blue',
						title: '李沧区润香斋食品店',
						status: "审核中",
						channel: "邮储"
					},
					{
						img: 'https://yuledui.oss-cn-qingdao.aliyuncs.com/oss/uploads/2023-06-05/4ca1fa6d68de8d807b827a7e25fe7be6_20230605163954.jpg',
						date: '2021年12月20日',
						color: 'green',
						title: '小微商户王子健',
						status: "已完成",
						channel: "邮储"
					},
					{
						img: 'https://yuledui.oss-cn-qingdao.aliyuncs.com/oss/uploads/2023-05-30/9f82f990684d3e7f22ab4fe4f13a0123_20230530162735.jpg',
						date: '2021年12月20日',
						color: 'orange',
						title: '李沧区背包熊餐饮店',
						status: "审核中",
						channel: "微信"
					},
					{
						img: 'https://yuledui.oss-cn-qingdao.aliyuncs.com/oss/uploads/2023-05-23/01e15bfc4b896317dca7e419605a3fcb_20230523151303.jpg',
						date: '2021年12月20日',
						color: 'purplered',
						title: '李沧区丽语胜面食店',
						status: "已驳回",
						channel: "微信"
					},
					{
						img: 'https://yuledui.oss-cn-qingdao.aliyuncs.com/oss/uploads/2023-05-23/8774d84e2ad0528d97236633a93c1f01_20230523135332.jpg',
						date: '2021年12月20日',
						color: 'purple',
						title: '小微商户鲍贵枝',
						status: "待账户验证",
						channel: "微信"
					},
					{
						img: 'https://yuledui.oss-cn-qingdao.aliyuncs.com/oss/uploads/2023-05-17/b8c9c87ad06dc2392cd893f4637b783f_20230517114243.jpg',
						date: '2021年12月20日',
						color: 'brown',
						title: '李沧区君乐唯蔬菜行',
						status: "待签约",
						channel: "微信"
					}
				],

			}
		},
		methods: {
			sectionChange(index) {
				this.current = index;
			}
		}
	}
</script>

<style scoped lang="scss">
	.center {
		align-items: center;
		justify-content: flex-start;
		display: flex !important;
		flex-direction: column !important;
		margin-left: 25rpx;
	}
	/deep/.u-subsection--button{
		position: fixed;
		z-index: 11;
	}
	.main {
		background-color: #F4F4F4;
		padding-top: 60rpx;
		font-size: 26rpx;
	}

	.main .list {
		margin-top: 10rpx;
		background-color: #ffffff;
	}

	.main .list .img {
		width: 230rpx;
		height: 160rpx;
		border-radius: 14rpx;
	}

	.u-padding-10 {
		padding: 30rpx !important;
	}

	.main .list .title,
	.main .list .date,
	.main .list .status {
		height: 55rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 55rpx !important;
	}
</style>