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

<template>
	<view class="page">

		<view class="banner">
			<!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 -->
			<swiper circular indicator-dots class="swiper" :autoplay="true" :interval="2000">
				<!-- v-for循环遍历数组 -->
				<swiper-item v-for="(item,index) in info.swipers">
					<image :src="item" @click="swiperClick(index)"></image>
				</swiper-item>
			</swiper>

		</view>

		<view class="top">

			<view class="top-name">
				<text class="top-name-text1">{{info.name}}</text>
				<text class="top-name-text2">{{info.custerName}}</text>
			</view>
			<view class="view"></view>

			<image class="top-img" src="https://supervise.yxtsoft.com/img/newApp/phone.png" mode="aspectFit" @click="makeCall"></image>

		</view>

		<view class="top" style="margin-top: 10px;" @click="getLat">
			<image style="width: 20px;height: 40px;" src="https://supervise.yxtsoft.com/img/newApp/location.png"
				mode="aspectFit"></image>
			<view style="display: flex;
				flex-direction: column;margin-left: 10px;">
				<text class="top-name-text3">{{info.address}}</text>
			</view>

			<!-- <view class="view"></view> -->

		</view>

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

			<view class="bottom-title">
				<view class="bottom-title-view"></view>
				<text class="bottom-title-text">基础信息</text>
			</view>

			<view class="bottom-item">

				<view class="bottom-item-lay">
					<text class="bottom-item-text1">仓库简称</text>
					<text class="bottom-item-text2">{{info.simpleName}}</text>
				</view>

				<view class="bottom-item-lay">
					<text class="bottom-item-text1">房源</text>
					<text class="bottom-item-text2">{{info.housingResource}}</text>
				</view>

				<view class="bottom-item-lay" style="border-bottom: none;">
					<text class="bottom-item-text1">高度</text>
					<text class="bottom-item-text2">{{info.storeyHeight}}</text>
				</view>


			</view>

			<!-- <view class="bottom-title">
				<view class="bottom-title-view"></view>
				<text class="bottom-title-text">具体描述</text>
			</view>
			<view style="margin-top: 10px;">
				<text style="display: flex;padding-bottom: 50px;">{{info.describe}}</text>
			</view> -->

		</view>

		<view class="bottom" style="margin-top: 10px;padding-bottom: 50px;">


			<view class="bottom-title">
				<view class="bottom-title-view"></view>
				<text class="bottom-title-text">详情信息</text>
			</view>
			<view class="bottom-item">
				<view class="bottom-item-lay">
					<text class="bottom-item-text1">库房面积</text>
					<text class="bottom-item-text2">{{info.acreage}}㎡</text>
				</view>
				<view class="bottom-item-lay" style="border-bottom: none;">
					<text class="bottom-item-text1">月租金</text>
					<text class="bottom-item-text2">{{info.monthlyPrice}}</text>
				</view>
			</view>

		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				// infoSid: "",
				info: {
					// swipers: [
					// 	'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
					// 	'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
					// 	'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
					// 	'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
					// 	'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
					// 	'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
					// ],
					// name: "石家庄鸿彩字业制作有限公司",
					// region: "河北省/石家庄市/长安区",
					// address: "凌透村凌透西街北端(鑫禄驾校东北100米)",
					// distance: "距您6Km",
					// type: "厂房出租",
					// lease: "12个月",
					// pledge: "押0付12",
					// leaseMethod: "整租",
					// floor: "单层",
					// height: "8m",
					// isNew: "旧厂",
					// structure: "砖混",
					// describe: "厂房，仓库，暖棚，土地，长期代收租厂房仓库，办公楼厂房，仓库，暖棚，土地，长期代收租厂房仓库，办公楼厂房，仓库，暖棚，土地，长期代收租厂房仓库，办公楼"
				}
			}
		},
		onLoad(option) {
			console.log('option', option)
			// this.infoSid = option.sid
			this.getData(option.sid)
		},
		methods: {
			getData(sid) {
				console.log('sid', sid)
				this.$api.storeHouseDetail(sid).then((resp) => {
					// if (resp.success) {
					console.log('1111', resp)
					this.info = resp
					this.info.swipers = []

					if (resp.pics.length == 0) {

						this.info.swipers.push(
							resp.picUrl)
					} else {

						for (var i = 0; i < resp.pics.length; i++) {
							var url = resp.pics[i].fileUrl
							this.info.swipers.push(url)
						}
					}


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


				console.log('lon', this.info.lon)
				console.log('lat', this.info.lat)

				if (this.info.lon == '' || this.info.lon == null || this.info.lat == '' || this.info.lat == null) {
					uni.showToast({
						icon: "none",
						title: '当前仓库位置错误，请核实后在进行导航操作。',
						duration: 5000,
					});
					return
				}

				var longitude = parseFloat(this.info.lon)
				var latitude = parseFloat(this.info.lat)
				var name = this.info.name
				var address = this.info.address

				wx.openLocation({
					latitude: latitude,
					longitude: longitude,
					scale: 15,
					name: name,
					address: address
				})
			},
			makeCall(){
				wx.makePhoneCall({
					//仅为示例，并非真实的电话号码
				  phoneNumber:  this.info.linkerPhone 
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.banner {
			flex-shrink: 0;
			width: 100%;
			height: 200px;

			.swiper {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.top {
			display: flex;
			flex-direction: row;
			align-items: center;
			background: #fff;
			padding: 15px;

			.top-name {
				width: 75%;
				display: flex;
				flex-direction: column;

				.top-name-text1 {

					font-size: 18px;
					color: #000;
					font-weight: 600;
					font-family: sans-serif;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}

				.top-name-text2 {
					margin-top: 5px;
					font-size: 15px;
					color: #919191;
				}

			}

			.top-name-text3 {

				font-size: 13px;
				color: #919191;
			}

			.top-name-text4 {
				margin-top: 5px;
				font-size: 12px;
				color: #919191;
			}

			.view {
				width: 1px;
				margin-top: 15px;
				margin-bottom: 15px;
				min-height: 25px;
				margin-left: 20px;
				background: #1684FC;
			}

			.top-img {
				margin-left: 20px;
				width: 35px;
				height: 35px;
			}
		}

		.bottom {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			padding: 5px 15px;

			.bottom-title {
				margin-top: 20px;
				display: flex;
				flex-direction: row;
				align-items: center;

				.bottom-title-view {
					width: 2px;
					height: 15px;
					background-color: #1684FC;
				}

				.bottom-title-text {
					margin-left: 8px;
					font-size: 15px;
					color: #696969;
				}

			}

			.bottom-item {
				margin-top: 15px;
				display: flex;
				padding-left: 30px;
				padding-right: 30px;
				flex-direction: column;

				.bottom-item-lay {
					margin-top: 10px;
					display: flex;
					flex-direction: row;
					padding: 8px 12px;
					border-bottom: 1px solid #eee;

					.bottom-item-text1 {
						flex: 1;
						font-size: 14px;
						color: #191919;
					}

					.bottom-item-text2 {

						flex: 1;
						font-size: 14px;
						color: #717171;
					}

				}


			}
		}
	}
</style>