wangluohuoyun-huozhuapp/pages/mine/cargoowner/addEnerprise.vue

<template>
	<view class='content'>
		<view class="wrap">
			<view style='border-bottom:1px solid #eee;padding:10px 0 10px;' class="flex flex-space-between row">
				<view class="left-text">企业</view>
				<view style='font-size:16px;width:50%;' class='flex flex-space-between'  @click="selectshow">
					<view :style="{'color':dataDetails.company ? '#000':'#C6CBD5'}">{{dataDetails.company?dataDetails.company:'选择所属企业'}}</view>
					<view><u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon></view>
				</view>
				
			</view>
			<view style='padding:10px 0 10px;' class="flex flex-space-between items-center width100">
				<view style='width:100px;font-size:14px;'>法定代表人姓名</view>
				<view class="flex">
					<u--input disabledColor='#fff' disabled placeholder="自动获取" inputAlign='left' border="none" v-model="dataDetails.legalPersonName">
					</u--input>
				</view>
			</view>
		</view>
		<view class='content1'>
			<view class="title">上传企业授权书</view>
			<!-- {{show}} -->
<!-- 			<button type="default" @click="()=>{show = true}" style="width: 80%;background-color: #007AFF;color: #fff;margin-top: 60rpx;">选择文件</button>
				<view class="textStyle" v-for="(item,index) in pathArr" :key="index">
					<view>
						文件名：{{item.name}}
					</view>
					<view>
						文件地址：{{item.url}}
					</view>
					<view>
						文件大小：{{item.sizeMB}}
					</view>
				</view>
				<nk-select-file v-model="show" @confirm="getPath"></nk-select-file> -->
			<u-upload class="uview-upload" :fileList="fileList1" @afterRead="afterRead($event)" @delete="deletePic"
				name="1" multiple :maxCount="9"></u-upload>
	<!-- 		<view style='position:relative;'>
				<view v-if='!dataDetails.certificateAddressUrl' @click="uploadImg(1)" class="picture picture7">
					<image class="xj-image" src="@/static/mine/ic_shanchuan@2x.png"></image>
					<view class="text">上传企业授权书</view>
				</view>
				<view v-if='dataDetails.certificateAddressUrl' @click.stop="uploadImg(1)"
				class="preview-card-img picture ">
				<view @click.stop="delCard(1)">
					<image class='del-card' src="@/static/images/common/quxiao@2x.png">
					</image>
				</view>
				<image class="" :src="dataDetails.certificateAddressUrl" mode="aspectFit"></image>
			</view>
			</view> -->
			<view class="flex row noborder">
				<view class="left-text">营业期限截止日期</view>
				<view style='font-size:16px;width:50%;' class='flex flex-space-between'  @click="selectdate">
					<view :style="{'color':dataDetails.authorizationDeadline ? '#000':'#C6CBD5'}">{{dataDetails.authorizationDeadline?dataDetails.authorizationDeadline:'选择期限截止日期'}}</view>
					<view><u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon></view>
				</view>
			</view>
			<u-picker :show="isdate" ref="uPicker" :columns="validityPeriod"
				@confirm="confirmValidityPeriod" @change="changeHandler"  @cancel="isdate=false">
			</u-picker>
			
		</view>
		<u-action-sheet :actions="$helper.imgTypeList" :title="$helper.imgType" :show="isShowimgType"
			@select="imgTypeSelect" @cancel='isShowimgType=false' :closeOnClickOverlay="true" :closeOnClickAction="true" @close="isShowimgType=false">
		</u-action-sheet>
		<view class="content4">
			<view style='margin:0 0 18px;font-size:12px;color:#999;' class='flex items-center'>
				<u--image style='margin-right:5px;' @click='consent'
					:src="checked?'../../../static/mine/duihao@2x.png':'../../../static/mine/wxz.png'"
					width="12px" height="12px"></u--image>
					我已阅读并同意全部细则
			</view>
			<view class='line'></view>
			<view :class="{'active':dataDetails.certificateAddressUrl&&dataDetails.company&&dataDetails.legalPersonName&&dataDetails.authorizationDeadline}" class="next-btn" @click="submit()">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import upload from '@/components/upload.vue';
	import uploadImage from '@/components/ossutil/uploadFile.js';
	export default {
		components: {
		},
		data() {
			return {
				show:false,
				pathArr: [],
				dataDetails:{
					authorizationDeadline:'',
					certificateAddressUrl:'',
					advanceFreightService:''
				},
				companuList:[],
				isshow:false,
				isdate:false,
				checked:false,
				validityPeriod:[],
				isShowimgType:false,
				uploadType:'',
				index:0,
				fileList1: []
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad(){
			if(uni.getStorageSync('cargoOwnerId')){
				this.dataDetails.cargoOwnerId=uni.getStorageSync('cargoOwnerId')
			}
			this.validityPeriod = this.$helper.makeValidityPeriod(0,'长期')
			// this.getList()
		},
		onShow() {
			if(uni.getStorageSync('currectcompany')){
				this.dataDetails.company=uni.getStorageSync('currectcompany').companyName
				this.dataDetails.advanceFreightService=uni.getStorageSync('currectcompany').advanceFreightService
				this.dataDetails.legalPersonName=uni.getStorageSync('currectcompany').legalPersonName
			}
		},
		methods: {
			getPath(event){
				console.log(event);
				this.pathArr = event;
			},
			uploadFilePromise(file,url) {
				uploadImage(file,url, 'appData/',
					result => {
						// 上传成功回调函数
						console.log('图片地址', result)
						this.dataDetails.certificateAddressUrl += result
			
					}
				)
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 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: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i],lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			consent(){
				this.checked=!this.checked
			},
			selectdate(){
				this.isdate=true
			},
			selectshow(){
				this.goDetailPage('/pages/mine/cargoowner/selectcompany')
			},
			confirmValidityPeriod(e) {
				console.log('confirm', e)
				if (e.value[0] == '长期') {
					this.dataDetails.authorizationDeadline = e.value[0]
				} else {
					this.dataDetails.authorizationDeadline = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
				}
			
				this.isdate = false
			},
			goDetailPage(src) {
				uni.setStorage({key: 'companydata',data: JSON.stringify(this.dataDetails)});
				uni.$u.route(src);
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					picker = this.$refs.uPicker
				} = e
			
				// if (columnIndex === 0) {
				// 	
				// 	if (e.index != 0) {
				// 		picker.setColumnValues(1, this.validityPeriod[1].shift())
				// 	}
			
				// } else if (columnIndex === 1) {
				// 	if (e.index != 0) {
				// 		picker.setColumnValues(2, this.validityPeriod[2].shift())
				// 	}
				// }
			},
			// getList(){
			// 	uni.showLoading({
			// 		title: '加载中',
			// 		mask:true
			// 	})
			// 	var _this=this
			// 	this.$request.baseRequest('get', '/companyInfo/selectAllCompany').then(res => {
			// 		uni.hideLoading()
			// 		this.companyList=res
			// 	})
			// 	.catch(res => {
			// 		uni.hideLoading()
			// 		uni.showToast({
			// 			title: res.message,
			// 			icon: 'none',
			// 			duration: 2000
			// 		})
			// 	});
			// },
			submit(){
				uni.showLoading({
					title: '加载中',
					mask:true
				})
				var _this=this
				this.dataDetails.commonId=this.userInfo.id
				this.$request.baseRequest('post', '/cargoOwnerCompInfo/api/addCargoOwnerComp', _this.dataDetails).then(res => {
					uni.hideLoading()
					uni.removeStorage('cargoOwnerId')
					uni.removeStorage('currectcompany')
					uni.$u.toast('提交成功')
					_this.goDetailPage('/pages/mine/cargoowner/cargoowner')
				})
				.catch(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					})
				});
			},
		}
	}
