|
@@ -1,97 +1,97 @@
|
|
|
<template>
|
|
|
- <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">
|
|
|
- <a-form-item label="洗车照片" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
- <div style="display: flex;">
|
|
|
- <!-- <div>
|
|
|
- <div style="border: 1px solid #eee;overflow: hidden;padding: 8px 0 0 8px; margin-right: 20px;">
|
|
|
- <Upload :file-list="" :fileSize="0.25" listType="picture-card">
|
|
|
- </Upload>
|
|
|
+ <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">
|
|
|
+ <a-form-item label="洗车照片" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div>
|
|
|
+ <img :src="imgBefore" alt="" @click="isShowImgModal=true">
|
|
|
+ <div style="text-align: center;">洗车前</div>
|
|
|
</div>
|
|
|
- <div style="text-align: center;">洗车前</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div style="border: 1px solid #eee;overflow: hidden;padding: 8px 0 0 8px;">
|
|
|
- <Upload :file-list="" :fileSize="0.25" listType="picture-card">
|
|
|
- </Upload>
|
|
|
+ <div>
|
|
|
+ <img :src="imgAfter" alt="" @click="isShowImgModal=true">
|
|
|
+ <div style="text-align: center;">洗车后</div>
|
|
|
</div>
|
|
|
- <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>
|
|
|
- </a-col>
|
|
|
- <a-col :span="8">
|
|
|
- <a-form-item label="优惠券名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
- <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>
|
|
|
+ </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>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-item label="优惠券名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
+ <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="picModal" :width="600" :footer="null" :destroyOnClose="true" @cancel="isShowImgModal=false" v-model="isShowImgModal">
|
|
|
+ <img :src="imgBefore" class="pic" />
|
|
|
+ </a-modal> -->
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -108,32 +108,58 @@
|
|
|
nowId:{
|
|
|
type: Number,
|
|
|
default: null
|
|
|
+ },
|
|
|
+ nowStatus:{
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
orderDetailData:[],
|
|
|
isShow: this.openModal,
|
|
|
+ // rowId:null
|
|
|
+ // isShowImgModal: false,
|
|
|
+ // imgBefore:require('../../assets/logo.png')
|
|
|
}
|
|
|
},
|
|
|
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
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // }
|
|
|
},
|
|
|
watch: {
|
|
|
// 父页面传过来的弹框状态以及当前行id
|
|
|
openModal (newValue, oldValue) {
|
|
|
this.isShow = newValue
|
|
|
},
|
|
|
- nowId(newValue, oldValue){
|
|
|
+ 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,'+++')
|
|
|
setTimeout(() => {
|
|
|
res.data.orderStatus = this.$refs.orderStatus.getNameByCode(res.data.orderStatus)
|
|
|
}, 100)
|
|
|
this.orderDetailData = res.data
|
|
|
+ console.log(this.orderDetailData,'---')
|
|
|
}
|
|
|
})
|
|
|
}
|
|
@@ -151,8 +177,11 @@
|
|
|
.orderDetail-content .ant-form-inline .ant-form-item {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
- /* 去掉上传图片组件原有的删除按钮 */
|
|
|
- :global(.anticon-delete) {
|
|
|
- display: none;
|
|
|
+ .pic{
|
|
|
+ transform: scale(3);
|
|
|
+ display: block;
|
|
|
+ max-width: 100%;
|
|
|
+ height:100%;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
</style>
|