property/user_ui/news/pages/complaint/add.vue

<template>
	<view >
		<uni-forms ref="form" :model="datainfo">
			<view class="address">
				<view class="adrbox flex1 flexdc">
					<view class="flex1">
						<view class="chtop flexc">
							<view class="line"></view>
							<view>基本信息</view>
						</view>
						<view class="plr15">
							</uni-forms-item>
							<uni-forms-item label="标题" required  name="title">
								<view class="flexc">
									<uni-easyinput v-model="datainfo.title" :inputBorder='false' placeholder="请输入标题信息" />
									<view class="rimg"></view>
								</view>
							</uni-forms-item>
							<uni-easyinput type="textarea" autoHeight v-model="datainfo.content" :inputBorder='false' placeholder="请详细描述您的投诉建议内容（最多可输入200字哦）" />
							<view class="voice mb28">
								<view class="flexc">
									<image :src="voice"></image>
									语音输入
								</view>
							</view>
						</view>
						<!-- 图片 -->
						<view class="imgs">
						<!-- 	<view class="img" @click="getPreview">
								<image :src="photo" class="pico"></image>
								<image :src="del" class="del" @click="getDelFn"></image>
							</view> -->
							<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="plr15 flex0 mt30">
						<view class="rhbtn " @click="getSubmit">提交信息</view>
					</view>
				</view>
			</view>
		</uni-forms>
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config.js'
	import { addressPermi, addressRole } from "@/utils/permission"; // 权限判断函数
	import {uploadIdentify,uploadmore} from '@/utils/common.js'
	import {suggestionAdd,suggestionlPut} from "@/api/work/news.js"
	
	export default{
		components:{},
		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:{
					// "suggestionId":"投诉建议ID",
					"title":"",//投诉建议标题
					"content":"",//投诉建议内容
					"images":"",//投诉照片
					// "status":"投诉建议状态：pending（待回复）、replied（已回复）",
					"replyContent":"",//投诉建议的回复内容
					// "type":"投诉建议类型",
					// "isPublic":"投诉建议是否公开：Y（公开）、N（不公开）",
					// "isDel":"是否删除：Y（删除）、N（不删除）"
				},
				phofile:[],
				baseUrl:config.baseUrl,
			}
		},
		onLoad: function() {
		
		},
		methods:{
			addressPermi, addressRole,
			getAddFn(){
				// this.$tab.navigateTo("/mine/pages/house/addaddress")
			},
			getTabFn(val){
				this.tabval=val
			},
			getDataFn(){
				return
				var params={
					pageSize:this.pageSize,
					pageNum: this.pageNum,
				}
				params.noticeType=this.tabidx
				getNoticeList(params).then(res=>{
					if(res.code==200){
						
					}else{
						this.$toast(res.msg)
					}
				})
				
			},
			getSubmit(){
				var that=this;
				var params=JSON.parse(JSON.stringify(this.datainfo))
				var phofile=JSON.parse(JSON.stringify(this.phofile))
				if(phofile&&phofile.length){
					params.images=this.phofile.join(',');
				}
				if(!params.title){
					this.$toast("请输入标题")
					return
				}
				suggestionAdd(params).then(res=>{
					if(res.code==200){
						this.$toast("新增成功")
						setTimeout(function(){
							uni.$emit("refSuggestion")
							uni.navigateBack({
								delta:1
							})
						},1500)
					}
				})
			},
			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;
				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);
							})	
						}
					}
				});
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.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 30rpx;display: flex;flex-direction: column;}
.adrbox{background: #FFFFFF;border-radius: 20rpx;padding-bottom: 100rpx;
	.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: 142rpx;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: 142rpx;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>