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

<template>
	<view>
		<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 class='content1'>
			<view class="title">上传房产证或租赁合同</view>
			<view style='position:relative;'>
				<view v-if='!dataDetails.propertyAddressUrl' @click="uploadImg(1)" class="picture">
					<image class="xj-image" src="@/static/mine/company/tianjiazhaopian@3x.png"></image>
				</view>
				<view v-if='dataDetails.propertyAddressUrl' @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="uploadimage" :src="dataDetails.propertyAddressUrl" mode="aspectFit"></image>
			</view>
			</view>
		</view>
		<view class='content'>
			<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.siteLeaseDate ? '#000':'#C6CBD5'}">{{dataDetails.siteLeaseDate?dataDetails.siteLeaseDate:'选择日期'}}</view>
					<view><u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon></view>
				</view>
			</view>
			<view class="flex row noborder">
				<view style='width:285px;' class="left-text">申请开通平台垫付运费业务</view>
				<view>
					<u-switch @change="change" v-model="value" inactiveColor='#ABB0BB' size="20" ></u-switch>
				</view>
			</view>
			<u-picker :show="isShowcardValidity" ref="uPicker" :columns="validityPeriod"
				@confirm="confirmValidityPeriod" @change="changeHandler"  @cancel="isShowcardValidity=false" >
			</u-picker>
		</view>
		<view class='footer'>
			<view @click="goDetailPage('/pages/mine/company/addcompanythree')" class='newlyIncreased'>下一步</view>
		</view>
		<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 upload from '@/components/upload.vue';
	import uploadImage from '@/components/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				dataDetails:{},
				value:false,
				isShowcardValidity:false,
				uploadType:'',
				index:'',
				isShowimgType:false,
				validityPeriod:[]
			}
		},
		onLoad(){
			var _this=this
			this.validityPeriod = this.$helper.makeValidityPeriod(0,100)
			uni.getStorage({
				key: 'companydata',
				success: function (res) {
					console.log(res.data);
					_this.dataDetails = JSON.parse(res.data)
					if(_this.dataDetails.advanceFreightService){
						_this.value=true
					}
				}
			});
		},
		methods: {
			navBack() {
				uni.navigateBack();
			},
			change(e){
				if(this.value){
					_this.$set(_this.dataDetails,'advanceFreightService',1)
				}else{
					_this.$set(_this.dataDetails,'advanceFreightService',0)
				}
			},
			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.$set(_this.dataDetails,'propertyAddressUrl',result)
									console.log(_this.dataDetails)
								}
							)
						}
					});
				} 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.propertyAddressUrl=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.siteLeaseDate = e.value[0]
				} else {
					this.dataDetails.siteLeaseDate = 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;
	}
	.preview-card-img {
		/deep/uni-image.uploadimage {
		   width:212rpx;
		   height:212rpx;
		}
	}
	.next{
		color:#2772FB;
		font-size:13px;
	}
	
	.content1,.content {
		background:#fff;
		padding:40rpx 20rpx 40rpx;
		margin:110rpx 20rpx 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: 212rpx;
			height: 212rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background:#F5F6FA;
			.text {
				margin-top: 20rpx;
			}
		}
	
	
		.xj-image {
			width: 46rpx;
			height: 46rpx;
		}
	
		.title {
			color: #999999;
			margin: 20rpx 0;
		}
	}
	.content{
		padding:20rpx 20rpx 20rpx;
		margin:20rpx 20rpx 20rpx;
		background:#fff;
		border-radius: 10rpx;
	}
	.service {
		font-size: 24rpx;
		margin: 20rpx;
		justify-content: center;
	
		/deep/.u-image {
			margin: 0 20rpx;
		}
	}
	
	.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>