task#10339,调度app接口对接

src/views/caseList/caseDetail.vue

@@ -16,59 +16,59 @@
        <div>DDA2304142407036</div>
        <div class="map">
          <div class="title">
-           <div><span>司机姓名:</span><span>甜甜圈</span></div>
-           <div><span>车牌号:</span><span>沪A123456</span></div>
+           <div><span>司机姓名:</span><span>{{ detailInfo.driverName }}</span></div>
+           <div><span>车牌号:</span><span>{{ detailInfo.plateNumber }}</span></div>
          </div>
        </div>
        <div class="wiadgeWrap">
           <div class="lineWrap">
             <div class="left">
-              <img class="commonImg" src="@/assets/camer.png">
+              <img class="commonImg" :src="detailInfo.bridgeAbUrl">
               <span class="free">AB(出发段)路桥费</span>
-              <span>30公里</span>
+              <span>{{detailInfo.bridgeAmountAb}}公里</span>
             </div>
             <div class="right">
-              <span>30</span>
+              <span>{{detailInfo.settleMileageAb}}</span>
               <span>元</span>
             </div>
           </div>
           <div class="line"></div>
          <div class="lineWrap">
            <div class="left">
-             <img class="commonImg" src="@/assets/camer.png">
+             <img class="commonImg" :src="detailInfo.bridgeBcUrl">
              <span class="free">BC(出发段)路桥费</span>
-             <span>30公里</span>
+             <span>{{detailInfo.bridgeAmountBc}}公里</span>
            </div>
            <div class="right">
-             <span>30</span>
+             <span>{{detailInfo.settleMileageBc}}</span>
              <span>元</span>
            </div>
          </div>
          <div class="line"></div>
          <div class="lineWrap">
            <div class="left">
-             <img class="commonImg" src="@/assets/camer.png">
+             <img class="commonImg" :src="detailInfo.bridgeCaUrl">
              <span class="free">CA(出发段)路桥费</span>
-             <span>30公里</span>
+             <span>{{detailInfo.bridgeAmountCa}}公里</span>
            </div>
            <div class="right">
-             <span>30</span>
+             <span>{{detailInfo.settleMileageCa}}</span>
              <span>元</span>
            </div>
          </div>
          <div class="line"></div>
          <div class="totalFree">
            <span>总金额</span>
-           <span>130</span>
+           <span>{{ detailInfo.settleMileageAb+detailInfo.settleMileageBc+detailInfo.settleMileageCa }}</span>
            <span>元</span>
          </div>
        </div>
      </div>
      <div class="aduit">
-        <div class="itemWrap aduitResult">
+        <div  :class="{itemWrap : true,aduitResult: detailInfo.secondAudit}">
           <div>
             <span class="star">*</span>
-            <span>{{firstSubmit == 1 ? '审核结果' : '二次审核结果'}}</span>
+            <span>{{detailInfo.secondAudit ? '二次审核结果' : '审核结果'}}</span>
           </div>
           <div class="isJoin">
             <van-radio-group v-model="states" @change="isUse"  class="joinWrap">
@@ -80,8 +80,8 @@
                     :src="props.checked ? activeIcon : inactiveIcon"
                 >
               </van-radio>
-              <van-radio :name="0" class="item">
-                {{firstSubmit == 1 ? '不通过' : '报销失败'}}
+              <van-radio :name="2" class="item">
+                {{detailInfo.secondAudit? '报销失败' : '不通过'}}
                 <img
                     slot="icon"
                     slot-scope="props"
@@ -91,7 +91,7 @@
             </van-radio-group>
           </div>
         </div>
-        <div class="itemWrap">
+        <div class="itemWrap" v-show="states == 2">
          <div>
            <div>
              <span class="star">*</span>
@@ -99,19 +99,18 @@
            </div>
          </div>
          <select id="mySelect" class="mySelect" v-model="other" @change="getValue" >
-           <option value="1">缺失凭证照片</option>
-           <option value="2">申请金额与凭证不一致</option>
-           <option value="3">非正常产生路桥费</option>
-           <option value="4">其他</option>
+           <option value="缺失凭证照片">缺失凭证照片</option>
+           <option value="申请金额与凭证不一致">申请金额与凭证不一致</option>
+           <option value="非正常产生路桥费">非正常产生路桥费</option>
+           <option value="其他">其他</option>
          </select>
        </div>
-        <div v-show="other == 4">
+        <div v-show="other == '其他'">
           <div>其他原因</div>
           <textarea v-model="otherReason" class="multipleTxt" placeholder="描述"></textarea>
         </div>
      </div>
