ks-app-employment-service/packageB/priority/recordDetail.vue

<template>
    <AppLayout :title="title" :show-bg-image="false" >
        <view class="main-list" :style="getBackgroundStyle('k.png')">
			<view class="list-top">
				<view class="list-title">
					<text>帮扶记录详情</text>
					<view class="title-line"></view>
				</view>
			</view>
            <view class="form-container">
				<view class="form-item">
					<view class="item-label">
						人员姓名：
					</view>
					<view class="item-value">
						{{formData.name}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						身份证号：
					</view>
					<view class="item-value">
						{{formData.id_card}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						联系电话：
					</view>
					<view class="item-value">
						{{formData.phone}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						帮扶类型：
					</view>
					<view class="item-value">
						{{formData.task_type}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						帮扶人员：
					</view>
					<view class="item-value" >
						{{formData.create_by_name}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						帮扶日期：
					</view>
					<view class="item-value">
						{{formData.follow_date}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						下次联系：
					</view>
					<view class="item-value">
						{{formData.next_contact_date}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						人员标签：
					</view>
					<view class="item-value">
						{{formData.tag_name}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						帮扶内容：
					</view>
					<view class="item-value">
						{{formData.detailRecords}}
					</view>
				</view>
			</view>
        </view>
    </AppLayout>
</template>

<script setup>
import { inject, ref, reactive,onMounted  } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const { $api, navTo, navBack } = inject('globalFunction');
import config from "@/config.js"

const title = ref('');
const formData = reactive({
	taskName: '',
	taskType: '',
	priority: '',
	createTime:'',
	allocationStatus:'',
	taskAllocation: {
	  goalPersonCount: null,
	  executeDeptId: '',
	  executeDeptName: '',
	  executeDeptAncestors: '',
	  allocationStatus: '1',
	  allocationNote: '',
	  deadline: null,
	  goalPersonList: []
	}
})
const taskTypeOptions=ref([])
const priorityOptions=ref([])
const allocationStatusOptions=ref([])
const executeDeptOptions=ref([])
// 表单引用
const formRef = ref(null)
const baseUrl = config.imgBaseUrl
const getBackgroundStyle = (imageName) => ({
    backgroundImage: `url(${baseUrl}/dispatch/${imageName})`,
    backgroundSize: 'cover',      // 覆盖整个容器
    backgroundPosition: 'center', // 居中
    backgroundRepeat: 'no-repeat'
});

function getDictionary(){
	$api.myRequest('/system/public/dict/data/type/assist_task_type').then((resData) => {
		if(resData && resData.code == 200){
			resData.data.forEach(item=>{
				const obj = {
				    value: item.dictValue,
				    text: item.dictLabel
				}
				taskTypeOptions.value.push(obj)
			})
		}
	});
}
function getDetail(id){
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	let params={
		goalPersonId:id
	}
	$api.myRequest('/dispatch/assist/records/getDetail',params,'get',9100,header).then((resData) => {
		console.log("resData",resData)
		resData.data.task_type=getabelByValue(resData.data.task_type,taskTypeOptions.value)
		Object.assign(formData, resData.data)
	});
}
function getabelByValue(value,arr) {
	if (!Array.isArray(arr)) {
	    return ''
	}
	const item = arr.find(item => item.value === String(value))
	return item ? item.text : '暂无'
}
onLoad((options) => {
	runAsyncTasks(options)
});
const runAsyncTasks = async (options) => {
  await getDictionary()
  await getDetail(options.id)
}


</script>

<style lang="stylus" scoped>
image
  height: 100%
  width: 100%
.main-list
  background-color: #ffffff
  padding: 20rpx 20rpx 28rpx 20rpx
  margin: 30rpx 30rpx
  box-shadow: 0px 3px 20px 0px rgba(0,105,234,0.1)
  border-radius: 12px
.list-top
  display: flex
  align-items: center
  justify-content: space-between
.list-title
  font-weight: bold
  font-size: 36rpx
  color: #404040
  position: relative

.title-line
  position: absolute
  bottom: -10rpx
  left: 70rpx
  width: 70rpx
  height: 8rpx
  background: linear-gradient(90deg, #FFAD58 0%, #FF7A5B 100%)
  border-radius: 4rpx
.title-total
  font-size: 24rpx
  color: #999999
.total-num
  color: #3088FF
  margin-left: 4rpx
  margin-right: 4rpx
  font-weight: bold
  font-size: 26rpx
.input,
.picker
  flex: 1

.picker-value
  color: #666
  
.form-container
  margin-top: 30rpx
.con-box
  background: #fff
  padding: 20rpx
  box-shadow: 0px 0px 6rpx 0px rgba(0,71,200,0.16)
  border-radius: 24rpx
  border: 1rpx solid #EDF5FF
  margin-top: 30rpx
.form-item
  display: flex
  align-items: center
  margin-bottom: 20rpx
.mb-30
  margin-bottom: 30rpx
.item-left
  display: flex
  align-items: center
.item-img
  width: 26rpx
  height: 26rpx
  margin-right: 10rpx
.item-label1
  font-size: 26rpx
  color: #B3B3B3
  width: 130rpx
.item-label
  width:200rpx
  text-align: left
  font-size: 30rpx
  color: #606266
  height: 72rpx
  padding: 0 24rpx 0 0
  vertical-align: middle
  flex-shrink: 0
  box-sizing: border-box
.item-value
  color: #333
  font-size: 30rpx
  height: 72rpx
  padding: 0 24rpx 0 0
  vertical-align: middle
  flex-shrink: 0
  box-sizing: border-box
:deep(.uni-forms-item__label)
  width: 194rpx !important
  font-size: 28rpx;
  color: #404040;

.button-group {
  display: flex;
  justify-content: space-between;
  padding: 40rpx 20rpx 20rpx;
}

.btn {
  width: 45%;
  height: 80rpx;
  font-size: 30rpx;
  border-radius: 8rpx;
}

.reset-btn {
  background-color: #D8E9FF;
  color: #1176FF;
}

.submit-btn {
  background-color: #368BFF;
  color: white;
}
.choice-btn{
	width: 100%;
	height: 70rpx;
	font-size: 28rpx;
	border-radius: 8rpx;
	background-color: #368BFF;
	color: white;
	margin-left: 0;
}
:deep(.uni-easyinput__content)
  background: rgba(0,0,0,0) !important
</style>