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

<template>
	<view class="content">
		<u-navbar leftText="返回" title="企业认证" :safeAreaInsetTop="false">
			<view class="u-nav-slot" slot="left">
				<u-icon @click='navback' name="arrow-left" size="19"></u-icon>
			</view>
			<view class="u-nav-slot" slot="right">
				<view @click="goDetailPage('/pages/mine/company/addcompanythree')" 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(0)">
					<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>
			<view class="flex row noborder">
				<view class="left-text">企业用地是否自有</view>
				<u-radio-group placement="row" class="select-type" v-model="dataDetails.landOwnership">
					<u-radio :customStyle="radioCustomStyle" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.name" @change="radioChange($event,item)" labelSize='12px'
						:iconSize='4'>
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class='content2'>
			<view class="title">{{dataDetails.landOwnership=='自有'?'上传房产证':'上传租赁合同（扫描件或图片）'}}</view>
			<view style='position:relative;'>
				<view v-if='!dataDetails.propertyAddressUrl' @click="uploadImg(2)" class="picture">
					<image class="xj-image" src="@/static/mine/company/tianjiazhaopian@3x.png"></image>
				</view>
				<view v-if='dataDetails.propertyAddressUrl' @click.stop="uploadImg(2)" class="preview-card-img picture">
					<view @click.stop="delCard(2)">
						<image class='del-card' src="@/static/images/common/quxiao@2x.png">
						</image>
					</view>
					<image class="uploadimage" :src="dataDetails.propertyAddressUrl" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class='content3' v-if="dataDetails.landOwnership=='租赁'">
			<view class="flex row flex-space-between">
				<view class="left-text">场地租赁截止日期</view>
				<view class='flex flex-space-between' @click="selectValidityPeriod(1)">
					<view :style="{'color':dataDetails.siteLeaseDate ? '#000':'#C6CBD5'}">
						{{dataDetails.siteLeaseDate?dataDetails.siteLeaseDate:'选择日期'}}
					</view>
					<view>
						<u-icon name="arrow-right" color="#7E7E7E" size="12"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="content4">
			<view class="flex row noborder mt20 flex-space-between">
				<view class="left-text">申请开通平台垫付运费业务</view>
				<view>
					<u-switch @change="change" v-model="value" inactiveColor='#ABB0BB' size="20"></u-switch>
				</view>
			</view>
			<view class="flex service align-center">
				<u--image @click='consent'
					:src="consentStatus==true?'../../static/images/mine/duihao@2x.png':'../../static/images/mine/wxz.png'"
					width="12px" height="12px"></u--image>
				我已阅读并同意
				<navigator
					url="/pages/sale/webview?can_share=false&url=https://liangxin.zthymaoyi.com/userAgreement.html"
					class="path" hover-class="navigator-hover">《服务协议》</navigator>和<navigator
					url="/pages/sale/webview?can_share=false&url=https://liangxin.zthymaoyi.com/screctAgreement.html"
					class="path" hover-class="navigator-hover">《隐私政策》</navigator>
			</view>
		</view>
		
		<view class='footer'>
			<view @click="goDetailPage('/pages/mine/company/addcompanythree')" class='newlyIncreased'>下一步</view>
		</view>
		<u-picker :show="isShowcardValidity" ref="uPicker" :columns="validityPeriod" @confirm="confirmValidityPeriod"
			@change="changeHandler" @cancel="isShowcardValidity=false">
		</u-picker>
		<u-action-sheet :actions="$helper.imgTypeList" :title="$helper.imgType" :show="isShowimgType"
			@select="imgTypeSelect" :closeOnClickOverlay="true" :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 {
				consentStatus: false,
				ValidityPeriodType: '',
				value: true,
				radioCustomStyle: {
					margin: '0 0 0 20rpx'
				},
				radiolist1: [{
						name: '自有',
						disabled: false
					},
					{
						name: '租赁',
						disabled: false
					},

				],
				isShowcardValidity: false,
				uploadType: '',
				index: '',
				isShowimgType: false,
				validityPeriod: [],
				checked: false,
				checked1: false,
				dataDetails: {
					phone: '',
					businessLicenseAddressUrl: '',
					propertyAddressUrl: '',
					advanceFreightService: 1,
					landOwnership: '自有'

				}
			}
		},
		onLoad() {
			this.validityPeriod = this.$helper.makeValidityPeriod(0, '长期')
			console.log(this)
			this.dataDetails.commonId = this.userInfo.id
			this.dataDetails.phone = this.userInfo.phone
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			consent() {
				this.consentStatus = !this.consentStatus
			},
			change(e) {
				if (this.value) {
					this.$set(this.dataDetails, 'advanceFreightService', 1)
				} else {
					this.$set(this.dataDetails, 'advanceFreightService', 0)
				}
			},
			radioChange(n) {
				console.log('radioChange', n);
				this.dataDetails.landOwnership = n
				console.log('this.dataDetails.landOwnership', this.dataDetails.landOwnership);
			},
			delCard() {
				this.dataDetails.businessLicenseAddressUrl = ''
				this.$forceUpdate()
			},
			navBack() {
				uni.navigateBack();
			},
			checkedchange() {
				this.checked = !this.checked
				if (this.checked) {
					this.dataDetails.landOwnership = 0
					this.checked1 = false
				} else {

				}
			},
			checkedchange1() {
				this.checked1 = !this.checked1
				if (this.checked1) {
					this.dataDetails.landOwnership = 1
					this.checked = false
				} else {

				}
			},
			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)

									switch (_this.uploadType) {
										// 身份正面
										case 1:
											_this.dataDetails.businessLicenseAddressUrl = result
											console.log(_this.dataDetails.businessLicenseAddressUrl)
											break
											// 身份反面
										case 2:
											_this.dataDetails.propertyAddressUrl = result
											console.log(_this.dataDetails.propertyAddressUrl)
											break
										case 3:
											break;
									}
								}
							)
						}
					});
				} 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) {
				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(type) {
				this.ValidityPeriodType = type
				this.isShowcardValidity = true
			},
			confirmValidityPeriod(e) {
				switch (this.ValidityPeriodType) {
					case 0:
						if (e.value[0] == '长期') {
							this.dataDetails.businessTermDate = e.value[0]
						} else {
							this.dataDetails.businessTermDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
						}
						break
					case 1:
						if (e.value[0] == '长期') {
							this.dataDetails.siteLeaseDate = e.value[0]
						} else {
							this.dataDetails.siteLeaseDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
						}
						break
				}
				console.log('confirm', e)


				this.isShowcardValidity = false
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					picker = this.$refs.uPicker
				} = e

				// if (columnIndex === 0) {
				// 	debugger
				// 	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>
	.content {
		padding-bottom: 200rpx;
	}

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

	.content2,
	.content3,.content4 {
		background: #fff;
		padding: 20rpx;
		margin: 20rpx;
		border-radius: 10rpx;
	}

	.u-input {
		font-size: 16px;
	}

	.content4 {

	}

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

	.u-checkbox-label--left {
		margin: 0 10px;
	}
	.service {
		font-size: 24rpx;
		margin: 20rpx;
		justify-content: center;
	
		/deep/.u-image {
			margin: 0 20rpx;
		}
	}
</style>