Commit b0e327ca authored by yaya's avatar yaya

feat:UI优化&添加交换单发货弹窗

parent 918a48d4
......@@ -27,9 +27,7 @@
<template slot="append"></template>
</el-input>
</el-form-item>
<el-form-item label="详细介绍:" prop="detail">
<el-input v-model="goodsParams.detail" :rows="2" type="textarea" placeholder="请输入藏品描述"/>
</el-form-item>
<el-form-item label="详细介绍:" prop="detail"/>
<el-form-item label="交易日期:" prop="bidTime">
<el-date-picker
v-model="goodsParams.bidTime"
......
<template>
<div class="page_transferDetail">
<div v-if="itemContent && itemContent.distributionOrderId" class="detail_button">
</div>
<div v-if="itemContent && itemContent.distributionOrderId" class="detail_button"/>
<el-card class="box-card" style="margin:16px">
<div v-if="itemContent && itemContent.exchangeApplyOrderId" class="detail_button">
<el-button
v-if="(itemContent.state=== 1)"
type="primary"
size="mini"
@click="handlePass()">通过
</el-button>
<el-button
v-if="(itemContent.state=== 1)"
type="danger"
size="mini"
@click="handleNoPass()">不通过
</el-button>
</div>
<el-button
v-if="(itemContent.state=== 1)"
type="primary"
size="mini"
@click="handlePass()">通过
</el-button>
<el-button
v-if="(itemContent.state=== 1)"
type="danger"
size="mini"
@click="handleNoPass()">不通过
</el-button>
</div>
<div class="title">
<div class="title_content">交换单信息</div>
<el-button v-if="itemContent.transferStateName" type="warning" plain size="mini">{{ itemContent.transferStateName }}</el-button>
......@@ -45,13 +44,13 @@
<el-button v-if="itemContent.transferStateName" type="warning" plain size="mini">{{ itemContent.transferStateName }}</el-button>
</div>
<div v-if="itemContent && itemContent.userCommitOrderInfo.distributionOrderId" class="detail_button">
<el-button
v-if="(itemContent.userCommitOrderInfo.state === 10)"
type="primary"
size="mini"
@click="handleSend(3)">去发货
</el-button>
</div>
<el-button
v-if="(itemContent.userCommitOrderInfo.state === 10)"
type="primary"
size="mini"
@click="handleSend(3)">去发货
</el-button>
</div>
<div class="user_info flex">
<el-form ref="addInviteRef" label-width="120px" style="width: 30%">
<el-form-item label="用户ID:">
......@@ -95,7 +94,7 @@
<div>{{ itemContent && itemContent.userCommitOrderInfo.itemVoList[0].officialEstimatedPrice || '-' }}</div>
</el-form-item>
</el-form>
</div>
<div class="user_info flex" >
<el-form ref="addInviteRef" label-width="120px" >
......@@ -103,31 +102,30 @@
<div>{{ itemContent && itemContent.userCommitOrderInfo.itemVoList[0].description || '-' }}</div>
</el-form-item>
<el-form-item label="商品图片/视频:">
</el-form-item>
<el-form-item label="商品图片/视频:"/>
</el-form>
</div>
</el-card>
<el-card class="box-card" style="margin: 16px">
<div class="title">
<div class="title_content">受理者用户相关信息</div>
<el-button v-if="itemContent.transferStateName" type="warning" plain size="mini">{{ itemContent.transferStateName }}</el-button>
</div>
<div v-if="itemContent && itemContent.receiveTargetOrderInfo.distributionOrderId" class="detail_button">
<el-button
v-if="(itemContent.userCommitOrderInfo.state === 10)"
type="primary"
size="mini"
@click="handleSend(1)">去发货
</el-button>
<el-button
v-if="(itemContent.transferState === 15)"
type="primary"
size="mini"
@click="handleSend(2)">退回藏品
</el-button>
</div>
<el-button
v-if="(itemContent.receiveTargetOrderInfo.state === 10)"
type="primary"
size="mini"
@click="handleSend(1)">去发货
</el-button>
<el-button
v-if="(itemContent.transferState === 15)"
type="primary"
size="mini"
@click="handleSend(2)">退回藏品
</el-button>
</div>
<div class="user_info flex">
<el-form ref="addInviteRef" label-width="120px" style="width: 30%">
<el-form-item label="用户ID:">
......@@ -171,7 +169,7 @@
<div>{{ itemContent && itemContent.receiveTargetOrderInfo.itemVoList[0].officialEstimatedPrice || '-' }}</div>
</el-form-item>
</el-form>
</div>
<div class="user_info flex" >
<el-form ref="addInviteRef" label-width="120px" >
......@@ -196,10 +194,10 @@
@refreshItem="handleRefreshItem"
@cancelDialog="showNoPassIdentifyDialog = false"
/>
<ReturnLogisticIdentifyDialog
<ExchangeLogisticIdentifyDialog
v-if="logisticDialogShow"
:logistic-dialog-show="logisticDialogShow"
:distribution-order-id="itemContent.distributionOrderId"
:distribution-order-id="distributionOrderId"
:identify-order-id="itemContent.identifyOrderId"
:type="logisticType"
@cancelDialog="handleCancelLogisticDialog"
......@@ -212,10 +210,12 @@
import Line2Hidden from '@/components/line2Hidden'
import NoPassIdentifyDialog from './components/NoPassIdentifyDialog'
import ReturnLogisticIdentifyDialog from './components/ReturnLogisticIdentifyDialog'
import { requestSigned, requestIdentify,exchangeApplyOrderDetail,exchangeApplyOrderIdentify } from '@/api/business/order'
import { requestSigned, exchangeApplyOrderDetail, exchangeApplyOrderIdentify } from '@/api/business/order'
import ExchangeLogisticIdentifyDialog from './components/ExchangeLogisticIdentifyDialog'
import ExchangeItemListView from './components/exchangeItemListView'
export default {
name: 'ChangeOrderDetailnew',
components: { ReturnLogisticIdentifyDialog, NoPassIdentifyDialog, Line2Hidden },
components: { ExchangeItemListView, ExchangeLogisticIdentifyDialog, ReturnLogisticIdentifyDialog, NoPassIdentifyDialog, Line2Hidden },
data() {
return {
itemContent: {},
......@@ -256,27 +256,27 @@ export default {
}
this.list = [model]
this.itemContent.images = response.data.data.images ? response.data.data.images.split(';') : []
const imageList = []
if (this.itemContent.videos) {
const videoList = this.itemContent.videos.split(',')
if (videoList.length === 2) {
imageList.push({
url: videoList[1],
type: 1,
videoUrl: videoList[0]
})
}
}
if (this.itemContent.images && this.itemContent.images.length > 0) {
for (var i = 0; i < this.itemContent.images.length; i++) {
imageList.push({
url: this.itemContent.images[i],
videoUrl: '',
type: 2
})
}
}
this.itemContent.imagelist = imageList
const imageList = []
if (this.itemContent.videos) {
const videoList = this.itemContent.videos.split(',')
if (videoList.length === 2) {
imageList.push({
url: videoList[1],
type: 1,
videoUrl: videoList[0]
})
}
}
if (this.itemContent.images && this.itemContent.images.length > 0) {
for (var i = 0; i < this.itemContent.images.length; i++) {
imageList.push({
url: this.itemContent.images[i],
videoUrl: '',
type: 2
})
}
}
this.itemContent.imagelist = imageList
}).catch((e) => {
console.log('===报错=', e)
this.$message.error(e.data && e.data.errmsg || '请求失败, 请重试')
......@@ -334,7 +334,7 @@ export default {
/**
* 不通过
*/
handleNoPass() {
handleNoPass() {
this.$confirm('该藏品确定通过平台鉴定?', '平台鉴定结果', {
confirmButtonText: '确定',
cancelButtonText: '取消',
......@@ -367,6 +367,14 @@ export default {
* @param row type: 1平台发货 2退回藏品
*/
handleSend(type) {
if (type === 3) {
this.distributionOrderId = this.itemContent && this.itemContent.userCommitOrderInfo && this.itemContent.userCommitOrderInfo.distributionOrderId
} else if (type === 2) {
this.distributionOrderId = this.itemContent && this.itemContent.receiveTargetOrderInfo && this.itemContent.receiveTargetOrderInfo.distributionOrderId
}
if (!this.distributionOrderId) {
return
}
this.logisticDialogShow = true
this.logisticType = type
},
......@@ -389,11 +397,11 @@ export default {
handleCancelNoPassDialog() {
this.handleGetDetail()
},
/**
/**
* 展示大图
* @param imageUrl
*/
handleShowLargeDialog(type, imageUrl, videoUrl) {
handleShowLargeDialog(type, imageUrl, videoUrl) {
if (type === 1) {
this.videosUrl = videoUrl
this.showVideoDialog = true
......@@ -402,7 +410,6 @@ export default {
this.showLargeDialog = true
}
}
}
}
</script>
......
......@@ -2,7 +2,12 @@
<div class="page_consignList">
<div class="filter-container">
<div class="button_left">
<el-input v-model="listQuery.exchangeApplyOrderId" clearable class="filter-item" style="width: 200px;" placeholder="请输入交换编号"/>
<el-input
v-model="listQuery.exchangeApplyOrderId"
clearable
class="filter-item"
style="width: 200px;"
placeholder="请输入交换编号" />
<el-input
v-model="listQuery.distributionOrderId"
clearable
......@@ -15,11 +20,27 @@
:key="item.label"
:label="item.label"
:value="item.value"
size="mini"/>
size="mini" />
</el-select>
<el-input v-model="listQuery.itemName" clearable class="filter-item" style="width: 200px;" placeholder="请输入申请方藏品名称"/>
<el-input v-model="listQuery.sellerName" clearable class="filter-item" style="width: 200px;" placeholder="请输入受理方藏家名称"/>
<el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 12px" @click="handleFilter">查找</el-button>
<el-input
v-model="listQuery.itemName"
clearable
class="filter-item"
style="width: 200px;"
placeholder="请输入申请方藏品名称" />
<el-input
v-model="listQuery.sellerName"
clearable
class="filter-item"
style="width: 200px;"
placeholder="请输入受理方藏家名称" />
<el-button
class="filter-item"
type="primary"
icon="el-icon-search"
style="margin-left: 12px"
@click="handleFilter">查找
</el-button>
<el-button class="filter-item" @click="resetSearchForm">重置</el-button>
</div>
</div>
......@@ -51,10 +72,10 @@
</div>
</template>
</el-table-column>
<el-table-column align="center" label="申请方藏品名称" min-width="200px" prop="userExchangeItemName">
<template slot-scope="scope">
<div class="user_self" @click="handleToDetailuser(scope.row)">{{ scope.row.userItemList[0].name}}</div>
<div class="user_self" @click="handleToDetailuser(scope.row)">{{ scope.row.userItemList[0].name }}</div>
</template>
</el-table-column>
<el-table-column align="center" label="受理方藏品图片" min-width="120px" prop="homePageImage">
......@@ -71,7 +92,7 @@
</el-table-column>
<el-table-column align="center" label="受理方藏品标题" min-width="200px" prop="name">
<template slot-scope="scope">
<div class="user_self" @click="handleToDetail(scope.row)">{{ scope.row.targetItemList[0].name}}</div>
<div class="user_self" @click="handleToDetail(scope.row)">{{ scope.row.targetItemList[0].name }}</div>
</template>
</el-table-column>
<!-- <el-table-column align="center" label="受理方藏品估价" prop="userExchangeItemOfficalPrice" /> -->
......@@ -79,8 +100,8 @@
<el-table-column align="center" label="订单状态" prop="stateName" />
<!-- <el-table-column align="center" label="用户寄出物流公司" prop="fromLogisticsName">
</el-table-column> -->
<!-- 中转单状态 (12, "待平台收货"), (13, "平台鉴定中"), (14, "待平台发货"), (15, "待平台退回"), (16, "平台已发货"), (17, "退回待收货"), (18, "退回已收货"),-->
<el-table-column align="center" label="操作" width="200">
<!-- 中转单状态 (12, "待平台收货"), (13, "平台鉴定中"), (14, "待平台发货"), (15, "待平台退回"), (16, "平台已发货"), (17, "退回待收货"), (18, "退回已收货"),-->
<el-table-column align="center" label="操作" width="200" fixed="right">
<template slot-scope="scope">
<el-button
type="primary"
......@@ -129,7 +150,7 @@ export default {
listLoading: true,
listQuery: {
page: 1,
limit: 20,
limit: 20
},
list: [],
total: 0,
......@@ -155,7 +176,7 @@ export default {
resetSearchForm() {
this.listQuery = {
page: 1,
limit: 20,
limit: 20
}
this.getList()
},
......@@ -173,10 +194,10 @@ export default {
this.getList()
},
handleToDetail(item) {
this.$router.push({ path: '/sale/itemDetail', query: { id: item.targetItemList[0].itemId}})
this.$router.push({ path: '/sale/itemDetail', query: { id: item.targetItemList[0].itemId }})
},
handleToDetailuser(item) {
this.$router.push({ path: '/sale/itemDetail', query: { id: item.userItemList[0].itemId}})
this.$router.push({ path: '/sale/itemDetail', query: { id: item.userItemList[0].itemId }})
},
/**
* 详情
......@@ -190,7 +211,10 @@ export default {
* @param item
*/
handleToOrderDetailnew(item) {
this.$router.push({ path: '/order/ChangeOrderDetailnew', query: { exchangeApplyOrderId: item.exchangeApplyOrderId }})
this.$router.push({
path: '/order/ChangeOrderDetailnew',
query: { exchangeApplyOrderId: item.exchangeApplyOrderId }
})
},
getList() {
this.listLoading = true
......@@ -221,23 +245,27 @@ export default {
.page_consignList {
padding: 20px;
.filter-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.image_preview {
width: 60px;
height: 60px;
align-content: center;
justify-content: center;
}
.user_self {
color: #409EFF;
}
.table-td-thumb {
width: 60px;
height: 60px;
}
width: 60px;
height: 60px;
align-content: center;
justify-content: center;
}
.user_self {
color: #409EFF;
}
.table-td-thumb {
width: 60px;
height: 60px;
}
</style>
<template>
<el-dialog
v-if="logisticDialogShow"
:visible.sync="logisticDialogShow"
:before-close="handleCancelLogisticDialog"
width="600px"
height="800px"
title="寄出快递">
<el-form ref="imageValue" :model="logisticForm" :rules="logisticRules">
<el-form-item label="物流公司" label-width="100px" prop="outLogisticsCode">
<el-select v-model="logisticForm.logisticsCode" placeholder="请选择物流公司" style="width: 240px;margin-right: 10px;margin-bottom: 10px">
<el-option
v-for="item in logisticList"
:key="item.code"
:label="item.name"
:value="item.code"/>
</el-select>
</el-form-item>
<el-form-item label="快递单号" label-width="100px" prop="outWaybill">
<el-input
v-model="logisticForm.waybill"
clearable
class="filter-item"
style="width: 240px;margin-right: 10px"
placeholder="请输入快递单号" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancelLogisticDialog">取 消</el-button>
<el-button type="primary" @click="handleLogistic">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
import { MessageBox } from 'element-ui'
import { requestIdentifyDelivery, requestIdentifySendBack, requestLogisticsList, requestDelivery } from '@/api/business/order'
export default {
name: 'ExchangeLogisticIdentifyDialog',
props: {
logisticDialogShow: {
type: Boolean,
default: false
},
distributionOrderId: {
type: String,
default: ''
},
identifyOrderId: {
type: String,
default: ''
},
type: {
type: Number,
default: 1
}
},
data() {
return {
logisticForm: {
logisticsCode: '',
waybill: ''
},
logisticRules: {
logisticsCode: [
{ required: true, message: '请选择物流公司', trigger: 'blur' }
],
waybill: [
{ required: true, message: '请输入快递单号', trigger: 'blur' }
]
},
logisticList: [
{
'code': 'JD',
'name': '京东快递'
},
{
'code': 'SF',
'name': '顺丰快递'
},
{
'code': 'STO',
'name': '申通快递'
},
{
'code': 'YTO',
'name': '圆通快递'
},
{
'code': 'ZTO',
'name': '中通快递'
},
{
'code': 'YD',
'name': '韵达快递'
}
]
}
},
created() {
this.getLogisticsList()
},
methods: {
handleCancelLogisticDialog() {
this.$emit('cancelDialog')
},
/**
* 获取物流公司列表
*/
getLogisticsList() {
requestLogisticsList().then((response) => {
console.log('==response===', response)
this.logisticList = response.data.data
}).catch((err) => {
console.log('==err===', err)
})
},
/**
* 实物评估
*/
handleLogistic() {
const params = { ...this.logisticForm, distributionOrderId: this.distributionOrderId, identifyOrderId: this.identifyOrderId }
this.$refs.imageValue.validate((valid) => {
if (valid) {
if (this.type === 1) {
requestIdentifyDelivery(params)
.then(response => {
this.itemContent = {}
this.logisticForm = {}
this.$notify.success({
message: '发货成功'
})
this.$emit('refreshDelivery')
})
.catch(response => {
MessageBox.alert('业务错误:' + response.data.errmsg, '警告', {
confirmButtonText: '确定',
type: 'error'
})
})
} if (this.type === 3) {
requestDelivery(params)
.then(response => {
this.itemContent = {}
this.logisticForm = {}
this.$notify.success({
message: '发货成功'
})
this.$emit('refreshDelivery')
})
.catch(response => {
MessageBox.alert('业务错误:' + response.data.errmsg, '警告', {
confirmButtonText: '确定',
type: 'error'
})
})
} else {
requestIdentifySendBack(params)
.then(response => {
this.itemContent = {}
this.logisticForm = {}
this.$notify.success({
message: '退回成功'
})
this.$emit('refreshSendBack')
})
.catch(response => {
MessageBox.alert('业务错误:' + response.data.errmsg, '警告', {
confirmButtonText: '确定',
type: 'error'
})
})
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100%;
text-align: center;
}
.image {
width: 400px;
height: auto;
}
</style>
<template>
<div/>
</template>
<script>
export default {
name: 'ExchangeItemListView',
props: {
itemList: {
type: Array,
default: () => {
return []
}
}
}
}
</script>
<style scoped>
</style>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment