积分审核编辑

src/project/fd/AppPointsReview/detail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="detail">
-    <div class="content">
+    <div class="header-content">
       <div class="title-flex">
         <p>{{info.applyItemName}}</p>
         <div :class="`color-${info.status}`">{{ $dict.getLabel('appIntegralApplyEventStatus', info.status) }}</div>
@@ -9,10 +9,34 @@
         <div>申请人：{{info.createUserName}}</div>
         <div>电话号码：<span style="color:#1365DD;" @click="callPhone(info.phone)">{{info.phone}}</span></div>
       </div>
-      <p class="text">{{info.content}}</p>
+    </div>
-      <div class="img-list" v-if="info.files && info.files.length">
+    <div class="content">
-        <!-- <AiUploader type="file" multiple :def.sync="info.files" :disabled="true"></AiUploader> -->
+      <div class="title-flex">
+        <p>申请信息</p>
+        <div style="color:#1365DD;">
+          <span style="margin-right:16px" v-if="isEdit" @click="isEdit=false;getDetail()">取消</span>
+          <span @click="edit">{{isEdit ? '保存' : '编辑'}}</span>
+        </div>
+      </div>
+      <div class="info-flex solid">
+        <div class="label">积分值</div>
+        <div class="value">
+          <u-input type="number" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="40" v-model="info.applyIntegral" maxlength="5" v-if="isEdit"/>
+          <span v-else>{{info.applyIntegral}}</span>
+        </div>
+      </div>
 
+      <div class="info-flex">
+        <div class="label">详情描述</div>
+      </div>
+      <div class="info-textarea" v-if="isEdit">
+        <u-input v-model="info.content" type="textarea" :height="200" auto-height maxlength="300" placeholder="请输入详细描述" />
+        <div class="hint">{{ info.content.length }}/300</div>
+      </div>
+      <p class="text solid" v-else>{{info.content}}</p>
+
+      <AiUploader type="file" multiple :def.sync="info.files" v-if="isEdit" limit="9"></AiUploader>
+      <div class="img-list" v-if="info.files && info.files.length && !isEdit">
         <div v-for="(item, index) in info.files"  :key="index">
           <div v-if="item.postfix == '.mp4'" class="video-item" @click="choose(item)" >
             <img :src="item.facePicture" alt="" class="pic-img">
@@ -21,12 +45,13 @@
           <img :src="item.accessUrl" alt="" @click="previewImages(item.accessUrl)" class="pic-img" v-else>
         </div>
       </div>
+
     </div>
     <div class="pass-info" v-if="info.status == 2">
       <div class="title"><span></span>未通过理由</div>
       <p>{{info.auditDesc}}</p>
     </div>
-    <div class="footer" v-if="info.status == 0">
+    <div class="footer" v-if="info.status == 0 && !isEdit">
       <div class="confirm" @click="agree()">通过</div>
       <div class="cancel" @click="show=true">不通过</div>
     </div>
@@ -59,7 +84,8 @@ export default {
       id: '',
       info: {},
       showVideo: false,
-      videoUrl: ''
+      videoUrl: '',
+      isEdit: false
     };
   },
   onLoad(option) {
@@ -124,6 +150,16 @@ export default {
       this.videoUrl = item.accessUrl
       this.showVideo = true
     },
+    edit() {
+      if(this.isEdit) {
+        this.editConfirm()
+      }else {
+        this.isEdit = true
+      }
+    },
+    editConfirm() {
+
+    }
   },
 };
 </script>
@@ -135,39 +171,43 @@ uni-page-body {
 .detail {
   height: 100%;
   padding-top: 32px;
-  .content {
+  .title-flex {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 32px;
+    p {
+      color: #333;
+      font-size: 34px;
+      font-weight: 600;
+      font-family: "PingFang SC";
+      line-height: 40px;
+      word-break: break-all;
+    }
+    div {
+      font-size: 28px;
+      font-family: "PingFang SC";
+      line-height: 40px;
+      width: 280px;
+      text-align: right;
+      span {
+        display: inline-block;
+      }
+    }
+    .color-0{
+      color: #FF9A40;
+    }
+    .color-1{
+      color: #42D784;
+    }
+    .color-2{
+      color: #cd413aff;
+    }
+  }
+  .header-content {
     background-color: #fff;
     padding: 40px;
     box-sizing: border-box;
-    .title-flex {
+    margin-bottom: 32px;
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 32px;
-      p {
-        color: #333;
-        font-size: 34px;
-        font-weight: 600;
-        font-family: "PingFang SC";
-        line-height: 40px;
-        word-break: break-all;
-      }
-      div {
-        font-size: 28px;
-        font-family: "PingFang SC";
-        line-height: 40px;
-        width: 280px;
-        text-align: right;
-      }
-      .color-0{
-        color: #FF9A40;
-      }
-      .color-1{
-        color: #42D784;
-      }
-      .color-2{
-        color: #cd413aff;
-      }
-    }
     .user-flex {
       display: flex;
       justify-content: space-between;
@@ -176,12 +216,48 @@ uni-page-body {
       font-size: 28px;
       color: #333;
     }
+  }
+  .content {
+    background-color: #fff;
+    padding: 40px;
+    box-sizing: border-box;
+    .info-flex {
+      display: flex;
+      padding: 24px 0;
+      line-height: 40px;
+      box-sizing: border-box;
+      .label {
+        color: #999;
+        vertical-align: top;
+        width: 160px;
+      }
+
+      .value {
+        display: inline-block;
+        width: calc(100% - 160px);
+        word-break: break-all;
+        text-align: right;
+      }
+      
+    }
     .text {
       color: #333;
       font-size: 28px;
       font-family: "PingFang SC";
       line-height: 42px;
-      margin-bottom: 20px;
+      margin-bottom: 32px;
+      padding-bottom: 24px;
+    }
+    .info-textarea{
+      padding: 16px 32px;
+      box-sizing: border-box;
+      border-bottom: 1px solid #ddd;
+      margin-bottom: 32px;
+      .hint {
+        padding: 4px 0 8px 0;
+        text-align: right;
+        color: #999;
+      }
     }
     .img-list {
       div {