property/property_ui/manage/pages/community/sqmoneyadd.vue

<template>
	<view >
		<uni-forms ref="form"  :model="datainfo">
			<view class="check">
			<view class="cbox">
				<view class="chmain">
					<uni-forms-item label="资讯类型" name="phonenumber">
						<picker range-key='text' :value="syqxidx" :range="sexs"   @change='bindDateChange'>
							<view class="flexc">
								<view class="flex1 txr f13" :class="datainfo.iszc?'co27':'coa'">{{datainfo.iszc?'是':'请选择资讯类型'}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
				</view>
			</view>
			<view class="cbox" style="flex: 1;">
				<view class="chmain">
					<uni-forms-item label-width='0' name="realName">
						<uni-easyinput type="textarea" autoHeight v-model="datainfo.realName" disabled :inputBorder='false' placeholder="车牌号" />
					</uni-forms-item>
					<uni-forms-item label-width='0' name="realName">
						<uni-easyinput type="textarea" autoHeight v-model="datainfo.realName" disabled :inputBorder='false' placeholder="用途" />
					</uni-forms-item>
					<uni-forms-item label-width='0' name="realName">
						<uni-easyinput type="textarea" autoHeight v-model="datainfo.realName" disabled :inputBorder='false' placeholder="状态" />
					</uni-forms-item>
					<view class="imgs">
						<view class="img" @click="getPreview">
							<image :src="car" class="pimg"></image>
							<image :src="del" class="del" @click="getDelFn"></image>
						</view>
						<view class="addbox" @click="getaddImage">
							<image :src="photo"></image>
							<view>添加图片</view>
						</view>
					</view>
				</view>
			</view>
			<view class="rfbtn">确定</view>
			<loading></loading>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import config from '@/config'
	import editorBox from "@/manage/components/editor/editor.vue"
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {uploadIdentify} from '@/utils/common.js'
	export default {
		components: {editorBox},
		data() {
			return {
				rimg: require('@/work/static/people/rimg.png'),
				photo:require("@/work/static/service/photo.png"),
				car:require('@/work/static/car/carico.png'),
				del:require('@/work/static/service/rdel.png'),
				baseUrl: config.baseUrl,
				checkflag:true,
				datainfo: {
					sex:0,
					realName: '',
					idCard: '',
					address: '',
					expirationDate: '',
					phonenumber: '',
					front: '',
					back: '',
				},
				syqxidx:'',
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
			}
		},
		onLoad: function() {

		},
		methods: {
			checkPermi,
			checkRole,
			bindDateChange(e){
				var val=e.detail.value;
				// this.datainfo.applicationBank=this.sdyhlist[val].value;
				// this.applicationBank=this.sdyhlist[val].label;
			},
			getPreview(idx,arr) {
				var newArr=[];
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {},
					fail: function(err) {}
				});
			},
			getDelFn(){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							// that.filelist.splice(idx,1)
						} else if (res.cancel) {
						}
					}
				});
			},
			getaddImage(e){
				let that = this;
				// var rs=['D:\\idcard.png']
				// if(rs&&rs.length>0){
				// 	var obj={
				// 		type:e,
				// 		// url:baseUrl+rs.join(',')
				// 		url:rs.join(',')
				// 	}
				// 	that.getOcrIdCard(obj)
				// }
				// return
				let file =[],count=9
				uni.chooseImage({
					count: 1,
					success:function(res){
						let img= res.tempFilePaths;
						if(img.length + file.length > count){
							uni.showToast({
								title: '最多上传'+count+'张图片',
								icon: 'none',
								duration: 2000
							})
						}else{
							let imglen = res.tempFilePaths.length;
							var fuwufile = [];
							uploadIdentify('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
								var resurl=rs[0];
								if(e=='front'){
									that.datainfo.front=resurl.fileName;
								}else{
									that.datainfo.back=resurl.fileName;
								}
								if(rs&&rs.length>0){
									var obj={
										type:e,
										url:resurl.urlOnline
									}
									that.getOcrIdCard(obj)
								}
							})	
						}
					}
				});
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.check /deep/ .uni-forms-item{min-height: 106rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:10rpx 0;}
.check .cbox /deep/ .uni-forms-item:last-child{border: none;}
.check /deep/ .uni-forms-item__label{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;width: auto !important;}
.check /deep/ .uni-easyinput{flex: 1;text-align: left;font-size: 26rpx;color: #222327;}
.check /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 26rpx;}
.check /deep/ .uni-easyinput__placeholder-class{font-size: 26rpx;color: #AAAAAA;}
.check /deep/ .uni-easyinput__content-input{padding-left: 0 !important;}
.check /deep/ .uni-input-input{font-size: 26rpx;}
.check /deep/ .uni-textarea-textarea{font-size: 26rpx;}
.check /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
.check /deep/ .uni-data-checklist .checklist-group .checklist-box{margin:10rpx 8rpx 10rpx 16rpx;}
.check /deep/ .uni-data-checklist{flex: 0 0 auto;}
.check{min-height: 100vh;padding: 20rpx 18rpx 110rpx;box-sizing: border-box;box-sizing: border-box;display: flex;flex-direction: column;}
.cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;margin-bottom: 24rpx;display: flex;flex-direction: column;flex:0 0 auto;
	.chmain{
		padding: 0 32rpx;
		.rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
			image{width: 100%;height: 100%;}
		}
		.checkimg{width: 80rpx;height: 40rpx;margin-right: 8rpx;}
		.imgs{display: flex;align-items: center;flex-wrap: wrap;margin-top: 60rpx;
			.img{width: 142rpx;height:142rpx;border-radius: 20rpx;margin: 0 28rpx 20rpx 0;position: relative;
			&:nth-of-type(4n){margin-right: 0;}
			}
			.pimg{width: 100%;height: 100%;border-radius: 20rpx;}
			.del{width: 24rpx;height: 24rpx;position: absolute;right: 0;top: 0;}
		}
		.addbox{background: #F0F0F0;border-radius: 20rpx;display: flex;align-items: center;flex-direction: column;width: 142rpx;height:142rpx;justify-content: center;margin-bottom: 20rpx;
			image{width: 48rpx;height: 42rpx;margin-bottom: 12rpx;}
			view{font-weight: 500;font-size: 24rpx;color: #666666;}
		}
	}
	
}
</style>