物业报修/详情/表单全部重新改版

src/assets/css/xpwyfyy.css

@@ -517,10 +517,13 @@ h3 {
 	width: 50%
 }
 
+.vongi-meform-pho .mui-table-view-cell.mui-selected a,
 .mui-selected a {
 	border: 1px solid #375cf5
 }
-
+.vongi-meform-pho .mui-table-view-cell.mui-selected a{
+	color:#375cf5
+}
 .fyy-payyes img {
 	width: 60%;
 	padding: 50px 0
@@ -1942,7 +1945,12 @@ h3 {
 	margin-bottom: 10px;
 	margin-top: 4px
 }
-
+.vongi-meform-pho textarea{
+	padding:0
+}
+.vongi-meform-pho h5{
+	margin-bottom:10px
+}
 .vongi-meform .mui-h5 {
 	padding: 10px 15px
 }
@@ -1950,7 +1958,24 @@ h3 {
 .vongi-meform h5 {
 	margin-bottom: 10px
 }
-
+.vongi-meform-pho .mui-table-view-radio .mui-table-view-cell>a:not(.mui-btn){
+	margin:0;
+	
+}
+.vongi-meform-pho .mui-table-view-cell a{
+	padding: 6px 15px;
+    border-radius: 20px;
+    border: 1px solid #A9A9A9;
+    color:#888888
+}
+.vongi-meform-pho .mui-table-view:before,
+.vongi-meform-pho .mui-table-view:after,
+.vongi-meform-pho .mui-table-view-cell:after{
+	background:0
+}
+.mui-table-view-radio .mui-table-view-cell{
+	padding:0
+}
 .vongi-xzyljg .mui-table-view-cell:after {
 	left: 0
 }
@@ -2774,6 +2799,7 @@ h3 {
 	width:100%;
 	text-align: left;
 	padding:0 15px 15px; 
+	text-align: justify;
 }
 .vongi-pop-inner,
 .vongi-mui-pop .mui-popup-button{
@@ -2824,3 +2850,54 @@ h3 {
 .vongi-hddat-center p{
 	text-align: center;
 }
+.vongi-wybx .vongi-meform-pho .fyy-upphoto .mui-col-xs-3{
+	align-items: initial;
+	border-radius: initial;
+	width:33.333333%;
+	height:100px
+}
+
+.vongi-wybx .vongi-meform-pho .fyy-upphoto{
+	position:relative
+}
+.vongi-wybx .vongi-meform-pho .fyy-upphoto .mui-badge{
+	background:rgba(0,0,0,0.5);
+	border-radius: initial;
+	position:absolute;
+	right:5px;
+	bottom:5px
+}
+.vongi-wybx .vongi-meform-pho .fyy-upphoto .mui-col-xs-3 img{
+	border-radius: initial;
+}
+.vongi-wybx .vongi-meform-pho .fyy-upphoto{
+	margin:0 -5px
+}
+.vongi-hdsq .vongi-wybx.mui-slider-group ul .mui-col-xs-9{
+	white-space: inherit;
+	    display: inline
+}
+.vongi-wybx .vongi-btn-x{
+	padding: 10px 0 0;
+    margin-top: 10px;
+    border-top: 1px #eee solid;
+    text-align: right;
+}
+.vongi-btn-x button{
+	border-radius: 15px;
+	padding:6px 20px;
+	margin-left:10px
+}
+.vongi-qingjiadt .mui-input-row .vongi-span.vongi-meform-pho{
+	padding:0 15px;
+	margin:0
+}
+.padd10{
+	padding-bottom:10px
+}
+.vongi-kong{
+	text-align: center;
+}
+.vongi-kong img{
+	padding: 10% 20% 0;
+}

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

@@ -4,13 +4,56 @@
 		<top-header :pageTitle="pageTitle"></top-header>
 
 		<div class="mui-content">
+			<div class="vongi-yqsb flew-items">
+				<i class="iconfont icon-shouye2 color4fc5f7"></i>赵刚  1-1-2201
+			</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">
+						<a >
+							家庭维修
+						</a>
+					</li>
+					<li class="mui-table-view-cell mui-selected">
+						<a >
+							公区报修
+						</a>
+					</li>
+					<li class="mui-table-view-cell">
+						<a >
+							其他报修
+						</a>
+					</li>
+				</ul>
+			</div>
+			<div class="vongi-meform-pho">
+				<h5>报修内容</h5>
+				<div class="mui-input-row">
+					<textarea id="textarea" 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>
+					<div class="mui-col-xs-3">
+						<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> -->
 		<div class="fyy-footer">
 			<div class="bindfyy-btn"><button @click="submit" type="submit" class="mui-btn mui-btn-primary ">提交</button></div>
 		</div>
@@ -76,12 +119,7 @@
 
 			},
 		},
-		mounted() {
-			//document.body.style.backgroundColor = '#fff';
-		},
-		destroyed() {
-			//document.body.style.backgroundColor = '';
-		},
+		
 		computed: {
 			...mapGetters({
 				openId: 'wx_openid',

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

@@ -4,6 +4,70 @@
 		<top-header :pageTitle="pageTitle"></top-header>
 
 		<div class="mui-content">
+			<div class="mui-content-padded vongi-qingjiadt">
+				<form class="mui-input-group">
+					<div class="mui-input-row">
+						<label>报修人</label>
+						<span>1111</span>
+					</div>
+					<div class="mui-input-row">
+						<label>房号</label>
+						<span>1-1-2201</span>
+					</div>
+				</form>
+			</div>
+			<div class="mui-content-padded  vongi-qingjiadt vongi-hdsq">
+				<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-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>
+							</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>
+					</div>
+					<div class="mui-input-row">
+						<label>报修状态</label>
+						<span class="color4fc5f7">处理中</span>
+					</div>
+					<div class="mui-input-row">
+						<label>报修内容</label>
+						<span class="vongi-span">您的投诉建议服务，已处理完毕。如未能解决您的问题，可与我们物业联系。</span>
+						
+					</div>
+					<div class="mui-input-row">
+						<label>回复时间</label>
+						<span>2020-10-10 10:00:00</span>
+					</div>
+					<div class="mui-input-row">
+						<label>关闭时间</label>
+						<span>2020-10-10 10:00:00</span>
+					</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>
@@ -13,7 +77,7 @@
 				<p v-text="detail.returnContent"></p>
 				<div class="mui-h6 mui-pull-right" v-text="detail.returnTime"></div>
 			</div>
-		</div>
+		</div> -->
 
 		<loading :visible="isLoading"></loading>
 	</div>
@@ -65,14 +129,7 @@
 
 			},
 		},
-		mounted() {
-			//获取详情
-			this.getDetail();
-			document.body.style.backgroundColor = '#fff';
-		},
-		destroyed() {
-			document.body.style.backgroundColor = '';
-		},
+		
 		computed: {
 			...mapGetters({
 				openId: 'wx_openid',

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

@@ -3,7 +3,156 @@
 		<common ref="common" @asynCallBack="asynCallBack"></common>
 		<top-header :pageTitle="pageTitle"></top-header>
 
-		<div class="mui-content">
+		<div class="mui-content vongi-hdsq">
+			<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>
+						<a class="mui-control-item" href="#item2mobile">
+							已处理
+						</a>
+					</div>
+				</div>
+				<div class="mui-slider-group vongi-wybx">
+					<div id="item1mobile" 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="">
+											<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>
+											</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>
+											<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 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>
+											</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>
+											<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">催办</button>
+										</div>
+									</li>
+								</ul>
+								<!--空状态-->
+								<!--<div class="vongi-kong">
+									<img src="~$project/assets/img/no.png" />
+									<p>暂无报修记录</p>
+								</div>-->
+							</div>
+						</div>
+					</div>
+					<div id="item2mobile" 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="">
+											<div class="mui-media-body flew-sp">
+												<div class="mui-col-xs-9">空调外挂机隔间下水堵住了，导致墙面漏…</div>
+												<div class="mui-col-xs-3 color55f868">已解决</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>
+										</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>
+										</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">
@@ -16,7 +165,7 @@
 					</li>
 				</ul>
 			</div>
-		</div>
+		</div> -->
 
 		<div class="fyy-footer">
 			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-primary " @click="goToForm()">填写物业报修</button></div>