Browse Source

洗车照片

zhangdan 4 years ago
parent
commit
1abc79b22e
2 changed files with 60 additions and 69 deletions
  1. 4 8
      src/views/Order/OrderCenter.vue
  2. 56 61
      src/views/Order/OrderDetailModal.vue

+ 4 - 8
src/views/Order/OrderCenter.vue

@@ -74,7 +74,6 @@
     </s-table>
     </s-table>
     <!-- 查看详情弹窗 -->
     <!-- 查看详情弹窗 -->
     <order-detail-modal :openModal="openDetailModal" :nowId="detailId" @close="openDetailModal=false" />
     <order-detail-modal :openModal="openDetailModal" :nowId="detailId" @close="openDetailModal=false" />
-    
   </a-card>
   </a-card>
 </template>
 </template>
 
 
@@ -108,7 +107,7 @@
           endDate: null, // 创建的结束时间
           endDate: null, // 创建的结束时间
           storeIdList: [], // 网点名称
           storeIdList: [], // 网点名称
           orderNo: '', // 单号
           orderNo: '', // 单号
-          itemId: '', // 服务项目
+          itemId: undefined, // 服务项目
           customerMobile: '', // 手机号码
           customerMobile: '', // 手机号码
           orderStatus: '' // 状态
           orderStatus: '' // 状态
         },
         },
@@ -120,7 +119,7 @@
         storeOptionData: [], // 网点名称数据
         storeOptionData: [], // 网点名称数据
         openDetailModal: false, // 查看详情弹窗 默认关闭
         openDetailModal: false, // 查看详情弹窗 默认关闭
         detailId: null, // 初始化id
         detailId: null, // 初始化id
-        detailStatus:'',
+        detailStatus: '',
         // 将默认当天时间日期回显在时间选择框中
         // 将默认当天时间日期回显在时间选择框中
         time: [
         time: [
           moment(getDate.getToday().starttime, this.dateFormat),
           moment(getDate.getToday().starttime, this.dateFormat),
@@ -201,7 +200,6 @@
         ],
         ],
         // 加载数据方法 必须为 Promise 对象
         // 加载数据方法 必须为 Promise 对象
         loadData: parameter => {
         loadData: parameter => {
-          // console.log(this.searchForm.storeId)
           this.searchForm.beginDate == null ? this.searchForm.beginDate = getDate.getToday().starttime : null
           this.searchForm.beginDate == null ? this.searchForm.beginDate = getDate.getToday().starttime : null
           this.searchForm.endDate == null ? this.searchForm.endDate = getDate.getToday().endtime : null
           this.searchForm.endDate == null ? this.searchForm.endDate = getDate.getToday().endtime : null
           this.searchForm.storeIdList = this.storeId
           this.searchForm.storeIdList = this.storeId
@@ -232,7 +230,7 @@
           pageNo: this.pageNo,
           pageNo: this.pageNo,
           pageSize: this.pageSize
           pageSize: this.pageSize
         }).then(res => {
         }).then(res => {
-          console.log(res, '-----------')
+          // console.log(res, '-----------')
           if (res.status == 200) {
           if (res.status == 200) {
             this.itemOptionData = res.data.list
             this.itemOptionData = res.data.list
           }
           }
@@ -244,7 +242,7 @@
           pageNo: this.pageNo,
           pageNo: this.pageNo,
           pageSize: this.pageSize
           pageSize: this.pageSize
         }).then(res => {
         }).then(res => {
-          console.log(res, '-----------')
+          // console.log(res, '-----------')
           if (res.status == 200) {
           if (res.status == 200) {
             this.storeOptionData = res.data.list
             this.storeOptionData = res.data.list
           }
           }
@@ -277,8 +275,6 @@
         // 将当前行的id传递给详情页 
         // 将当前行的id传递给详情页 
         this.openDetailModal = true
         this.openDetailModal = true
         this.detailId = record.id
         this.detailId = record.id
-        this.detailStatus = record.orderStatus
-        console.log(this.detailStatus)
       },
       },
       // 退款---暂不做
       // 退款---暂不做
       // refund(row) {
       // refund(row) {

