349 lines
11 KiB
Vue
349 lines
11 KiB
Vue
<template>
|
|
<section class="AppRecognizeDetail">
|
|
<u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="change" height="112" :bar-style="barStyle"
|
|
bg-color="#fff" inactive-color="#666" active-color="#222" :active-item-style="activeStyle"></u-tabs>
|
|
<div class="info-content" v-if="!tabIndex">
|
|
<div class="item">
|
|
<div class="label">助养人姓名</div>
|
|
<div class="value">{{info.assistanceName}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">与助养对象关系</div>
|
|
<div class="value">{{$dictHlj.getLabel('relationship_children', info.relationshipWithChild)}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">助养方式</div>
|
|
<div class="value">{{$dictHlj.getLabel('handling_Date', info.assistanceMethod)}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">详细描述</div>
|
|
<div class="value">{{info.details}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">助养人身份证号</div>
|
|
<div class="value">{{info.assistanceIdNumber}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">办理日期</div>
|
|
<div class="value">{{info.handlingDate}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-content" v-if="tabIndex == 1">
|
|
<div class="item">
|
|
<div class="label">儿童姓名</div>
|
|
<div class="value">{{info.childName}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">身份证号</div>
|
|
<div class="value">{{info.childIdNumber}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">儿童类别</div>
|
|
<div class="value">{{$dictHlj.getLabel('child_type', info.childType)}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">出生年月</div>
|
|
<div class="value">{{info.childBirthDate}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-content" v-if="tabIndex == 2">
|
|
<div class="item">
|
|
<div class="label">助养者身份证信息</div>
|
|
<div class="value">
|
|
<div class="img-list" v-if="filesIdImg.length">
|
|
<img :src="item.url" alt="" v-for="(item, index) in filesIdImg" :key="index" @click.stop="previewImages(filesIdImg, item.url)">
|
|
</div>
|
|
<div class="file-list" v-if="filesId.length">
|
|
<div class="file-item" v-for="(item, index) in filesId" :key="index" @click="previewFile(item)">
|
|
<img src="https://cdn.sinoecare.com/i/2024/07/16/66963dd133cfd.png" alt="">
|
|
<div>{{ item.fileName }}</div>
|
|
</div>
|
|
</div>
|
|
<p v-if="!filesIdImg.length && !filesId.length">暂无数据</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">助养者经济状况证明</div>
|
|
<div class="value">
|
|
<div class="img-list" v-if="filesEconomyImg.length">
|
|
<img :src="item.url" alt="" v-for="(item, index) in filesEconomyImg" :key="index" @click.stop="previewImages(filesEconomyImg, item.url)">
|
|
</div>
|
|
<div class="file-list" v-if="filesEconomy.length">
|
|
<div class="file-item" v-for="(item, index) in filesEconomy" :key="index" @click="previewFile(item)">
|
|
<img src="https://cdn.sinoecare.com/i/2024/07/16/66963dd133cfd.png" alt="">
|
|
<div>{{ item.fileName }}</div>
|
|
</div>
|
|
</div>
|
|
<p v-if="!filesEconomyImg.length && !filesEconomy.length">暂无数据</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">助养者健康状况</div>
|
|
<div class="value">
|
|
<div class="img-list" v-if="filesHealthImg.length">
|
|
<img :src="item.url" alt="" v-for="(item, index) in filesHealthImg" :key="index" @click.stop="previewImages(filesHealthImg, item.url)">
|
|
</div>
|
|
<div class="file-list" v-if="filesHealth.length">
|
|
<div class="file-item" v-for="(item, index) in filesHealth" :key="index" @click="previewFile(item)">
|
|
<img src="https://cdn.sinoecare.com/i/2024/07/16/66963dd133cfd.png" alt="">
|
|
<div>{{ item.fileName }}</div>
|
|
</div>
|
|
</div>
|
|
<p v-if="!filesHealthImg.length && !filesHealth.length">暂无数据</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">其他材料</div>
|
|
<div class="value">
|
|
<div class="img-list" v-if="filesOtherImg.length">
|
|
<img :src="item.url" alt="" v-for="(item, index) in filesOtherImg" :key="index" @click.stop="previewImages(filesOtherImg, item.url)">
|
|
</div>
|
|
<div class="file-list" v-if="filesOther.length">
|
|
<div class="file-item" v-for="(item, index) in filesOther" :key="index" @click="previewFile(item)">
|
|
<img src="https://cdn.sinoecare.com/i/2024/07/16/66963dd133cfd.png" alt="">
|
|
<div>{{ item.fileName }}</div>
|
|
</div>
|
|
</div>
|
|
<p v-if="!filesOtherImg.length && !filesOther.length">暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-content" v-if="tabIndex == 3">
|
|
<div class="item">
|
|
<div class="label">办理人</div>
|
|
<div class="value">{{info.agentId || '-'}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">办理人联系电话</div>
|
|
<div class="value">{{info.agentPhone || '-'}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">办理机构</div>
|
|
<div class="value">{{info.agency || '-'}}</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "AppRecognizeDetail",
|
|
appName: "认亲助养",
|
|
data() {
|
|
return {
|
|
tabList: [{name: '助养信息'}, {name: '助养对象'}, {name: '相关文件'}, {name: '经办人'}],
|
|
tabIndex: 0,
|
|
barStyle: {
|
|
'width': '20px',
|
|
'bottom': '-3px',
|
|
'background': '#4181FF',
|
|
'border-radius': '2px'
|
|
},
|
|
activeStyle: {
|
|
'font-weight' : '400',
|
|
'color': '#222'
|
|
},
|
|
id: '',
|
|
info: {},
|
|
filesIdImg: [], //身份证照片
|
|
filesId: [], //身份证附件
|
|
filesEconomyImg: [], //经济状况证明照片
|
|
filesEconomy: [], //经济状况证明附件
|
|
filesHealthImg: [], //健康证明照片
|
|
filesHealth: [], //健康证明附件
|
|
filesOtherImg: [], //其它照片
|
|
filesOther: [], //其它附件
|
|
imgUrlHttp: '',
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
uni.setNavigationBarColor({
|
|
frontColor: '#ffffff',
|
|
backgroundColor: '#2183FF'
|
|
})
|
|
uni.setNavigationBarTitle({
|
|
title: '认亲助养'
|
|
})
|
|
this.id = option.id
|
|
this.$http.get(`/system/config/configKey/upload.file.path`,
|
|
{
|
|
withoutToken: true
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
this.imgUrlHttp = res.data
|
|
}
|
|
})
|
|
this.$dictHlj.load(['handling_Date', 'relationship_children', 'child_type']).then(() => {
|
|
this.getDetail()
|
|
})
|
|
|
|
},
|
|
methods: {
|
|
linkTo(url) {
|
|
uni.navigateTo({url})
|
|
},
|
|
change(e) {
|
|
this.tabIndex = e
|
|
},
|
|
getDetail() {
|
|
this.$http.get(`/mobile/supportRaise/findById/${this.id}`,
|
|
{
|
|
withoutToken: true
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
this.info = {...res.data}
|
|
res.data.assistanceInformationFile.map((item) => {
|
|
item.url = this.imgUrlHttp + item.fileName
|
|
var e = item.fileName.split('.')
|
|
item.postfix = e[e.length-1]
|
|
if(item.type == 1) {
|
|
if(['jpeg', 'jpg', 'png'].includes(item.postfix)) {
|
|
this.filesIdImg.push(item)
|
|
}else {
|
|
this.filesId.push(item)
|
|
}
|
|
}
|
|
if(item.type == 2) {
|
|
if(['jpeg', 'jpg', 'png'].includes(item.postfix)) {
|
|
this.filesEconomyImg.push(item)
|
|
}else {
|
|
this.filesEconomy.push(item)
|
|
}
|
|
}
|
|
if(item.type == 3) {
|
|
if(['jpeg', 'jpg', 'png'].includes(item.postfix)) {
|
|
this.filesHealthImg.push(item)
|
|
}else {
|
|
this.filesHealth.push(item)
|
|
}
|
|
}
|
|
if(item.type == 4) {
|
|
if(['jpeg', 'jpg', 'png'].includes(item.postfix)) {
|
|
this.filesOtherImg.push(item)
|
|
}else {
|
|
this.filesOther.push(item)
|
|
}
|
|
}
|
|
})
|
|
}else {
|
|
this.$u.toast(res.msg)
|
|
}
|
|
})
|
|
},
|
|
previewImages(images, img) {
|
|
uni.previewImage({
|
|
urls: images.map(v => v.url),
|
|
current: img
|
|
})
|
|
},
|
|
previewFile(e) {
|
|
uni.downloadFile({
|
|
url: e.url,
|
|
success: function (res) {
|
|
var filePath = res.tempFilePath;
|
|
uni.openDocument({
|
|
filePath: filePath,
|
|
fileType: e.postfix,
|
|
showMenu: true,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
uni-page-body {
|
|
background-color: #f5f6f7;
|
|
}
|
|
.AppRecognizeDetail {
|
|
::v-deep .u-tabs {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
.info-content {
|
|
margin-top: 24px;
|
|
.item {
|
|
padding-left: 32px;
|
|
background-color: #fff;
|
|
font-family: PingFangSC-Regular;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
.label {
|
|
padding: 16px 32px 20px 0;
|
|
line-height: 44px;
|
|
font-size: 32px;
|
|
color: #999;
|
|
box-sizing: border-box;
|
|
}
|
|
.value {
|
|
padding: 0 20px 16px 0;
|
|
box-sizing: border-box;
|
|
line-height: 40px;
|
|
font-size: 28px;
|
|
color: #222;
|
|
border-bottom: 1px solid #E4E5E6;
|
|
.img-list {
|
|
img {
|
|
width: 200px;
|
|
height: 200px;
|
|
margin-right: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
img:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.file-list {
|
|
.file-item {
|
|
padding: 16px;
|
|
border: 1px solid #CCCCCC;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
margin-bottom: 32px;
|
|
img {
|
|
width: 96px;
|
|
height: 96px;
|
|
}
|
|
div {
|
|
align-self: center;
|
|
}
|
|
}
|
|
}
|
|
p {
|
|
color: #999;
|
|
line-height: 44px;
|
|
padding: 8px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.footer-btn {
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 16px 32px 52px 16px;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
.btn {
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 96px;
|
|
line-height: 94px;
|
|
border: 1px solid #2183FF;
|
|
border-radius: 8px;
|
|
font-family: PingFangSC-Medium;
|
|
font-weight: 500;
|
|
font-size: 32px;
|
|
color: #2183FF;
|
|
margin-bottom: 16px;
|
|
}
|
|
.primary {
|
|
background-color: #2183FF;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|