投诉建议

src/projects/business/views/Master/Property/Complaint/Form.vue

@@ -5,60 +5,36 @@
 
 		<div class="mui-content margin60">
 			<div class="vongi-yqsb flew-items">
-				<i class="iconfont icon-shouye2 color4fc5f7"></i>赵刚  1-1-2201
+				<i class="iconfont icon-shouye2 color4fc5f7"></i> {{person_popedom.personName}} {{person_popedom.structureName}}
 			</div>
 			<div class="vongi-meform-pho">
 				<h5>投诉类型</h5>
 				<ul class="mui-table-view mui-table-view-radio flew-sp">
-					<li class="mui-table-view-cell mui-selected">
-						<a >
-							管理服务
-						</a>
-					</li>
-					<li class="mui-table-view-cell">
-						<a >
-							工程投诉
-						</a>
-					</li>
-					<li class="mui-table-view-cell">
-						<a >
-							收费投诉
-						</a>
-					</li>
-					<li class="mui-table-view-cell">
-						<a >
-							其他投诉
-						</a>
+					<li v-for="(item,index) in categoryList" class="mui-table-view-cell">
+						<a @click="subForm.category=item.value" v-text="item.name"></a>
 					</li>
 				</ul>
 			</div>
 			<div class="vongi-meform-pho">
 				<h5>投诉内容</h5>
 				<div class="mui-input-row">
-					<textarea id="textarea" rows="5" placeholder="请描述您投诉的内容"></textarea>
+					<textarea v-model="subForm.content" rows="5" placeholder="请描述您遇到的问题"></textarea>
 				</div>
 			</div>
 			<div class="vongi-wordcard vongi-meform-pho">
 				<h5>上传图片<span class="color999">（选填,提供问题截图）</span></h5>
 				<div class="fyy-upphoto">
-					<div class="mui-col-xs-3 fyy-upphoto-close">
-						<img src="~$project/assets/img/zhaop.jpg" />
-						<a class="mui-icon mui-icon-closeempty" href=""></a>
+					<div v-for="(item,index) in picList" class="mui-col-xs-3 fyy-upphoto-close">
+						<img :src="item" />
+						<a class="mui-icon mui-icon-closeempty" @click="delPic(item)"></a>
 					</div>
-					<div class="mui-col-xs-3">
+					<div class="mui-col-xs-3" @click="chooseImage">
 						<a><span class="mui-icon mui-icon-camera"></span></a>
 					</div>
 				</div>
 			</div>
 		</div>
-		<!-- <div class="mui-content">
-			<div class="mui-content-padded">
-				<h5>请输入您的投诉内容或者建议</h5>
-				<div class="mui-input-row">
-					<textarea v-model="subForm.content" rows="5" placeholder="请输入"></textarea>
-				</div>
-			</div>
-		</div> -->
+
 		<div class="fyy-footer">
 			<div class="bindfyy-btn"><button @click="submit" type="submit" class="mui-btn mui-btn-primary ">提交</button></div>
 		</div>
@@ -76,6 +52,7 @@
 		mapGetters,
 		mapMutations
 	} from 'vuex'
