businessCard/xiaochengxu/pages/mySet/myHome.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='!editstatus&&fileList.length>0' class="swiper-wrap">
			<u-swiper :list="fileList" 
			autoplay
			imgMode='aspectFill'
			height='260'
			:circular="true"
		    @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>
		<!-- <u-skeleton
			    rows="3"
			    title
				loading
		></u-skeleton> -->
		<view class="top" v-else>
			
		</view>
		<view class="company-title row flex flex-between line" >
			<view class='title' v-if='!editstatus'>{{companyData.companyName}}</view>
			<view v-if='!editstatus' class='button flex align-item-center' @click='edit'>
				<image src="../../static/imgs/mySet/edit.png" style='width:26rpx;height:26rpx;' mode=""></image>
				<view style='margin-left:10rpx;'>编辑</view>
			</view>
			<view v-else @click='$u.debounce(buttonsubmit, 500)' class='button'>提交</view>
		</view>
		<view class="content1" :class="editstatus?'content1-edit':''">
			<view v-if='editstatus' class="row flex flex-between align-item-center line" >
				<view class='input-title'>公司/机构名称</view>
				<u--input v-model="companyData.companyName"  placeholder="请输入公司名称" border="none" inputAlign='right'></u--input>
			</view>
			<view class="intro top-m">
				<view v-if='editstatus' class="row">公司/机构简介</view>
				<view v-else class="title">基本信息</view>
				<u--textarea v-if='editstatus' v-model="companyData.companyIntroduction" count placeholder="请输入公司/机构简介，不超过1000个字"></u--textarea>
				
				<view class='content' v-else>{{companyData.companyIntroduction}}</view>
			</view>
			<view class="scope top-m">
				<view v-if='editstatus' class="row">业务范围</view>
				<view v-else class="title">业务范围</view>
				<u--textarea v-if='editstatus' v-model="companyData.scopeOfBusiness" count placeholder="输入业务范围，不超过500个字"></u--textarea>
				<view class='content' v-else>{{companyData.scopeOfBusiness}}</view>
			</view>
			<view class='compInformation' v-if='!editstatus'>
				<view 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 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 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 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 v-if='editstatus' class="row flex flex-between align-item-center line top-m">
				<view class='input-title'>公司地址</view>
				<u--input v-model="companyData.companyAddress" placeholder="输入地址" border="none" inputAlign='right'></u--input>
			</view>
				
			<view v-if='editstatus' class="row flex flex-between align-item-center line top-m">
				<view class='input-title'>联系电话</view>
				<u--input v-model="companyData.phone" type='number' placeholder="输入联系电话" maxlength='15' border="none" inputAlign='right'></u--input>
			</view>
				
			<view v-if='editstatus' class="row flex flex-between align-item-center line top-m">
				<view  class='input-title'>传真</view>
				<u--input v-model="companyData.portraiture" placeholder="输入传真号" type='number'  border="none" inputAlign='right'></u--input>
			</view>
				
			<view v-if='editstatus' class="row flex flex-between align-item-center line top-m">
				<view class='input-title'>邮箱</view>
				<u--input v-if='editstatus' v-model="companyData.postbox" placeholder="输入邮箱" border="none" inputAlign='right'></u--input>
			</view>
			
			<view v-if='editstatus'>
				<view class="qyfc">企业风采</view>
				<!-- <image v-for='item in fileList' :src="item.url" mode=""></image> -->
				<u-upload
						@afterRead="afterRead"
						:fileList="fileList1"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="10"
					>
					</u-upload>
			</view>
		</view>	
		</view>
		
	<view class="footer">
		<button  v-if='editstatus' @click='$u.debounce(buttonsubmit, 500)' class='button' type="default">提交</button>
	</view>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

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

					}).then(res => {
						// if (res.errno == 200) {
						uni.hideLoading()
						uni.showToast({
						  icon:"success",
						  title: '编辑成功！',
						  duration: 2000
						});

						this.getList()
						// }
					})
				}else{
					this.$request.baseRequest('admin.unimall.personalHomepageInfo', 'add',{
						personalHomepageInfo:JSON.stringify(this.companyData)
					}, failres => {
						console.log('res+++++', failres.errmsg)
						uni.hideLoading()
						uni.showToast({
						  icon:"none",
						  title: failres.errmsg,
						  duration: 3000
						});
					}).then(res => {
						uni.hideLoading()
						uni.showToast({
						  icon:"success",
						  title: '提交成功！',
						  duration: 2000
						});
						this.getList()
					})
				}
				
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.companyData.addressUrl =this[`fileList${event.name}`].toString()
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
				     this[`fileList${event.name}`].push({
				      ...item,
				      status: 'uploading',
				      message: '上传中'
				     })
				    })
				// console.log(event,111111,fileListLen)
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					this.companyData.addressUrl = this.companyData.addressUrl?this.companyData.addressUrl+','+result:result
					this[`fileList${event.name}`][fileListLen]={}
					let item = this[`fileList${event.name}`][fileListLen]
					console.log(item)
					 this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					  status: 'success',
					  message: '',
					  url: result
					 }))
					 fileListLen++
				}
				console.log(this[`fileList${event.name}`])
			},
			uploadFilePromise(url) {
				console.log(url)
				return new Promise((resolve, reject) => {
					uploadImage(url, 'cardImages/',
						result => {
							console.log(result,22222)
							
							resolve(result)
						}
					)
				})
			},
		}
	}
</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:last-child{
			padding-bottom: 20rpx;
		}
		.line{
			border-bottom: 1px solid #E6E6E6;
		}
		.top-m{
			margin-top: 20rpx;
		}
		.qyfc{
			margin: 24rpx 0;
		}
	}
	.content1-edit{
		position: relative;
		top: -230rpx;
		margin: 20rpx 20rpx 120rpx 20rpx;
		border-radius: 20rpx;
		padding:20rpx;
	}
	.footer{
		position: fixed;
		bottom: 0rpx;
		width: calc(100% - 40rpx);
		padding: 40rpx 20rpx;
		z-index: 999;
		background:#fff;
	}
	.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;
		margin:20rpx 0;
	}
	.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;
	}
</style>