caimei-applets-caimei/supplier/pages/deliver/qualifications-details.vue

<template>
	<view class="container qualifications" :style="{paddingBottom :isIphoneX ? (150+68)+'rpx' : '150rpx'}">
		<view class="qualifications-content" v-if="!isEmpty">
			<view class="list" v-for="(item,index) in qualificationsList" :key="index">
				<view class="list-view-title">商品{{ index+1 }}</view>
				<view class="list-view">
					<view class="list-view-label">商品</view>
					<view class="list-view-text">{{ item.name }}</view>
				</view>
				<view class="list-view">
					<view class="list-view-label">SN码</view>
					<view class="list-view-text">{{ item.code }}</view>
				</view>
				<view class="list-view" v-for="(file,fileIndex) in item.fileList" :key="fileIndex">
					<view class="list-view-label">资质文件</view>
					<view class="list-view-text">{{ file.ossName }}</view>
				</view>	
				<view class="list-view-title none">图片</view>
				<view class="list-view-upload clearfix">
					<view class="photo-item" v-for="(image, index) in item.imageList" :key="index">
						<image :src="image" mode="aspectFill" @click.stop="previewImg(item.imageList,index)"></image>
					</view>
				</view>
			</view>
			<view class="qualifications-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '0'}">
				<view class="edit-button">编辑</view>
			</view>
		</view>
		<view v-else class="cart-content empty">
			<view  class="empty-container">
				<image class="empty-container-image" src="https://static.caimei365.com/app/img/icon/icon-ques-empty@2x.png" mode="aspectFit"></image>
				<text class="error-text">暂无商品资质信息</text>
				<view class="login-btn"  @click="goIndex">去补充</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import authorize from '@/common/config/authorize.js' 
	var isPreviewImg;
	export default{
		data() {
			return{
				isIphoneX:this.$store.state.isIphoneX,
				isEmpty:false,
				qualificationsList:[
					{
						name:'美国第六代光子多功能智能平台M22',
						code:'SN2562659874565',
						fileList:[
							{
								ossName:'深圳市和创元文件.pdf'
							},
							{
								ossName:'深圳市和创元文件.pdf'
							},
						],
						imageList:[
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
						]
					},
					{
						name:'美国第六代光子多功能智能平台M22',
						code:'SN2562659874565',
						fileList:[
							{
								ossName:'深圳市和创元文件.pdf'
							},
							{
								ossName:'深圳市和创元文件.pdf'
							},
						],
						imageList:[
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
							'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2306696130,3636777462&fm=26&gp=0.jpg',
						]
					},
				]
			}
		},
		onLoad(option) {
			
		},
		methods:{
			...mapMutations(['login']),
			initGetLogisticsInfo(){
				this.ShopService.GetLogisticsInfo({ logisticsBatchId : this.logisticsBatchId, shopOrderId:this.info.shopOrderId }).then(response =>{
					const data = response.data.logisticsBatch
					if(data.remarkImages!=null){
						this.photoLists = data.remarkImages
					}else{
						this.photoLists =[]
					}
					this.info.note = data.remark
				}).catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			previewImg (Array,index) {//顶部商品图片预览
				console.log(Array)
				isPreviewImg = true
				let previewUrls = Array
				uni.previewImage({
					current: index, 	//图片索引
					urls: previewUrls, //必须是http图片，本地图片无效
					longPressActions:''
				})
			},
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	page {
		height: auto;
		background:#F7F7F7;
	}
	.qualifications-content{
		width: 100%;
		height: auto;
		.list{
			width: 100%;
			height: auto;
			background-color: #FFFFFF;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			padding: 0 24rpx;
			.list-view-title{
				width: 100%;
				height: 92rpx;
				border-bottom: 1px solid #E1E1E1;
				line-height: 92rpx;
				font-size: $font-size-30;
				color: #333333;
				text-align: left;
				&.none{
					border-bottom: none;
					color: #666666;
				}
			}
			.list-view{
				width: 100%;
				height: 92rpx;
				border-bottom: 1px solid #E1E1E1;
				line-height: 92rpx;
				font-size: $font-size-30;
				.list-view-label{
					width: 192rpx;
					color: #666666;
					float: left;
				}
				.list-view-text{
					width: 510rpx;
					color: #333333;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					line-clamp: 1;
					-webkit-box-orient: vertical;
					float: right;
				}
			}
			.list-view-upload{
				width: 100%;
				height: auto;	
				padding: 10rpx 0;
				.photo-item{
					display: inline-block;
					width: 112rpx;
					height: 112rpx;
					margin: 10rpx 0;
					margin-right: 25rpx;
					border-radius: 10rpx;
					border:1px solid #F5F5F5;
					position: relative;
					float: left;
					&.add{
						width: 112rpx;
						height: 112rpx;
						border-color: #FFC684;
						text-align: center;
						line-height: 112rpx;
						margin-right: 0rpx;
						.icon-jiahao{
							font-size: $font-size-44;
							color:#FFC684 ;
							font-weight: bold;
						}
					}
					.icon-iconfontguanbi{
						width: 30rpx;
						height: 30rpx;
						border-radius:50%;
						display: block;
						position: absolute;
						right: -10rpx;
						top: -10rpx;
						background: #f94b4b;
						text-align: center;
						line-height: 30rpx;
						color: #FFFFFF;
						font-size: $font-size-22;
					}
					image{
						width: 112rpx;
						height: 112rpx;
						border-radius: 10rpx;
					}
				}	
				.photo-list{
					width: 100%;
					height: 116rpx;
					overflow: hidden;
					white-space: nowrap;
					display: flex;
					align-items: flex-start;
				}
				.scoll-wrapper{
					display:flex;
					align-items: flex-start;
				}
			}
		}
		.qualifications-btn{
			width: 100%;
			height: 90rpx;
			padding-top: 60rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #FFFFFF;
			.edit-button{
				width: 600rpx;
				height: 90rpx;
				background: $btn-confirm;
				line-height: 90rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;
				margin: 0 auto;
				border-radius: 45rpx;
			}
		}
	}
	
</style>