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

<template>
	<view class="content">
		<web-view :src="srcHandler()" v-if="isSshowPlayVideo"></web-view>
		<!-- 		<u-navbar leftText="返回" title="企业认证" :safeAreaInsetTop="true">
			<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:10px 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;' @click="uploadImg(1)">
				<view v-if='!dataDetails.businessLicenseAddressUrl' 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>
		<!-- http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->
		<!-- dataDetails.videoAddressUrl -->
		<view class='content3' v-if="!dataDetails.videoAddressUrl"
			@click="goDetailPage('/pages/mine/company/addcompanythree')">
			<view class="left-text">视频验证（打开摄像头并阅读提示文字）</view>
			<view class="video-icon">
				<u-icon size="40" name="camera-fill"></u-icon>
			</view>
		</view>
		<view class='content3' v-if="dataDetails.videoAddressUrl">
			<view class="left-text">视频验证（点击按钮播放视频）</view>
			<view >
				<view class="video-icon">
					<u-icon size="40" name="play-circle-fill" @click="isSshowPlayVideo=true"></u-icon>
				</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 @click="submit()" 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 {
				isSshowPlayVideo: false,
				srcHandler() {
					// 
					return `/hybrid/html/play.html?src=${this.dataDetails.videoAddressUrl}`
				},
				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: '自有',
					videoAddressUrl: null

				}
			}
		},
		onLoad(options) {
			this.validityPeriod = this.$helper.makeValidityPeriod(0, '长期')
			console.log(this)
			this.dataDetails.commonId = this.userInfo.id
			this.dataDetails.phone = this.userInfo.phone
			console.log('```````````````')
			console.log(options)
			this.dataDetails.videoAddressUrl = options.videoSrc
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			loadedmetadata(event) {
				console.log(event)
			},
			loadeddata(event) {
				console.log(event)
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			submit() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				var _this = this
				this.$request.baseRequest('post', '/companyInfo/api/addCompanyInfo', _this.dataDetails).then(res => {
						uni.hideLoading()
						uni.$u.toast('提交成功')
						this.goDetailPage('/pages/mine/company/index')
					})
					.catch(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
			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(type) {
				if(type==1){}else{
					
				}
				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) {
				// 	
				// 	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: 0 0 200rpx 0;
	}

	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: 40rpx 60rpx;
		box-sizing: border-box;
	}

	.newlyIncreased {
		width: 100%;
		height: 80rpx;
		margin: 0 auto;
		text-align: center;
		color: #fff;
		background: #2772FB;
		background-size: 100%;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-checkbox-label--left {
		margin: 0 10px;
	}

	.service {
		font-size: 24rpx;
		margin: 20rpx;
		justify-content: center;

		/deep/.u-image {
			margin: 0 20rpx;
		}
	}

	.video-icon {
		margin-top: 20rpx;
		background: #F5F6FA;
		width: 212rpx;
		height: 211rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #6A7282;
	}
</style>