+ 56 - 61
src/views/Order/OrderDetailModal.vue

@@ -50,20 +50,20 @@
                 <span v-else-if=" orderDetailData.payStatus != 'PAID' ">{{ 0 }} 元</span>
                 <span v-else-if=" orderDetailData.payStatus != 'PAID' ">{{ 0 }} 元</span>
               </a-form-item>
               </a-form-item>
             </a-col>
             </a-col>
-            <!-- <a-col :span="8">
+            <a-col :span="8" v-if="orderDetailData.beginImage">
               <a-form-item label="洗车照片" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
               <a-form-item label="洗车照片" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
                 <div style="display: flex;">
                 <div style="display: flex;">
                   <div>
                   <div>
-                      <img :src="imgBefore" alt="" @click="isShowImgModal=true">
+                    <img class="imgCar" :src="orderDetailData.beginImage" alt="" @click="isShowBeginImageModal=true">
                     <div style="text-align: center;">洗车前</div>
                     <div style="text-align: center;">洗车前</div>
                   </div>
                   </div>
                   <div>
                   <div>
-                      <img :src="imgAfter" alt="" @click="isShowImgModal=true">
+                    <img class="imgCar" :src="orderDetailData.endImage" alt="" @click="isShowEndImageModal=true">
                     <div style="text-align: center;">洗车后</div>
                     <div style="text-align: center;">洗车后</div>
                   </div>
                   </div>
                 </div>
                 </div>
               </a-form-item>
               </a-form-item>
-            </a-col> -->
+            </a-col>
           </a-row>
           </a-row>
           <a-row :gutter="24">
           <a-row :gutter="24">
             <!-- <a-col :span="8">
             <!-- <a-col :span="8">
@@ -80,7 +80,7 @@
           <a-row style="text-align: center;margin-top: 100px;">
           <a-row style="text-align: center;margin-top: 100px;">
             <a-col>
             <a-col>
               <a-form-item>
               <a-form-item>
-                <a-button type="default" @click="isShow=false" >返回列表</a-button>
+                <a-button type="default" @click="isShow=false">返回列表</a-button>
               </a-form-item>
               </a-form-item>
             </a-col>
             </a-col>
           </a-row>
           </a-row>
@@ -88,85 +88,73 @@
       </div>
       </div>
     </a-modal>
     </a-modal>
     <!-- 查看洗车前后照片对比 -->
     <!-- 查看洗车前后照片对比 -->
-    <!-- <a-modal class="picModal" :width="600" :footer="null" :destroyOnClose="true" @cancel="isShowImgModal=false" v-model="isShowImgModal">
-      <img :src="imgBefore" class="pic" />
-    </a-modal> -->
+    <a-modal class="imgModal" title="洗车前照片" :width="600" :footer="null" :destroyOnClose="true" @cancel="isShowBeginImageModal=false"
+      v-model="isShowBeginImageModal">
+      <img :src="orderDetailData.beginImage" class="pic" />
+    </a-modal>
+    <a-modal class="imgModal" title="洗车后照片" :width="600" :footer="null" :destroyOnClose="true" @cancel="isShowEndImageModal=false"
+      v-model="isShowEndImageModal">
+      <img :src="orderDetailData.endImage" class="pic" />
+    </a-modal>
   </div>
   </div>
 </template>
 </template>
 
 
 <script>
 <script>
