assess-app/pages/task/loan-item.vue

<template>
	<view class="p-t20">
		<view class="task-body m-lr20  animate__animated animate__fadeIn" v-if="taskList.length>0">
			<view class="row-c page-box-bg-fff m-b20 r-30 box-shadow-197 loan-item" v-for="(item,index) in taskList"
				:key="index" @click="goItem(item.id)">
				<view class="main_string" :class="item.model_type === 1?'bga-1':'bga-2'"></view>
				<view class="row-c flex p-30 p-t60">
					<image v-if="item.model_type === 2" class="wh-80 r-circle" src="@/static/img/index/gs.png" mode=""></image>
					<image v-else class="wh-80 r-circle" src="@/static/img/index/gr.png" mode=""></image>
					<view class="flex m-l20">
						<view class="row-justify-sb center flex">
							<text class="text-color-333 sys-weight-600" v-if="item.model_type===1">住宅评估</text>
							<text class="text-color-333 sys-weight-600" v-else-if="item.model_type===2">公建评估</text>
							<text class="text-color-333 sys-weight-600" v-else-if="item.model_type===3">土地评估</text>
							<text class="text-color-333 sys-weight-600" v-else>工业用房评估</text>
							<view class="row-c line-40" @click.stop="makCall(item.phone)">
								<text class="size-26 text-color-333">{{item.name}}</text>
								<image class="wh-30 m-l16"
									src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task/task-phone.png"
									mode=""></image>
							</view>
						</view>
						<view class="p-tb14 p-lr30 m-tb20 r-100 row-justify-sb center size-24 text-color-12 sys-from-background-color sys-weight-600"
							style="line-height: 40rpx;">
							<view class="">
								<view class="fc-9 sys-size-24">
									总价
								</view>
								<text class="size-28 text-color-E21">￥{{item.total_price}}</text>
							</view>
							<view class="">
								<view class="fc-9 sys-size-24">
									建筑面
								</view>
								<text class="size-24 text-color-333">{{item.data.area}}</text>
							</view>
							<view class="">
								<view class="fc-9 sys-size-24">
									评估单价
								</view>
								<text class="color-FF730E">￥{{item.unit_price}}</text>
							</view>
						</view>
						<view class="sys-size-24 fc-9">
							{{item.updated_at}}
						</view>
					</view>
					<view class="accomplish-text" >
            已完成
					</view>
				</view>
			</view>
			<view class="placeholder sys-list-background-color" v-if="is_bottom && taskList.length"></view>
		</view>
		<en-blank v-else></en-blank>
	</view>
</template>

<script>
	import EnButton from "@/components/en-utils/en-button/en-button.vue";
	import tools from "@/service/tools";
	import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";
	import ClientType from "@/pages/loan/components/clientType.vue";

	export default {
		components: {
			ClientType,
			EnBlank,
			EnButton
		},
		props: {
			type: {
				type: Number,
				default: 1
			},
			taskList: {
				type: Array,
				default: () => [1]
			},
			iconStatus: {
				type: Number,
				default: 1
			},
			leftImgStatus: {
				type: Number,
				default: 0
			},
			opacity: {
				type: Number,
				default: 0
			},
			back: {
				type: Boolean,
				default: false
			},
			is_bottom: {
				type: Boolean,
				default: false
			},

		},
		data() {
			return {
				leftImg: ['task-house', 'task-business', 'task-repayment'],
				iconList: ['task-audit', 'task-do', 'task-stay'],
				lineColor: ['#DEF4FD', '#FFEEE6', '#FFEEE6', '#FFEEE6'],
				isAjax: false,
				item: {}
			}
		},
		methods: {
			goItem(id) {
				uni.navigateTo({
					url: '/page_law/order-detail/index?id=' + id
				});
			},
			moveHandle() {
				return false
			},
			onCalculate(item, type) {
				this.$emit('onCalculate', {
					'item': item,
					'type': type
				})
			},
			makCall(phone) {
				tools.makingCall(phone)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.en_button {
		border: none;
	}

	.task-body {
		height: 100%;
	}

	.left_button {
		height: 56rpx;
		color: #008FD6;
		line-height: 56rpx;
		background: #FFFFFF;
		border: 1rpx solid #008FD6;
		border-radius: 100rpx;
	}

	.right_button {}

	.placeholder {
		height: 40rpx;
	}

	.main_string {
		width: 6rpx;
		height: 60rpx;
		border-radius: 100rpx;
	}

	.loan-item {
		position: relative;
	}

	.accomplish-text {
		font-size: 24rpx;
		color: #00994D;
		background-color: #e7f7ef;
		padding: 6rpx 30rpx;
		line-height: 30rpx;
		border-radius: 0 30rpx 0 30rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.unfinished {
		color: #F64646;
		background-color: #feeded;
	}

	button::after {
		border: none;
	}
	.fc-9{
		color: #999;
	}
	.bga-1{
		background: #37B9FA;
	}
	.bga-2{
		background: #FA5E43;
	}
</style>