wangluohuoyun-huozhuapp/pages/mine/company/editcompany.vue

<template>
	<view>
		<u-navbar leftText="返回" title="企业认证" :safeAreaInsetTop="false">
			<view class="u-nav-slot" slot="left">
		        <u-icon @clcik='navback' name="arrow-left" size="19"></u-icon>
		    </view>
			<view class="u-nav-slot" slot="right">
				<view @click="goDetailPage('/pages/mine/company/addcompanytwo')" class='next'>下一步</view>
			</view>
		</u-navbar>
		<view style='margin:50px 0 0 19px;font-size:12px;color:#EF4034;'>注：企业认证仅限该企业法定代表人本人完成。</view>
		<view class='wrap'>
			<view class="flex border-bottom mt20 align-center">
				<view class="left">企业名称</view>
				<view class="flex right">
					<u--input placeholder="输入企业名称" inputAlign='left' border="none" v-model="dataDetails.companyName">
					</u--input>
				</view>
			</view>
			<view  class="flex border-bottom mt20 align-center">
				<view class="left">法定代表人姓名</view>
				<view class="flex right">
					<u--input placeholder="输入法定代表人姓名" inputAlign='left' border="none" v-model="dataDetails.legalPersonName">
					</u--input>
				</view>
			</view>
			<view  class="flex border-bottom mt20 align-center">
				<view class="left">联系电话</view>
				<view class="flex right">
					<u--input disabledColor='#fff' disabled placeholder="输入联系电话" inputAlign='left' border="none" v-model="dataDetails.phone">
					</u--input>
				</view>
			</view>
			<view  class="flex mt20 align-center">
				<view class="left">注册实缴金额</view>
				<view class="flex right align-center">
					<u--input placeholder="输入企业注册实缴金额" inputAlign='left' border="none" v-model="dataDetails.registeredPaidAmount">
					</u--input>
					<view>万元</view>
				</view>
			</view>
		</view>
		<view class='content1'>
			<view class="title">上传营业执照</view>
			<view style='position:relative;'>
				<view v-if='!dataDetails.businessLicenseAddressUrl' @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.businessLicenseAddressUrl' @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.businessLicenseAddressUrl" mode="aspectFit"></image>
			</view>
			</view>
			<view class="flex row">
				<view class="left-text">营业期限截止日期</view>
				<view style='font-size:16px;width:50%;' class='flex flex-space-between'  @click="selectValidityPeriod">
					<view :style="{'color':dataDetails.businessTermDate ? '#000':'#C6CBD5'}">{{dataDetails.businessTermDate?dataDetails.businessTermDate:'选择期限截止日期'}}</view>
					<view><u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon></view>
				</view>
			</view>
			<view class="flex row noborder">
				<view class="left-text">统一社会信用代码</view>
				<u--input placeholder="请输入统一社会信用代码" inputAlign='left' border="none" v-model="dataDetails.unifiedSocialCreditCode">
				</u--input>
			</view>
						
			
			<u-picker :show="isShowcardValidity" ref="uPicker" :columns="validityPeriod"
				@confirm="confirmValidityPeriod" @change="changeHandler"  @cancel="clickcancel">
			</u-picker>
			
		</view>
		<view class='footer'>
			<view @click="goDetailPage('/pages/mine/company/addcompanytwo')" class='newlyIncreased'>下一步</view>
		</view>
		
		<u-action-sheet  :actions="$helper.imgTypeList" :title="$helper.imgType" :show="isShowimgType"
			@select="imgTypeSelect" :closeOnClickOverlay="false" :closeOnClickAction="true"  @close="isShowimgType=false">
		</u-action-sheet>
	</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 {
				isShowcardValidity:false,
				uploadType:'',
				index:'',
				isShowimgType:false,
				validityPeriod:[],
				dataDetails:{
					phone:'',
					businessLicenseAddressUrl:'',
					propertyAddressUrl:'',
					advanceFreightService:1
				}
			}
		},
		onLoad(options){
			this.dataDetails.id=options.id
			this.validityPeriod = this.$helper.makeValidityPeriod(0,30)
			this.dataDetails.commonId=this.userInfo.id
			this.dataDetails.phone=this.userInfo.phone
			this.getList()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			delCard() {
				this.dataDetails.businessLicenseAddressUrl = ''
				this.$forceUpdate()
			},
			navBack() {
				uni.navigateBack();
			},
			getList(){
				uni.showLoading({
					title: '加载中',
					mask:true
				})
				var _this=this
				this.$request.baseRequest('get', '/companyInfo/getCompanyInfo', {id:this.dataDetails.id}).then(res => {
					uni.hideLoading()
					_this.dataDetails=res.data
				})
				.catch(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					})
				});
			},
			clickcancel(){
				this.isShowcardValidity=false
			},
			imgTypeSelect(val) {
				var _this=this
				if (val.name == '相册') {
					uni.chooseImage({
						count: 1,
						sourceType: this.$helper.chooseImage.sourceType,
						success: function(res) {
							console.log(JSON.stringify(res.tempFilePaths));
							uploadImage(res.tempFilePaths[0], 'appData/',
								result => {
									// 上传成功回调函数
									console.log('图片地址', result)
									_this.dataDetails.businessLicenseAddressUrl=result
									console.log(_this.dataDetails.businessLicenseAddressUrl)
								}
							)
						}
					});
				} else {
					uni.chooseImage({
						count: 1,
						sourceType: ['camera'],
						success: function(res) {
							console.log(JSON.stringify(res.tempFilePaths));
							uploadImage(res.tempFilePaths[0], 'appData/',
								result => {
									// 上传成功回调函数
									console.log('图片地址', result)
									_this.dataDetails.businessLicenseAddressUrl=result
								}
							)
						}
					});
				}
			},
			uploadImg(type, index) {
				this.uploadType = type
				this.isShowimgType = true
				this.index = index
			},
			goDetailPage(src) {
				uni.setStorage({key: 'companydata',data: JSON.stringify(this.dataDetails)});
				uni.$u.route(src);
			},
			selectValidityPeriod() {
				this.isShowcardValidity = true
			},
			confirmValidityPeriod(e) {
				console.log('confirm', e)
				if (e.value[0] == '长期') {
					this.dataDetails.businessTermDate = e.value[0]
				} else {
					this.dataDetails.businessTermDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
				}
			
				this.isShowcardValidity = false
			},
			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())
				// 	}
				// }
			},
		}
	}
