businessCard/xiaochengxu/pageA/circle/lookHome.vue

<template>
	<view class="content">
		<u-loading-page loading-mode='spinner' image="/static/imgs/logo.png" iconSize='60' :loading='loading'></u-loading-page>
		<view v-if='!loading'>
			<view v-if='fileList.length>0||companyData.companyName||companyData.companyIntroduction||companyData.scopeOfBusiness||companyData.companyAddress||companyData.phone||companyData.portraiture||companyData.postbox'>
				<view v-if='fileList.length>0' class="swiper-wrap">
					<u-swiper :list="fileList" 
					autoplay
					imgMode='aspectFill'
					height='260'
					circular
					@change="e => current = e.current" @click="click">
						<view slot="indicator" class="indicator">
							<view
								class="indicator__dot"
								v-for="(item, index) in fileList"
								:key="index"
								:class="[index === current && 'indicator__dot--active']">
							</view>
						</view>
					</u-swiper>
				</view>

				<view v-if='companyData.companyName' class="company-title row flex flex-between line" >
					<view class='title' >{{companyData.companyName}}</view>
				</view>
				<view v-if='companyData.companyIntroduction||companyData.scopeOfBusiness||companyData.companyAddress||companyData.phone||companyData.portraiture||companyData.postbox' class="content1" >
					<view v-if='companyData.companyIntroduction' class="intro top-m">
						<view  class="title">基本信息</view>
						<view class='content'>{{companyData.companyIntroduction}}</view>
					</view>
					<view v-if='companyData.scopeOfBusiness' class="scope top-m">
						<view class="title">业务范围</view>
						<view class='content'>{{companyData.scopeOfBusiness}}</view>
					</view>
					<view v-if='companyData.companyAddress||companyData.phone||companyData.portraiture||companyData.postbox' class='compInformation' >
						<view v-if="companyData.companyAddress" class="row flex top-m align-item-center">
							<view class='image-wrap'>
								<image style='width:24rpx;height:31rpx;'  src="../../static/imgs/mySet/home/address.png" mode=""></image>
							</view>
							<view>地址：{{companyData.companyAddress}}</view>
						</view>
						<view v-if="companyData.phone" class="row flex top-m align-item-center">
							<view class='image-wrap'>
								<image style='width:27rpx;height:28rpx;' src="../../static/imgs/mySet/home/phone.png" mode=""></image>
							</view>
							<view>电话：{{companyData.phone}}</view>
						</view>
						<view v-if="companyData.portraiture" class="row flex top-m align-item-center">
							<view class='image-wrap'>
								<image style='width:27rpx;height:28rpx;' src="../../static/imgs/mySet/home/portraiture.png" mode=""></image>
							</view>
							<view>座机：{{companyData.portraiture}}</view>
						</view>
						<view v-if="companyData.postbox" class="row flex top-m align-item-center">
							<view class='image-wrap'>
								<image style='width:29rpx;height:25rpx;' src="../../static/imgs/mySet/home/postbox.png" mode=""></image>
							</view>
							<view>邮箱：{{companyData.postbox}}</view>
						</view>
					</view>
				</view>	
			</view>
			<view style='position:relative;height:100vh;' v-if='fileList.length==0&&!companyData.companyName&&!companyData.companyIntroduction&&!companyData.scopeOfBusiness&&!companyData.companyAddress&&!companyData.phone&&!companyData.portraiture&&!companyData.postbox'>
				<image class='notavailable' src="../../static/imgs/notavailable.png" mode=""></image>
			</view>
		</view>
		
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import uploadImage from '@/components/ossutil/uploadFile.js'; 
	export default {
		data() {
			return {
				companyData:{
					commonId:''
				},
				userInfo:{},
				fileList:[],
				fileList1:[],
				editstatus:false,
				id:'',
				current:0,
				loading:true,
			}
		},
		onLoad(options) {
			this.id=options.id
			uni.showLoading({
					title: '数据加载中'
				})
				this.getList()
		},
		onShow() {
				this.userInfo = uni.getStorageSync("userInfo")
				this.companyData.commonId=uni.getStorageSync("userInfo").id
				console.log(1111111111)
				
			
			// this.getList()
			
		},
		onUnload(){
			this.id=''
		},
		methods: {
			getList(){
				var that=this
				var data={}
				if(this.id){
					data={
						id:this.id,
					}
				}
				this.$request.baseRequest('admin.unimall.personalHomepageInfo', 'get',data, failres => {
					console.log('res+++++', failres.errmsg)
					uni.showToast({
					  icon:"none",
					  title: failres.errmsg,
					  duration: 3000
					});
					uni.hideLoading()
				}).then(res => {
					console.log(res)
						this.companyData=res.data
						if(res.data.addressUrl){
							var arr=res.data.addressUrl.split(',')
							this.fileList1=[]
							for(var i=0;i<arr.length;i++){
								if(arr[i]){
									this.fileList1.push({url:arr[i]})
								}
							}
							this.fileList=arr
						}else{
							this.fileList1=[]
							this.fileList=[]
						}
					setTimeout(()=>{
						that.loading=false
					},1000)
					// if (res.errno == 200) {
					uni.hideLoading()
					
					// }
				})
			},
			change(){
				
			},
			click(index){
				console.log(index)
				uni.previewImage({
						current: index,     // 当前显示图片的索引值
						urls: this.fileList,    // 需要预览的图片列表，photoList要求必须是数组
						loop:true,          // 是否可循环预览
					})
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/.u-border {
		border-color: #E6E6E6!important;
	}
	.content{
		
	}
	 .indicator {
		background:rgba(10, 23, 61, 0.5);
		padding: 9rpx 5rpx;
		border-radius: 20rpx;
	        @include flex(row);
	        justify-content: center;
	
	        &__dot {
	             height: 6px;
	             width: 6px;
	             border-radius: 100px;
	             background-color: rgba(255, 255, 255, 0.5);
	             margin: 0 5px;
	             transition: background-color 0.3s;
	    
	            &--active {
	                 background-color: #ffffff;
	             }
	        }
	}

	.top{
		width: 100vw;
		height: 135rpx;
		background: #112253;
		border-radius: 0px 0px 20rpx 20rpx;
	}
	.content1{
		margin: 0rpx 0 120rpx 0;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding:10rpx 20rpx;
		box-sizing: border-box;
		.row{
			padding-bottom: 24rpx;
		}
		.line{
			border-bottom: 1px solid #E6E6E6;
		}
		.top-m{
			margin-top: 24rpx;
		}
		.qyfc{
			margin: 24rpx 0;
		}
	}
	.content1-edit{
		position: relative;
		top: -230rpx;
		margin: 20rpx 20rpx 120rpx 20rpx;
		border-radius: 20rpx;
		padding:20rpx;
	}
	.footer{
		position: fixed;
		bottom: 80rpx;
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
		z-index: 999;
	}
	.button{
		color: #fff;
		background-color: #112253;
		border-radius: 20rpx;
		padding:10rpx;
		font-size:28rpx;
	}
	.company-title{
		margin:30rpx 20rpx;
		.button{
			padding:10rpx 20rpx;
			width:96rpx;
		}
	}
	.company-title .title{
		color:#112253;
		font-size:36rpx;
		font-weight: bold;
	}
	.title{
		font-size:32rpx;
		font-weight: bold;
		color: #1A1A1A;
	}
	.content{
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}
	.compInformation{
		margin:20rpx 0;
		background:#F7F7F7;
		color:#112253;
		font-size: 28rpx;
		font-weight: 500;
		padding:10rpx 30rpx;
		border-radius:20rpx;
	}
	.image-wrap{
		width:50rpx;
		position:relative;
		top:2rpx;
	}
	.input-title{
		margin-right:10rpx;
	}
	.notavailable{
		width:252rpx;height:348rpx;
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translateX(-50%) translateY(-50%);
	}
</style>