zhangdan 4 năm trước cách đây
mục cha
commit
663d051f82
1 tập tin đã thay đổi với 168 bổ sung149 xóa
  1. 168 149
      src/views/Order/OrderDetailModal.vue

+ 168 - 149
src/views/Order/OrderDetailModal.vue

@@ -1,72 +1,78 @@
 <template>
 <template>
-	<div>
-		<a-modal title="查看详情" :footer="null" :width="1100" :destroyOnClose="true" @cancel="isShow=false" v-model="isShow">
-			<v-select ref="orderStatus" code="ORDER_STATUS" placeholder="请选择" allowClear v-show="false"></v-select>
-			<div class="orderDetail-content">
-				<a-form>
-					<a-row :gutter="24">
-						<a-col :span="8">
-							<a-form-item label="下单时间" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-								<span>{{orderDetailData.orderTime}}</span>
-							</a-form-item>
-						</a-col>
-						<a-col :span="8">
-							<a-form-item label="单号" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-								<span>{{orderDetailData.orderNo}}</span>
-							</a-form-item>
-						</a-col>
-						<a-col :span="8">
-							<a-form-item label="门店名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-								<span>{{orderDetailData.storeName}}</span>
-							</a-form-item>
-						</a-col>
-					</a-row>
-					<a-row :gutter="24">
-						<a-col :span="8">
-							<a-form-item label="服务名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-								<span>{{orderDetailData.itemName}}</span>
-							</a-form-item>
-						</a-col>
-						<a-col :span="8">
-							<a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-								<span>{{orderDetailData.customerMobile}}</span>
-							</a-form-item>
-						</a-col>
-						<a-col :span="8">
-							<a-form-item label="状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-								<span>{{orderDetailData.orderStatus}}</span>
-							</a-form-item>
-						</a-col>
-					</a-row>
-					<a-row :gutter="24">
-						<a-col :span="8">
-							<a-form-item label="应付(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-								<span>{{orderDetailData.payableAmount}} 元</span>
-							</a-form-item>
-						</a-col>
-						<a-col :span="8">
-							<a-form-item label="实付(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-								<span v-if=" orderDetailData.payStatus == 'PAID' ">{{orderDetailData.paymentAmount}} 元</span>
-								<span v-else-if=" orderDetailData.payStatus != 'PAID' ">{{ 0 }} 元</span>
-							</a-form-item>
-						</a-col>
-						<a-col :span="8" v-if="orderDetailData.beginImage || orderDetailData.endImage">
-							<a-form-item label="洗车照片" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-								<div style="display: flex;">
-									<div v-if="orderDetailData.beginImage">
-										<img class="imgCar" :src="orderDetailData.beginImage" alt="" @click="isShowBeginImageModal=true">
-										<div style="text-align: center;">洗车前</div>
-									</div>
-									<div v-if="orderDetailData.endImage">
-										<img class="imgCar" :src="orderDetailData.endImage" alt="" @click="isShowEndImageModal=true">
-										<div style="text-align: center;">洗车后</div>
-									</div>
-								</div>
-							</a-form-item>
-						</a-col>
-					</a-row>
-					<a-row :gutter="24">
-						<!-- <a-col :span="8">
+  <div>
+    <a-modal
+      title="查看详情"
+      :footer="null"
+      :width="1100"
+      :destroyOnClose="true"
+      @cancel="isShow = false"
+      v-model="isShow">
+      <v-select ref="orderStatus" code="ORDER_STATUS" placeholder="请选择" allowClear v-show="false"></v-select>
+      <div class="orderDetail-content">
+        <a-form>
+          <a-row :gutter="24">
+            <a-col :span="8">
+              <a-form-item label="下单时间" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+                <span>{{ orderDetailData.orderTime }}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="单号" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+                <span>{{ orderDetailData.orderNo }}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="门店名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+                <span>{{ orderDetailData.storeName }}</span>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="24">
+            <a-col :span="8">
+              <a-form-item label="服务名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+                <span>{{ orderDetailData.itemName }}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+                <span>{{ orderDetailData.customerMobile }}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+                <span>{{ orderDetailData.orderStatus }}</span>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="24">
+            <a-col :span="8">
+              <a-form-item label="应付(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+                <span>{{ orderDetailData.payableAmount }} 元</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="实付(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+                <span v-if=" orderDetailData.payStatus == 'PAID' ">{{ orderDetailData.paymentAmount }} 元</span>
+                <span v-else-if=" orderDetailData.payStatus != 'PAID' ">{{ 0 }} 元</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8" v-if="orderDetailData.beginImage || orderDetailData.endImage">
+              <a-form-item label="洗车照片" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+                <div style="display: flex;">
+                  <div v-if="orderDetailData.beginImage">
+                    <img class="imgCar" :src="orderDetailData.beginImage" alt="" @click="isShowBeginImageModal=true">
+                    <div style="text-align: center;">洗车前</div>
+                  </div>
+                  <div v-if="orderDetailData.endImage">
+                    <img class="imgCar" :src="orderDetailData.endImage" alt="" @click="isShowEndImageModal=true">
+                    <div style="text-align: center;">洗车后</div>
+                  </div>
+                </div>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="24">
+            <!-- <a-col :span="8">
               <a-form-item label="优惠(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
               <a-form-item label="优惠(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
                 <span>{{'-'}}</span>
                 <span>{{'-'}}</span>
               </a-form-item>
               </a-form-item>
@@ -76,90 +82,103 @@
                 <span>{{"-"}}</span>
                 <span>{{"-"}}</span>
               </a-form-item>
               </a-form-item>
             </a-col> -->
             </a-col> -->
-					</a-row>
-					<a-row style="text-align: center;margin-top: 100px;">
-						<a-col>
-							<a-form-item>
-								<a-button type="default" @click="isShow=false">返回列表</a-button>
-							</a-form-item>
-						</a-col>
-					</a-row>
-				</a-form>
-			</div>
-		</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>
+          </a-row>
+          <a-row style="text-align: center;margin-top: 100px;">
+            <a-col>
+              <a-form-item>
+                <a-button type="default" @click="isShow=false">返回列表</a-button>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+    </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>
 </template>
 </template>
 
 
 <script>
 <script>
-	import {
-		Upload,
-		VSelect
-	} from '@/components'
-	import {
-		orderDetail
-	} from '../../api/order.js'
-	export default {
-		components: {
-			Upload,
-			VSelect
-		},
-		name: 'OrderDetailModal',
-		props: {
-			openModal: { //  弹框是否展示
-				type: Boolean,
-				default: false
-			},
-			nowId: {
-				type: Number,
-				default: null
-			}
-		},
-		data() {
-			return {
-				orderDetailData: [],
-				isShow: this.openModal,
-				isShowBeginImageModal: false, // 洗车前图片弹窗
-				isShowEndImageModal: false, // 洗车后图片弹窗
-			}
-		},
-		methods: {},
-		watch: {
-			//  父页面传过来的弹框状态以及当前行id
-			openModal(newValue, oldValue) {
-				this.isShow = newValue
-			},
-			nowId(newValue, oldValue) {
-				if (newValue) {
-					orderDetail({
-						id: newValue
-					}).then(res => {
-						// console.log(res, '------------')
-						if (res.status == 200)
-							setTimeout(() => {
-								res.data.orderStatus = this.$refs.orderStatus.getNameByCode(res.data.orderStatus)
-							}, 500)
-						this.orderDetailData = res.data
-						// console.log(this.orderDetailData, '---')
-					})
-				}
-			},
-			//  重定义的弹框状态
-			isShow(val) {
-				if (!val) {
-					this.$emit('close')
-				}
-			}
-		},
-	}
+import {
+  Upload,
+  VSelect
+} from '@/components'
+import {
+  orderDetail
+} from '../../api/order.js'
+export default {
+  components: {
+    Upload,
+    VSelect
+  },
+  name: 'OrderDetailModal',
+  props: {
+    openModal: { //  弹框是否展示
+      type: Boolean,
+      default: false
+    },
+    nowId: {
+      type: Number,
+      default: null
+    }
+  },
+  data () {
+    return {
+      orderDetailData: [],
+      isShow: this.openModal,
+      isShowBeginImageModal: false, // 洗车前图片弹窗
+      isShowEndImageModal: false // 洗车后图片弹窗
+    }
+  },
+  methods: {},
+  watch: {
+    //  父页面传过来的弹框状态以及当前行id
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    nowId (newValue, oldValue) {
+      if (newValue) {
+        orderDetail({
+          id: newValue
+        }).then(res => {
+          // console.log(res, '------------')
+          if (res.status == 200) {
+            setTimeout(() => {
+              res.data.orderStatus = this.$refs.orderStatus.getNameByCode(res.data.orderStatus)
+            }, 500)
+          }
+          this.orderDetailData = res.data
+          // console.log(this.orderDetailData, '---')
+        })
+      }
+    },
+    //  重定义的弹框状态
+    isShow (val) {
+      if (!val) {
+        this.$emit('close')
+      }
+    }
+  }
+}
 </script>
 </script>
 <style lang="less">
 <style lang="less">
 	.orderDetail-content .ant-form-inline .ant-form-item {
 	.orderDetail-content .ant-form-inline .ant-form-item {