</script>

<style  lang="scss" scoped>
	page{
		background:#F5F6FA;
	}
	.next{
		color:#2772FB;
		font-size:13px;
	}
	.wrap{
		background:#fff;
		padding:20rpx 30rpx;
		border-radius:5px;
		margin:20rpx;
		.left{
			width: 240rpx;
			font-size: 28rpx;
		}
		.right{
			font-size: 28rpx;
			width: calc(100% - 240rpx);
		}
	}
	
	.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 20rpx 200rpx;
		border-radius: 10rpx;
		.row {
			border-bottom: 1px solid #EEEEEE;
			padding-bottom: 28rpx;
			margin-top: 26rpx;
	
		}
	
		.left-text {
			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;
			overflow: hidden;
			.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;
		}
	}
	.del-card {
		position: absolute;
		top: -10rpx;
		right: -6rpx;
		width: 80rpx;
		height: 80rpx;
		z-index: 9;
	}
	.footer{
		position:fixed;
		background:#fff;
		width:100%;
		bottom:0;
		left:0;
		padding:15px 15px 30px;
		box-sizing: border-box;
	}
	.newlyIncreased{
		width:100%;
		margin:0 auto;
		text-align:center;
		height:46px;
		line-height: 46px;
		color:#fff;
		background:url(../../../static/mine/huozhurenzheng/Mask@3x.png) no-repeat;
		background-size:100%;
	}
</style>