|
@@ -0,0 +1,400 @@
|
|
|
+<template>
|
|
|
+ <div class="addRepair">
|
|
|
+ <div class="reportBody">
|
|
|
+ <ul class="detailUl">
|
|
|
+ <li class="detailLi">
|
|
|
+ <span class="liName">当前企业</span>
|
|
|
+ <span class="liInfo">无锡XXXXX有限公司</span>
|
|
|
+ </li>
|
|
|
+ <li class="detailLi">
|
|
|
+ <span class="liName">
|
|
|
+ <span style="color: red;margin-right: 10rpx;">*</span>
|
|
|
+ 您是想
|
|
|
+ </span>
|
|
|
+ <span class="liInfo">
|
|
|
+ <label class="radio" @click.stop="isCheck=true" >
|
|
|
+ <radio value="报事" :checked="isCheck" color="#0365F9"/>报事
|
|
|
+ </label>
|
|
|
+ <label class="radio" @click.stop="isCheck=false" >
|
|
|
+ <radio value="咨询" :checked="!isCheck" color="#0365F9"/>咨询
|
|
|
+ </label>
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ <li class="detailLi2">
|
|
|
+ <span class="liName">
|
|
|
+ 快捷选择
|
|
|
+ </span>
|
|
|
+ <div class="detailLi2Box">
|
|
|
+ <div class="detailLi2BoxTop">
|
|
|
+ <div class="checkItem" :class="item.isCheck?'checked':''" v-for="item in checkList" @click="clickCheck(item)">{{item.name}}</div>
|
|
|
+ </div>
|
|
|
+ <van-field
|
|
|
+ :value="form.contant"
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入文字进行报事报修描述"
|
|
|
+ class="myField"
|
|
|
+ maxlength="800"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="detailLi">
|
|
|
+ <span class="liName">
|
|
|
+ <span style="color: red;margin-right: 10rpx;">*</span>
|
|
|
+ 位置
|
|
|
+ </span>
|
|
|
+ <span class="liInfo">
|
|
|
+ <label class="radio" @click.stop="isCheck2=true" >
|
|
|
+ <radio value="报事" :checked="isCheck2" color="#0365F9"/>室内
|
|
|
+ </label>
|
|
|
+ <label class="radio" @click.stop="isCheck2=false" >
|
|
|
+ <radio value="咨询" :checked="!isCheck2" color="#0365F9"/>公区
|
|
|
+ </label>
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ <li class="detailLi2">
|
|
|
+ <span class="liName">
|
|
|
+ 补充说明
|
|
|
+ <span style="color: #B3B3B3;font-size: 28rpx">(支持图片/视频上传限20M内,最多6张)</span>
|
|
|
+ </span>
|
|
|
+ <div class="detailLi2Box" style="margin: 24rpx 0 0 0">
|
|
|
+ <van-uploader
|
|
|
+ :max-count="6"
|
|
|
+ @delete="deleteRYXXZP"
|
|
|
+ :file-list="fileList"
|
|
|
+ @after-read="uploadRYXXZP"
|
|
|
+ :show-upload="true"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="detailLi">
|
|
|
+ <span class="liName">
|
|
|
+ 报事人
|
|
|
+ </span>
|
|
|
+ <span class="liInfo">
|
|
|
+ 章敏-18915281562 <img src="../parkActivity/image/phoneIcon.png" class="phoneIcon">
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ <li class="detailLi" style="border-bottom: none">
|
|
|
+ <span class="liName">
|
|
|
+ 报事时间
|
|
|
+ </span>
|
|
|
+ <span class="liInfo">
|
|
|
+ 2024-05-16 15:30
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="handleBox">
|
|
|
+ <div class="handleTitle">处理情况</div>
|
|
|
+ <div class="imageBox">
|
|
|
+ <div class="imageItem">
|
|
|
+ <img src="./image/upImage.svg" class="handleImg">
|
|
|
+ <span>上报</span>
|
|
|
+ </div>
|
|
|
+ <img src="./image/arrow.png" class="handleArrow">
|
|
|
+ <div class="imageItem">
|
|
|
+ <img src="./image/acceptance.svg" class="handleImg">
|
|
|
+ <span>受理</span>
|
|
|
+ </div>
|
|
|
+ <img src="./image/arrow.png" class="handleArrow">
|
|
|
+ <div class="imageItem">
|
|
|
+ <img :src="optionsType==='待受理'?require('./image/unHandle.svg'):require('./image/handle.svg')" class="handleImg">
|
|
|
+ <span>处理</span>
|
|
|
+ </div>
|
|
|
+ <img src="./image/arrow.png" class="handleArrow">
|
|
|
+ <div class="imageItem">
|
|
|
+ <img src="./image/evaluate.svg" class="handleImg">
|
|
|
+ <span>评价</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="reportBody">
|
|
|
+ <ul class="detailUl">
|
|
|
+ <li class="detailLi">
|
|
|
+ <span class="liInfo">
|
|
|
+ <label>
|
|
|
+ <radio value="报事" :checked="true" color="#0365F9" />派单
|
|
|
+ </label>
|
|
|
+ <label style="margin-left: 64rpx">
|
|
|
+ <radio value="咨询" :checked="false" color="#0365F9" disabled/>处理
|
|
|
+ </label>
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ <li class="detailLi">
|
|
|
+ <span class="liName">
|
|
|
+ 派单给
|
|
|
+ </span>
|
|
|
+ <span class="liInfo">
|
|
|
+ 李开心
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ <li class="detailLi2">
|
|
|
+ <span class="liName" style="margin-bottom: 16rpx">
|
|
|
+ 备注
|
|
|
+ </span>
|
|
|
+ <van-field
|
|
|
+ :value="form.contant"
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入文字进行报事报修描述"
|
|
|
+ class="myField2"
|
|
|
+ maxlength="800"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="buttonBox">
|
|
|
+ <button class="zcBtn" @tap="closePage" :class="optionsType==='已处理'?'btn2':'btn '">关闭</button>
|
|
|
+ <button class="btn tjBtn" v-if="optionsType==='待受理'">提交派单</button>
|
|
|
+ <button class="btn tjBtn" v-if="optionsType==='待处理'">处理完成</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ isCheck:false,
|
|
|
+ isCheck2:false,
|
|
|
+ form:{
|
|
|
+ contant:''
|
|
|
+ },
|
|
|
+ checkList:[
|
|
|
+ {name:'挂件安装',isCheck:true},
|
|
|
+ {name:'我要投诉',isCheck:false},
|
|
|
+ {name:'疏通管道',isCheck:false},
|
|
|
+ {name:'维修线路',isCheck:false},
|
|
|
+ {name:'更换灯泡',isCheck:false},
|
|
|
+ {name:'网络维修',isCheck:false},
|
|
|
+ {name:'保洁服务',isCheck:false},
|
|
|
+ {name:'其他维修',isCheck:false},
|
|
|
+ ],
|
|
|
+ fileList:[],
|
|
|
+ optionsType:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ console.log(options);
|
|
|
+ this.optionsType = options.type
|
|
|
+ if (options.type==='待处理'){
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: '报修处理',
|
|
|
+ });
|
|
|
+ }else if(options.type==='已处理'){
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: '报修详情',
|
|
|
+ });
|
|
|
+ }else {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: '报修派单',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ // toRecord() {
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url:'/pages/subPackages/reportRepair/repairRecord'
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ closePage() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pages/subPackages/todo/repairAcceptance'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clickCheck(item){
|
|
|
+ item.isCheck = !item.isCheck
|
|
|
+ },
|
|
|
+ deleteRYXXZP(event) {
|
|
|
+ this.fileList.splice(event.detail.index, 1);
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ uploadRYXXZP(event) {
|
|
|
+ console.log(event)
|
|
|
+ let that = this;
|
|
|
+ const { file } = event.detail;
|
|
|
+ uni.uploadFile({
|
|
|
+ url: that.$constant.BASE_URI + "/wx/fileController/upload",
|
|
|
+ filePath: file.url,
|
|
|
+ name: "file",
|
|
|
+ formData: { user: "test" },
|
|
|
+ success(res) {
|
|
|
+ // 上传完成需要更新 fileList
|
|
|
+ let data = JSON.parse(res.data);
|
|
|
+ that.fileList.push({
|
|
|
+ imgUrl: "/FileController/download/" + data.data[0],
|
|
|
+ id: data.data[0],
|
|
|
+ url:
|
|
|
+ that.$constant.BASE_URI +
|
|
|
+ "/FileController/download/" +
|
|
|
+ data.data[0],
|
|
|
+ isImage: true,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail(res) {},
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.addRepair{
|
|
|
+ .reportBody{
|
|
|
+ margin-top: 24rpx;
|
|
|
+ padding: 38rpx 36rpx;
|
|
|
+ background: white;
|
|
|
+ //height: 1416rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .record {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ color: #0365F9;
|
|
|
+ font-size: 32rpx;
|
|
|
+ .recordImg{
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ padding: 5rpx 0 0 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detailUl{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .liName{
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .detailLi{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 32rpx 0;
|
|
|
+ border-bottom: 2rpx solid #E6E6E6;
|
|
|
+ .liInfo{
|
|
|
+ display: inline-block;
|
|
|
+ text-align: right;
|
|
|
+ max-width: 428rpx;
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 38rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .radio{
|
|
|
+ margin-left: 64rpx;
|
|
|
+ }
|
|
|
+ .phoneIcon{
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detailLi2{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 32rpx 0;
|
|
|
+ border-bottom: 2rpx solid #E6E6E6;
|
|
|
+ .detailLi2BoxTop{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 12rpx 0;
|
|
|
+ .checkItem{
|
|
|
+ width: 160rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666666;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #F5F7FA;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin: 12rpx 0;
|
|
|
+ }
|
|
|
+ .checked{
|
|
|
+ background: #0365F9;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-cell {
|
|
|
+ background: #F5F7FA !important;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .buttonBox{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ .btn{
|
|
|
+ width: 240rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ display: flex;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 48rpx 16rpx 150rpx 16rpx;
|
|
|
+ color: white;
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+ text-indent: 2rpx;
|
|
|
+ }
|
|
|
+ .btn2{
|
|
|
+ width: 654rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ display: flex;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 48rpx 48rpx 150rpx 48rpx;
|
|
|
+ color: white;
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+ text-indent: 2rpx;
|
|
|
+ }
|
|
|
+ .zcBtn{
|
|
|
+ background: rgba(0, 0, 0, 0.05);
|
|
|
+ color: rgba(3, 101, 249, 1);
|
|
|
+ &::after{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tjBtn{
|
|
|
+ background: #0365F9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .handleBox{
|
|
|
+ background: white;
|
|
|
+ padding: 32rpx;
|
|
|
+ margin: 24rpx 0;
|
|
|
+ .handleTitle{
|
|
|
+ color: rgba(34, 34, 34, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .imageBox{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 48rpx;
|
|
|
+ .handleImg{
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+ .handleArrow{
|
|
|
+ width: 64rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imageItem{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(34, 34, 34, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|