</script>

<style lang='scss' scoped>
	page{
		background: #F5F6FA;
	}
	.content{
		/* background: white; */
		/* padding:20rpx */
	}
	.wrap{
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background: white;
	}
	.preview-card-img {
		/deep/uni-image>div, uni-image>img {
		    transform: scale(1.5) rotate(-90deg);
		}
	}
	.picture {
		margin-top: 20rpx;
		background: #F5F6FA;
		width: 212rpx;
		height: 212rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #6A7282;
	}
	.content1 {
		background:#fff;
		padding:40rpx 20rpx 20rpx;
		margin:20rpx 0rpx 200rpx;
		border-radius: 10rpx;
		.row {
			border-bottom: 1px solid #EEEEEE;
			padding-bottom: 28rpx;
			margin-top: 26rpx;
	
		}
	
		.left-text {
			// background: red;
			width: 320rpx;
			color: #333333;
			display: flex;
			align-items: center;
			font-size:14px;
		}
	
		.picture {
			position: relative;
			width: 100%;
			height: 440rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
	
			.text {
				margin-top: 20rpx;
			}
		}
		.picture7 {
			background: url(../../../static/mine/cy.png);
			background-size: 100% 100%;
		}
	
	
		.xj-image {
			width: 100rpx;
			height: 100rpx;
		}
	
		.title {
			color: #999999;
			margin: 20rpx 0;
		}
	}
	.u-input{
		font-size:16px;
	}
	.content4 {
		position:fixed;
		bottom:0;
		background: white;
		width:100%;
		text-align:center;
		left:0;
		box-sizing: border-box;;
		padding:10px 15px;
		.line{
			position:absolute;
			left:0;
			margin-top:-9px;
			border-top:1px solid #eee;
			width:100%;
		}
		.next-btn {
			background: #F1F3F6;
			width: 85%;
			padding: 20rpx 20rpx;
			text-align: center;
			color: #C5CAD4;
			border-radius: 50rpx;margin:0 auto;
			margin-top:10px;
		}
		.next-btn.active{
			background:#2772FB;
			color:#fff;
		}
	}
</style>