|
|
@@ -0,0 +1,596 @@
|
|
|
+<template>
|
|
|
+ <zj-page-layout :hasFooter="true">
|
|
|
+ <view class="all-container">
|
|
|
+ <view class="info-container card mt30" v-if="orderDetail">
|
|
|
+ <view class="common-title"><text>工单信息</text></view>
|
|
|
+ <view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">订单编号</view>
|
|
|
+ <view class="value">{{ orderDetail.id }}</view>
|
|
|
+ <view class="ctrl" @tap="$copy(orderDetail.id)">复制</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">客户名称</view>
|
|
|
+ <view class="value">{{ orderDetail.userName }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">客户电话</view>
|
|
|
+ <view class="value">{{ orderDetail.userMobile }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">客户地址</view>
|
|
|
+ <view class="value">
|
|
|
+ {{ orderDetail.province || '' }}{{ orderDetail.city || '' }}{{ orderDetail.area || ''
|
|
|
+ }}{{ orderDetail.street || '' }}{{ orderDetail.address || orderDetail.gpsAddress }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+
|
|
|
+ <view class="mt30 remark-container">
|
|
|
+ <view class="common-title"
|
|
|
+ ><text><text>*</text>申请理由</text></view
|
|
|
+ >
|
|
|
+ <u--textarea
|
|
|
+ v-model="remarkVal"
|
|
|
+ :disabled="type == 'view'"
|
|
|
+ placeholder="请输入备注内容"
|
|
|
+ fixed
|
|
|
+ border="none"
|
|
|
+ height="120"
|
|
|
+ ></u--textarea>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+
|
|
|
+ <view class="mt30 remark-container">
|
|
|
+ <view class="common-title"
|
|
|
+ ><text><text>*</text>问题描述</text></view
|
|
|
+ >
|
|
|
+ <u--textarea
|
|
|
+ v-model="remarkVal2"
|
|
|
+ :disabled="type == 'view'"
|
|
|
+ placeholder="请输入备注内容"
|
|
|
+ fixed
|
|
|
+ border="none"
|
|
|
+ height="120"
|
|
|
+ ></u--textarea>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+
|
|
|
+ <view class="mt30 image-container">
|
|
|
+ <view class="common-title"
|
|
|
+ ><text><text>*</text>环境照片(最多15张)</text></view
|
|
|
+ >
|
|
|
+ <view class="images">
|
|
|
+ <block v-for="(item, index) in imageList" :key="index">
|
|
|
+ <view class="img">
|
|
|
+ <image :src="item.url" mode="aspectFill" @tap="prevImg(item.url)"></image>
|
|
|
+ <text v-if="type !== 'view'" class="iconfont icon-guanbi1" @tap="delImage(index)"></text>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <view class="add" @tap="addImage" v-if="imageList.length < 15 && type !== 'view'">
|
|
|
+ <text class="iconfont icon-xiangji"></text>
|
|
|
+ <text class="text">添加图片</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+ <!-- -->
|
|
|
+
|
|
|
+ <view
|
|
|
+ class="info-container card mt30"
|
|
|
+ v-if="oldData.workerInvolveApplyItems && oldData.workerInvolveApplyItems.length"
|
|
|
+ >
|
|
|
+ <view class="common-title">
|
|
|
+ <text>审核信息</text>
|
|
|
+ <text style="color: orange">
|
|
|
+ {{ returnText(oldData.workerInvolveApplyItems[0]) }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">申请时间</view>
|
|
|
+ <view class="value">{{ oldData.createTime }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">审批费用</view>
|
|
|
+ <view class="value">{{
|
|
|
+ oldData.workerInvolveApplyItems[0].maintenancePricePass ||
|
|
|
+ oldData.workerInvolveApplyItems[0].websitMaintenancePricePass
|
|
|
+ }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">审批时间</view>
|
|
|
+ <view class="value">{{
|
|
|
+ oldData.workerInvolveApplyItems[0].auditTime || oldData.workerInvolveApplyItems[0].websitAuditTime
|
|
|
+ }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">审批备注</view>
|
|
|
+ <view class="value"
|
|
|
+ >{{ oldData.workerInvolveApplyItems[0].remark || oldData.workerInvolveApplyItems[0].websitRemark }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <template slot="footer">
|
|
|
+ <view class="footer-btn-group" v-if="['sub'].includes(type)">
|
|
|
+ <u-button text="确定" type="primary" size="large" @click="submitData"></u-button>
|
|
|
+ </view>
|
|
|
+ <view class="footer-btn-group" v-if="['shenhe'].includes(type)">
|
|
|
+ <u-button text="重新申请" type="primary" size="large" @click="shenheapi"></u-button>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </zj-page-layout>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { uploadImgFull } from '@/common/utils/util.js'
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ remarkVal: '',
|
|
|
+ remarkVal2: '',
|
|
|
+ imageList: [],
|
|
|
+ orderDetail: null,
|
|
|
+ canClickBtn: true,
|
|
|
+ oldData: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async onLoad({ id, type }) {
|
|
|
+ this.id = id
|
|
|
+ this.type = type
|
|
|
+ this.getOrderDetail()
|
|
|
+ if (['shenhe', 'view'].includes(this.type)) {
|
|
|
+ this.$api
|
|
|
+ .post('/workerApply/detail', {
|
|
|
+ orderBaseId: this.id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.oldData = res.data
|
|
|
+ this.remarkVal = res.data.reason
|
|
|
+ this.remarkVal2 = res.data.problemDescription
|
|
|
+ this.imageList = res.data.image.split(',').map(url => ({ url }))
|
|
|
+ })
|
|
|
+ .catch(res => {})
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ returnText(data) {
|
|
|
+ return { 1: '待网点审核', 2: '驳回重申', 3: '待中心审核', 4: '驳回禁止申诉', 5: '通过审核' }[
|
|
|
+ data.status || data.websitStatus
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ // 获取详情
|
|
|
+ getOrderDetail() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.$api
|
|
|
+ .post('/pg/order/base/detail', {
|
|
|
+ orderBaseId: this.id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.orderDetail = res.data
|
|
|
+ resolve(1)
|
|
|
+ })
|
|
|
+ .catch(res => {
|
|
|
+ reject(0)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 添加图片
|
|
|
+ async addImage() {
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 6 - this.imageList.length,
|
|
|
+ success: res => {
|
|
|
+ uni.showLoading()
|
|
|
+ res.tempFilePaths.forEach(async item => {
|
|
|
+ let data = await uploadImgFull(item)
|
|
|
+ this.imageList.push(data)
|
|
|
+ })
|
|
|
+ uni.hideLoading()
|
|
|
+ },
|
|
|
+ fail: err => {}
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除图片
|
|
|
+ delImage(index) {
|
|
|
+ this.imageList.splice(index, 1)
|
|
|
+ },
|
|
|
+
|
|
|
+ //预览图片
|
|
|
+ prevImg(current) {
|
|
|
+ uni.previewImage({
|
|
|
+ current,
|
|
|
+ urls: this.imageList.map(item => {
|
|
|
+ return item.url
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 提交
|
|
|
+ async submitData() {
|
|
|
+ if (!this.canClickBtn) return this.$toast('请勿频繁操作')
|
|
|
+ this.canClickBtn = false
|
|
|
+ setTimeout(() => {
|
|
|
+ this.canClickBtn = true
|
|
|
+ }, 3000)
|
|
|
+
|
|
|
+ var params = {
|
|
|
+ orderBaseId: this.id
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.remarkVal) {
|
|
|
+ return this.$toast('请填写申请理由')
|
|
|
+ } else {
|
|
|
+ params.reason = this.remarkVal
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.remarkVal2) {
|
|
|
+ return this.$toast('请填写问题描述')
|
|
|
+ } else {
|
|
|
+ params.problemDescription = this.remarkVal2
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.remarkVal2) {
|
|
|
+ return this.$toast('请上传环境照片')
|
|
|
+ } else {
|
|
|
+ params.image = this.imageList
|
|
|
+ .map(item => {
|
|
|
+ return item.url
|
|
|
+ })
|
|
|
+ .join(',')
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$api
|
|
|
+ .postJson('/workerApply/add', {
|
|
|
+ ...params
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.canClickBtn = true
|
|
|
+ this.submitSuccess()
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ async shenheapi() {
|
|
|
+ if (!this.canClickBtn) return this.$toast('请勿频繁操作')
|
|
|
+ this.canClickBtn = false
|
|
|
+ setTimeout(() => {
|
|
|
+ this.canClickBtn = true
|
|
|
+ }, 3000)
|
|
|
+
|
|
|
+ var params = {
|
|
|
+ id: this.oldData.id,
|
|
|
+ orderBaseId: this.id
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.remarkVal) {
|
|
|
+ return this.$toast('请填写申请理由')
|
|
|
+ } else {
|
|
|
+ params.reason = this.remarkVal
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.remarkVal2) {
|
|
|
+ return this.$toast('请填写问题描述')
|
|
|
+ } else {
|
|
|
+ params.problemDescription = this.remarkVal2
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.remarkVal2) {
|
|
|
+ return this.$toast('请上传环境照片')
|
|
|
+ } else {
|
|
|
+ params.image = this.imageList
|
|
|
+ .map(item => {
|
|
|
+ return item.url
|
|
|
+ })
|
|
|
+ .join(',')
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$api
|
|
|
+ .postJson('/workerApply/update', {
|
|
|
+ ...params
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.canClickBtn = true
|
|
|
+ this.submitSuccess()
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ submitSuccess(tab = '') {
|
|
|
+ this.$successToast('提交成功')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$navToPage(
|
|
|
+ {
|
|
|
+ delta: 1
|
|
|
+ },
|
|
|
+ 'navigateBack'
|
|
|
+ )
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.all-container {
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.common-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ text {
|
|
|
+ text {
|
|
|
+ color: $minor-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.type-container {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 0 30rpx;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: calc((100% - 30rpx) / 3);
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background: #f4f5f9;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: $theme-color;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.date-conteiner {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 30rpx 30rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 50rpx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ margin-right: 30rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: $error-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .picker {
|
|
|
+ .placeholder {
|
|
|
+ color: $sec-font;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ margin-left: 12rpx;
|
|
|
+ color: $sec-font;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.over-container {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 10rpx 30rpx;
|
|
|
+
|
|
|
+ .row {
|
|
|
+ height: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: $minor-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .u-icon {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ ::v-deep .u-button {
|
|
|
+ height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.sign-container {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 0 30rpx 30rpx;
|
|
|
+
|
|
|
+ .empty {
|
|
|
+ height: 200rpx;
|
|
|
+ background: #f4f5f9;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ color: $sec-font;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 200rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ position: absolute;
|
|
|
+ right: -10rpx;
|
|
|
+ top: -10rpx;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #ff3f42;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.remark-container {
|
|
|
+ padding: 1rpx 30rpx 30rpx;
|
|
|
+ background: #ffffff;
|
|
|
+
|
|
|
+ ::v-deep .u-textarea {
|
|
|
+ background: #f4f5f9;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.image-container {
|
|
|
+ padding: 1rpx 30rpx 30rpx;
|
|
|
+ background: #ffffff;
|
|
|
+
|
|
|
+ .images {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .add {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 146rpx;
|
|
|
+ height: 146rpx;
|
|
|
+ border: 2rpx dashed #dadada;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 48rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ &:nth-child(4n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ position: absolute;
|
|
|
+ right: -10rpx;
|
|
|
+ top: -10rpx;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #ff3f42;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.info-container {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 30rpx;
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: $sec-font;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ctrl {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: $theme-color;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// .card {
|
|
|
+// @include zj-card;
|
|
|
+// }
|
|
|
+</style>
|
linwenxin