123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- <template>
- <a-card :bordered="false">
- <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>{{'-'}}</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 :gutter="24">
- <a-col :span="8">
- <a-form-item label="实付(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
- <span>{{orderDetailData.paymentAmount}} 元</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>
- <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>
- <div style="text-align: center;">洗车后</div>
- </div> -->
- </div>
- </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="goBack()">返回列表</a-button>
- </a-form-item>
- </a-col>
- </a-row>
- </a-form>
- </div>
- </a-card>
- </template>
- <script>
- import { Upload, VSelect } from '@/components'
- import { orderDetail } from '../../api/order.js'
- export default {
- components: { Upload, VSelect },
- data() {
- return {
- orderDetailData:[]
- }
- },
- methods: {
- // // 查看详情
- // getOrderDetail(){
- // orderDetail()
- // },
- // 返回列表
- goBack() {
- this.$router.push({
- name: 'OrderCenter'
- })
- },
- },
- beforeRouteEnter (to, from, next) {
- next(vm => {
- let params = vm.$route.query
- if(params.id){
- orderDetail({id: params.id}).then(res=>{
- console.log(res,'------------')
- if(res.status == 200){
- vm.orderDetailData = res.data
- vm.orderDetailData.orderStatus = vm.$refs.orderStatus.getNameByCode(vm.orderDetailData.orderStatus)
- }
- })
- }
- })
- }
- }
- </script>
- <style lang="less">
- .orderDetail-content .ant-form-inline .ant-form-item {
- margin-bottom: 20px;
- }
- /* 去掉上传图片组件原有的删除按钮 */
- :global(.anticon-delete) {
- display: none;
- }
- </style>
|