Web_TracerMethodology/pages/legendDetails/legendDetails.vue

<template>
	<view class="legendDetails">
		<view class="box-item">
			<view>条款</view>
			<view v-if="rightAnswer.articleVersions">
				<text class="articleVersions" v-for="(item, index) in rightAnswer.articleVersions">{{item}}</text>
			</view>
		</view>
		<view class="box-item">
			<view>条文</view>
			<view v-if="rightAnswer.articleName">
				<view v-for="(item, index) in rightAnswer.articleName">{{item}}</view>
			</view>
		</view>
		<view class="box-item">
			<view>制度名称</view>
			<view>{{rightAnswer.ruleName}}</view>
		</view>
		<view class="box-item">
			<view>应知应会</view>
			<view>{{rightAnswer.pfmName}}</view>
		</view>
		<view class="box-item">
			<view>图例</view>
			<view class="img-wrap">
				<image mode="widthFix"
					v-for="(img, i) in getArr" 
					:key="i"
					:src="img"></image>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 图例详情
	 */
	export default {
		data() {
			return {
				rightAnswer: {
					articleVersions: [],
					articleName: [],
					ruleName: '',
					pfmName: '',
					picUrl: '',
				}
			};
		},
		computed: {
			getArr() {
				const {picUrl} = this.rightAnswer;
				return picUrl ? picUrl.split(',') : [];
			}
		},
		onLoad: function ({checkItemId, checkPointId}) {
			this.dispatch('getArticle', {checkItemId, checkPointId}).then((data)=>{
				if(data) {
					this.rightAnswer = data;
				}
			});
		},
		methods: {
			dispatch(key, data) {
				return this.$store.dispatch({type: 'checkList/commActions', key, data});
			}
		}
	}
</script>

<style lang="less">
	.legendDetails {
		padding: 0 25rpx;
		background-color: #fff;
		.box-item {
			display: flex;
			flex-direction: row;
			border-bottom: 0.62rpx solid #DADEE6;
			padding: 26.25rpx 0;
			&:last-child {
				border-bottom: 0;
			}
			>view {
				width: 100%;
				.articleVersions {
					margin-right: 10rpx;
				}
				&:first-child {
					width: 175rpx;
					white-space: nowrap;
					color: #525866;
				}
				&.img-wrap {
					display: flex;
					flex-direction: column;
					
					image {
						margin-bottom: 12.5rpx;
						width: 100%;
					}
				}
			}
		}
	}
</style>