Skip to content

S
shop-new
提交 c325e758 authored 作者: PC-20210205TDZC\Administrator's avatar PC-20210205TDZC\Administrator
浏览文件
操作

详情增加修改信息/去发货/添加备注/查看物流弹框

上级 7ee5b616
隐藏空白字符变更
内嵌 并排
正在显示 包含 212 行增加 和 14 行删除
src/views/system/order/components/orderDetail.vue
浏览文件 @ c325e758
......@@ -43,7 +43,7 @@
<img class="icon" src="@/assets/image/order/icon2.png" alt="">
<span>买家信息</span>
</div>
<el-button size="mini" type="primary">修改收货信息</el-button>
<el-button size="mini" type="primary" @click="modifyinfoDialog = true">修改收货信息</el-button>
</div>
<div>
<el-row class="row-title">
......@@ -67,11 +67,11 @@
<span>商品信息</span>
</div>
<div>
<el-button size="mini" type="primary">去发货</el-button>
<el-button size="mini">补单发货</el-button>
<el-button size="mini" type="primary" @click="goShipping(1)">去发货</el-button>
<el-button size="mini" @click="goShipping(2)">补单发货</el-button>
</div>
</div>
<el-table :data="[]" style="border: 1px solid #eee;">
<el-table :data="[{order_sn: '111'}]" style="border: 1px solid #eee;" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column label="订单号" prop="order_sn"/>
<el-table-column label="商品名称" prop="order_sn"/>
......@@ -83,8 +83,8 @@
<el-table-column label="快递单号" prop="Tel"/>
<el-table-column label="操作" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text">去发货</el-button>
<el-button size="mini" type="text">查看物流</el-button>
<el-button size="mini" type="text" @click="goShipping(1)">去发货</el-button>
<el-button size="mini" type="text" @click="dialogCheck = true">查看物流</el-button>
</template>
</el-table-column>
</el-table>
......@@ -106,33 +106,225 @@
<img class="icon" src="@/assets/image/order/icon5.png" alt="">
<span>订单备注</span>
</div>
<el-button size="mini" type="primary">添加备注</el-button>
<el-button size="mini" type="primary" @click="addRemarkDialog = true">添加备注</el-button>
</div>
<div style="width: 75%;">
<div style="width: 75%; min-height: 100px; border: 1px solid #eee;"></div>
</div>
</div>
</el-card>
<el-dialog
title="修改买家信息"
:visible.sync="modifyinfoDialog"
width="25%"
:modal-append-to-body="false"
:close-on-click-modal="false"
:append-to-body="true"
>
<div style="margin: 0 10%">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="收货人姓名：">
<el-input size="mini" v-model="form.name" placeholder="请输入收货人姓名"></el-input>
</el-form-item>
<el-form-item label="联系电话：">
<el-input size="mini" v-model="form.mobile" placeholder="请输入联系电话"></el-input>
</el-form-item>
<el-form-item label="收货地址：">
<el-input size="mini" v-model="form.address" placeholder="请输入收货地址"></el-input>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="modifyinfoDialog = false">取 消</el-button>
<el-button size="mini" type="primary" @click="handleModifyInfo">确 定</el-button>
</span>
</el-dialog>
<el-dialog
:title="titleInfo"
:visible.sync="goShippingDialog"
width="25%"
:modal-append-to-body="false"
:close-on-click-modal="false"
:append-to-body="true"
>
<div style="margin: 0 10%">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="快递公司：">
<el-select size="mini" v-model="expressNum" placeholder="请选择快递公司" style="width: 100%;">
<el-option
v-for="item in expressLists"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="快递单号：">
<el-input size="mini" v-model="form.name" placeholder="请输入快递单号"></el-input>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="goShippingDialog = false">取 消</el-button>
<el-button size="mini" type="primary" @click="handleGoShipping">确 定</el-button>
</span>
</el-dialog>
<el-dialog
title="添加订单备注"
:visible.sync="addRemarkDialog"
width="25%"
:modal-append-to-body="false"
:close-on-click-modal="false"
:append-to-body="true"
>
<div style="padding: 20px 10% 1px; background: #F7F8FA;">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="添加备注：">
<el-input
type="textarea"
:rows="5"
placeholder="请输入内容"
v-model="textarea">
placeholder="请输入订单备注"
v-model="remark">
</el-input>
</div>
</div>
</el-form-item>
</el-form>
</div>
</el-card>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="addRemarkDialog = false">取 消</el-button>
<el-button size="mini" type="primary" @click="getRemarkOrder">确 定</el-button>
</span>
</el-dialog>
<!-- 查看物流 -->
<el-dialog title="物流信息" width="50%" class="cutclass" :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="dialogCheck" append-to-body>
<div class="logistics">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:type="activity.type"
color="#0bbd87"
:size="activity.size"
:timestamp="formatter(activity.time)">
{{activity.message}}
</el-timeline-item>
</el-timeline>
</div>
</el-dialog>
</div>
</template>
<script>
import {expressList, sendOrder, expressInfoNew, remarkOrder} from '@/api/module/order'
import {dateFormat} from '@/utils'
export default {
props: {
orderDetail: {
type: String
}
},
data() {
return {
textarea: ''
expressLists: [],
expressNum: '',
remark: '',
modifyinfoDialog: false,
goShippingDialog: false,
addRemarkDialog: false,
dialogCheck: false,
titleInfo: '',
form: {
name: '',
mobile: '',
address: ''
},
activities: [],
multipleSelection: []
}
},
mounted() {
this.getExpressList()
},
methods: {
formatter(time) {
return dateFormat(time, 'Y-m-d H:i:s')
},
goShipping(val) {
switch(val) {
case 1:
this.titleInfo = '去发货'
this.goShippingDialog = true
break
case 2:
this.titleInfo = '补单发货'
this.goShippingDialog = true
break
default:
break
}
},
// 选中的表格
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 修改买家信息
handleModifyInfo() {
this.modifyinfoDialog = false
},
// 去发货
handleGoShipping() {
let params = {
order_goods_ids: [],
express_company_name: '',
express_sn: ''
}
sendOrder().then(res => {
if (res.code == 1) {
this.goShippingDialog = false
}
})
},
// 查看物流
getExpressInfoNew() {
let params = {
order_sn: '',
goods_id: '',
sku_id: ''
}
expressInfoNew(params).then(res => {
if (res.code == 1) {
}
})
},
// 获取物流信息
getExpressList() {
expressList().then(res => {
if (res.code == 1) {
this.expressLists = res.data.expressLists
}
})
},
// 订单备注
getRemarkOrder() {
let params = {
order_id: '',
remark: this.remark
}
remarkOrder().then(res => {
if (res.code == 1) {
this.addRemarkDialog = false
}
})
}
}
}
</script>
<style scoped>
/deep/.el-dialog__header {
border-bottom: 1px solid #eee;
text-align: center;
}
/deep/.el-step__head.is-success {
color: #3AA0FF;
border-color: #3AA0FF;
......@@ -144,6 +336,9 @@ export default {
border: 1px solid #eee;
padding: 10px;
}
/deep/.el-dialog__body {
padding-bottom: 0;
}
.text-r {
text-align: right;
......@@ -171,4 +366,7 @@ export default {
font-size: 14px;
color: #333;
}
.dialog-footer {
margin: 0 10%;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论