crmeb_b2b2c/crmeb_src/mer_uniapp/components/systemFromInfo/index.vue

<template>
	<!-- 系统表单信息 "-->
	<view class="">
		<view v-if="orderExtend.length" class=''>
      <view v-for="(itm,idx) in orderExtend" :key="idx" class='pb-32 borderPad item acea-row row-between bg--w111-fff borRadius14 mt20'>
        <view v-for="(item,index) in itm" :key="index" class='acea-row row-between mt-32'>
          <view class="title">{{item.title}}{{ item.title.includes(':') ? '' : '：' }}</view>
          <view v-if="!Array.isArray(item.value)" class='conter'>{{item.value||'--'}}</view>
          <view v-else class='acea-row conter' style="justify-content: flex-end;">
            <view v-for="(pic,i) in item.value" :key="i">
              <image v-if="pic.includes('http')" class="virtual_image ml-12" :src="pic"
                     @click="getPhotoClickIdx(item.value,i)"></image>
              <view v-else class="ml-12 flex-center">
                <view>{{pic}}</view>
                <view class="ml-12" v-show="i < item.value.length - 1"> -- </view>
              </view>
            </view>
          </view>
        </view>
      </view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			orderExtend: {
				type: Array,
				default: function() {
					return []
				}
			},
		},
		methods: {
			// 图片预览
			getPhotoClickIdx(list, idx) {
				uni.previewImage({
					current: list[idx], //  传 Number H5端出现不兼容
					urls: list
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.item {
		font-size: 28rpx;
		color: #282828;
	}

	.wrapper .item~.item {
		//margin-top: 20rpx;
	}

	.conter {
		color: #868686;
		width: 460rpx;
		text-align: right;
		overflow: hidden;
	}

	.title {
		width: 194rpx;
	}

	.virtual_image {
		margin-left: 24rpx;
		width: 106rpx;
		height: 106rpx;
		border-radius: 8rpx;
		margin-right: 10rpx;

		&:last-child {
			margin-right: 0;
		}
	}
</style>