-      <div class="submitBtn">提交</div>
-<!--      <common-btn class="submitBtn"></common-btn>-->
+      <div class="submitBtn" @click="noMultipleClicks(submitHandle)">提交</div>
    </div>
   </div>
 
@@ -119,11 +118,13 @@
 
 <script>
 import {myMixins} from "@/utils/myMixins";
-// import CommonBtn from "@/components/commonBtn.vue"
+import {reimburseOrderDetail,reimburseOrderAudit} from  "@/api/reimbursementBatch"
+import minePosition from "@/assets/minePosition.png";
+import vehiclePosition from "@/assets/vehiclePosition.png";
+import desitationPosition from "@/assets/desitationPosition.png";
 export default {
   name: "caseDetail",
   mixins: [myMixins],
-  // components:{CommonBtn},
   data(){
     return{
       states:'',
@@ -132,26 +133,107 @@ export default {
       otherReason:'',
       other:'',
       firstSubmit:2,
+      id:'',
+      detailInfo:{},
+      noClick:true,
+      state:'',//审核状态
     }
   },
+  created() {
+    this.id = this.$route.params.id;
+  },
+  async mounted(){
+    await this.getOrderDetail()
+    this.$nextTick(() => {
+      this.initMap();
+    });
+  },
   methods:{
+    initMap() {
+      this.map = new AMap.Map('container',{
+        zoom:14,//级别(缩放比例 3-20 )
+        center: [this.detailInfo.apointLongtitude,this.detailInfo.apointLatitude],//中心点坐标
+        viewMode:'2D',//使用3D视图
+      })
+      this.map.on('complete', () => {
+        console.log("地图加载完成")
+        this.mapMarkers();
+      });
+    },
+    mapMarkers(){
+      // 车辆位置，a点
+      let marker = new AMap.Marker({
+        position: [this.detailInfo?.apointLongtitude,this.detailInfo?.apointLatitude
+],
+        icon: new AMap.Icon({
+          image: minePosition, // 图片的相对路径
+          size: new AMap.Size(22, 32),  // 图标的尺寸
+          imageSize: new AMap.Size(22, 32)  // 图片的实际尺寸
+        }),
+      });
+      this.map.add(marker);
+      // 事发地，b点
+      let marker1 = new AMap.Marker({
+        position: [this.detailInfo?.bpointLongtitude,this.detailInfo?.bpointLatitude],
+        icon: new AMap.Icon({
+          image: vehiclePosition, // 图片的相对路径
+          size: new AMap.Size(26, 28),  // 图标的尺寸
+          imageSize: new AMap.Size(26, 28)  // 图片的实际尺寸
+        })
+      });
+      this.map.add(marker1);
+      let marker2 = new AMap.Marker({
+        position: [this.detailInfo?.cpointLongtitude,this.detailInfo?.cpointLatitude],
+        icon: new AMap.Icon({
+          image: desitationPosition, // 图片的相对路径
+          size: new AMap.Size(28, 28),  // 图标的尺寸
+          imageSize: new AMap.Size(28, 28)  // 图片的实际尺寸
+        })
+      });
+      this.map.add(marker2);
+      this.map.setFitView([marker,marker1,marker2])
+    },
+    async submitHandle(){
+      if(!this.states){
+          this.$toast('审核结果必选')
+          return
+      }
+      if(this.states == 1  && !this.other){
+        this.$toast('审核不通过原因必填')
+        return
+      }
+      if(this.other == '其他'  && !this.otherReason){
+        this.$toast('审核不通过原因是其他时审核原因必填')
+        return
+      }
+      let res = await reimburseOrderAudit({
+          id:this.id,
+          state:this.state,
+          auditRemark:this.other=='其他' ? this.other+ '/' + this.otherReason : this.other,
+      })
+      console.log("ressssss",res)
+    },
     getValue(){
       console.log("other",this.other)
     },
     isUse(e){
       this.states=e
+      console.log("this.states",this.states)
+      if(this.states == 1){
+        this.state=2
+      }else if(this.states == 2){
+        if(this.detailInfo.secondAudit){
+          this.state=4
+        }else{
+          this.state=3
+        }
+      }
     },
-    goPageDetail(){
-      console.log("去查看详情")
-      this.$router.push({
-        name: 'caseDetail',  // 目标路由的名称
-        /* params: {
-           id: item.id,                  // 参数对象的属性
-           postfix:item.postfix,
-           index:this.activeIndex,
-           queryTime: this.time || this.queryTime
-         }*/
-      });
+    async getOrderDetail(){
+      let res=await reimburseOrderDetail({
+        id:this.id
+      })
+      this.detailInfo=res.data
     },
   }
 }