supervise/supervise-uniapp/pages/index/ProjectDetail.vue

<template>

	<view class="pages">

		<view class="layout">

			<view class="layout-item">
				<text class="text1">项目名称</text>
				<text class="text2">{{info.entryName}}</text>
			</view>

			<view class="layout-item">
				<text class="text1">所属行业</text>
				<text class="text2">{{info.industryName}}</text>
			</view>

			<view class="layout-item" style="border-bottom: none;">
				<text class="text1">企业名称</text>
				<text class="text2">{{info.enterpriseName}}</text>
			</view>

		</view>

		<view class="layout" style="margin-top: 10px;">

			<view class="layout-item">
				<text class="text1">授信额度</text>
				<text class="text2">{{info.creditLimit}}</text>
			</view>

			<view class="layout-item">
				<text class="text1">项目类型</text>
				<text class="text2">{{info.typeName}}</text>
			</view>

			<view class="layout-item" style="border-bottom: none;">
				<text class="text1">贷款银行</text>
				<text class="text2">{{info.bankName}}</text>
			</view>

		</view>

		<view v-show="isShow">

			<view class="layout" style="margin-top: 10px;">

				<text style="margin-top: 15px;margin-left: 13px;">项目仓库</text>

				<view class="list">

					<view class="list-item" v-for="item in imageArr" >

						<view class="list-item-lay" @click="imgClick(item)">
							<image class="item-img" :src="item.src" mode="aspectFill">
							</image>
							<text class="item-text">{{item.title}}</text>
						</view>


					</view>

				</view>


			</view>
		</view>


		<view class="layout" style="margin-top: 10px;">

			<view class="layout-item">
				<text class="text1">项目联系人</text>
				<text class="text2">{{info.eContacts}}</text>
			</view>

			<view class="layout-item">
				<text class="text1">监管负责人</text>
				<text class="text2">{{info.regulatoryLeader}}</text>
			</view>

			<view class="layout-item" style="border-bottom: none;">
				<text class="text1">客户经理</text>
				<text class="text2">{{info.bManagerName}}</text>
			</view>

		</view>

		<view class="layout" style="margin-top: 10px;">

			<view class="layout-item">
				<text class="text1">签约日期</text>
				<text class="text2">{{info.signingDate}}</text>
			</view>

			<view class="layout-item">
				<text class="text1">结束日期</text>
				<text class="text2">{{info.endDate}}</text>
			</view>

			<view class="layout-item" style="border-bottom: none;">
				<text class="text1">填表日期</text>
				<text class="text2">{{info.fillInDate}}</text>
			</view>

		</view>

		<view class="layout" style="margin-top: 10px;">

			<view class="layout-item" style="border-bottom: none;">
				<text class="text1">事业部经理</text>
				<text class="text2">{{info.generalManager}}</text>
			</view>

		</view>

		<view class="layout" style="margin-top: 10px;padding: 20px;">

			<text style="font-size: 14px;color: #919191;line-height: 25px;">项目说明：{{info.remarks}}</text>

		</view>

	</view>

</template>


<script>
	export default {
		data() {
			return {
				info: {},
				isShow: false,
				imageArr: [
					// {
					// 	src: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
					// 	title: "芙蓉"
					// },
					// {
					// 	src: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
					// 	title: "芙蓉"
					// },
					// {
					// 	src: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
					// 	title: "芙蓉"
					// }, {
					// 	src: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
					// 	title: "芙蓉"
					// },
					// {
					// 	src: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
					// 	title: "芙蓉"
					// }
				],
			}
		},
		onLoad(option) {
			this.loadData1(option.sid);
			this.loadData2(option.sid);
		},
		methods: {
			loadData1(sid) {
				this.$api.getProjectBySid(sid).then((resp) => {
					// if (resp.success) {
					console.log('1111', resp)
					this.info = resp

				}).catch(e => {
					console.log('eeeee', e)
				})
			},

			loadData2(sid) {
				this.$api.getStorehouseBySid(sid).then((resp) => {
					// if (resp.success) {
					console.log('222', resp)
					// this.dataList = resp
					this.imageArr = []
					for (var i = 0; i < resp.length; i++) {
						this.isShow = true
						let item = resp[i]
						console.log('item', item.name)
						this.imageArr.push({
							src: item.picUrl,
							sid:item.shSid,
							title: item.name
						})
					}

				}).catch(e => {
					console.log('eeeee', e)
				})
			},
			
			imgClick(item){
				console.log('item', item)
				
				uni.navigateTo({
						url: 'WarehouseDetaile?sid='+item.sid
				});
			}


		}
	}
</script>

<style lang="scss">
	.pages {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-bottom: 20px;

		.layout {

			display: flex;
			flex-direction: column;
			background: #fff;
			padding-left: 20px;
			padding-right: 20px;

			.layout-item {
				padding: 10px 12px;
				border-bottom: 1px solid #eee;

				display: flex;
				flex-direction: row;
				align-items: center;

				.text1 {
					flex: 0.8;
					font-size: 16px;
					color: #494949;
				}

				.text2 {

					flex: 1;
					font-size: 15px;
					color: #bcbcbc;
				}
			}


			.list {
				margin-top: 10px;
				column-count: 2;

				.list-item {
					width: 100%;

					.list-item-lay {

						.item-img {
							width: 100%;
							height: 105px;
							border: 1px solid #4D72FF;
						}

						.item-text {
							z-index: 1000;
							position: relative;
							top: -28px;
							padding: 3px 15px 3px 15px;
							color: #fff;
							background: #4D72FF;
							opacity: 0.7;
							font-size: 13px;
							border-top-right-radius: 15px;
						}
					}



				}

			}
		}
	}
</style>