jdrh_xcx/jyzPage/jyz/jyzdj.vue

<template>
	<view class="container">

			 <view class="forms">
				 	<u--form :rules="rules"
						labelPosition="left"
						:model="yhxx" labelWidth="120"
						ref="uForm">
					<u-form-item
							label="加油站名称"
							prop="jyzmc"
							borderBottom
							ref="item1">
						<u--input
								v-model="yhxx.jyzmc"
								placeholder="请输入加油站名称"
								border="none"
						></u--input>
					</u-form-item>
					
					<u-form-item
							label="统一社会信用代码"
							prop="shtyxydm"
							borderBottom
							ref="item1">
						<u--input
								v-model="yhxx.shtyxydm"
								placeholder="请输入统一社会信用代码"
								border="none"
						></u--input>
					</u-form-item>
					
					<u-form-item
							label="加油站照片"
							prop="jyzzp"
							borderBottom
							placeholder=""
							ref="item1">
						<view class="zpbox" v-if="!yhxx.jyzzp" @click="uploadimg">
							<uni-icons type="plusempty" size="30"></uni-icons>
						</view>
						<view v-else>
							<image mode="widthFix" :src="yhxx.jyzzp" style="width: 120rpx;"></image>
						</view>
					</u-form-item>
					
					<u-form-item
							label="法人姓名"
							prop="frxm"
							borderBottom
							ref="item1">
						<u--input
								v-model="yhxx.frxm"
								placeholder="请输入法人姓名"
								border="none"
						></u--input>
					</u-form-item>
					
					<u-form-item
							label="法人电话"
							prop="frdh"
							borderBottom
							ref="item1">
						<u--input
								v-model="yhxx.frdh"
								placeholder="请输入法人电话"
								border="none"
						></u--input>
					</u-form-item>
					
					<u-form-item
							label="负责人姓名"
							prop="fzrxm"
							borderBottom
							ref="item1">
						<u--input
								v-model="yhxx.fzrxm"
								placeholder="请输入负责人姓名"
								border="none"
						></u--input>
					</u-form-item>
					
					<u-form-item
							label="负责人电话"
							prop="fzrdh"
							borderBottom
							ref="item1">
						<u--input
								v-model="yhxx.fzrdh"
								placeholder="请输入负责人电话"
								border="none"
						></u--input>
					</u-form-item>
					
					<u-form-item
							label="加油站地址"
							prop="jyzxz"
							borderBottom
							ref="item1">
						<u--input
								v-model="yhxx.jyzxz"
								placeholder="请输入加油站地址"
								border="none"
						></u--input>
					</u-form-item>
					
					<u-form-item
							label="管辖地派出所"
							prop="sspcs"
							borderBottom
							ref="item1">
						<uni-data-picker  placeholder="请选择管辖地派出所" popup-title="请选择管辖地派出所" :localdata="dataTreepcs" v-model="yhxx.sspcs"
							@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
						</uni-data-picker>
					</u-form-item>
					
					
					<u-form-item
							label="管辖地社区"
							prop="sssq"
							borderBottom
							ref="item1">
						<uni-data-picker  placeholder="请选择社区" popup-title="请选择社区" :localdata="dataTree" v-model="yhxx.sssq"
							@change="onchange" @nodeclick="onnodeclick2" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
						</uni-data-picker>
					</u-form-item>
				</u--form>
				
				<view @click="dengji" class="djbutton">登记</view>
			 </view>
	</view>
</template>

<script>
	import { jyzdjSave } from "@/api/jfsc.js"
	import { getDeptList,putfiles } from "@/api/my.js"
	import { baseurl } from "../../common/setting"
	export default{
		data(){
			return{
				dataTree:[],
				dataTreepcs:[],
				show: true,
				columns:[],
				columnData: [],
				fileList1: [],
				yhxx:{
					jyzmc:'',
					shtyxydm:'',
					frxm:'',
				},
				rules:{
					'jyzmc': {
						type: 'string',
						required: true,
						message: '请填写加油站名称',
						trigger: ['blur', 'change']
					},
					'shtyxydm': {
						type: 'string',
						required: true,
						message: '请填写社会统一信用代码',
						trigger: ['blur', 'change']
					},
					'frxm': {
						type: 'string',
						required: true,
						message: '请填写法人姓名',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		
		onLoad() {
			uni.showLoading({
				title: '加载中'
			});
			getDeptList().then(res=>{
				res.data.forEach((vs,v)=>{
					vs.text = vs.label
				})
			   this.dataTreepcs = res.data
			   uni.hideLoading()
			}).finally(()=>{
				uni.hideLoading()
			})
		},
		
		methods:{
			dengji(){
				this.$refs.uForm.validate().then(res => {
					uni.showLoading({
						title: '加载中'
					});
					jyzdjSave(this.yhxx).then(res=>{
						uni.showToast({
							success:'登记成功'
						})	
					uni.switchTab({
					   url: "/pages/my/index", // 确保 url 是正确的
					 });	
					this.$refs.uForm.resetFields()
					}).finally(()=>{
						uni.hideLoading()
					})
				}).catch(errors => {
					
				})
			
			},
			back(){
				uni.switchTab({
				   url: "/pages/my/index", // 确保 url 是正确的
				 });
			},
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
			onnodeclick(e) {
				getDeptList(e.value).then(res=>{
					res.data.forEach((vs,v)=>{
						vs.text = vs.label
					})
				   this.dataTree = res.data
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			onnodeclick2(e){
				
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			
			uploadimg(){
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: baseurl+'/blade-resource/oss/endpoint/put-file', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							// 客户端认证参数
							header:{
								Authorization:'Basic c2FiZXI6c2FiZXJfc2VjcmV0'
							},
							formData: {
								'file': tempFilePaths[0]
							},
							success: (res) => {
								let datalink = JSON.parse(res.data)
								if(datalink.code == 200) {
								this.$set(this.yhxx,'jyzzp',datalink.data.link)
								  //this.yhxx.jyzzp = datalink.data.link
								  this.$u.func.showToast({title:'图片上传成功'})
								}
							},
							fail: (err) => {
								console.log(err);
							}
							
						});
					}
				});
				//this.userInfo.jyzzp
			},
			
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-navbar__content{
		border-bottom: none !important;
	}
	.container{
		height: 100vh;
		padding: 24rpx 24rpx 0;
		box-sizing: border-box;
		background: #F8F8F8;
	}
	.zpbox{
		width: 120rpx;
		height: 120rpx;
		border: 1px dotted #ddd;
		text-align: center;
		line-height: 120rpx;
		display: inline-block;
		border-radius: 3px;
	}
	.forms{
		width: calc(100% - 24rpx);
		margin: auto;
		background: #FFF;
		border-radius: 15px;
		padding:24rpx;
		box-sizing: border-box;
	}
	.djbutton{
		height: 88rpx;
		background: linear-gradient( to top, #65CBFF 0%, #0260FE 100%);
		border-radius: 44rpx;
		opacity: 0.5;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
		margin-top: 48rpx;
	}
	/deep/ .input-value-border{
	 border: 0 !important;
}
</style>