+	import * as WxJsApi from '$project/utils/wxJsApi'
 	export default {
 		name: 'MasterPropertyComplaintForm',
 		components: {
@@ -92,14 +69,61 @@
 				subForm: {
 					content: '',
 					type: 1,
-				}
+					img: '',
+					category: ''
+				},
+				picList: [],
+
+				categoryList: [],
 			}
 		},
 		created() {},
 		methods: {
+			//微信选择图片
+			chooseImage() {
+				WxJsApi.chooseImage().then(res => {
+					var localData = res.localData;
+
+					if (localData.indexOf('data:image') != 0) {
+						//判断是否有这样的头部
+						localData = 'data:image/jpeg;base64,' + localData
+					}
+					localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
+					this.imgBase64 = localData;
+					//显示裁剪图片
+					//_this.showCropper(field);
+					this.uploadpic();
+				}).catch(error => {
+					mui.toast(error);
+				})
+			},
+			//上传图片
+			uploadpic() {
+				this.isLoading = true;
+				WxJsApi.uploadPic(this.imgBase64).then(response => {
+					this.isLoading = false;
+
+					this.picList.push(response);
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//删除图片
+			delPic(item) {
+				let picList = this.picList;
+				let index = picList.indexOf(item);
+				if (index > -1) {
+					picList.splice(index, 1);
+				}
+				this.picList = picList;
+			},
 			//检测表单
 			checkForm() {
-				if (!this.subForm.content) {
+				if (!this.subForm.category) {
+					mui.toast('请选择投诉类别');
+					return false;
+				} else if (!this.subForm.content) {
 					mui.toast('请输入内容详情');
 					return false;
 				} else {
@@ -108,7 +132,9 @@
 			},
 			//提交
 			submit() {
+				this.subForm.img = this.picList.join(',');
 				if (this.checkForm()) {
+					this.isLoading = true;
 					API_Property.subRepairAndComplaint(this.subForm).then(response => {
 						this.isLoading = false;
 						mui.toast('提交成功');
@@ -120,15 +146,36 @@
 					})
 				}
 			},
+			//获取类别
+			getCategoryList() {
+				this.isLoading = true;
+				API_Property.getCategoryList({
+					type: this.subForm.type
+				}).then(response => {
+					this.isLoading = false;
+					this.categoryList = response;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
 			asynCallBack() {
 
 			},
 		},
-		
+		mounted() {
+			//获取微信配置
+			WxJsApi.getWxConfig();
+			this.getCategoryList();
+		},
 		computed: {
 			...mapGetters({
 				openId: 'wx_openid',
 				token: 'token',
+				person_data: 'person_data',
+				person_popedom: 'person_popedom',
+				menu_list: 'menu_list',
+				common_menu_list: 'common_menu_list',
 			})
 		},
 	}

src/projects/business/views/Master/Property/Complaint/Info.vue

@@ -8,11 +8,11 @@
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>投诉人</label>
-						<span>1111</span>
+						<span v-text="detail.name"></span>
 					</div>
 					<div class="mui-input-row">
 						<label>房号</label>
-						<span>1-1-2201</span>
+						<span v-text="detail.community"></span>
 					</div>
 				</form>
 			</div>
@@ -20,64 +20,45 @@
 				<form class="mui-input-group vongi-wybx">
 					<div class="mui-input-row padd10">
 						<label>投诉内容</label>
-						<span class="vongi-span vongi-meform-pho">您的投诉建议服务，已上]处理完毕。如未能解决您的问题，可与我们物业联系。</span>
+						<span class="vongi-span vongi-meform-pho" v-text="detail.content"></span>
 						<span class="vongi-span vongi-wordcard vongi-meform-pho">
-							<div class="fyy-upphoto flew">
-								<div class="mui-col-xs-3">
-									<img src="~$project/assets/img/zhaop.jpg" />
-								</div>
-								<div class="mui-col-xs-3">
-									<img src="~$project/assets/img/zhaop.jpg" />
-								</div>
-								<div class="mui-col-xs-3">
-									<img src="~$project/assets/img/zhaop.jpg" />
-								</div>
-								<div class="mui-col-xs-3">
-									<img src="~$project/assets/img/zhaop.jpg" />
+							<div v-if="detail.img" class="fyy-upphoto flew">
+								<div v-for="(item,index) in detail.img.split(',')" class="mui-col-xs-3">
+									<img :src="item" />
 								</div>
 							</div>
 						</span>
 					</div>
-					
+
 				</form>
 			</div>
 			<div class="mui-content-padded vongi-qingjiadt">
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label>投诉时间</label>
-						<span>2020-10-10 10:00:00</span>
+						<span v-text="detail.createTime"></span>
 					</div>
 					<div class="mui-input-row">
 						<label>投诉状态</label>
-						<span class="color4fc5f7">处理中</span>
+						<span class="color4fc5f7" v-text="detail.statusN"></span>
 					</div>
-					<div class="mui-input-row">
-						<label>投诉内容</label>
-						<span class="vongi-span">您的投诉建议服务，已上]处理完毕。如未能解决您的问题，可与我们物业联系。</span>
-						
+					<div v-show="detail.status!=0">
+						<div class="mui-input-row">
+							<label>回复内容</label>
+							<span class="vongi-span" v-text="detail.returnContent"></span>
+						</div>
+						<div class="mui-input-row">
+							<label>回复时间</label>
+							<span v-text="detail.returnTime"></span>
+						</div>
 					</div>
-					<div class="mui-input-row">
-						<label>回复时间</label>
-						<span>2020-10-10 10:00:00</span>
-					</div>
-					<div class="mui-input-row">
+					<!-- <div class="mui-input-row">
 						<label>关闭时间</label>
 						<span>2020-10-10 10:00:00</span>
-					</div>
+					</div> -->
 				</form>
 			</div>
 		</div>
-		<!-- <div class="mui-content">
-			<div class="mui-content-padded fyy-detail">
-				<h4 style="margin:30px 0 15px" v-text="detail.createTime"></h4>
-				<p v-text="detail.content"></p>
-			</div>
-			<div class="mui-content-padded fyy-huifu">
-				<div class="fyy-answer-title">以下为回复内容</div>
-				<p v-text="detail.returnContent"></p>
-				<div class="mui-h6 mui-pull-right" v-text="detail.returnTime"></div>
-			</div>
-		</div> -->
 
 		<loading :visible="isLoading"></loading>
 	</div>
@@ -129,7 +110,9 @@
 
 			},
 		},
-		
+		mounted() {
+			this.getDetail();
+		},
 		computed: {
 			...mapGetters({
 				openId: 'wx_openid',

src/projects/business/views/Master/Property/Complaint/List.vue

@@ -7,166 +7,85 @@
 			<div id="slider" class="mui-slider mui-fullscreen ">
 				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
 					<div class="mui-scroll">
-						<a class="mui-control-item mui-active" href="#item1mobile">
-							<span class="fyy-badge">待处理<span class="mui-badge">5</span></span>
+						<a @click="reloadList(0)" :class="'mui-control-item '+(listForm.status==0?'mui-active':'')">
+							<span class="fyy-badge">待处理<span class="mui-badge" v-if="firstRecordsTotal" v-text="firstRecordsTotal"></span></span>
 						</a>
-						<a class="mui-control-item" href="#item2mobile">
+						<a @click="reloadList(1)" :class="'mui-control-item '+(listForm.status==1?'mui-active':'')">
 							已处理
 						</a>
 					</div>
 				</div>
 				<div class="mui-slider-group vongi-wybx">
-					<div id="item1mobile" class="mui-slider-item mui-control-content">
+					<div v-show="listForm.status==0" class="mui-slider-item mui-control-content">
 						<div class="mui-scroll-wrapper">
 							<div class="mui-scroll">
 								<ul class="mui-table-view">
-									<li class="mui-table-view-cell vongi-wordcard vongi-meform-pho">
-										<a href="">
+									<li v-for="(item,index) in recordList" :key="item.id" class="mui-table-view-cell vongi-wordcard vongi-meform-pho">
+										<router-link :to="{name:'MasterPropertyComplaintInfo',query:{id:item.id}}">
 											<div class="mui-media-body flew-sp">
-												<div class="mui-col-xs-9">空调外挂机隔间下水堵住了，导致墙面漏…</div>
-												<div class="mui-col-xs-3 color4fc5f7">处理中</div>
+												<div class="mui-col-xs-9" v-text="item.content"></div>
+												<div class="mui-col-xs-3 color4fc5f7" v-text="item.statusN"></div>
 											</div>
-											<div class="fyy-upphoto flew">
-												<div class="mui-col-xs-3">
-													<img src="~$project/assets/img/zhaop.jpg" />
+											<div v-if="item.img" class="fyy-upphoto flew">
+												<div v-for="(iten,inden) in item.img.split(',')" class="mui-col-xs-3">
+													<img :src="iten" />
 												</div>
-												<div class="mui-col-xs-3">
-													<img src="~$project/assets/img/zhaop.jpg" />
-												</div>
-												<div class="mui-col-xs-3">
-													<img src="~$project/assets/img/zhaop.jpg" />
-												</div>
-												<span class="mui-badge">5</span>
-											</div>
-											<p class="flew-items flew-sp">
-												管理投诉
-												<span class='mui-ellipsis'>10-21 19:00</span>
-											</p>
-										</a>
-										<div class="vongi-btn-x">
-											<button type="button" class="mui-btn mui-btn-primary">撤销</button>
-										</div>
-									</li>
-									<li class="mui-table-view-cell vongi-wordcard vongi-meform-pho">
-										<a href="">
-											<div class="mui-media-body flew-sp">
-												<div class="mui-col-xs-9">空调外挂机隔间下水堵住了，导致墙面漏…</div>
-												<div class="mui-col-xs-3 color4fc5f7">处理中</div>
-											</div>
-											<div class="fyy-upphoto flew">
-												<div class="mui-col-xs-3">
-													<img src="~$project/assets/img/zhaop.jpg" />
-												</div>
-												<div class="mui-col-xs-3">
-													<img src="~$project/assets/img/zhaop.jpg" />
-												</div>
-												<div class="mui-col-xs-3">
-													<img src="~$project/assets/img/zhaop.jpg" />
-												</div>
-												<span class="mui-badge">5</span>
+												<span class="mui-badge" v-text="item.img.split(',').length"></span>
 											</div>
 											<p class="flew-items flew-sp">
-												管理投诉
-												<span class='mui-ellipsis'>10-21 19:00</span>
+												{{item.categoryN}}
+												<span class='mui-ellipsis' v-text="item.createTime"></span>
 											</p>
-										</a>
+										</router-link>
 										<div class="vongi-btn-x">
-											<button type="button" class="mui-btn mui-btn-primary">撤销</button>
+											<button type="button" class="mui-btn mui-btn-primary" @click="del(item)">撤销</button>
+											<!-- <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">催办</button> -->
 										</div>
 									</li>
 								</ul>
 								<!--空状态-->
-								<!--<div class="vongi-kong">
+								<div v-if="recordList.length==0" class="vongi-kong">
 									<img src="~$project/assets/img/no.png" />
 									<p>暂无报修记录</p>
-								</div>-->
+								</div>
 							</div>
 						</div>
 					</div>
-					<div id="item2mobile" class="mui-slider-item mui-control-content">
+					<div v-show="listForm.status==1" class="mui-slider-item mui-control-content">
 						<div class="mui-scroll-wrapper">
 							<div class="mui-scroll">
 								<ul class="mui-table-view">
-									<li class="mui-table-view-cell vongi-wordcard vongi-meform-pho">
-										<a href="">
+									<li v-for="(item,index) in recordList" :key="item.id" class="mui-table-view-cell vongi-wordcard vongi-meform-pho">
+										<router-link :to="{name:'MasterPropertyComplaintInfo',query:{id:item.id}}">
 											<div class="mui-media-body flew-sp">
-												<div class="mui-col-xs-9">空调外挂机隔间下水堵住了，导致墙面漏…</div>
-												<div class="mui-col-xs-3 color55f868">已解决</div>
+												<div class="mui-col-xs-9" v-text="item.content"></div>
+												<div class="mui-col-xs-3 color55f868" v-text="item.statusN"></div>
 											</div>
-											<div class="fyy-upphoto flew">
-												<div class="mui-col-xs-3">
-													<img src="~$project/assets/img/zhaop.jpg" />
+											<div v-if="item.img" class="fyy-upphoto flew">
+												<div v-for="(iten,inden) in item.img.split(',')" class="mui-col-xs-3">
+													<img :src="iten" />
 												</div>
-												<div class="mui-col-xs-3">
-													<img src="~$project/assets/img/zhaop.jpg" />
-												</div>
-												<div class="mui-col-xs-3">
-													<img src="~$project/assets/img/zhaop.jpg" />
-												</div>
-												<span class="mui-badge">5</span>
+												<span class="mui-badge" v-text="item.img.split(',').length"></span>
 											</div>
 											<p class="flew-items flew-sp">
-												管理投诉
-												<span class='mui-ellipsis'>10-21 19:00</span>
+												{{item.categoryN}}
+												<span class='mui-ellipsis' v-text="item.createTime"></span>
 											</p>
-										</a>
+										</router-link>
 										<div class="vongi-btn-x">
-											<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">查看回复</button>
-										</div>
-									</li>
-									<li class="mui-table-view-cell vongi-wordcard vongi-meform-pho">
-										<a href="">
-											<div class="mui-media-body flew-sp">
-												<div class="mui-col-xs-9">空调外挂机隔间下水堵住了，导致墙面漏…</div>
-												<div class="mui-col-xs-3 color999">已关闭</div>
-											</div>
-											<div class="fyy-upphoto flew">
-												<div class="mui-col-xs-3">
-													<img src="~$project/assets/img/zhaop.jpg" />
-												</div>
-												<div class="mui-col-xs-3">
-													<img src="~$project/assets/img/zhaop.jpg" />
-												</div>
-												<div class="mui-col-xs-3">
-													<img src="~$project/assets/img/zhaop.jpg" />
-												</div>
-												<span class="mui-badge">5</span>
-											</div>
-											<p class="flew-items flew-sp">
-												收费投诉
-												<span class='mui-ellipsis'>10-21 19:00</span>
-											</p>
-										</a>
-										<div class="vongi-btn-x">
-											<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">查看回复</button>
+											<button type="button" @click="goToInfo(item)" class="mui-btn mui-btn-primary mui-btn-outlined">查看回复</button>
 										</div>
 									</li>
 								</ul>
 							</div>
 						</div>
 					</div>
-
 				</div>
 			</div>
-
 		</div>
-		<!-- <div class="mui-content">
-			<div class="mui-content-padded">
-				<ul class="mui-table-view openfyy-list">
-					<li v-for="(item,index) in recordList" class="mui-table-view-cell mui-media">
-						<router-link :to="{name:'MasterPropertyComplaintInfo',query:{id:item.id}}" class="mui-navigate-right ">
-							<div class="mui-media-body">
-								{{item.createTime}}
-								<p class='mui-ellipsis' v-text="item.statusN"></p>
-							</div>
-						</router-link>
-					</li>
-				</ul>
-			</div>
-		</div> -->
 
-		<div class="fyy-footer">
-			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-primary " @click="goToForm()">填写投诉建议</button></div>
+		<div class="fyy-footer" style="z-index:99">
+			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-primary " @click="goToForm()">填写物业报修</button></div>
 		</div>
 
 		<loading :visible="isLoading"></loading>
@@ -202,9 +121,11 @@
 					pageIndex: 1,
 					pageSize: 20,
 					totalPage: 1,
-					type: 1
+					type: 1,
+					status: 0
 				},
 				recordList: [],
+				firstRecordsTotal: 0,
 			}
 		},
 		created() {},
@@ -224,6 +145,10 @@
 								...response.data
 							];
 						}
+
+						if (this.listForm.status == 0) {
+							this.firstRecordsTotal = response.recordsTotal;
+						}
 					}
 					this.listForm.pageIndex++;
 					this.isLoading = false;
