|
@@ -1,124 +1,126 @@
|
|
<template>
|
|
<template>
|
|
<a-card :bordered="false">
|
|
<a-card :bordered="false">
|
|
<div class="orderDetail-content">
|
|
<div class="orderDetail-content">
|
|
- <a-form layout="inline">
|
|
|
|
|
|
+ <a-form>
|
|
<a-row :gutter="24">
|
|
<a-row :gutter="24">
|
|
<a-col :span="8">
|
|
<a-col :span="8">
|
|
- <a-form-item label="创建时间">
|
|
|
|
|
|
+ <a-form-item label="创建时间" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
<span>{{"123456789"}}</span>
|
|
<span>{{"123456789"}}</span>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-col :span="8">
|
|
- <a-form-item label="单号">
|
|
|
|
|
|
+ <a-form-item label="单号" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
<span>{{"123456789"}}</span>
|
|
<span>{{"123456789"}}</span>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-col :span="8">
|
|
- <a-form-item label="门店名称">
|
|
|
|
|
|
+ <a-form-item label="门店名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
<span>{{"123456789"}}</span>
|
|
<span>{{"123456789"}}</span>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
- <a-row :gutter="24">
|
|
|
|
- <a-col :span="8">
|
|
|
|
- <a-form-item label="服务名称">
|
|
|
|
- <span>{{"123456789"}}</span>
|
|
|
|
- </a-form-item>
|
|
|
|
- </a-col>
|
|
|
|
- <a-col :span="8">
|
|
|
|
- <a-form-item label="手机号码">
|
|
|
|
- <span>{{"123456789"}}</span>
|
|
|
|
- </a-form-item>
|
|
|
|
- </a-col>
|
|
|
|
- <a-col :span="8">
|
|
|
|
- <a-form-item label="状态">
|
|
|
|
- <span>{{"123456789"}}</span>
|
|
|
|
- </a-form-item>
|
|
|
|
- </a-col>
|
|
|
|
- </a-row>
|
|
|
|
- <a-row :gutter="24">
|
|
|
|
- <a-col :span="8">
|
|
|
|
- <a-form-item label="应付(¥)">
|
|
|
|
- <span>{{"123456789"}}</span>
|
|
|
|
- </a-form-item>
|
|
|
|
- </a-col>
|
|
|
|
- <a-col :span="8">
|
|
|
|
- <a-form-item label="优惠(¥)">
|
|
|
|
- <span>{{"123456789"}}</span>
|
|
|
|
- </a-form-item>
|
|
|
|
- </a-col>
|
|
|
|
- <a-col :span="8">
|
|
|
|
- <a-form-item label="优惠券名称:">
|
|
|
|
- <span>{{"123456789"}}</span>
|
|
|
|
- </a-form-item>
|
|
|
|
- </a-col>
|
|
|
|
- </a-row>
|
|
|
|
- <a-row :gutter="24">
|
|
|
|
- <a-col :span="8">
|
|
|
|
- <a-form-item label="实付(¥)">
|
|
|
|
- <span>{{"123456789"}}</span>
|
|
|
|
- </a-form-item>
|
|
|
|
- </a-col>
|
|
|
|
- <a-col :span="8">
|
|
|
|
- <a-form-item label="洗车照片">
|
|
|
|
- <div style="display: flex;">
|
|
|
|
- <!-- 洗车前照片 -->
|
|
|
|
- <div style="margin-right: 20px;">
|
|
|
|
- <div style="border: 1px solid #eee;overflow: hidden;padding: 8px">
|
|
|
|
- <img :src="advertisementImg" style="width: 100px; height: 100px;" alt=""/>
|
|
|
|
|
|
+ <a-row :gutter="24">
|
|
|
|
+ <a-col :span="8">
|
|
|
|
+ <a-form-item label="服务名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
|
+ <span>{{"123456789"}}</span>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="8">
|
|
|
|
+ <a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
|
+ <span>{{"123456789"}}</span>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="8">
|
|
|
|
+ <a-form-item label="状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
|
+ <span>{{"123456789"}}</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>{{"123456789"}}</span>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="8">
|
|
|
|
+ <a-form-item label="优惠(¥)" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
|
+ <span>{{"123456789"}}</span>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :span="8">
|
|
|
|
+ <a-form-item label="优惠券名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
|
|
|
|
+ <span>{{"123456789"}}</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>{{"123456789"}}</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 v-decorator="img" :fileSize="0.25" listType="picture-card">
|
|
|
|
+ </Upload>
|
|
</div>
|
|
</div>
|
|
- <div style="text-align: center;">洗车前</div>
|
|
|
|
|
|
+ <div style="text-align: center;">洗车前</div>
|
|
</div>
|
|
</div>
|
|
- <!-- 洗车后照片 -->
|
|
|
|
<div>
|
|
<div>
|
|
- <div id="img" style="border: 1px solid #eee;overflow: hidden;padding: 8px">
|
|
|
|
- <img class="img1" src="../../assets/avatar2.jpg" alt=""/>
|
|
|
|
|
|
+ <div style="border: 1px solid #eee;overflow: hidden;padding: 8px 0 0 8px;">
|
|
|
|
+ <Upload v-decorator="img" :fileSize="0.25" listType="picture-card">
|
|
|
|
+ </Upload>
|
|
</div>
|
|
</div>
|
|
- <div style="text-align: center;">洗车后</div>
|
|
|
|
|
|
+ <div style="text-align: center;">洗车后</div>
|
|
</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>
|
|
|
|
|
|
+ </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>
|
|
</a-form>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-card>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- export default{
|
|
|
|
- data(){
|
|
|
|
- return{
|
|
|
|
-
|
|
|
|
|
|
+ import {
|
|
|
|
+ Upload
|
|
|
|
+ } from '@/components'
|
|
|
|
+ export default {
|
|
|
|
+ components: {
|
|
|
|
+ Upload
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ img: '', // 洗车前后图片
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- methods:{
|
|
|
|
- goBack(){
|
|
|
|
- this.$router.push({ name: 'OrderCenter' })
|
|
|
|
|
|
+ methods: {
|
|
|
|
+ // 返回列表
|
|
|
|
+ goBack() {
|
|
|
|
+ this.$router.push({
|
|
|
|
+ name: 'OrderCenter'
|
|
|
|
+ })
|
|
},
|
|
},
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
-<style>
|
|
|
|
- .orderDetail-content .ant-form-inline .ant-form-item{
|
|
|
|
|
|
+<style lang="less">
|
|
|
|
+ .orderDetail-content .ant-form-inline .ant-form-item {
|
|
margin-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
- #img .img1{
|
|
|
|
- width: 150px;
|
|
|
|
- height: auto;
|
|
|
|
- transition:all 2s;/*图片放大过程的时间*/
|
|
|
|
- position: relative;
|
|
|
|
- }
|
|
|
|
- .img1:hover{
|
|
|
|
- cursor: crosshair;
|
|
|
|
- transform: scale(1.9); /*以y轴为中心旋转*/
|
|
|
|
|
|
+ /* 去掉上传图片组件原有的删除按钮 */
|
|
|
|
+ :global(.anticon-delete) {
|
|
|
|
+ display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|