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='' 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="#ccc" size="14"></u-icon>
					</view>
				</view>

			</view>
			<view style='padding:10px 0 10px;' class="flex flex-space-between items-center ">
				<view style=''>法定代表人姓名</view>
				<view class="flex">
					<u--input disabledColor='#fff' disabled placeholder="自动获取" inputAlign='right' border="none"
						v-model="legalPersonName">
					</u--input>
				</view>
			</view>
		</view>
		<view class='content1'>
			<view class="flex flex-space-between">
				<view class="title">上传企业授权书</view>
				<view class="title title_css" @click="formWork">授权书模板</view>
			</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" @beforeRead='beforeRead($event)'
				@afterRead="afterRead($event)" @delete="deletePic" name="1" multiple :maxCount="1"></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 flex-space-between">
				<view class="left-text">授权截止日期</view>
				<view style='' 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="#ccc" size="14"></u-icon>
					</view>
				</view>
			</view>
			<!-- <u-picker :show="isdate" ref="uPicker" :columns="validityPeriod" @confirm="confirmValidityPeriod"
				@change="changeHandler" @cancel="isdate=false">
			</u-picker> -->
			<itmister-date-picker :overdueContent="'授权已过期'" :dateStatus="1" :periodOfValidity="true" :futureYear="30"  ref="dateAuthorization"  @dateConfirm="confirmValidityPeriod"></itmister-date-picker>
		</view>
		<u-toast ref="uToast"></u-toast>
		<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;color:#999;' class='flex items-center align-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>
			<!-- :class="{'active':dataDetails.certificateAddressUrl&&dataDetails.company&&dataDetails.legalPersonName&&dataDetails.authorizationDeadline}" -->
			<view class="next-btn active" @click="$u.throttle(submit, 1000)">
				提交
			</view>
		</view>
		
		<u-picker :show="formWorkShow" @cancel="formWorkShow = false" @close="formWorkShow = false"
			:columns="formWorkColumns" @confirm="formWorkSubmit"></u-picker>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import upload from '@/components/upload.vue';
	import permision from "@/js_sdk/wa-permission/permission.js"
	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,
				legalPersonName: '',
				uploadType: '',
				index: 0,
				fileList1: [],
				urlList: [],
				formWorkShow: false,
				formWorkColumns: [
					["复制下载链接", "预览模板"]
				]

			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad() {
			this.get_camera_permission()
			if (uni.getStorageSync('cargoOwnerId')) {
				this.dataDetails.cargoOwnerId = uni.getStorageSync('cargoOwnerId')
			}
			// this.getList()
		},
		onShow() {
			if (uni.getStorageSync('currectcompany')) {
				this.dataDetails.company = uni.getStorageSync('currectcompany').companyName
				this.dataDetails.compId = uni.getStorageSync('currectcompany').id
				this.dataDetails.advanceFreightService = uni.getStorageSync('currectcompany').advanceFreightService
				var name = '',
					legalPersonNamelength = uni.getStorageSync('currectcompany').legalPersonName.length
				for (let i = 0; i < legalPersonNamelength; i++) {
					name += '*'
				}
				this.legalPersonName = name.substr(0, name.length - 1) + uni.getStorageSync('currectcompany')
					.legalPersonName[legalPersonNamelength - 1]
				this.dataDetails.legalPersonName = uni.getStorageSync('currectcompany').legalPersonName
			} else {

			}
		},
		methods: {
			formWork() {
				this.formWorkShow = true
			},
			formWorkSubmit(e) {
				let that = this
				console.log(e.value[0])
				if (e.value[0] == "复制下载链接") {
					uni.setClipboardData({
						data: 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/%E6%8E%88%E6%9D%83%E4%B9%A6.docx',
						success: function() {
							uni.showToast({
								title: '复制成功',
							});
							that.formWorkShow = false
						},
						fail: function() {
							uni.showToast({
								title: '复制失败',
							});
						}
					});
				} else {
					uni.downloadFile({
						url: 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/%E6%8E%88%E6%9D%83%E4%B9%A6.docx',
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									console.log('打开文档成功');
									that.formWorkShow = false
								}
							});
						}
					});
				}
			},
			async get_camera_permission() {
				var photol = await permision.requestAndroidPermission("android.permission.CAMERA")
				if (photol == false) {
					uni.showModal({
						title: '提示',
						content: '您已经关闭相机权限,去设置',
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppPermissionSetting()
								// plus.runtime.openURL("app-settings:");
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			getPath(event) {
				console.log(event);
				this.pathArr = event;
			},
			uploadFilePromise(file, url) {
				uploadImage('image', url, 'appData/',
					result => {
						// 上传成功回调函数
						this.urlList = result
					}
				)
			},
			// 删除图片
			deletePic(event) {
				this.urlList = ""
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log(event)
				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++
				}
			},
			async beforeRead(event) {
				console.log(1221212, event)
				var photol = await permision.requestAndroidPermission("android.permission.CAMERA")
				if (photol == false) {
					uni.showModal({
						title: '提示',
						content: '您已经关闭相机权限,去设置',
						success: function(res) {
							if (res.confirm) {
								plus.runtime.openURL("app-settings:");
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			consent() {
				this.checked = !this.checked
			},
			selectdate() {
				this.$refs.dateAuthorization.show();
				
			},
			selectshow() {
				this.goDetailPage('/pages/mine/cargoowner/selectcompany')
			},
			confirmValidityPeriod(date) {
				this.dataDetails.authorizationDeadline = date.date
			},
			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
			// 		})
			// 	});
			// },
			validate() {
				// true 为校验不通过
				// if (uni.$u.test.isEmpty(this.dataDetails.payeeAddressUrl)) {
				// 	this.$refs.uToast.show({
				// 		type: 'error',
				// 		message: "请上传银行卡卡号页！",
				// 	})
				// 	return true
				// }
				// if (uni.$u.test.isEmpty(this.dataDetails.certificateAddressUrl)) {
				// 	this.$refs.uToast.show({
				// 		type: 'error',
				// 		message: "企业授权书不能为空！",
				// 	})
				// 	return true
				// }
				if (this.urlList.length == 0) {
					this.$refs.uToast.show({
						type: 'error',
						message: "企业授权书不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.dataDetails.authorizationDeadline)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "营业期限截止日期不能为空！",
					})
					return true
				}
				if (!this.checked) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none',
						duration: 2000
					})
					return true
				}
			},
			submit() {
				if (this.validate()) {
					return
				}
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// })
				var _this = this
				this.dataDetails.commonId = this.userInfo.id
				this.dataDetails.certificateAddressUrl = this.urlList
				this.$request.baseRequest('post', '/cargoOwnerCompInfo/api/addCargoOwnerComp', _this.dataDetails).then(
						res => {
							// uni.hideLoading()
							// uni.removeStorage('cargoOwnerId')
							// uni.removeStorage('currectcompany')
							uni.removeStorageSync('cargoOwnerId')
							uni.removeStorageSync('currectcompany')
							uni.$u.toast('提交成功')
							uni.navigateBack({
								delta: 1
							})
						})
					.catch(res => {
						// uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
		}
	}
</script>

<style lang='scss' scoped>
	page {
		background: #F5F6FA;
	}

	.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: 20rpx;
		margin: 20rpx;
		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;
		}

		.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;
		}

		.title_css {
			color: #2772FB;
		}
	}

	.u-input {}

	.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: #2772FB;
			color: #fff;
			width: 85%;
			padding: 20rpx 20rpx;
			text-align: center;
			border-radius: 50rpx;
			margin: 0 auto;
			margin-top: 10px;
		}


	}
</style>