zhangdan 4 years ago
parent
commit
f6280f5033
2 changed files with 498 additions and 500 deletions
  1. 334 336
      src/views/Order/OrderCenter.vue
  2. 164 164
      src/views/Order/OrderDetailModal.vue

+ 334 - 336
src/views/Order/OrderCenter.vue

@@ -1,346 +1,344 @@
 <template>
-  <a-card :bordered="false">
-    <!-- 搜索条件 -->
-    <div class="orderCenter-searchForm">
-      <a-form ref="searchForm">
-        <a-row :gutter="48">
-          <a-col :span="8">
-            <a-form-item label="下单时间" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
-              <a-range-picker v-model="time" :format="dateFormat" :placeholder="['开始时间','结束时间']" @change="onChange" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-item label="网点名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-              <a-select placeholder="请选择" allowClear v-model="storeId" mode="multiple">
-                <a-select-option v-for="item in storeOptionData" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-item label="单号" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-              <a-input v-model.trim="searchForm.orderNo" placeholder="请输入" allowClear />
-            </a-form-item>
-          </a-col>
-          <a-col :span="4">
-            <a-button style="margin-right: 10px;" type="primary" @click="handleSearch">查询</a-button>
-            <a-button type="" @click="handleRest">重置</a-button>
-          </a-col>
-        </a-row>
-        <a-row :gutter="48">
-          <a-col :span="8">
-            <a-form-item label="服务项目" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
-              <a-select placeholder="请选择" allowClear v-model="searchForm.itemId">
-                <a-select-option v-for="item in itemOptionData" :key="item.id" :value="item.id">{{ item.itemName }}</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-              <a-input v-model.trim="searchForm.customerMobile" placeholder="请输入" allowClear :maxLength="11" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-item label="状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
-              <v-select v-model="searchForm.orderStatus" ref="orderStatus" code="ORDER_STATUS" placeholder="请选择"
-                allowClear></v-select>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-    <!-- 合计 -->
-    <div class="total">
-      <a-icon type="info-circle" class="iconImg" />
-      <strong>合计:</strong><span v-model="orderTotal">{{orderTotal || 0}} 单</span><strong style="margin-left: 15px;">实收:</strong><span
-        v-model="paymentAmountTotal">{{paymentAmountTotal || 0}} 元</span>
-    </div>
-    <!-- 列表 -->
-    <s-table ref="table" size="default" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
-      <!-- 状态 -->
-      <span slot="orderStatus" slot-scope="text, record" :nowStatus="detailStatus">
-        {{ $refs.orderStatus.getNameByCode(text) }}
-      </span>
-      <!-- 实收金额 -->
-      <span slot="paymentAmount" slot-scope="text, record">
-        <template v-if=" record.payStatus == 'PAID' ">{{ record.paymentAmount }}</template>
-        <template v-else-if=" record.payStatus != 'PAID' ">{{ 0 }}</template>
-      </span>
-      <!-- 操作 -->
-      <span slot="action" slot-scope="text, record">
-        <a-button type="primary" @click="seeDetail(record)">查看</a-button>
-        <!-- 本期暂不做 -->
-        <!-- <a-button type="danger" @click="refund(record)">退款</a-button> -->
-      </span>
-    </s-table>
-    <!-- 查看详情弹窗 -->
-    <order-detail-modal :openModal="openDetailModal" :nowId="detailId" @close="openDetailModal=false" />
-  </a-card>
+	<a-card :bordered="false">
+		<!-- 搜索条件 -->
+		<div class="orderCenter-searchForm">
+			<a-form ref="searchForm">
+				<a-row :gutter="48">
+					<a-col :span="8">
+						<a-form-item label="下单时间" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
+							<a-range-picker v-model="time" :format="dateFormat" :placeholder="['开始时间','结束时间']" @change="onChange" />
+						</a-form-item>
+					</a-col>
+					<a-col :span="6">
+						<a-form-item label="网点名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+							<a-select placeholder="请选择" allowClear v-model="storeId" mode="multiple">
+								<a-select-option v-for="item in storeOptionData" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
+							</a-select>
+						</a-form-item>
+					</a-col>
+					<a-col :span="6">
+						<a-form-item label="单号" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+							<a-input v-model.trim="searchForm.orderNo" placeholder="请输入" allowClear />
+						</a-form-item>
+					</a-col>
+					<a-col :span="4">
+						<a-button style="margin-right: 10px;" type="primary" @click="handleSearch">查询</a-button>
+						<a-button type="" @click="handleRest">重置</a-button>
+					</a-col>
+				</a-row>
+				<a-row :gutter="48">
+					<a-col :span="8">
+						<a-form-item label="服务项目" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
+							<a-select placeholder="请选择" allowClear v-model="searchForm.itemId">
+								<a-select-option v-for="item in itemOptionData" :key="item.id" :value="item.id">{{ item.itemName }}</a-select-option>
+							</a-select>
+						</a-form-item>
+					</a-col>
+					<a-col :span="6">
+						<a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+							<a-input v-model.trim="searchForm.customerMobile" placeholder="请输入" allowClear :maxLength="11" />
+						</a-form-item>
+					</a-col>
+					<a-col :span="6">
+						<a-form-item label="状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
+							<v-select v-model="searchForm.orderStatus" ref="orderStatus" code="ORDER_STATUS" placeholder="请选择" allowClear></v-select>
+						</a-form-item>
+					</a-col>
+				</a-row>
+			</a-form>
+		</div>
+		<!-- 合计 -->
+		<div class="total">
+			<a-icon type="info-circle" class="iconImg" />
+			<strong>合计:</strong><span v-model="orderTotal">{{orderTotal || 0}} 单</span><strong style="margin-left: 15px;">实收:</strong><span
+			 v-model="paymentAmountTotal">{{paymentAmountTotal || 0}} 元</span>
+		</div>
+		<!-- 列表 -->
+		<s-table ref="table" size="default" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
+			<!-- 状态 -->
+			<span slot="orderStatus" slot-scope="text, record" :nowStatus="detailStatus">
+				{{ $refs.orderStatus.getNameByCode(text) }}
+			</span>
+			<!-- 实收金额 -->
+			<span slot="paymentAmount" slot-scope="text, record">
+				<template v-if=" record.payStatus == 'PAID' ">{{ record.paymentAmount }}</template>
+				<template v-else-if=" record.payStatus != 'PAID' ">{{ 0 }}</template>
+			</span>
+			<!-- 操作 -->
+			<span slot="action" slot-scope="text, record">
+				<a-button type="primary" @click="seeDetail(record)">查看</a-button>
+				<!-- 本期暂不做 -->
+				<!-- <a-button type="danger" @click="refund(record)">退款</a-button> -->
+			</span>
+		</s-table>
+		<!-- 查看详情弹窗 -->
+		<order-detail-modal :openModal="openDetailModal" :nowId="detailId" @close="openDetailModal=false" />
+	</a-card>
 </template>
 
 <script>