-  import { Upload, VSelect } from '@/components'
-  import { orderDetail } from '../../api/order.js'
+  import {
+    Upload,
+    VSelect
+  } from '@/components'
+  import {
+    orderDetail
+  } from '../../api/order.js'
   export default {
   export default {
-    components: { Upload, VSelect },
-    name:'OrderDetailModal',
+    components: {
+      Upload,
+      VSelect
+    },
+    name: 'OrderDetailModal',
     props: {
     props: {
-      openModal: {  //  弹框是否展示
+      openModal: { //  弹框是否展示
         type: Boolean,
         type: Boolean,
         default: false
         default: false
       },
       },
-      nowId:{
+      nowId: {
         type: Number,
         type: Number,
-        default: null 
-      },
-      nowStatus:{
-        type: String,
-        default: ''
+        default: null
       }
       }
     },
     },
     data() {
     data() {
       return {
       return {
-        orderDetailData:[],
+        orderDetailData: [],
         isShow: this.openModal,
         isShow: this.openModal,
-        // rowId:null
-        // isShowImgModal: false,
-        // imgBefore:require('../../assets/logo.png')
+        isShowBeginImageModal: false, // 洗车前图片弹窗
+        isShowEndImageModal: false, // 洗车后图片弹窗
       }
       }
     },
     },
-    methods: {
-      // getDetailData(){
-      //   if(this.rowId){
-      //     orderDetail({id:this.rowId}).then(res=>{
-      //       console.log(res,'------------')
-      //       if(res.status == 200){
-      //         // setTimeout(() => {
-      //         // 	res.data.orderStatus = this.$refs.orderStatus.getNameByCode(res.data.orderStatus)
-      //         // }, 100)
-      //         this.orderDetailData = res.data
-      //       }
-      //     })
-      //   }
-      // }
-    },
+    methods: {},
     watch: {
     watch: {
       //  父页面传过来的弹框状态以及当前行id
       //  父页面传过来的弹框状态以及当前行id
-      openModal (newValue, oldValue) {
+      openModal(newValue, oldValue) {
         this.isShow = newValue
         this.isShow = newValue
       },
       },
-      nowStatus (newValue, oldValue) {
-        console.log(newValue)
-      },
-      nowId(newValue, oldValue){
-        // this.rowId = newValue
-        // console.log(this.rowId)
-        // this.getDetailData()
-        if(newValue){
-          orderDetail({id:newValue}).then(res=>{
-            console.log(res,'------------')
-            if(res.status == 200){
-              console.log(res.data,'+++')
+      nowId(newValue, oldValue) {
+        if (newValue) {
+          orderDetail({
+            id: newValue
+          }).then(res => {
+            console.log(res, '------------')
+            if (res.status == 200)
               setTimeout(() => {
               setTimeout(() => {
-              	res.data.orderStatus = this.$refs.orderStatus.getNameByCode(res.data.orderStatus)
-              }, 100)
-              this.orderDetailData = res.data
-              console.log(this.orderDetailData,'---')
-            }
+                res.data.orderStatus = this.$refs.orderStatus.getNameByCode(res.data.orderStatus)
+              }, 500)
+            this.orderDetailData = res.data
+            console.log(this.orderDetailData, '---')
           })
           })
         }
         }
       },
       },
       //  重定义的弹框状态
       //  重定义的弹框状态
-      isShow (val){
-        if (!val){
+      isShow(val) {
+        if (!val) {
           this.$emit('close')
           this.$emit('close')
         }
         }
       }
       }
@@ -177,11 +165,18 @@
   .orderDetail-content .ant-form-inline .ant-form-item {
   .orderDetail-content .ant-form-inline .ant-form-item {
     margin-bottom: 20px;
     margin-bottom: 20px;
   }
   }
-  .pic{
-    transform: scale(3);
+
+  .imgCar {
+    width: 100px;
+    height: auto;
+    margin: 0 10px;
+  }
+
+  .pic {
+    transform: scale(1);
     display: block;
     display: block;
     max-width: 100%;
     max-width: 100%;
-    height:100%;
+    height: 100%;
     margin: 0 auto;
     margin: 0 auto;
   }
   }
 </style>
 </style>