@@ -243,12 +168,51 @@
 					}
 				}
 			},
+			//切换
+			reloadList(status) {
+				this.listForm.status = status;
+				this.listForm.pageIndex = 1;
+				this.getList();
+			},
 			//填写
 			goToForm() {
 				this.$router.push({
 					name: 'MasterPropertyComplaintForm'
 				})
 			},
+			//详情
+			goToInfo(item) {
+				this.$router.push({
+					name: 'MasterPropertyComplaintInfo',
+					query: {
+						id: item.id
+					}
+				})
+			},
+			//撤销
+			del(item) {
+				var _this = this;
+				var btnArray = ['否', '是'];
+				mui.confirm('您确认删除吗？', ' ', btnArray, function(e) {
+					if (e.index == 1) {
+						_this.delAction(item)
+					}
+				})
+			},
+			delAction(item) {
+				this.isLoading = true;
+				API_Property.delRepairAndComplaint(item.id).then(response => {
+					this.isLoading = false;
+					mui.toast('撤销成功');
+
+					this.listForm.pageIndex = 1;
+					this.getList();
+
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
 			asynCallBack() {
 
 			},

src/projects/business/views/Master/Property/Repair/List.vue

@@ -80,25 +80,9 @@
 							</div>
 						</div>
 					</div>
-
 				</div>
 			</div>
-
 		</div>
-		<!-- <div class="mui-content">
-			<div class="mui-content-padded">
-				<ul class="mui-table-view openfyy-list">
-					<li v-for="(item,index) in recordList" class="mui-table-view-cell mui-media">
-						<router-link :to="{name:'MasterPropertyRepairInfo',query:{id:item.id}}" class="mui-navigate-right ">
-							<div class="mui-media-body">
-								{{item.createTime}}
-								<p class='mui-ellipsis' v-text="item.statusN"></p>
-							</div>
-						</router-link>
-					</li>
-				</ul>
-			</div>
-		</div> -->
 
 		<div class="fyy-footer" style="z-index:99">
 			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-primary " @click="goToForm()">填写物业报修</button></div>