-  import {
-    STable,
-    VSelect
-  } from '@/components'
-  import getDate from '../../libs/getDate.js'
-  import {
-    orderCenterList,
-    itemList,
-    storeList,
-    orderTotal
-  } from '../../api/order.js'
-  import OrderDetailModal from './OrderDetailModal.vue'
-  import moment from 'moment'
-  export default {
-    name: 'OrderCenter',
-    components: {
-      STable,
-      VSelect,
-      OrderDetailModal
-    },
-    data() {
-      return {
-        storeId: [], // 网点名称
-        // 查询参数
-        searchForm: {
-          beginDate: null, // 创建的开始时间
-          endDate: null, // 创建的结束时间
-          storeIdList: [], // 网点名称
-          orderNo: '', // 单号
-          itemId: undefined, // 服务项目
-          customerMobile: '', // 手机号码
-          orderStatus: '' // 状态
-        },
-        orderTotal: '', // 合计开单数量
-        paymentAmountTotal: '', // 合计实收金额
-        itemOptionData: [], // 服务项目数据
-        storeOptionData: [], // 网点名称数据
-        openDetailModal: false, // 查看详情弹窗 默认关闭
-        detailId: null, // 初始化id
-        detailStatus: '',
-        // 将默认当天时间日期回显在时间选择框中
-        time: [
-          moment(getDate.getToday().starttime, this.dateFormat),
-          moment(getDate.getToday().endtime, this.dateFormat)
-        ],
-        dateFormat: 'YYYY-MM-DD',
-        columns: [{
-            title: '下单时间',
-            dataIndex: 'orderTime',
-            minWidth: '40',
-            align: 'center'
-          },
-          {
-            title: '单号',
-            dataIndex: 'orderNo',
-            minWidth: '40',
-            align: 'center'
-          },
-          {
-            title: '网点名称',
-            dataIndex: 'storeName',
-            minWidth: '40',
-            align: 'center'
-          },
-          {
-            title: '服务项目',
-            dataIndex: 'itemName',
-            minWidth: '40',
-            align: 'center'
-          },
-          {
-            title: '手机号码',
-            dataIndex: 'customerMobile',
-            minWidth: '40',
-            align: 'center'
-          },
-          {
-            title: '应收(¥)',
-            dataIndex: 'payableAmount',
-            minWidth: '40',
-            align: 'center'
-          },
-          {
-            title: '实收(¥)',
-            dataIndex: 'paymentAmount',
-            minWidth: '40',
-            align: 'center',
-            scopedSlots: {
-              customRender: 'paymentAmount'
-            }
+	import {
+		STable,
+		VSelect
+	} from '@/components'
+	import getDate from '../../libs/getDate.js'
+	import {
+		orderCenterList,
+		itemList,
+		storeList,
+		orderTotal
+	} from '../../api/order.js'
+	import OrderDetailModal from './OrderDetailModal.vue'
+	import moment from 'moment'
+	export default {
+		name: 'OrderCenter',
+		components: {
+			STable,
+			VSelect,
+			OrderDetailModal
+		},
+		data() {
+			return {
+				storeId: [], // 网点名称
+				// 查询参数
+				searchForm: {
+					beginDate: null, // 创建的开始时间
+					endDate: null, // 创建的结束时间
+					storeIdList: [], // 网点名称
+					orderNo: '', // 单号
+					itemId: undefined, // 服务项目
+					customerMobile: '', // 手机号码
+					orderStatus: '' // 状态
+				},
+				orderTotal: '', // 合计开单数量
+				paymentAmountTotal: '', // 合计实收金额
+				itemOptionData: [], // 服务项目数据
+				storeOptionData: [], // 网点名称数据
+				openDetailModal: false, // 查看详情弹窗 默认关闭
+				detailId: null, // 初始化id
+				// 将默认当天时间日期回显在时间选择框中
+				time: [
+					moment(getDate.getToday().starttime, this.dateFormat),
+					moment(getDate.getToday().endtime, this.dateFormat)
+				],
+				dateFormat: 'YYYY-MM-DD',
+				columns: [{
+						title: '下单时间',
+						dataIndex: 'orderTime',
+						minWidth: '40',
+						align: 'center'
+					},
+					{
+						title: '单号',
+						dataIndex: 'orderNo',
+						minWidth: '40',
+						align: 'center'
+					},
+					{
+						title: '网点名称',
+						dataIndex: 'storeName',
+						minWidth: '40',
+						align: 'center'
+					},
+					{
+						title: '服务项目',
+						dataIndex: 'itemName',
+						minWidth: '40',
+						align: 'center'
+					},
+					{
+						title: '手机号码',
+						dataIndex: 'customerMobile',
+						minWidth: '40',
+						align: 'center'
+					},
+					{
+						title: '应收(¥)',
+						dataIndex: 'payableAmount',
+						minWidth: '40',
+						align: 'center'
+					},
+					{
+						title: '实收(¥)',
+						dataIndex: 'paymentAmount',
+						minWidth: '40',
+						align: 'center',
+						scopedSlots: {
+							customRender: 'paymentAmount'
+						}
 
-          },
-          // {
-          //   title: '优惠(¥)',
-          //   dataIndex: 'couponAmount',
-          //   minWidth: '40',
-          //   align: 'center'
-          // },
-          {
-            title: '状态',
-            dataIndex: 'orderStatus',
-            minWidth: '40',
-            align: 'center',
-            scopedSlots: {
-              customRender: 'orderStatus'
-            }
-          },
-          {
-            title: '操作',
-            dataIndex: 'action',
-            minWidth: '40',
-            align: 'center',
-            scopedSlots: {
-              customRender: 'action'
-            }
+					},
+					// {
+					//   title: '优惠(¥)',
+					//   dataIndex: 'couponAmount',
+					//   minWidth: '40',
+					//   align: 'center'
+					// },
+					{
+						title: '状态',
+						dataIndex: 'orderStatus',
+						minWidth: '40',
+						align: 'center',
+						scopedSlots: {
+							customRender: 'orderStatus'
+						}
+					},
+					{
+						title: '操作',
+						dataIndex: 'action',
+						minWidth: '40',
+						align: 'center',
+						scopedSlots: {
+							customRender: 'action'
+						}
 
-          }
-        ],
-        // 加载数据方法 必须为 Promise 对象
-        loadData: parameter => {
-          this.searchForm.beginDate == null ? this.searchForm.beginDate = getDate.getToday().starttime : null
-          this.searchForm.endDate == null ? this.searchForm.endDate = getDate.getToday().endtime : null
-          this.searchForm.storeIdList = this.storeId
-          return orderCenterList(Object.assign(parameter, this.searchForm)).then(res => {
-            // console.log(res,'0000000000000000000')
-            if (res.status == 200) {
-              return res.data
-              this.getTotal()
-            }
-          })
-        }
-      }
-    },
+					}
+				],
+				// 加载数据方法 必须为 Promise 对象
+				loadData: parameter => {
+					this.searchForm.beginDate == null ? this.searchForm.beginDate = getDate.getToday().starttime : null
+					this.searchForm.endDate == null ? this.searchForm.endDate = getDate.getToday().endtime : null
+					this.searchForm.storeIdList = this.storeId
+					return orderCenterList(Object.assign(parameter, this.searchForm)).then(res => {
+						// console.log(res,'0000000000000000000')
+						if (res.status == 200) {
+							return res.data
+							this.getTotal()
+						}
+					})
+				}
+			}
+		},
 
-    methods: {
-      moment,
-      // 创建时间change
-      onChange(dates, dateStrings) {
-        if ((dates, dateStrings)) {
-          this.searchForm.beginDate = dateStrings[0]
-          this.searchForm.endDate = dateStrings[1]
-        }
-        console.log(this.searchForm.beginDate, this.searchForm.endDate)
-      },
-      // 获取服务项目数据
-      getItemListData() {
-        itemList({
-          pageNo: 1,
-          pageSize: 1000
-        }).then(res => {
-          // console.log(res, '-----------')
-          if (res.status == 200) {
-            this.itemOptionData = res.data.list
-          }
-        })
-      },
-      // 获取网点名称数据
-      getStoreListData() {
-        storeList({
-          pageNo: 1,
-          pageSize: 1000
-        }).then(res => {
-          // console.log(res, '-----------')
-          if (res.status == 200) {
-            this.storeOptionData = res.data.list
-          }
-        })
-      },
-      // 合计
-      getTotal() {
-        let params = {
-          beginDate: this.searchForm.beginDate,
-          endDate: this.searchForm.endDate,
-          storeIdList: this.searchForm.storeIdList,
-          orderNo: this.searchForm.orderNo,
-          itemId: this.searchForm.itemId,
-          customerMobile: this.searchForm.customerMobile,
-          orderStatus: this.searchForm.orderStatus
-        }
-        params.beginDate == null ? params.beginDate = getDate.getToday().starttime : null
-        params.endDate == null ? params.endDate = getDate.getToday().endtime : null
-        params.storeIdList = this.storeId
-        orderTotal(params).then(res => {
-          console.log(res, '--------')
-          if (res.status == 200) {
-            this.orderTotal = res.data.orderNum || 0
-            this.paymentAmountTotal = res.data.paymentAmount || 0
-          }
-        })
-      },
-      // 查看详情--跳转到对应的详情页
-      seeDetail(record) {
-        // 将当前行的id传递给详情页 
-        this.openDetailModal = true
-        this.detailId = record.id
-      },
-      // 退款---暂不做
-      // refund(row) {
-      //   const _this = this
-      //   this.$confirm({
-      //     title: '警告',
-      //     content: '确认退款后 款项将通过原渠道退回 且不可撤回,确认退款?',
-      //     okText: '确定',
-      //     cancelText: '取消',
-      //     // onOk() {
-      //     
-      //     // }
-      //   })
-      // },
-      // 查询
-      handleSearch() {
-        this.$refs.table.refresh()
-        this.getTotal()
-      },
-      // 重置
-      handleRest() {
-        this.searchForm.beginDate = getDate.getToday().starttime
-        this.searchForm.endDate = getDate.getToday().endtime
-        this.time = [
-          moment(getDate.getToday().starttime, this.dateFormat),
-          moment(getDate.getToday().endtime, this.dateFormat)
-        ]
-        this.storeId = []
-        this.searchForm.storeIdList = []
-        this.searchForm.orderNo = ''
-        this.searchForm.itemId = ''
-        this.searchForm.customerMobile = ''
-        this.searchForm.orderStatus = ''
-        // this.$refs.searchForm.resetFields()
-        this.$refs.table.refresh()
-        this.getTotal()
-      }
-    },
-    beforeRouteEnter(to, from, next) {
-      next(vm => {
-        vm.getItemListData()
-        vm.handleRest()
-        vm.getStoreListData()
-      })
-    }
-  }
+		methods: {
+			moment,
+			// 创建时间change
+			onChange(dates, dateStrings) {
+				if ((dates, dateStrings)) {
+					this.searchForm.beginDate = dateStrings[0]
+					this.searchForm.endDate = dateStrings[1]
+				}
+				console.log(this.searchForm.beginDate, this.searchForm.endDate)
+			},
+			// 获取服务项目数据
+			getItemListData() {
+				itemList({
+					pageNo: 1,
+					pageSize: 1000
+				}).then(res => {
+					// console.log(res, '-----------')
+					if (res.status == 200) {
+						this.itemOptionData = res.data.list || []
+					} else {
+						this.itemOptionData = []
+					}
+				})
+			},
+			// 获取网点名称数据
+			getStoreListData() {
+				storeList({
+					pageNo: 1,
+					pageSize: 1000
+				}).then(res => {
+					// console.log(res, '-----------')
+					if (res.status == 200) {
+						this.storeOptionData = res.data.list || []
+					} else {
+						this.storeOptionData = []
+					}
+				})
+			},
+			// 合计
+			getTotal() {
+				let params = {
+					beginDate: this.searchForm.beginDate,
+					endDate: this.searchForm.endDate,
+					storeIdList: this.searchForm.storeIdList,
+					orderNo: this.searchForm.orderNo,
+					itemId: this.searchForm.itemId,
+					customerMobile: this.searchForm.customerMobile,
+					orderStatus: this.searchForm.orderStatus
+				}
+				params.beginDate == null ? params.beginDate = getDate.getToday().starttime : null
+				params.endDate == null ? params.endDate = getDate.getToday().endtime : null
+				params.storeIdList = this.storeId
+				orderTotal(params).then(res => {
+					console.log(res, '--------')
+					if (res.status == 200) {
+						this.orderTotal = res.data.orderNum || 0
+						this.paymentAmountTotal = res.data.paymentAmount || 0
+					}
+				})
+			},
+			// 查看详情--跳转到对应的详情页
+			seeDetail(record) {
+				// 将当前行的id传递给详情页 
+				this.openDetailModal = true
+				this.detailId = record.id
+			},
+			// 退款---暂不做
+			// refund(row) {
+			//   const _this = this
+			//   this.$confirm({
+			//     title: '警告',
+			//     content: '确认退款后 款项将通过原渠道退回 且不可撤回,确认退款?',
+			//     okText: '确定',
+			//     cancelText: '取消',
+			//     // onOk() {
+			//     
+			//     // }
+			//   })
+			// },
+			// 查询
+			handleSearch() {
+				this.$refs.table.refresh()
+				this.getTotal()
+			},
+			// 重置
+			handleRest() {
+				this.searchForm.beginDate = getDate.getToday().starttime
+				this.searchForm.endDate = getDate.getToday().endtime
+				this.time = [
+					moment(getDate.getToday().starttime, this.dateFormat),
+					moment(getDate.getToday().endtime, this.dateFormat)
+				]
+				this.storeId = []
+				this.searchForm.orderNo = ''
+				this.searchForm.itemId = undefined
+				this.searchForm.customerMobile = ''
+				this.searchForm.orderStatus = ''
+				// this.$refs.searchForm.resetFields()
+				this.$refs.table.refresh()
+				this.getTotal()
+			}
+		},
+		beforeRouteEnter(to, from, next) {
+			next(vm => {
+				vm.getItemListData()
+				vm.handleRest()
+				vm.getStoreListData()
+			})
+		}
+	}
 </script>
 <style lang="less">
