task#14072，维保终止弹框更换

src/views/vehicle-maintenance/maintenance-application.vue

@@ -101,7 +101,7 @@
   <div class="btnWrap" v-if="detailInfo.states == 3">
     <div  class="stoping pass" @click="show=true">维保终止</div>
   </div>
-  <van-dialog v-model="show" title="请确认是否终止维保" show-cancel-button @confirm="handleConfirm">
+<!--  <van-dialog v-model="show" title="请确认是否终止维保" show-cancel-button @confirm="handleConfirm">
     <van-field
         type="textarea"
         v-model="reason"
@@ -109,7 +109,17 @@
         placeholder="请输入终止原因"
         class="message"
     />
-  </van-dialog>
+  </van-dialog>-->
+  <div class="dialogWrap" v-if="show">
+    <div class="title">维保终止 </div>
+    <div class="textWrap">
+      <textarea class="ipt" placeholder="请输入终止原因" v-model="reason"></textarea>
+    </div>
+    <div class="btnWrap">
+      <div class="noPass" @click="cancelHandle">取消</div>
+      <div class="pass" @click="handleConfirm">确定</div>
+    </div>
+  </div>
 </div>
 </template>
 
@@ -165,6 +175,10 @@ export default {
       });
 
     },
+    cancelHandle(){
+      this.show=false
+      console.log('this.show0',this.show)
+    },
     async handleConfirm(){
       let res=await vehicleMaintenanceStop({id:this.rowInfo.id, vehicleId:this.rowInfo.vehicleId, auditRemark:this.reason,})
       if (res.code==200){
@@ -235,6 +249,51 @@ export default {
 @import "@/styles/mixin.scss";
 @import "@/styles/common.scss";
 @import "@/styles/approval.scss";
+.dialogWrap{
+  position:absolute ;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  z-index: 111;
+  width: 326px;
+  box-sizing: border-box;
+  height: 180px;
+  background: #F1F5F7;
+  box-shadow: 0px 6px 21px 0px rgba(0,0,0,0.3);
+  border-radius: 6px;
+  .title{
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    background: #E3ECF1;
+    border-radius: 6px 6px 0px 0px;
+    @include fontWeightSize(16px,bold);
+    color: #262628;
+  }
+  .textWrap{
+    width: 100%;
+    box-sizing: border-box;
+    padding: 15px 25px;
+    .ipt{
+      width: 100%;
+      height: 52px;
+      box-sizing: border-box;
+      padding-left: 5px;
+      background: #ECF4F9;
+      border-radius: 3px;
+      border: 1px solid #3364B7;
+      backdrop-filter: blur(10px);
+    }
+  }
+  .btnWrap div{
+    width: 130px;
+    @include all-height(40px);
+  }
+
+}
 ::v-deep .van-field__control{
   border: 1px solid #eee8e8 !important;
 }