luoshan_web/pages/command/commandDetails.vue

<template>
	<view class="container">
		<view class="mim-view mim-flex-vertical">
			<view class="mim-font-16 bold">
				{{ detail.category_1 ? detail.category_1.name : ''}}
				{{ detail.category_2 ? '/' + detail.category_2.name : ''}}
				{{ detail.category_3 ? '/' + detail.category_3.name : '' }}
				{{ detail.category_4 ? '/' + detail.category_4.name : '' }}
				{{ detail.category_5 ? '/' + detail.category_5.name : '' }}
			</view>
			<view class="storm mim-font-14">
				{{detail.body || '--'}}
			</view>
			<u-divider border-color='#f2f2f2' bg-color='#f2f2f2' margin-top='24' margin-bottom='24' use-slot>
			</u-divider>
			<view class="mim-flex-wrap-space-between">
				<text class="mim-font-14">反映人</text>
				<text class="mim-font-14">{{detail.name || '--'}}</text>
			</view>
			<view class="mim-flex-wrap-space-between storm">
				<text class="mim-font-14">反映人手机号</text>
				<text class="mim-font-14">{{ detail.mobile || '--' }}</text>
			</view>
			<view class="mim-flex-wrap-space-between storm">
				<text class="mim-font-14">反映时间</text>
				<text class="mim-font-14">{{detail.complain_date || '--'}}</text>
			</view>
		</view>
		<view class="mim-view mim-flex-vertical">
			<view class="mim-flex-wrap-space-between xiezhu-title">
				<view class="mim-font-14">任务类型</view>
				<view class="mim-font-14">
					<u-tag v-if="detail.is_more_department==1" text="指派任务" type="warning" />
					<u-tag v-else text="主任务" type="success" />
				</view>
			</view>
			<view class="" v-if="detail.is_more_department==1">
				<view class="" v-if="detail.extra.multiData">
					<view v-for="(item,index) in detail.extra.multiData" :key="index" class="xiezhu-item">
						<view class="mim-flex-wrap-space-between storm">
							<view class="mim-font-14">协助部门</view>
							<view class="mim-font-14">
								{{item.deal_department_name || '--'}}
							</view>
						</view>
						<view class="mim-flex-wrap-space-between storm">
							<view class="mim-font-14">处理期限</view>
							<view class="mim-font-14">
								{{item.limit_day || '--'}}天
							</view>
						</view>
						<view class="mim-flex-wrap-space-between storm">
							<view class="mim-font-14">协助内容</view>
						</view>
						<view class="xiezhu-content">
							{{item.body || '--'}}
						</view>
						<view class="mim-flex-wrap-space-between storm">
							<view class="mim-font-14">处理意见</view>
						</view>
						<view class="xiezhu-content">
							{{item.claim || '--'}}
						</view>
					</view>
				</view>
				<view class="" v-else>
					<view class="mim-flex-wrap-space-between storm">
						<view class="mim-font-14">协助部门</view>
						<view class="mim-font-14">
							{{ detail.extra.deal_department_name || '--'}}
						</view>
					</view>
					<view class="mim-flex-wrap-space-between storm">
						<view class="mim-font-14">处理期限</view>
						<view class="mim-font-14">
							{{ detail.extra.limit_day || '--'}}天
						</view>
					</view>
					<view class="mim-flex-wrap-space-between storm">
						<view class="mim-font-14">协助内容</view>
					</view>
					<view class="xiezhu-content">
						{{ detail.extra.body || '--'}}
					</view>
					<view class="mim-flex-wrap-space-between storm">
						<view class="mim-font-14">处理意见</view>
					</view>
					<view class="xiezhu-content">
						{{ detail.extra.claim || '--'}}
					</view>
				</view>
			</view>
		</view>
		<view class="mim-view mim-flex-vertical">
			<view class="mim-font-16 bold">指派信息</view>

			<view class="mim-flex-wrap-space-between storm">
				<text class="mim-font-14">处理时间</text>
				<text class="mim-font-14">{{detail.assign_deal_time || '--'}}</text>
			</view>
			<view class="mim-flex-wrap-space-between storm">
				<text class="mim-font-14">处理部门</text>
				<text class="mim-font-14">{{detail.deal_department.name || '--'}}</text>
			</view>
			<view class="mim-flex-wrap-space-between storm">
				<text class="mim-font-14">指派人员</text>
				<text class="mim-font-14">{{detail.assign_admin.name}}</text>
			</view>
		</view>
		<view class="mim-view mim-flex-vertical">
			<view class="mim-font-16 bold">处理信息</view>
			<view class="img_type">
				<u-image v-if="type == '1'" src="@/static/images/index/dcl.png" width="240rpx" height="240rpx">
				</u-image>
				<u-image v-else-if="type == '2'" src="@/static/images/index/clz.png" width="240rpx" height="240rpx">
				</u-image>
				<u-image v-else-if="type =='3'" src="@/static/images/index/clwj.png" width="240rpx" height="240rpx">
				</u-image>
			</view>
			<view class="mim-flex-wrap-space-between storm">
				<text class="mim-font-14">处理状态</text>
				<text v-if="type == '1'" class="mim-font-14">待处理</text>
				<text v-if="type == '2'" class="mim-font-14">处理中</text>
				<text v-if="type == '3'" class="mim-font-14">处理完结</text>
			</view>
			<view v-if="type == '3'">
				<view class="mim-flex-wrap-space-between storm">
					<text class="mim-font-14">处理时间</text>
					<text class="mim-font-14">{{ detail.deal_time || '--' }}</text>
				</view>
				<view class="mim-flex-wrap-space-between storm">
					<text class="mim-font-14">处理期限</text>
					<text class="mim-font-14">{{ detail.deal_limit_day }}天</text>
				</view>
				<view class="mim-flex-vertical storm">
					<text class="mim-font-14">处理结果</text>
				</view>
				<view class="xiezhu-content">
					{{detail.deal_idea || '--'}}
				</view>
				<u-divider v-if="relevant_document_urls.length" border-color='#f2f2f2' bg-color='#f2f2f2'
					margin-top='24' margin-bottom='24' use-slot></u-divider>
				<view class="mim-flex-vertical storm" v-if="relevant_document_urls.length">
					<text class="mim-font-14 bold">附件详情</text>
					<view class="storm pre-box">
						<view class="pre-item" v-for="(item, index) in relevant_document_urls">
							<u-image :src="item.url" :key="index" mode="aspectFit" @click="previewImage(index)"
								height="160" width="160"></u-image>
						</view>
					</view>
				</view>
				<u-divider border-color='#f2f2f2' bg-color='#f2f2f2' margin-top='24' margin-bottom='24' use-slot>
				</u-divider>
				<view class="mim-flex-wrap-space-between">
					<text class="mim-font-14 bold">群众满意度</text>
					<text class="mim-font-14">{{detail.deal_evaluation}} 分</text>
				</view>
			</view>
		</view>

		<view class="mim-view-list"></view>
		<view v-if="type != 3 " class="mim-view-last"></view>
		<view v-if="type != 3 " class="mim-foot">
			<view v-if="type == 1 && detail.is_more_department == 1 && detail.check_status == 1 && admin"
				class="mim-button mim-foot-button bold" @click="goPage('audit')">去审核
			</view>
			<view v-else style="width: 100%;" class="mim-flex-wrap-space-between">
				<view v-if="type == 1 && detail.is_more_department == 0" class="mim-button mim-foot-button-first bold"
					@click="goPage('application')">
					申请协助
				</view>
				<view v-if="type == 1 && detail.is_more_department == 1 && detail.check_status == 1"
					class="mim-button mim-foot-button-first bold">
					申请协助审核中…
				</view>
				<!-- <view v-else class="mim-button mim-foot-button-first bold">申请协助审核中…</view> -->
				<view v-if="detail.check_status !== 1" class="mim-button mim-foot-button bold"
					@click="goPage('finish')">去完结</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					id: ''
				},
				type: '', //1 待处理 2 处理中 3 处理完结,
				detail: {},
				relevant_document_urls: [],
				buttonPermission: false,
				admin: false, //当前用户是否为管理员
				department: '', //当前用户部门
			};
		},
		onLoad(e) {
			this.form.id = e.id
			console.log(this.userDepartment, 'userRoles', this.userRoles)
			let roles = this.userRoles
			let arr = roles.filter(item => {
				return item.name == "admin"
			})
			if (arr.length > 0) {
				this.admin = true
			} else {
				this.admin = false
			}
			this.department = this.userDepartment
		},
		onShow() {
			this.commandDetailsFn()
		},
		methods: {
			//显示图片
			previewImage(index) {
				const urls = this.relevant_document_urls.map(item => item.url);
				const current = urls[index]; // 当前显示的图片地址
				uni.previewImage({
					current: current, // 当前显示的图片地址
					urls: urls, // 图片地址数组
				});
			},
			goPage(e) {
				switch (e) {
					case 'application': //申请协助页面
						this.$u.route('/pages/command/application', {
							id: this.form.id,
							type: '1'
						});
						break;
					case 'finish': //去完结页面
						this.$u.route('/pages/command/finish', {
							id: this.form.id
						});
						break;
					case 'audit': //（审核）申请协助页面
						this.$u.route('/pages/command/application', {
							id: this.form.id,
							type: '2'
						});
						break;
					default:
						console.log('Unknown fruit');
						break;
				}
			},

			//详情
			async commandDetailsFn() {
				const res = await this.$u.api.commandDetails(this.form)
				if (res.status === "success") {
					this.type = res.data.deal_status
					// if (this.type == '2') {
					// 	this.application_status = '申请协助审核中…'
					// }
					this.detail = res.data
					this.relevant_document_urls = res.data.deal_file
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;

		.container {
			.mim-view {
				overflow: hidden;

				.storm {
					margin-top: 24rpx;
				}

				.img_type {
					position: absolute;
					top: -70rpx;
					right: -50rpx;
					border-bottom: none;
				}

			}

			.xiezhu-item {
				border-top: dashed 1px #dcdbde;
				margin-top: 30rpx;
			}

			.xiezhu-content {
				padding: 20rpx;
				background-color: #f7f7f7;
				border-radius: 10rpx;
				margin-top: 10rpx;
			}

			.pre-box {
				display: flex;
				align-items: center;
				// justify-content: space-between;
				flex-wrap: wrap;
			}

			.pre-item {
				width: 160rpx;
				height: 160rpx;
				overflow: hidden;
				position: relative;
				margin-left: 20rpx;
				margin-bottom: 20rpx;
			}

			.mim-view-last {
				padding: 56rpx;
				background: transparent;
			}

			.mim-foot {
				width: 100%;
				height: 136rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				background-color: #ffffff;
				padding: 20rpx 24rpx;
				box-sizing: border-box;

				&-button {
					width: 100%;
					border-radius: 48rpx;
					opacity: 1;
					background: #DE2E27;
					font-size: 32rpx;
					font-weight: normal;
					line-height: 32rpx;
					letter-spacing: 0px;
					color: #FFFFFF;
					height: 96rpx;
					cursor: pointer;

					&-first {
						width: 100%;
						border-radius: 48rpx;
						opacity: 1;
						background: rgba(222, 46, 39, 0.2);
						font-size: 32rpx;
						font-weight: normal;
						line-height: 32rpx;
						letter-spacing: 0px;
						color: #DE2E27;
						height: 96rpx;
						cursor: pointer;
						border: 2rpx solid #DE2E27;
						margin-right: 30rpx;
					}
				}

			}
		}

	}
</style>