property/user_ui/work/pages/service/warrantyadd.vue

<template>
	<view class="address">
		<uni-forms ref="form" class="flex1" :model="datainfo">
			<view class="adrbox">
				<view class="chtop flexc">
					<view class="line"></view>
					<view>报修信息</view>
				</view>
				<view class="plr15">
					<uni-forms-item label="项目" required name="maintenanceCategory">
						<picker range-key='dictLabel' :disabled="isdisabled" :value="bxlbidx" :range="bxlbList"   @change='bindDateChange'>
							<view class="flexc">
								<view class="flex1 txr f13 co27" v-if="datainfo.maintenanceCategory&&!bxlb">{{statusFormats(datainfo.maintenanceCategory,bxlbList,'bxlb')}}</view>
								<view class="flex1 txr f13" v-else :class="bxlb?'co27':'coa'">{{bxlb||"请选择项目"}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="标题" required  name="repairTitle">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.repairTitle" :inputBorder='false' placeholder="请输入报修标题" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="报修门户" name="portalId">
						<w-select
						      style="margin-left: 20rpx;" 
						     v-model="chooseValue"
						      :list='fwlist'
						      valueName='label' 
						      keyName="value"
							  :chosevalue="datainfo.houseAddress"
							  :filterable='filterable'
						      @change='getchange'
						    >
						    </w-select>
					</uni-forms-item>
					<uni-easyinput type="textarea" maxlength="200" :disabled="isdisabled" autoHeight v-model="datainfo.repairDetails" :inputBorder='false' placeholder="请详细描述您要报修的内容（最多可输入200字哦" />
					<view class="voice mb28">
						<view class="flexc" @click="getVoiceFn">
							<image :src="voice"></image>
							语音输入
						</view>
					</view>
				</view>
				<!-- 图片 -->
				<view class="imgs">
					<block v-if="phofile&&phofile.length">
						<view class="img" v-for="(ite,idx) in phofile" :key="idx" @click="getPreview(idx,phofile)">
							<image :src="baseUrl+ite" class="pico"></image>
							<image :src="del" class="del" @click.stop="getDelFn(idx)"></image>
						</view>
					</block>
					<view class="addbox" @click="getaddImage">
						<image :src="photo" class="pico"></image>
						<view>添加图片</view>
					</view>
				</view>
			</view>
			<view class="adrbox">
				<view class="plr15">
					<uni-forms-item label="联系方式" :disabled="isdisabled"  name="phoneNumber">
						<view class="flexc">
							<uni-easyinput v-model="datainfo.phoneNumber" :inputBorder='false' placeholder="请输入联系方式" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
				</view>
			</view>
			
		</uni-forms>
		
		<view class="rfbtn mt30" @click="getEditFn" v-if="isdisabled">修改</view>
		<view class="rfbtn mt30" @click="getSubmit" v-else>提交信息</view>
	<loading></loading>	
	<voice-input  :voiceflag="voiceflag" @getVoice="getVoice" @getClose="getvoiceClose"></voice-input>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {uploadmore,selectValueKey} from '@/utils/common.js'
	import {houseInfolistNoPage} from "@/api/work/work.js"
	import {repairAdd,repairPut,repairDet} from "@/api/work/service.js"
	import {getDictionaryFn} from "@/api/system/user.js"
	import wSelect from "@/work/components/w-select/w-select.vue"
	import voiceInput from "@/news/components/popup/voice.vue"
	export default{
		components:{wSelect,voiceInput},
		data(){
			return{
				rimg:require('@/static/images/rimg.png'),
				check: require('@/mine/static/check.png'),
				ncheck: require('@/mine/static/ncheck.png'),
				voice: require('@/work/static/voice.png'),
				photo:require("@/work/static/service/photo.png"),
				del:require('@/work/static/service/rdel.png'),
				datainfo:{
					// "repairId":"",//报修ID
					 "portalId":"",//门户id
					 "houseAddress":"",//详细门牌号
					 "repairTime":"",//报修时间
					 "phoneNumber":"",//报修用户手机号码
					 "repairTitle":"",//报修标题
					 "maintenanceCategory":"",//报修类别
					 "repairDetails":"",//报修详情
					 "repairImages":"",//报修详情图片
				},
				checkflag:true,
				baseUrl:config.baseUrl,
				tabval:'0',
				phofile:[],
				bxlbList:[],
				bxlbidx:0,
				bxlb:"",
				id:'',
				ptype:"add",
				isdisabled:false,
				fwlist:[],
				chooseValue:'',
				filterable:true,
				userId:this.$store.state.user.userId,
				voiceflag:false,
			}
		},
		onLoad: function(e) {
			this.init();
			if(e.id){
				this.id=e.id;
				this.ptype='edit';
				// this.isdisabled=true;
				this.getDetailFn()
			}
		},
		methods:{
			checkPermi,checkRole,
			bindDateChange(e){
				var val=e.detail.value;
				this.datainfo.maintenanceCategory=this.bxlbList[val].dictValue;
				this.bxlb=this.bxlbList[val].dictLabel;
			},
			getVoiceFn(){
				this.voiceflag=true;
			},
			getvoiceClose(){
				this.voiceflag=false;
			},
			getVoice(data){
				this.datainfo.repairDetails=data;
			},
			getEditFn(){
				this.isdisabled=false;
			},
			statusFormats(data, list,type) {
				var aite=selectValueKey(list, data);
				if(type=='bxlb'){
					this.bxlbidx=aite.key
				}
				return aite.actions;
			},
			getchange(e){
				this.datainfo.portalId=e.value;
				this.datainfo.houseAddress=e.label;
				// this.datainfo.detailAddress=e.location;
			},
			init(){
				//报修类别
				getDictionaryFn('baoxiutype').then(res=>{
					if(res.code==200){
						this.bxlbList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
				// 自己的房屋
				var params={
					userId:this.userId,
					pageSize: 100,
					pageNum: 1,
				}
				houseInfolistNoPage(params).then(res=>{
					if(res.code==200){
						this.fwlist= res.rows.map(v => {
							return {
								label: v.detailedAddress,
								value: v.houseId,
								location: v.location
							}
						})
					}
				})
			},
			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(idx){
				var that=this;
				if(this.isdisabled){
					return
				}
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.phofile.splice(idx,1)
						} else if (res.cancel) {
						}
					}
				});
			},
			getaddImage(e){
				let that = this;
				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 = [];
							uploadmore('/common/upload',img,0,0,0,imglen,fuwufile,function(rs){
								that.phofile = that.phofile.concat(rs);
							})	
						}
					}
				});
			},
			getDetailFn(){
				var that=this;
				repairDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						this.repairStatus=res.data.repairStatus;
						if(res.data.repairImages){
							this.phofile=res.data.repairImages.split(',')
						}
						if(res.data.visitPhoto){
							this.visitPhoto=res.data.visitPhoto.split(',')
						}
						if(res.data.completionPhoto){
							this.completionPhoto=res.data.completionPhoto.split(',')
						}
					}
				})
			},
			time() {
				var date = new Date();
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				var d = date.getDate();
				var h = date.getHours();
				var min = date.getMinutes();
				var s = date.getSeconds();
				var yearStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
				var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
					'0' + s) : s);
				var kaTime = yearStr + ' ' + timeStr;
				return kaTime
			},
			getSubmit(){
				var that=this;
				this.$refs.form.validate().then(res => {
					var params=JSON.parse(JSON.stringify(this.datainfo))
					var phofile=JSON.parse(JSON.stringify(this.phofile))
					if(phofile&&phofile.length){
						params.repairImages=this.phofile.join(',');
					}
					if(!params.maintenanceCategory){
						this.$toast('请选择项目')
						return
					}
					if(!params.repairTitle){
						this.$toast('请输入标题')
						return
					}
					if(!params.houseAddress){
						this.$toast('请选择报修门户')
						return
					}
					if(!params.phoneNumber){
						this.$toast('请输入联系方式')
						return
					}
					if(this.ptype=='add'){
						params.userId=this.userId;
						params.repairTime=this.time();
						repairAdd(params).then(res=>{
							if(res.code==200){
								this.$toast("新增成功")
								setTimeout(function(){
									uni.$emit("repairList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}else{
						repairPut(params).then(res=>{
							if(res.code==200){
								this.$toast("修改成功")
								setTimeout(function(){
									uni.$emit("repairList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}	
				})
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.address /deep/ .select-wrap{border: none;width: 100%;}
.address /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;}
.address /deep/ .uni-forms-item:last-child{border-bottom: none;}
.address /deep/ .uni-forms-item__label{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;width: auto !important;padding-left: 12rpx;}
.address /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 26rpx;color: #222327;}
.address /deep/ .uni-easyinput__content-textarea{min-height: 140rpx;font-size: 26rpx;
border-radius: 10rpx;padding: 20rpx 14rpx;text-align: left;}
.address /deep/ .uni-easyinput__placeholder-class{font-size: 26rpx;color: #AAAAAA;}
.address /deep/ .uni-input-input{font-size: 26rpx;}
.address /deep/ .uni-textarea-textarea{font-size: 26rpx;}
.address /deep/ .is-required{font-size: 26rpx;color: #F40027;margin-right: 4rpx;}
.address /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
.address{min-height: 100vh;padding: 20rpx 18rpx 100rpx;display: flex;flex-direction: column;}
.adrbox{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;
	.rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
		image{width: 100%;height: 100%;}
	}
	&.mjbox{
		padding: 36rpx  24rpx 18rpx;
		.tit{font-weight: bold;font-size: 26rpx;color: #272727;padding-left: 18rpx;}
		.adrlist{
			view{font-weight: bold;font-size: 26rpx;color: #666666;min-width: 198rpx;padding: 0 10rpx;box-sizing: border-box;margin: 0 12rpx 24rpx;height: 64rpx;display: flex;align-items: center;justify-content: center;border-radius: 10rpx;border: 2rpx solid #C1C1C1;
			&.act{background: #DFEAFF;border: 2rpx solid #0256FD;color: #0256FD;}
			}
		}
	}
	.chtop{margin-bottom: 8rpx;padding-top: 32rpx;	
		view{font-weight: bold;font-size: 28rpx;color: #272727;}
		.line{width: 14rpx;height: 48rpx;background: #0256FD;border-radius:0 12rpx 12rpx 0;margin-right: 18rpx;}
	}
	.voice{font-weight: 500;display: flex;justify-content:flex-end;align-items: center;margin-top: 40rpx;font-size: 24rpx;color: #45CB99;
			image{width: 24rpx;height: 24rpx;margin-right: 8rpx;}
	}
	.imgs{display: flex;align-items: center;flex-wrap: wrap;padding: 0 24rpx;
		.img{width: 198rpx;height:142rpx;border-radius: 20rpx;margin: 0 12rpx 20rpx 12rpx;position: relative;
		// &:nth-of-type(2n){margin-right: 0;}
		}
		.pico{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: 198rpx;height:142rpx;justify-content: center;margin:0 12rpx 20rpx 12rpx;
			image{width: 48rpx;height: 42rpx;margin-bottom: 12rpx;}
			view{font-weight: 500;font-size: 24rpx;color: #666666;}
		}
	}
	.checkimg{width: 80rpx;height: 40rpx;margin-right: 8rpx;}
}

</style>