<template>
|
<view class="problem-report-page">
|
<view class="info-cards">
|
<view class="info-top">
|
<view class="num">诉求号：{{detail.serialNumber}}</view>
|
<view class="status">{{['正在办理','延期办理','超时办理','已办结','群众撤销','上报待审核','上级驳回'][detail.status]}}</view>
|
</view>
|
|
<view class="address">
|
<view class="adr">{{detail.location || ''}}</view>
|
<image src="/static/position@2x.png" class="w-31 h-31" mode="aspectFill"></image>
|
</view>
|
|
<view class="table-head">
|
<view class="type flex1">问题类型</view>
|
<view class="person flex1">群众姓名</view>
|
<view class="phone flex1">联系电话</view>
|
</view>
|
|
<view class="table-body">
|
<view class="table-item">
|
<view class="type-tip flex1">
|
<view class="tip">
|
{{detail.problemType}}
|
</view>
|
</view>
|
<view class="person-item flex1">{{detail.name}}</view>
|
<view class="phone-item flex1">{{detail.contactNumber}}</view>
|
</view>
|
</view>
|
|
</view>
|
|
<view class="input-card">
|
<view class="title mb-27">
|
上报说明
|
</view>
|
<u--textarea style="background-color:rgba(248, 248, 248, 1);border: unset;padding:25rpx 30.77rpx;"
|
height="365.38rpx" v-model="content" placeholder="请输入内容"></u--textarea>
|
</view>
|
|
<view class="notice-tip flex a-center ">
|
<image src="/static/warnng@2x.png" class="w-31 h-31 mr-15" mode="aspectFill"></image>
|
提交后会由上级部门进行审核，请留意审核结果
|
</view>
|
|
<view class="btn" @tap="problemReports">提交至上级部门</view>
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
problemReport,
|
getDetail
|
} from './service'
|
export default {
|
data() {
|
return {
|
content: '',
|
id: '',
|
detail: {},
|
};
|
},
|
onLoad(option) {
|
// option.id = 1
|
if (option.id) {
|
this.id = option.id
|
getDetail({
|
id: option.id
|
}).then(res => {
|
if (res.code == 200) {
|
this.detail = res.data
|
}
|
})
|
}
|
},
|
methods: {
|
problemReports() {
|
problemReport({
|
comment: this.content,
|
complaintId: this.id
|
}).then(res => {
|
if (res.code == 200) {
|
uni.showToast({
|
icon: 'none',
|
title: '上报成功'
|
})
|
|
setTimeout(() => {
|
uni.navigateBack({
|
delta: 2
|
})
|
}, 1500)
|
}
|
})
|
},
|
},
|
}
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
.problem-report-page {
|
padding-top: 38.46rpx;
|
margin: 0 30.77rpx;
|
|
.info-cards {
|
padding: 21.15rpx 26.92rpx 36.54rpx 26.92rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 100%);
|
border-radius: 19rpx;
|
|
.info-top {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.num {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 23rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 33rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
|
.status {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 23rpx;
|
color: #FF4948;
|
line-height: 33rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
|
}
|
|
.address {
|
margin: 32.69rpx 13.46rpx 30.77rpx 13.46rpx;
|
display: flex;
|
justify-content: space-between;
|
// height: 106rpx;
|
background: linear-gradient( 270deg, rgba(255,241,0,0.5) 0%, rgba(255,249,172,0.25) 48%, rgba(255,255,255,0.2) 100%, #FFFFFF 100%);
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 19rpx;
|
align-items: center;
|
padding: 38.46rpx 26.92rpx 36.54rpx 26.92rpx;
|
|
.adr {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #000000;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
|
}
|
|
.table-head {
|
display: flex;
|
text-align: center;
|
|
.type {
|
text-align: left;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #000000;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
|
.person {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #000000;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
|
.phone {
|
font-family: PingFang-SC, PingFang-SC;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #000000;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
}
|
|
.table-item {
|
display: flex;
|
display: flex;
|
text-align: center;
|
margin-top: 8rpx;
|
|
.tip {
|
width: calc(108rpx - 30.77rpx - 30.77rpx);
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 23rpx;
|
color: #FAAD14;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
padding: 1.92rpx 30.77rpx;
|
background: #FFFBE6;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 8rpx;
|
border: 2rpx solid #FFF1B8;
|
}
|
|
.person-item {
|
font-family: PingFang-SC, PingFang-SC;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #000000;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
|
.phone-item {
|
font-family: PingFang-SC, PingFang-SC;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #000000;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
}
|
|
|
}
|
|
.input-card {
|
// width: 688rpx;
|
min-height: calc(504rpx - 34.62rpx - 38.46rpx);
|
padding: 34.62rpx 30.77rpx 38.46rpx 30.77rpx;
|
border-radius: 19rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
margin-top: 38.46rpx;
|
|
.title {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
}
|
|
.notice-tip {
|
margin-top: 38.46rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 27rpx;
|
color: #FF4948;
|
line-height: 42rpx;
|
}
|
|
|
.btn {
|
position: fixed;
|
bottom: calc(38.46rpx + env(safe-area-inset-bottom));
|
left: 0;
|
right: 0;
|
width: 688rpx;
|
height: 96rpx;
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
border-radius: 48rpx;
|
margin: 0 auto;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 35rpx;
|
color: #FFFFFF;
|
}
|
}
|
</style>
|
