CommunityApp/pages/services/property/detail.vue

<template>
	<view>
		<view class=" bg-white padding solid-bottom">
			<view class="flex justify-between">
				<view class="text-black">
					<text>工单编号：{{dataDetail.repairNo}}</text>
					<text class="text-blue padding-left-sm" @click="copy(dataDetail.repairNo)">复制</text>
				</view>
				<view>
					<text class="text-orange" v-if="dataDetail.handleStatus==0">待处理</text>
					<text class="" v-if="dataDetail.handleStatus==1">处理中</text>
					<text class="text-orange" v-if="dataDetail.handleStatus==2">已处理</text>
					<text class="text-red" v-if="dataDetail.handleStatus==3">不做处理</text>
				</view>
			</view>
		</view>
		<u-cell-group>
			<u-cell-item :arrow="false" title="所在小区" :value="dataDetail.residentialName"></u-cell-item>
			<u-cell-item :arrow="false" title="维修位置" :value="dataDetail.reportPosition"></u-cell-item>
			<u-cell-item :arrow="false" title="创建时间" :value="dataDetail.createTime"></u-cell-item>
			<u-cell-item :arrow="false" title="受理状态" :value="acceptStatus"></u-cell-item>
		</u-cell-group>
		<view class="cu-card dynamic no-card bg-white" style="padding: 30rpx;">
			<view class="cu-item shadow">
				<view class=" grid flex-sub  col-5 grid-square">
					<view @click="previewPic(index,picArr)" v-for="(item,index) in picArr" :key="index" class="bg-img"
						:style="{backgroundImage: 'url(' + item + ')'}">
					</view>
				</view>
			</view>
			<view class="padding-top-30">
				<text>故障描述：</text>
				<text class="content">
					{{dataDetail.reportDetail}}
				</text>
			</view>
		</view>

		<view v-if="dataDetail.jobStatus==1&&dataDetail.estimateStatus==1"
			class="margin-top-sm margin-bottom-sm padding bg-white flex" style="box-sizing: border-box;">
			<view class="">
				<text class="">工单评价：</text>
			</view>
			<view class="flex-sub">
				<text class="">{{dataDetail.comment}}</text>
			</view>
		</view>


		<view class="margin-top-10">
			<history></history>
		</view>

		<view class="footer-fixed   padding-sm bg-white flex justify-end margin-right-30"
			style="box-sizing: border-box;z-index: 999;padding: 20rpx;">
			<!-- 待处理，取消工单 -->
			<view class="cu-btn sm lineBlue round " v-if="dataDetail.jobStatus==0" @click="cancelItem()">
				取消工单
			</view>
			<!-- 已撤销工单，删除工单 -->
			<view class="cu-btn sm lineBlue round margin-right-20"
				v-if="dataDetail.jobStatus==-1||dataDetail.jobStatus==1" @click="deleteItem()">
				删除工单
			</view>
			<!-- 已处理，待评价 -->
			<navigator url="./comment" v-if="dataDetail.jobStatus==1&&dataDetail.estimateStatus==0"
				class="cu-btn sm bg-blue  round ">
				写评价
			</navigator>
		</view>
	</view>
</template>
<script>
	import history from "./list/history.vue"
	var app = getApp()
	var that = this
	export default {
		components: {
			history
		},
		data() {
			return {
				//报修编号
				id: '',
				content: '',
				dataDetail: {},
				picArr: []
			}
		},
		onLoad(options) {
			that = this
			this.id = options.id
		},
		onShow() {
			this.fetchDetail()
		},
		computed:{
			acceptStatus(){
				let status={
					0:'等待受理',
					1:'已受理',
					2:'拒绝受理'
				}
				return status[this.dataDetail.acceptStatus]
			}
		},
		methods: {
			previewPic(index, picArr) {
				console.log(index);
				uni.previewImage({
					urls: picArr,
					current: index
				})
			},
			copy(data) {
				uni.setClipboardData({
					data: data
				})
			},
			fetchDetail() {
				let data = {
					id: this.id
				}
				that.$http.estateRepairDetail(data).then(res => {
					that.dataDetail = res.data.data
					that.picArr = that.dataDetail.pic.split(',')
				});
			},
			cancelItem() {
				app.globalData.twoFailHint("确定要取消该工单？", function() {
					//取消状态
					that.dataDetail.jobStatus = -1
					// let operation='estateRepair/addEstateRepair'
					that.$http.addEstateRepair(that.dataDetail).then(res => {
						if (res.data.add_result == true) {
							app.globalData.oneFailHint("取消成功", function() {
								that.fetchDetail()
							});
						} else {
							app.globalData.oneFailHint(res.data.add_result);
						}

					});
				})
			},
			deleteItem() {
				app.globalData.twoFailHint("确定要删除该工单？", function() {
					//删除状态
					that.dataDetail.status = -1
					// let operation='estateRepair/addEstateRepair'
					that.$http.addEstateRepair(that.dataDetail).then(res => {
						if (res.data.add_result == true) {
							app.globalData.oneFailHint("删除成功", function() {
								uni.navigateBack({
									delta: "1"
								})
							});
						} else {
							app.globalData.oneFailHint(res.data.add_result);
						}

					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg-blue {
		background-color: #59a5f0;
		color: #FFFFFF;
	}

	.lineBlue {
		color: #59a5f0;
		border: 1rpx solid #59a5f0;
	}
	
	/deep/ .u-cell.data-v-65423b64 {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    position: relative;
	    box-sizing: border-box;
	    width: 100%;
	    padding: 18rpx 32rpx;
	    font-size: 28rpx;
	    line-height: 54rpx;
	    color: #606266;
	    background-color: #fff;
	    text-align: left;
	}
</style>