<template>
|
<view class="content">
|
<view class="topColor">
|
</view>
|
<view class="allContent">
|
<view class="topStatus">
|
<view class="status">
|
{{ ['正在办理', '延期办理', '超时办理', '已办结 ', '群众撤销', '上报待审核', '上级驳回', '延期待审核', '已办结'][orderInfo.status] || '' }}
|
</view>
|
<view class="flex a-center j-between mb-17">
|
<view class="tit">当前状态</view>
|
<!-- 延期状态 -->
|
<view v-if="orderInfo.status == 1 " class="flex a-center" @click.stop="toDelayDetail()">
|
<image src="../../static/detailImg/explain.png" class="plainIcon shrink0"></image>
|
<view class="explain">延期情况说明</view>
|
</view>
|
<!-- 超时状态 -->
|
<view v-if="orderInfo.status == 2" class="flex a-center">
|
<image src="../../static/detailImg/notice.png" class="overTimeIcon shrink0"></image>
|
<view class="overTime">已超时</view>
|
<view class="day">{{ orderInfo.createByName || 0 }}</view>
|
<view class="overTime">天</view>
|
</view>
|
|
</view>
|
</view>
|
<!-- 已完结诉求信息 已办结-->
|
<view class="mt-19 flex a-center j-between topMore" v-if="orderInfo.status == 3">
|
<view class="name">诉求信息</view>
|
<view class="flex a-center" @click.stop="toProgressDetail">
|
<view class="more">办理进度</view>
|
<image src="../../static/detailImg/right1.png" class="moreIcon shrink0"></image>
|
</view>
|
</view>
|
|
<!-- 上级驳回 -->
|
<view class="mt-19 flex a-center j-between topMore" v-if="orderInfo.status == 6">
|
<view class="name">上报情况</view>
|
</view>
|
|
<!-- 上报后的状态 -->
|
<view class="card1" v-if="[6, 7, 5].includes(orderInfo.status)">
|
<!-- 上报上级上级驳回-->
|
<view class="flex j-between" v-if="orderInfo.status == 6">
|
<view class="flex flex-column a-center mr-46">
|
<image src="../../static/detailImg/Ovaled.png" class="topIcon shrink0"></image>
|
<view class="proLine">
|
</view>
|
</view>
|
<view class="infoCard mb-46">
|
<view class="flex j-between">
|
<view class="label">审核时间</view>
|
<view class="value">{{ orderInfo.auditTime | formatTime }}</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">审核人</view>
|
<view class="value">{{ orderInfo.auditorName || '' }}</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">联系电话</view>
|
<view class="flex a-center">
|
<view class="value">{{ orderInfo.auditorPhone || '' }}</view>
|
<image @click.stop="callPhone(orderInfo.contactNumber)" src="../../static/tell.png"
|
class="w-58 h-58 shrink0 " />
|
</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">驳回原因</view>
|
<view class="value">{{ orderInfo.rejectReason || '' }}</view>
|
</view>
|
</view>
|
</view>
|
<!-- 上报待上级审核--待审核状态显示 -->
|
<view class="flex j-between">
|
<view class="flex flex-column mr-46">
|
<image src="../../static/detailImg/Ovaled.png" class="topIcon shrink0"></image>
|
</view>
|
<view class="infoCard">
|
<view class="flex j-between">
|
<view class="label">上报人</view>
|
<view class="value">{{ orderInfo.reporter || '' }}</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">联系电话</view>
|
<view class="flex a-center">
|
<view class="value">{{ orderInfo.reporterPhone || '' }}</view>
|
<image @click.stop="callPhone(orderInfo.contactNumber)" src="../../static/tell.png"
|
class="w-58 h-58 shrink0 " />
|
</view>
|
</view>
|
<view class="flex j-between" v-if="isParty">
|
<view class="label">所属部门</view>
|
<view class="value">{{ orderInfo.departmentName || "" }}</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">上报时间</view>
|
<view class="value">{{ orderInfo.reportTime | formatTime }}</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">上报说明</view>
|
<view class="value">{{ orderInfo.comment || '' }}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- -->
|
<view class="cardInfo">
|
<view class="flex j-between a-center">
|
<view class="title">诉求号：{{ orderInfo.serialNumber || '' }}</view>
|
<view class="flex a-center"
|
v-if="(orderInfo.status == 0||orderInfo.status == 6)&&orderInfo.listControlsButtonStatus == 0"
|
@click.stop="applyOverTime">
|
<view class="apply">延期申请</view>
|
<image src="../../static/detailImg/right.png" class="rightIcon shrink0"></image>
|
</view>
|
</view>
|
<view class="addressCard">
|
<view class="address">{{ orderInfo.location || "" }}</view>
|
<image src="../../static/detailImg/dwei.png" class="addressIcon shrink0" mode="aspectFill"></image>
|
</view>
|
<view class="flex j-between">
|
<view class="label">创建时间</view>
|
<view class="value">{{ orderInfo.createTime | formatTime }}</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">问题类型</view>
|
<view class="value">{{ orderInfo.problemType || '' }}</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">群众姓名</view>
|
<view class="value">{{ orderInfo.name || '' }}</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label"> 联系电话</view>
|
<view class="flex a-center">
|
<view class="value">{{ orderInfo.contactNumber || '' }}</view>
|
<image @click.stop="callPhone(orderInfo.contactNumber)" src="../../static/tell.png"
|
class="w-58 h-58 shrink0 " />
|
</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">详细地址</view>
|
<view class="value">{{ orderInfo.detailedAddress || '' }}</view>
|
</view>
|
<!-- 上级端需要的字段 -->
|
<view v-if="!isParty">
|
<view class="flex j-between">
|
<view class="label">录入人</view>
|
<view class="value">{{ orderInfo.reportUserName || '' }}</view>
|
</view>
|
<view class="flex j-between">
|
<view class="label">录入人联系方式</view>
|
<view class="flex a-center">
|
<view class="value">{{ orderInfo.reportUserPhone || '' }}</view>
|
<image @click.stop="callPhone(orderInfo.reportUserPhone)" src="../../static/tell.png"
|
class="w-58 h-58 shrink0 " />
|
</view>
|
</view>
|
</view>
|
|
<!-- 上级端需要的字段-->
|
</view>
|
|
<!-- 问题描述 -->
|
<view class="problem">
|
<view class="title">问题描述</view>
|
<view v-for="(item,index) in getVoiceFile(orderInfo.voiceFile)" :key="index"
|
class="flex a-center j-between py-17 px-19 br-8 bgcolor1 mb-19">
|
<view class="fs-27 lh-38">语音名字{{(index + 1) | numToWords}}</view>
|
<image v-if="!playFlag" @click.stop="playRecording(item)" src="../../static/24gf-playCircle@2x.png"
|
class="w-27 h-27 shrink0" />
|
<image v-else @click.stop="pausePlaying" src="../../static/pausePlaying.png"
|
class="w-27 h-27 shrink0" />
|
</view>
|
<view class="desc">
|
<!-- <view class="top">{{ orderInfo.descriptionTitle || "" }}</view> -->
|
<!-- <view class="line1"></view> -->
|
<view class="context">{{ orderInfo.descriptionContent || '' }}</view>
|
|
</view>
|
<view class="title">描述图片</view>
|
<view class="descPic" v-if="problemImg.length > 0">
|
<view class="picItem" v-for="(item, index) in problemImg" @click.stop="viewImage(item)">
|
<image :src="item" class="img shrink0" mode="aspectFill">
|
</image>
|
</view>
|
</view>
|
<view v-else class="noData">暂无数据</view>
|
<view class="title">描述视频</view>
|
<view class="descPic" v-if="problemVideos.length > 0">
|
<view class="picItem relative" v-for="(item, index) in problemVideos">
|
<video id="myVideo" class="videoImg shrink0" disabled :controls="false"
|
:show-center-play-btn="false" :src="item">
|
</video>
|
<view class="videoOpen" @click.stop="openVideo(item)">
|
<image src="../../static/detailImg/open.png" class="video shrink0" mode="aspectFill">
|
</image>
|
</view>
|
</view>
|
</view>
|
<view v-else class="noData">暂无数据</view>
|
</view>
|
|
<!-- 办结情况 -->
|
<view class=" flex a-center j-between topMore topMore1" v-if="orderInfo.status == 3">
|
<view class="name">办结情况</view>
|
<view class="flex a-center">
|
</view>
|
</view>
|
<!-- 办结结果描述 -->
|
<view class="resultDesc" v-if="orderInfo.status == 3">
|
<view class="topInfo">
|
<view class="flex a-center j-between mb-15">
|
<view class="flex a-center">
|
<view class="name shrink0">办结人员：</view>
|
<view class="value">{{ orderInfo.completionUsername || '' }}</view>
|
</view>
|
<view class="flex a-center">
|
<view class="name shrink0">联系电话：</view>
|
<view class="flex a-center">
|
<view class="value">{{ orderInfo.completionUserPhone || '' }}</view>
|
<image @click.stop="callPhone(orderInfo.completionUserPhone)"
|
src="../../static/tell.png" class="w-58 h-58 shrink0 " />
|
</view>
|
</view>
|
</view>
|
<view class="flex a-center">
|
<view class="name">办结时间：</view>
|
<view class="value">{{ orderInfo.completionTime | formatTime }}</view>
|
</view>
|
</view>
|
<view class="title">办结结果描述</view>
|
<view class="context">{{ orderInfo.completionDescription || '' }}
|
</view>
|
<view class="title">描述图片</view>
|
<view class="descPic" v-if="resultImg.length > 0">
|
<view class="picItem" v-for="(item, index) in resultImg" @click.stop="viewImage(item)" :key="index">
|
<image :src="item" class="img shrink0" mode="aspectFill">
|
</image>
|
</view>
|
</view>
|
<view v-else class="noData">暂无数据</view>
|
<view class="title">描述视频</view>
|
<view class="descPic" v-if="resultVideos.length > 0">
|
<view class="picItem relative" v-for="(item, index) in resultVideos" :key="index">
|
<video id="myVideo" class="videoImg shrink0" disabled :controls="false"
|
:show-center-play-btn="false" :src="item">
|
</video>
|
<view class="videoOpen" @click.stop="openVideo(item)">
|
<image src="../../static/detailImg/open.png" class="video shrink0" mode="aspectFill">
|
</image>
|
</view>
|
</view>
|
</view>
|
<view v-else class="noData">暂无数据</view>
|
</view>
|
|
<!-- 详情/办理进度 -正在办理-延期-超时 显示-->
|
<view class="progress" v-if="[0, 1, 2].includes(orderInfo.status) && progressesList.length > 0">
|
<view class="title">当前办理进度</view>
|
<view class="proCard">
|
<view class="proItem" v-for="(item, index) in progressesList">
|
<view class="mr-31 flex flex-column a-center">
|
<image src="../../static/detailImg/Ovaled.png" class="proIcon shrink0" mode="aspectFill">
|
</image>
|
<view class="proLine">
|
</view>
|
</view>
|
<view class="flex1">
|
<view class="flex a-center j-between mb-10">
|
<view class="name">{{ item.createByName || '' }}</view>
|
<view class="time">{{ item.createTime | formatTime }}</view>
|
</view>
|
<view class="context">{{ item.describe || '' }}</view>
|
<view class="proImg">
|
<view class="imgOrVedio" v-for="(ite, ind) in item.imgList"
|
@click.stop="viewImage(ite)">
|
<image :src="ite" class="img shrink0" mode="aspectFill">
|
</image>
|
</view>
|
<view class="imgOrVedio" v-for="(ite, ind) in item.videoList">
|
<video id="myVideo" class="videoImg shrink0" disabled :controls="false"
|
:show-center-play-btn="false" :src="ite">
|
</video>
|
<view class="videoOpen" @click.stop="openVideo(ite)">
|
<image src="../../static/detailImg/open.png" class="video shrink0"
|
mode="aspectFill">
|
</image>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 详情/诉求流转 -正在办理显示-->
|
<view class="careRequire" v-if="orderInfo.status == 0 && flowsList.length > 0">
|
<view class="title">诉求流转</view>
|
<view class="proCard">
|
<view class="proItem" v-for="(item, index) in flowsList">
|
<view class="mr-34 flex flex-column a-center">
|
<image v-if="index == flowsList.length - 1" src="../../static/detailImg/Ovaled.png"
|
class="proIcon shrink0" mode="aspectFill">
|
</image>
|
<image v-else src="../../static/detailImg/Ovaled.png" class="proIcon shrink0"
|
mode="aspectFill">
|
</image>
|
|
<view v-if="index != flowsList.length - 1" class="proLine">
|
</view>
|
</view>
|
<view class="requireItem">
|
<view class="flex a-center j-between mb-23">
|
<view class="name">{{ item.name || '' }}</view>
|
<view class="time">
|
{{ item.createTime | formatTime }}
|
</view>
|
</view>
|
<view class="name fs-23">
|
{{ item.type == 0 ? "上报" : '下派' }}
|
</view>
|
|
</view>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
|
<!-- 上级显示 -->
|
<view class="btnButtom" v-if="(!isParty)&&orderInfo.listControlsButtonStatus == 0">
|
<view class="btnDown" @click.stop="toUp" v-if="userInfo.accountLevel > 1"
|
:class="[2, 3].includes(userInfo.accountLevel) ? '' : 'partyUp'">问题上报</view>
|
<view class="btnDown" @click.stop="toDown" v-if="userInfo.accountLevel < 4"
|
:class="[2, 3].includes(userInfo.accountLevel) ? '' : 'partyDown'">诉求下派</view>
|
<view class="btnAdd" @click="addProgress">添加办理进度</view>
|
<view class="btnAdd" @click="resultEntery">办理结果录入</view>
|
</view>
|
<view class="btnButtom" v-if="orderInfo.auditButtonStatus == 0">
|
<view class="cancel" @click.stop="showPop = true">驳回</view>
|
<view class="sure" @click.stop="submitReSolve">审核通过</view>
|
</view>
|
<!-- 上级显示 -->
|
|
<!-- 党员显示 -->
|
<view class="btnButtom" v-if=" isParty && orderInfo.listControlsButtonStatus == 0">
|
<view class="btnDown partyUp" @click.stop="toUp">问题上报</view>
|
<view class="btnAdd partyDown" @click="addProgress">添加办理进度</view>
|
<view class="btnAdd partyDown" @click="resultEntery">办理结果录入</view>
|
</view>
|
<!-- 党员并且属于本人工单上报 -->
|
<view class="btnButtom" v-if="isParty && orderInfo.status == 5 && !orderInfo.withdrawButtonStatus">
|
<view class="btnAdd w100 txt-center" @click="revocation">撤回</view>
|
</view>
|
<!-- 党员显示 -->
|
<!-- v-if="[3].includes(orderInfo.status)" -->
|
<view class="btnButtom" v-if="orderInfo.evaluateButtonStatus == 0">
|
<view class=" btnAdd evaluate" @click.stop="toEvaluate">评价</view>
|
</view>
|
<view class="btnButtom" v-if="orderInfo.status == 8">
|
<view class=" btnAdd w100 txt-center" @click.stop="toDetailEvaluate">查看评价</view>
|
</view>
|
|
|
|
|
<u-popup round="19rpx" :show="showPop" mode="center" @close="close" @open="open" zIndex="998">
|
<view class="popup-content">
|
<view class="title-pop">操作驳回</view>
|
<view class="pop-textArea">
|
<u--textarea v-model="rejectText" placeholder="请输入驳回原因"></u--textarea>
|
</view>
|
<view class="botton-btn">
|
<view class="cancle" @click.stop="showPop = false">取消</view>
|
<view class="sure" @click.stop="submitReject">确定</view>
|
</view>
|
</view>
|
</u-popup>
|
|
<CustomPopup ref="customPopup" :isOneBtn="true" @comfirm="comfirm">
|
<view class="txt-center fs-31 lh-42 pt-44 pb-35 color5">
|
确认撤回当前审批操作吗
|
</view>
|
</CustomPopup>
|
</view>
|
</template>
|
|
<script>
|
import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js'
|
import {
|
workOrderDetail,
|
getUserInfo,
|
reportAudit,
|
delayAudit,
|
revoke
|
} from './service.js'
|
import {
|
mapActions,
|
mapState
|
} from "vuex";
|
export default {
|
data() {
|
return {
|
id: "1", //工单详情ID
|
orderInfo: {}, //工单详情
|
problemVideos: [], //描述视频
|
problemImg: [], //描述图片
|
resultVideos: [], //结果描述视频
|
resultImg: [], //结果描述图片
|
progressesList: [], //诉求流转记录
|
flowsList: [], //办理进度
|
|
showPop: false, //弹窗驳回
|
rejectText: "", //驳回原因
|
|
scoreTopHeight: 0, //距离顶部多高
|
|
userInfo: uni.getStorageSync('userInfo'), //个人信息
|
isParty: false, //true 党员 false 管理员
|
};
|
},
|
computed: {
|
...mapState(["playFlag"]),
|
},
|
onPageScroll(e) {
|
this.scoreTopHeight = e.scrollTop
|
|
},
|
filters: {
|
formatTime(val) {
|
if (!val) return ''
|
return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
|
},
|
numToWords(val) {
|
const words = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
|
// 处理 0-10
|
if (val >= 0 && val <= 10) return words[val];
|
// 处理 11-99
|
if (val > 10 && val < 100) {
|
const ten = Math.floor(val / 10);
|
const unit = val % 10;
|
return `${ten > 1 ? words[ten] : ''}十${unit > 0 ? words[unit] : ''}`;
|
}
|
return val; // 超过99返回原数字
|
}
|
},
|
onShow() {
|
// alert(uni.getStorageSync('token'))
|
this.getDetailInfo()
|
},
|
onLoad(params) {
|
if (params.id) {
|
this.id = params.id
|
}
|
this.isParty = uni.getStorageSync('userInfo').identity == 1 ? true : false
|
// getUserInfo().then(res => {
|
// if (res.data == null || res.data.accountLevel == 5) {
|
// this.isParty = true
|
// }
|
// this.userInfo = {
|
// ...res.data
|
// }
|
// })
|
},
|
methods: {
|
...mapActions(["playRecording", "pausePlaying"]),
|
getVoiceFile(voiceFile) {
|
if (!voiceFile || voiceFile.length == 0) return []
|
return voiceFile.split(',')
|
},
|
callPhone(phoneNumber) {
|
uni.makePhoneCall({
|
phoneNumber
|
});
|
},
|
// 确认撤回
|
comfirm() {
|
revoke({
|
complaintId: this.id
|
}).then(res => {
|
this.$refs.customPopup.closePopup()
|
uni.showToast({
|
title: '撤回成功',
|
icon: 'none',
|
mask: true,
|
})
|
this.getDetailInfo()
|
})
|
},
|
// 撤回
|
revocation() {
|
this.$refs.customPopup.showPopup()
|
},
|
open() {},
|
close() {},
|
viewImage(item) {
|
uni.previewImage({
|
urls: [item]
|
})
|
},
|
// 去大屏播放视频
|
openVideo(url) {
|
uni.navigateTo({
|
url: `/pages/work-detail/maxVideo?url=${url}`
|
})
|
},
|
// 获取订单详情信息
|
getDetailInfo() {
|
workOrderDetail({
|
id: this.id
|
}).then(res => {
|
if (res.data.images) {
|
this.problemImg = res.data.images.split(',')
|
}
|
if (res.data.videos) {
|
this.problemVideos = res.data.videos.split(',')
|
}
|
if (res.data.completionImages) {
|
this.resultImg = res.data.completionImages.split(',')
|
}
|
if (res.data.completionVideos) {
|
this.resultVideos = res.data.completionVideos.split(',')
|
}
|
// 办理进度
|
if (res.data.complaintProgresses && res.data.complaintProgresses.length > 0) {
|
this.progressesList = res.data.complaintProgresses.map((item) => {
|
return {
|
...item,
|
imgList: item.imgUrl ? item.imgUrl.split(',') : [],
|
videoList: item.video ? item.video.split(',') : [],
|
}
|
})
|
}
|
// 诉求流转记录
|
if (res.data.complaintFlows && res.data.complaintFlows.length > 0) {
|
this.flowsList = res.data.complaintFlows
|
}
|
|
this.orderInfo = {
|
...res.data
|
}
|
|
})
|
},
|
// 确认驳回
|
submitReject() {
|
if (!this.rejectText) {
|
return uni.showToast({
|
duration: 1500,
|
title: '请输入驳回原因',
|
mask: true,
|
icon: 'none'
|
})
|
}
|
if (this.orderInfo.status == 5) { //上报
|
reportAudit({
|
id: this.id,
|
auditResult: 2,
|
rejectReason: this.rejectText
|
}).then(res => {
|
this.showPop = false
|
// this.getDetailInfo()
|
uni.showToast({
|
title: '操作成功',
|
icon: 'success',
|
mask: true
|
})
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1500)
|
|
})
|
} else { //延期
|
delayAudit({
|
complaintId: this.id,
|
auditResult: 2,
|
rejectReason: this.rejectText
|
}).then(res => {
|
this.showPop = false
|
uni.showToast({
|
title: '操作成功',
|
icon: 'success',
|
mask: true
|
})
|
// this.getDetailInfo()
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1500)
|
})
|
}
|
|
},
|
// 确认通过审批
|
submitReSolve() {
|
if (this.orderInfo.status == 5) { //上报
|
reportAudit({
|
id: this.id,
|
auditResult: 1,
|
}).then(res => {
|
// this.getDetailInfo()
|
uni.showToast({
|
title: '操作成功',
|
icon: 'success',
|
mask: true
|
})
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1500)
|
})
|
} else { //延期
|
delayAudit({
|
complaintId: this.id,
|
auditResult: 1,
|
}).then(res => {
|
uni.showToast({
|
title: '操作成功',
|
icon: 'success',
|
mask: true
|
})
|
// this.getDetailInfo()
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1500)
|
})
|
}
|
},
|
//延期申请
|
applyOverTime() {
|
uni.navigateTo({
|
url: `/pages/work-detail/postpone-apply?id=${this.id}`
|
})
|
},
|
// 问题上报
|
toUp() {
|
uni.navigateTo({
|
url: `/pages/problemReporting/problemReporting?id=${this.id}`
|
})
|
},
|
// 问题下派
|
toDown() {
|
uni.navigateTo({
|
url: `/pages/dispatchWorkOrder/dispatchWorkOrder?id=${this.id}`
|
})
|
},
|
// 去评价
|
toEvaluate() {
|
uni.navigateTo({
|
url: `/pages/evaluate/evaluate?id=${this.id}`
|
})
|
},
|
toDetailEvaluate() {
|
uni.navigateTo({
|
url: `/pages/evaluate/evaluate-detail?id=${this.id}`
|
})
|
},
|
addProgress() {
|
uni.navigateTo({
|
url: `/pages/progress/progress?id=${this.id}`
|
})
|
},
|
resultEntery() {
|
uni.navigateTo({
|
url: `/pages/result-entry/index?id=${this.id}`
|
})
|
},
|
toProgressDetail() {
|
uni.navigateTo({
|
url: '/pages/progress/progress?type=1&id=' + this.id
|
})
|
},
|
toDelayDetail() {
|
uni.navigateTo({
|
url: '/pages/delay/delay?type=1&id=' + this.id
|
})
|
},
|
}
|
}
|
</script>
|
<style>
|
page {
|
background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 6%, #F8F8F8 100%);
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.bgcolor1 {
|
background: #FFF1F4;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.color5 {
|
color: #666160;
|
}
|
|
// 处理 u-popup 组件层级过高,将 uni.showToast 覆盖问题
|
/deep/ .u-transition.u-fade-enter-to.u-fade-enter-active {
|
z-index: 997 !important;
|
}
|
|
.topColor {
|
height: 346rpx;
|
background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 100%);
|
// padding: 176rpx 27rpx 17rpx 27rpx;
|
}
|
|
.allContent {
|
margin-top: -243rpx;
|
padding: 0 31rpx 178rpx 31rpx;
|
|
|
.topStatus {
|
.status {
|
font-weight: 600;
|
font-size: 44rpx;
|
color: #000000;
|
line-height: 62rpx;
|
margin-bottom: 15rpx;
|
}
|
|
.tit {
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 38rpx;
|
// margin-bottom: 17rpx;
|
}
|
|
.plainIcon {
|
width: 36rpx;
|
height: 36rpx;
|
}
|
|
.explain {
|
font-weight: 600;
|
font-size: 23rpx;
|
color: rgba(0, 0, 0, 0.6);
|
line-height: 33rpx;
|
margin-left: 8rpx;
|
}
|
|
.overTimeIcon {
|
width: 30.77rpx;
|
height: 30.77rpx;
|
margin-right: 15rpx;
|
}
|
|
.overTime {
|
font-weight: 400;
|
font-size: 23rpx;
|
color: #FF4948;
|
line-height: 33rpx;
|
}
|
|
.day {
|
margin: -11rpx 12rpx 0 9rpx;
|
background: #FFEAEA;
|
border-radius: 19rpx;
|
border: 2rpx solid #FF4948;
|
padding: 4rpx 24rpx;
|
font-weight: 600;
|
font-size: 42rpx;
|
color: #FF4948;
|
line-height: 42rpx;
|
}
|
}
|
|
.topMore {
|
padding: 8rpx 31rpx;
|
margin: 19rpx -31rpx 0 -31rpx;
|
background: linear-gradient(270deg, rgba(102, 102, 102, 0) 0%, rgba(102, 102, 102, 0.14) 100%);
|
|
.name {
|
font-weight: 600;
|
font-size: 23rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 33rpx;
|
}
|
|
.more {
|
font-weight: 600;
|
font-size: 23rpx;
|
color: rgba(0, 0, 0, 0.6);
|
line-height: 33rpx;
|
}
|
|
.moreIcon {
|
width: 19.23rpx;
|
height: 19.23rpx;
|
margin-left: 15rpx;
|
}
|
}
|
|
.topMore1 {
|
margin-top: 38rpx !important;
|
}
|
|
.card1 {
|
margin-top: 21rpx;
|
|
|
.topIcon {
|
margin-top: 17rpx;
|
width: 26.23rpx;
|
height: 26.23rpx;
|
|
}
|
|
.proLine {
|
flex: 1;
|
width: 4rpx;
|
min-height: 50rpx;
|
background: rgba(0, 0, 0, 0.06);
|
border-radius: 3rpx;
|
}
|
|
.infoCard {
|
flex: 1;
|
background: #FFFFFF;
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.06);
|
padding: 13rpx 30.77rpx 19rpx 31rpx;
|
border-radius: 27rpx;
|
|
.label {
|
font-weight: 400;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 77rpx;
|
}
|
|
.value {
|
max-width: 403rpx;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 77rpx;
|
}
|
}
|
|
}
|
|
.cardInfo {
|
margin-top: 38.46rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 8rpx;
|
padding: 21rpx 31rpx 38rpx 31rpx;
|
border-radius: 27rpx;
|
background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 100%);
|
|
.title {
|
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);
|
}
|
|
.apply {
|
font-weight: 600;
|
font-size: 23rpx;
|
color: #FF4948;
|
line-height: 33rpx;
|
margin-right: 15rpx;
|
}
|
|
.rightIcon {
|
width: 19.23rpx;
|
height: 19.23rpx;
|
}
|
|
.addressCard {
|
margin: 33rpx 10rpx;
|
padding: 33rpx 27rpx;
|
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%);
|
border-radius: 19rpx;
|
display: flex;
|
justify-content: space-between;
|
|
.address {
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #000000;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
|
.addressIcon {
|
width: 23.08rpx;
|
height: 25.64rpx;
|
}
|
}
|
|
.label {
|
font-weight: 400;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 77rpx;
|
}
|
|
.value {
|
max-width: 403rpx;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 77rpx;
|
}
|
|
}
|
|
.problem {
|
border-radius: 27rpx;
|
margin-top: 38.46rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
padding: 0 31rpx 34rpx 31rpx;
|
|
.title {
|
padding-top: 34rpx;
|
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);
|
margin-bottom: 27rpx;
|
}
|
|
.desc {
|
background: #F8F8F8;
|
// box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 8rpx;
|
padding: 29rpx 0 121rpx 0;
|
|
.top {
|
padding: 0 31rpx;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 38rpx;
|
}
|
|
.line1 {
|
margin: 27rpx 0;
|
height: 2rpx;
|
background: rgba(0, 10, 26, 0.07);
|
}
|
|
.context {
|
padding: 0 31rpx;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 38rpx;
|
}
|
}
|
|
.descPic {
|
display: flex;
|
flex-wrap: wrap;
|
|
.picItem {
|
margin-right: 15rpx;
|
|
.img {
|
width: 140.38rpx;
|
height: 140.38rpx;
|
border-radius: 7.69rpx;
|
}
|
}
|
}
|
}
|
|
.progress {
|
border-radius: 27rpx;
|
margin-top: 38.46rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
padding: 34rpx 31rpx;
|
|
.title {
|
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);
|
margin-bottom: 48rpx;
|
}
|
|
.proCard {
|
.proItem {
|
display: flex;
|
padding-bottom: 46rpx;
|
|
.proIcon {
|
width: 26.23rpx;
|
height: 26.23rpx;
|
margin: 10rpx 0;
|
}
|
|
.proLine {
|
flex: 1;
|
width: 4rpx;
|
min-height: 50rpx;
|
background: rgba(0, 0, 0, 0.06);
|
border-radius: 3rpx;
|
}
|
|
|
.name {
|
font-weight: 400;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 38rpx;
|
}
|
|
.time {
|
font-weight: 400;
|
font-size: 23rpx;
|
color: rgba(0, 0, 0, 0.4);
|
line-height: 33rpx;
|
}
|
|
.context {
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 38rpx;
|
}
|
|
.proImg {
|
display: flex;
|
flex-wrap: wrap;
|
|
.imgOrVedio {
|
margin-right: 17rpx;
|
position: relative;
|
|
.videoImg {
|
width: 140.38rpx;
|
height: 140.38rpx;
|
border-radius: 7.69rpx;
|
margin-top: 19rpx;
|
position: relative;
|
}
|
|
.img {
|
width: 140rpx;
|
height: 140rpx;
|
border-radius: 8rpx;
|
margin-top: 19rpx;
|
}
|
|
.videoOpen {
|
position: absolute;
|
top: 10rpx;
|
left: 0;
|
z-index: 99;
|
width: 140rpx;
|
height: 140rpx;
|
border-radius: 8rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.video {
|
z-index: 999;
|
width: 140rpx;
|
height: 140rpx;
|
}
|
}
|
}
|
}
|
}
|
|
.proItem:last-child {
|
.proLine {
|
display: none;
|
}
|
}
|
}
|
}
|
|
.careRequire {
|
border-radius: 27rpx;
|
margin-top: 38.46rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
padding: 34rpx 31rpx;
|
|
.title {
|
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);
|
margin-bottom: 38rpx;
|
}
|
|
.proCard {
|
.proItem {
|
display: flex;
|
|
|
.proIcon {
|
width: 26.23rpx;
|
height: 26.23rpx;
|
margin: 23rpx 0 19rpx 0;
|
}
|
|
.proLine {
|
flex: 1;
|
width: 4rpx;
|
min-height: 50rpx;
|
background: rgba(0, 0, 0, 0.06);
|
border-radius: 3rpx;
|
}
|
|
.requireItem {
|
flex: 1;
|
background: #F9F9F9;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 8rpx;
|
padding: 31rpx;
|
margin-bottom: 46rpx;
|
|
.name {
|
font-weight: 400;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 38rpx;
|
}
|
|
.time {
|
font-weight: 400;
|
font-size: 23rpx;
|
color: rgba(0, 0, 0, 0.4);
|
line-height: 33rpx;
|
}
|
|
.opt1 {
|
color: rgba(0, 0, 0, 0.10) !important;
|
}
|
}
|
|
|
|
}
|
|
.proItem:last-child {
|
.proLine {
|
display: none;
|
}
|
}
|
}
|
}
|
|
.resultDesc {
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
margin-top: 27rpx;
|
padding: 31rpx 31rpx 31rpx 27rpx;
|
border-radius: 27rpx;
|
|
.topInfo {
|
background: rgba(252, 141, 85, 0.1);
|
border-radius: 8rpx;
|
padding: 19rpx 27rpx;
|
|
.name {
|
font-size: 23rpx;
|
color: #000000;
|
line-height: 33rpx;
|
margin-right: 8rpx;
|
}
|
|
.value {
|
font-size: 23rpx;
|
color: #000000;
|
line-height: 33rpx;
|
}
|
}
|
|
.title {
|
font-weight: 600;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 38rpx;
|
margin-top: 38rpx;
|
margin-bottom: 27rpx;
|
}
|
|
.context {
|
padding: 25rpx 30rpx 29rpx 31rpx;
|
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 38rpx;
|
}
|
|
|
}
|
}
|
|
.descPic {
|
display: flex;
|
flex-wrap: wrap;
|
|
.picItem {
|
margin-right: 15rpx;
|
|
|
.img {
|
width: 140.38rpx;
|
height: 140.38rpx;
|
border-radius: 7.69rpx;
|
}
|
}
|
|
.videoImg {
|
width: 140.38rpx;
|
height: 140.38rpx;
|
border-radius: 7.69rpx;
|
position: relative;
|
}
|
|
.videoOpen {
|
position: absolute;
|
top: 10rpx;
|
left: 0;
|
z-index: 99;
|
width: 140rpx;
|
height: 140rpx;
|
border-radius: 8rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.video {
|
z-index: 999;
|
width: 140rpx;
|
height: 140rpx;
|
}
|
}
|
}
|
|
.noData {
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.40);
|
line-height: 38rpx;
|
}
|
|
#myVideo {
|
z-index: 1;
|
}
|
|
.btnButtom {
|
z-index: 99;
|
position: fixed;
|
bottom: 0;
|
width: 100vw;
|
box-sizing: border-box;
|
padding: 33rpx 31rpx;
|
display: flex;
|
background-color: #ffffff;
|
justify-content: space-between;
|
|
.cancel {
|
background: #FFFFFF;
|
border: 2rpx solid;
|
box-shadow: 0 0 0 5px linear-gradient(270deg, rgba(252, 141, 85, 1), rgba(255, 73, 72, 1));
|
border-image-slice: 1;
|
border-radius: 38rpx;
|
font-size: 27rpx;
|
color: #FF4948;
|
line-height: 38rpx;
|
padding: 19rpx 138rpx;
|
}
|
|
.sure {
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
border-radius: 38rpx;
|
font-size: 27rpx;
|
color: #FFFFFF;
|
line-height: 38rpx;
|
padding: 19rpx 119rpx 19rpx 119rpx;
|
}
|
|
.btnDown {
|
background: #FFFFFF;
|
border: 2rpx solid;
|
box-shadow: 0 0 0 5px linear-gradient(270deg, rgba(252, 141, 85, 1), rgba(255, 73, 72, 1));
|
border-image-slice: 1;
|
border-radius: 38rpx;
|
font-size: 27rpx;
|
color: #FF4948;
|
line-height: 38rpx;
|
padding: 19rpx 13rpx;
|
}
|
|
.btnAdd {
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
border-radius: 38rpx;
|
font-size: 27rpx;
|
color: #FFFFFF;
|
line-height: 38rpx;
|
padding: 19rpx 15rpx 19rpx 15rpx;
|
}
|
|
.partyUp {
|
padding: 19rpx 52rpx !important;
|
}
|
|
.partyDown {
|
padding: 19rpx 25rpx 19rpx 25rpx !important;
|
}
|
|
.evaluate {
|
padding: 19rpx 310rpx;
|
}
|
|
|
}
|
|
.popup-content {
|
background: url('/static/pop@2x.png') no-repeat center center;
|
width: 576.92rpx;
|
// height: 425rpx;
|
border-radius: 19rpx;
|
|
.title-pop {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 35rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 35rpx;
|
text-align: center;
|
margin-top: 46.15rpx;
|
}
|
|
.pop-textArea {
|
padding: 34rpx 44rpx 0 44rpx;
|
|
::v-deep .u-textarea {}
|
|
}
|
|
.pop-label {
|
font-family: PingFang-SC, PingFang-SC;
|
font-weight: 500;
|
font-size: 31rpx;
|
color: rgba(0, 0, 0, 0.6);
|
margin-top: 46.15rpx;
|
margin-left: 64.54rpx;
|
}
|
|
.pop-select {
|
height: 77rpx;
|
background: #FFFFFF;
|
border-radius: 15rpx;
|
border: 2rpx solid rgba(0, 0, 0, 0.15);
|
margin-left: 61.54rpx;
|
margin-top: 19.23rpx;
|
margin-right: 61.54rpx;
|
display: flex;
|
align-items: center;
|
padding-left: 30.77rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 31rpx;
|
color: rgba(0, 0, 0, 0.24);
|
cursor: pointer;
|
}
|
|
.botton-btn {
|
display: flex;
|
margin-top: 44.23rpx;
|
justify-content: center;
|
padding-bottom: 55rpx;
|
}
|
|
.cancle {
|
width: 212rpx;
|
height: 77rpx;
|
border-radius: 48rpx;
|
border: 2rpx solid rgba(0, 0, 0, 0.8);
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.8);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-right: 32.69rpx;
|
cursor: pointer;
|
}
|
|
.sure {
|
width: 212rpx;
|
height: 77rpx;
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
border-radius: 48rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 27rpx;
|
color: #FFFFFF;
|
cursor: pointer;
|
}
|
}
|
|
.preview-full {
|
width: 100vw;
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
background-color: #000000;
|
|
.maxVideo {
|
width: 100%;
|
}
|
}
|
</style>
|
