caimei-applets-caimei/pages/supplier/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.productName }}</view>
				</view>
				<view class="list-view">
					<view class="list-view-label">SN码</view> <view class="list-view-text">{{ item.sn }}</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.fileName }}</view>
				</view>
				<view class="list-view-title none">图片</view>
				<view class="list-view-upload clearfix">
					<view class="photo-item" v-for="(image, imageIndex) in item.imageList" :key="index">
						<image
							:src="image"
							mode="aspectFill"
							@click.stop="previewImg(item.imageList, imageIndex)"
						></image>
					</view>
				</view>
			</view>
			<view class="qualifications-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0' }">
				<view class="edit-button" @click="editSubmitFn('edit')">编辑</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="editSubmitFn('add')">去补充</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import authorize from '@/common/config/authorize.js'
var isPreviewImg
export default {
	data() {
		return {
			logisticsBatchId: 0,
			shopOrderId: 0,
			isIphoneX: this.$store.state.isIphoneX,
			isEmpty: false,
			qualificationsList: []
		}
	},
	onLoad(option) {
		this.shopOrderId = option.shopOrderId
		this.logisticsBatchId = option.logisticsBatchId
		console.log('shopOrderId', this.shopOrderId)
		this.GetSupplierQualificationData(option.logisticsBatchId)
	},
	methods: {
		...mapMutations(['login']),
		GetSupplierQualificationData(logisticsBatchId) {
			this.ShopService.GetSupplierQualificationData({
				logisticsBatchId: logisticsBatchId
			})
				.then(response => {
					const data = response.data
					if (data && data.length > 0) {
						this.qualificationsList = data
						this.isEmpty = false
					} else {
						this.isEmpty = true
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		editSubmitFn(type) {
			switch (type) {
				case 'edit':
					this.$api.navigateTo(
						`/pages/supplier/deliver/qualifications-add?type=edit&logisticsBatchId=${
							this.logisticsBatchId
						}&shopOrderId=${this.shopOrderId}`
					)
					break
				case 'add':
					this.$api.navigateTo(
						`/pages/supplier/deliver/qualifications-add?type=add&logisticsBatchId=${
							this.logisticsBatchId
						}&shopOrderId=${this.shopOrderId}`
					)
					break
			}
		},
		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>