-  .orderCenter-searchForm {
-
-    // 搜索框的下间距
-    .ant-form-item {
-      margin-bottom: 10px;
-    }
-  }
-
-  // 合计
-  .total {
-    margin: 15px 0 25px;
-    width: 100%;
-    background-color: #e6f7ff;
-    border: 1px solid #91d5ff;
-    padding: 8px 15px 8px 27px;
-    border-radius: 4px;
-
-    .iconImg {
-      color: #1890FF;
-      margin-right: 10px;
-    }
-  }
+	.orderCenter-searchForm {
+		// 搜索框的下间距
+		.ant-form-item {
+			margin-bottom: 10px;
+		}
+	}
+	// 合计
+	.total {
+		margin: 15px 0 25px;
+		width: 100%;
+		background-color: #e6f7ff;
+		border: 1px solid #91d5ff;
+		padding: 8px 15px 8px 27px;
+		border-radius: 4px;
+		.iconImg {
+			color: #1890FF;
+			margin-right: 10px;
+		}
+	}
 </style>

+ 164 - 164
src/views/Order/OrderDetailModal.vue

@@ -1,72 +1,72 @@
 <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>
-                    <img class="imgCar" :src="orderDetailData.beginImage" alt="" @click="isShowBeginImageModal=true">
-                    <div style="text-align: center;">洗车前</div>
-                  </div>
-                  <div>
-                    <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}">
                 <span>{{'-'}}</span>
               </a-form-item>
@@ -76,107 +76,107 @@
                 <span>{{"-"}}</span>
               </a-form-item>
             </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>
 
 <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>
 <style lang="less">
-  .orderDetail-content .ant-form-inline .ant-form-item {
-    margin-bottom: 20px;
-  }
+	.orderDetail-content .ant-form-inline .ant-form-item {
+		margin-bottom: 20px;
+	}
 
-  .imgCar {
-    width: 100px;
-    height: auto;
-    margin: 0 10px;
-  }
+	.imgCar {
+		width: 100px;
+		height: auto;
+		margin: 0 10px;
+	}
 
-  .pic {
-    transform: scale(1);
-    display: block;
-    max-width: 100%;
-    height: 100%;
-    margin: 0 auto;
-  }
+	.pic {
+		transform: scale(1);
+		display: block;
+		max-width: 100%;
+		height: 100%;
+		margin: 0 auto;
+	}
 </style>