wangluohuoyun-huozhuapp/pages/mine/cargoowner/editEnerprise.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'>
					<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="dataDetails.legalPersonName1">
					</u--input>
				</view>
			</view>
		</view>
		<view class='content1'>
			<!-- <view class="title">上传企业授权书</view> -->
			<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" @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 stlye='' class="left-text">授权截止日期</view>
				<view style='' class='flex flex-space-between' @click="selectdate">
					<view style='padding-left:20px;'
						: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" :checkYear="year" :checkMonth="month" :periodOfValidity="true" :futureYear="30"  ref="dateAuthorization"  @dateConfirm="confirmValidityPeriod"></itmister-date-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;align-items:center' class='flex'>
				<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="$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: {},
				companuList: [],
				isshow: false,
				isdate: false,
				checked: false,
				year:'',
				month:'',
				day:'',
				validityPeriod: [],
				isShowimgType: false,
				uploadType: '',
				index: 0,
				fileList1: [],
				urlList: [],
				formWorkShow: false,
				formWorkColumns: [
					["复制下载链接", "预览模板"]
				]
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad(options) {
			this.get_camera_permission()
			if (uni.getStorageSync('cargoOwnerId')) {
				this.dataDetails.cargoOwnerId = uni.getStorageSync('cargoOwnerId')
			}
			// this.getList()

			this.dataDetails = options
			if(this.dataDetails.authorizationDeadline&&this.dataDetails.authorizationDeadline!='长期'){
				const arr=this.dataDetails.authorizationDeadline.split('-')
				this.year=arr[0]
				this.month=arr[1]
				this.day=arr[2]
			}
			if(this.dataDetails.authorizationDeadline=='长期'){
				this.year='长期'
			}
			if (this.dataDetails.legalPersonName.length == 2) {
				this.dataDetails.legalPersonName1 = this.dataDetails.legalPersonName.toString().replace(
					/^([^\x00-\xff])([^\x00-\xff]{0,})([^\x00-\xff])/g, '$1*')
			} else if (this.dataDetails.legalPersonName.length == 3) {
				this.dataDetails.legalPersonName1 = this.dataDetails.legalPersonName.toString().replace(
					/^([^\x00-\xff])([^\x00-\xff]{0,})([^\x00-\xff])/g, '$1*$3')
			} else if (this.dataDetails.legalPersonName.length == 4) {
				this.dataDetails.legalPersonName1 = this.dataDetails.legalPersonName.toString().replace(
					/^([^\x00-\xff])([^\x00-\xff]{0,2})([^\x00-\xff])/g, '$1**$3')
			}

			console.log(this.dataDetails)
			if (options.certificateAddressUrl) {
				this.urlList = options.certificateAddressUrl
				this.fileList1 = []
				this.fileList1.push({
					url: this.urlList
				})
			}


		},
		onShow() {

		},
		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/contractPdf/1069f84fcbbe4c2d9ce048bf98ea7a63.pdf',
						success: function() {
							uni.showToast({
								title: '复制成功',
							});
							that.formWorkShow = false
						},
						fail: function() {
							uni.showToast({
								title: '复制失败',
							});
						}
					});
				} else {
					uni.downloadFile({
						url: 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/contractPdf/1069f84fcbbe4c2d9ce048bf98ea7a63.pdf',
						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('用户点击取消');
							}
						}
					});
				}
			},
			uploadFilePromise(file, url) {
				uploadImage('image', url, 'appData/',
					result => {
						// 上传成功回调函数
						console.log('图片地址', result)
						this.urlList = result
						// this.dataDetails.certificateAddressUrl=this.dataDetails.certificateAddressUrl +',' +result

					}
				)
			},
			// 删除图片
			deletePic(event) {
				this.urlList = ''
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// console.log(this[`fileList${event.name}`])
				// 当设置 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)
					// console.log(result)
					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.$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
			// 		})
			// 	});
			// },
			submit() {
				if (!this.checked) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none',
						duration: 2000
					})
					return
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				var _this = this
				this.dataDetails.commonId = this.userInfo.id
				this.dataDetails.certificateAddressUrl = this.urlList.toString()
				this.$request.baseRequest('post', '/cargoOwnerCompInfo/api/editCargoOwnerComp', _this.dataDetails).then(
						res => {
							uni.hideLoading()
							uni.removeStorage('cargoOwnerId')
							uni.removeStorage('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;

	}

	.content {
		height: 100vh;
		/* 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: 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: #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>