hytc-customer/pages/see_progress/item.vue

<template>
	<view>
		<view class="liwarp" @click="toDetail(item)" v-for="(item,index) in list" :key="index">
			<view class="litop">
				<view class="li_name">{{item.title}}</view>
				<view class="li_status" v-if="item.status == 3">{{i18n['已完成']}}</view>
				<view class="li_status" v-if="item.status == 9">{{i18n['已终止']}}</view>
				<view class="li_status" v-if="item.status != 3 && item.status != 9">{{i18n['处理中']}}</view>
			</view>
			<view class="litext">{{i18n['情况说明']}}：{{item.desc}}</view>
			<view class="litime">{{i18n['提交时间']}}：{{item.createtime}}</view>
		</view>
		<view class="noData" v-if="list.length == 0">{{i18n['暂无更多']}}</view>
	</view>
</template>

<script>
	
	export default{
		props:{
			list:{
				type:Array,
				default:[]
			}
		},
		data(){
			return{
				
			}
		},
		computed:{
			i18n() {
				return this.$t("progress")
			}
		},
		methods:{
			toDetail(item) {
				uni.navigateTo({
					url:'/pages/see_progress/progress_detail?id='+item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.liwarp{
		background:#fff;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding:30rpx;
		margin-bottom:24rpx;
		.litop{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom:15rpx;
			border-bottom:1rpx solid #EDEDED;
			.li_name{
				flex:1;
				font-size:26rpx;
				color:#666666;
				margin-right:24rpx;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.li_status{
				flex-shrink: 0;
				font-size:22rpx;
				color:#65ABF6;
				background:rgba(101,171,246,0.3);
				padding:8rpx 20rpx;
				border-radius: 20rpx;
			}
		}
		.litext{
			font-size:24rpx;
			color:#999999;
			margin:24rpx 0;
		}
		.litime{
			font-size:24rpx;
			color:#999999;
		}
	}
</style>