ErectionPlatform/pagesHome/pages/afterSalesDetails/dutyList.vue

<template>
	<view class="dutyList_container">
		<view class="dutyList_main">
			<!-- 内部责任划分 -->
			<!-- 标题 -->
			<view class="fwb pageTitle">
				内部责任划分
			</view>

			<!-- 内容 -->
			<block v-for="(item, index) in info">
				<view class="dutyList_item">
					<view class="row flex-c-sb">
						<view class="fwb">
							责任方
						</view>

						<view class="info">
							{{(details.partyArr.find(val => val.value === item.responsible_party + '') || {}).label || '暂无数据'}}
						</view>
					</view>

					<view class="row flex-c-sb">
						<view class="fwb">
							责任人
						</view>

						<view class="info">
							{{item.responsible_person}}
						</view>
					</view>

					<view class="row flex-c-sb">
						<view class="fwb">
							占比
						</view>

						<view class="info">
							{{item.proportion + '%'}}
						</view>
					</view>

					<view class="row flex-c-sb">
						<view class="fwb">
							第三方责任人
						</view>

						<view class="info">
							{{item.responsible_person_tripartite}}
						</view>
					</view>

					<view class="row border-none">
						<view class="fwb">
							说明
						</view>

						<view class="info mt20">
							{{item.remark}}
						</view>
					</view>
				</view>

			</block>

			<!-- 处理结果 -->
			<!-- 标题 -->
			<view class="fwb pageTitle mt20">
				处理结果
			</view>

			<!-- 信息 -->
			<view class="dutyList_item">
				<view class="row flex-c-sb">
					<view class="fwb">
						售后收入
					</view>

					<view class="info">
						{{installSales.in_money}}
					</view>
				</view>

				<view class="row flex-c-sb">
					<view class="fwb">
						赔偿金额
					</view>

					<view class="info">
						{{installSales.out_money}}
					</view>
				</view>

				<view class="row flex-c-sb">
					<view class="fwb">
						售后成本
					</view>

					<view class="info">
						{{installSales.up_money}}
					</view>
				</view>

				<view class="row border-none">
					<view class="fwb">
						处理说明
					</view>

					<view class="info mt20">
						{{installSales.handle_remark}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, defineProps, computed } from 'vue';
	import type { PropType } from 'vue';

	const props = defineProps({
		/** 页面路由数据 */
		pageInfo: {
			type: Object as PropType<Object>,
			required: true,
		},
		/** 页面数据 */
		info: {
			type: Object as PropType<Object>,
			required: true,
		}
	})

	const pageInfo = computed(() => {
		console.log('props.pageInfo :>> ', props.pageInfo);

		if (props.pageInfo) return props.pageInfo
		else return {}
	})

	const info = computed(() => {
		console.log('props.info :>> ', props.info);

		if (props.info && props.info.liability) return props.info.liability
		else return []
	})

	const installSales = computed(() => {

		if (props.info && props.info.installSales) return props.info.installSales
		else return []
	})

	const details = reactive({
		isShow: true,
		partyArr: [
			{ label: '内部安装人员', value: '1' },
			{ label: '外请安装人员', value: '2' },
			{ label: '运输', value: '3' },
			{ label: '三方运输', value: '4' },
			{ label: '客户', value: '5' },
			{ label: '设计师', value: '6' },
		]
	})
</script>

<style lang="scss" scoped>
	@import url('@/utils/style/common.scss');

	// 最外层
	.dutyList_container {
		background: #f5f5f6;
		padding: 20upx;

		$color: var(--subjectColor);

		.pageTitle {
			color: var(--subjectColor);
			position: relative;
			font-size: 1.25rem;
			line-height: 1.25rem;

			&::after {
				content: '';
				display: block;
				position: absolute;
				height: 16upx;
				width: 64upx;
				background: linear-gradient(270deg, rgba(211, 131, 42, 0) 0%, $color 100%);
				bottom: -5upx;
				left: -5upx;
				border-radius: 10upx;
			}
		}
	}

	// 主体容器
	.dutyList_main {
		// padding: 20upx;
		border-radius: 10upx;

		.dutyList_item {
			background: #fff;
			padding: 20upx;
			margin-top: 20upx;
			border-radius: 10upx;

			.row {
				padding: 20upx 0;
				border-bottom: 2upx solid #eee;

				&.border-none {
					border: none;
				}


				&.title {
					color: var(--subjectColor);
				}

			}

			.info {
				// font-size: 0.9rem;
				color: #999;
			}

			.tipText {
				color: #0086F1;
				overflow: hidden;
				transition: all 0.3s;
				height: 1rem;

				&.done {
					height: 0rem;
				}

			}

			.rotateIcon {
				// flex-direction: row;
				transition: all 0.3s;
				transform: rotate(90deg);

				&.rotate {
					transform: rotate(-90deg);
				}
			}
		}

	}

	.imgbox {
		flex-wrap: wrap;

		image {
			width: 160upx;
			height: 160upx;
			border-radius: 10upx;
		}
	}
</style>