Web_TracerMethodology/pages/legendDetails/legendDetails.vue

<template>
	<view class="legendDetails">
		<view class="box-item">
			<view>图例介绍</view>
			<view>{{rightAnswer.rightAnswerText}}</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: {
					rightAnswerText: '',
					rightAnswerImage: ''
				}
			};
		},
		computed: {
			getArr() {
				const {rightAnswerImage} = this.rightAnswer;
				return rightAnswerImage ? rightAnswerImage.split(',') : [];
			}
		},
		onLoad: function ({checkItemId}) {
			this.dispatch('rightAnswer', {checkItemId}).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%;
				&:first-child {
					width: 175rpx;
					white-space: nowrap;
					color: #525866;
				}
				&.img-wrap {
					display: flex;
					flex-direction: column;
					
					image {
						margin-bottom: 12.5rpx;
						width: 100%;
					}
				}
			}
		}
	}
</style>