Skip to content

GitLab

Q
qk_admin
Commit 67b816db authored by yaya's avatar yaya
Browse files
Options

feat: 寄售详情功能优化

parent bed4a43c
Hide whitespace changes
Inline Side-by-side
Showing with 495 additions and 9 deletions
src/api/business/consign.js
View file @ 67b816db
......@@ -35,4 +35,10 @@ export function cancelValue(params) {
data: params
})
}
export function findDetail(params) {
return request({
url: '/consignSaleManage/findDetail',
method: 'post',
data: params
})
}
src/router/index.js
View file @ 67b816db
......@@ -398,7 +398,8 @@ export const asyncRouterMap = [
title: '寄售详情',
icon: 'form',
noCache: true
}
},
hidden: true
}
]
},
......
src/views/consign/consignDetail.vue
View file @ 67b816db
<template>
<div>
详情
<div class="page_consignDetail">
<div class="consign_top">
<div>寄售单号：</div>
<div>{{ saleId }}</div>
<el-button
type="text"
style="margin-left: 10px; margin-right: auto">{{ systemStateName }}
</el-button>
<el-button
v-if="systemState === 1"
type="primary"
size="mini"
@click="imageValueDialogShow = true">图文评估
</el-button>
<el-button
v-if="systemState === 8"
type="primary"
size="mini"
@click="identifyValueDialogShow=true">实物估价
</el-button>
<el-button
v-if="systemState === 10"
type="primary"
size="mini"
@click="finishDialogShow = true">完成寄售
</el-button>
<el-button
v-if="systemState < 20"
type="danger"
size="mini"
@click="cancelConsignDialogShow = true">取消寄售
</el-button>
</div>
<div class="consign_content">
<el-card class="box-card" style="width: 60%; height: calc(100vh - 200px)">
<div slot="header" class="clearfix">
<span style="font-weight: bold">寄售单信息</span>
</div>
<div class="consign_content_item">
<div style="font-weight: bold">货品信息</div>
<div class="consign_content_item__text">{{ `藏品类目：${consignDetail.cidName || '-'}` }}</div>
<div class="consign_content_item__text">{{ `藏品名称：${consignDetail.name || '-'}` }}</div>
<div class="consign_content_item__text">{{ `详细介绍：${consignDetail.detail || '-'}` }}</div>
<div class="consign_content_item__text">{{ `\u2003入手价：¥${consignDetail.price || '-'}` }}</div>
<div class="consign_content_item__image">
<div style="width: 180px">藏品图片/视频：</div>
<div class="image_content">
<div v-if="consignDetail.videosImageUrl" class="image_content_video">
<img :src="consignDetail.videosImageUrl" class="image_content_video_item">
<img class="image_content_video_icon" src="https://cdn.wanwudezhi.com/static/web-static/image/10651432d8c28651da81753c260d81b3_120x120.png">
</div>
<div v-for="(item, index) in consignDetail.imageList" :key="item + index" class="select_item" @click="handleShowLargeDialog(item)">
<img :src="item" class="image_content_item">
</div>
</div>
</div>
</div>
</el-card>
<el-card class="box-card" style="width: 40%;height: calc(100vh - 200px);margin-left: 20px">
<div slot="header" class="clearfix">
<span style="font-weight: bold">寄售单时间线</span>
</div>
<div style="height: calc(100vh - 280px)">
<el-steps :active="1" direction="vertical" finish-status="success">
<el-step v-for="item in consignSaleRecordVoList" :key="item.content + item.createTime" :title="item.content" :description="item.createTime"/>
</el-steps>
</div>
</el-card>
</div>
<el-dialog
v-if="imageValueDialogShow"
:visible.sync="imageValueDialogShow"
width="600px"
height="800px"
title="图文评估">
<el-form ref="imageValue" :model="imageValueForm" :rules="imageValueRules">
<el-form-item label="估价" label-width="60px" prop="imgValuation">
<el-input v-model="imageValueForm.imgValuation" maxlength="10" style="width: 400px" placeholder="请输入估价金额" />
</el-form-item>
<el-form-item label="理由" label-width="60px" prop="remark">
<el-input
v-model="imageValueForm.remark"
:autosize="{ minRows: 8, maxRows: 8}"
maxlength="100"
type="textarea"
show-word-limit
placeholder="请输入理由"
style="width: 400px" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancelImageValueDialog">取 消</el-button>
<el-button type="primary" @click="handleImageValue">确 定</el-button>
</div>
</el-dialog>
<el-dialog
v-if="identifyValueDialogShow"
:visible.sync="identifyValueDialogShow"
width="600px"
height="800px"
title="实物估价">
<el-form ref="identifyValue" :model="identifyValueForm" :rules="identifyValueRules">
<el-form-item label="估价" label-width="60px" prop="valuation">
<el-input v-model="identifyValueForm.valuation" style="width: 400px" maxlength="10" placeholder="请输入估价金额">
<template slot="append">元</template>
</el-input>
</el-form-item>
<el-form-item label="理由" label-width="60px" prop="remark">
<el-input
v-model="identifyValueForm.remark"
:autosize="{ minRows: 8, maxRows: 8}"
maxlength="100"
type="textarea"
show-word-limit
placeholder="请输入理由（最多不超过100个字）"
style="width: 400px" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancelIdentifyDialog">取 消</el-button>
<el-button type="primary" @click="handleIdentifyValue">确 定</el-button>
</div>
</el-dialog>
<el-dialog
v-if="finishDialogShow"
:visible.sync="finishDialogShow"
width="600px"
height="800px"
title="完成寄售">
<el-form ref="finish" :model="finishForm" :rules="finishRules">
<el-form-item label="成交金额" label-width="80px" prop="dealPrice">
<el-input v-model="finishForm.dealPrice" style="width: 400px" maxlength="10" placeholder="请输入成交金额">
<template slot="append">元</template>
</el-input>
</el-form-item>
<el-form-item label="成交平台" label-width="80px" prop="remark">
<el-input v-model="finishForm.remark" style="width: 400px" maxlength="10" placeholder="请输入成交平台" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancelFinishDialog">取 消</el-button>
<el-button type="primary" @click="handleFinishValue">确 定</el-button>
</div>
</el-dialog>
<el-dialog
v-if="cancelConsignDialogShow"
:visible.sync="cancelConsignDialogShow"
width="600px"
height="800px"
title="取消寄售">
<el-form ref="cancel" :model="cancelForm" :rules="cancelRules">
<el-form-item label="拒绝类型" label-width="80px" prop="content">
<el-select v-model="cancelForm.content" placeholder="请选择拒绝类型">
<el-option label="平台取消寄售" value="平台取消寄售" />
<el-option label="用户取消寄售" value="用户取消寄售" />
</el-select>
</el-form-item>
<el-form-item label="理由" label-width="80px" prop="remark">
<el-input
v-model="cancelForm.remark"
:autosize="{ minRows: 8, maxRows: 8}"
style="width: 400px"
maxlength="100"
type="textarea"
show-word-limit
placeholder="请输入理由（最多不超过100个字）" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancelFinishDialog">取 消</el-button>
<el-button type="primary" @click="handleCancelValue">确 定</el-button>
</div>
</el-dialog>
<CheckLargeImageDialog
:show-large-dialog="showLargeDialog"
:image-url="imageUrl"
@closeLargeDialog="showLargeDialog = false"
/>
</div>
</template>
<script>
import { findDetail, imgValuate, identifyImage, finishValue, cancelValue } from '@/api/business/consign'
import { MessageBox } from 'element-ui'
import CheckLargeImageDialog from '../goods/components/CheckLargeImageDialog'
export default {
name: 'ConsignDetail'
name: 'ConsignDetail',
components: { CheckLargeImageDialog },
data() {
return {
saleId: '',
systemState: 0,
systemStateName: '',
consignDetail: {},
consignSaleRecordVoList: [],
imageValueForm: {
imgValuation: '',
remark: ''
},
imageValueDialogShow: false,
imageValueRules: {
imgValuation: [
{ required: true, message: '估价金额不能为空', trigger: 'blur' }
],
remark: [
{ required: true, message: '原因不能为空', trigger: 'blur' }
]
},
// 实物估价
identifyValueForm: {
valuation: '',
remark: ''
},
identifyValueDialogShow: false,
identifyValueRules: {
valuation: [
{ required: true, message: '估价金额不能为空', trigger: 'blur' }
],
remark: [
{ required: true, message: '原因不能为空', trigger: 'blur' }
]
},
// 完成寄售
finishForm: {
dealPrice: '',
remark: ''
},
finishDialogShow: false,
finishRules: {
dealPrice: [
{ required: true, message: '成交金额不能为空', trigger: 'blur' }
],
remark: [
{ required: true, message: '原因不能为空', trigger: 'blur' }
]
},
// 取消
cancelForm: {
content: '',
remark: ''
},
cancelConsignDialogShow: false,
cancelRules: {
content: [
{ required: true, message: '请选择取消类型', trigger: 'blur' }
],
remark: [
{ required: true, message: '原因不能为空', trigger: 'blur' }
]
},
imageUrl: '',
showLargeDialog: false
}
},
created() {
if (this.$route.query.saleId == null) {
return
}
this.saleId = this.$route.query.saleId
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.handleGetDetail(loading)
},
methods: {
handleGetDetail(loading) {
findDetail({ saleId: this.saleId })
.then(response => {
if (loading) {
loading.close()
}
this.consignDetail = response.data.data.itemVo
if (this.consignDetail.images) {
this.consignDetail.imageList = this.consignDetail.images.split(';') || []
}
if (this.consignDetail.videos) {
const list = this.consignDetail.videos.split(',')
if (list && list.length > 1) {
this.consignDetail.videosUrl = list[0]
this.consignDetail.videosImageUrl = list[1]
}
}
this.systemStateName = response.data.data.systemStateName
this.systemState = response.data.data.systemState
if (response.data.data.consignSaleRecordVoList) {
this.consignSaleRecordVoList = response.data.data.consignSaleRecordVoList.reverse()
}
})
.catch(response => {
if (loading) {
loading.close()
}
MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
confirmButtonText: '确定',
type: 'error'
})
})
},
/**
* 图文评估
*/
handleImageValue() {
if (this.saleId) {
const params = { ...this.imageValueForm, saleId: this.saleId }
this.$refs.imageValue.validate((valid) => {
if (valid) {
imgValuate(params)
.then(response => {
this.imageValueDialogShow = false
this.imageValueForm = {}
this.$notify.success({
message: '图文估价成功'
})
this.handleGetDetail()
})
.catch(response => {
MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
confirmButtonText: '确定',
type: 'error'
})
})
}
})
}
},
// 取消图文估价
handleCancelImageValueDialog() {
this.imageValueDialogShow = false
this.imageValueForm = {}
},
// 取消实物评估
handleCancelIdentifyDialog() {
this.identifyValueDialogShow = false
this.identifyValueForm = {}
},
// 取消完成寄售
handleCancelFinishDialog() {
this.finishDialogShow = false
},
/**
* 实物评估
*/
handleIdentifyValue() {
if (this.saleId) {
const params = { ...this.identifyValueForm, saleId: this.saleId }
this.$refs.identifyValue.validate((valid) => {
if (valid) {
identifyImage(params)
.then(response => {
this.identifyValueDialogShow = false
this.identifyValueForm = {}
this.$notify.success({
message: '实物评估成功'
})
this.handleGetDetail()
})
.catch(response => {
MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
confirmButtonText: '确定',
type: 'error'
})
})
}
})
}
},
/**
* 完成寄售
*/
handleFinishValue() {
if (this.saleId) {
const params = { ...this.finishForm, saleId: this.saleId }
this.$refs.finish.validate((valid) => {
if (valid) {
finishValue(params)
.then(response => {
this.finishDialogShow = false
this.finishForm = {}
this.$notify.success({
message: '完成寄售成功'
})
this.handleGetDetail()
})
.catch(response => {
MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
confirmButtonText: '确定',
type: 'error'
})
})
}
})
}
},
/**
* 取消寄售
*/
handleCancelValue() {
if (this.saleId) {
const params = { ...this.cancelForm, saleId: this.saleId }
this.$refs.cancel.validate((valid) => {
if (valid) {
cancelValue(params)
.then(response => {
this.cancelConsignDialogShow = false
this.cancelForm = {}
this.$notify.success({
message: '取消寄售成功'
})
this.handleGetDetail()
})
.catch(response => {
MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
confirmButtonText: '确定',
type: 'error'
})
})
}
})
}
},
handleShowLargeDialog(imageUrl) {
this.imageUrl = imageUrl
this.showLargeDialog = true
}
}
}
</script>
<style scoped>
<style lang="scss" scoped>
.page_consignDetail {
padding: 0 20px 20px;
.consign_top {
display: flex;
flex-direction: row;
height: 60px;
align-items: center;
}
.consign_content {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
.consign_content_item__text {
margin-top: 15px;
}
.consign_content_item__image {
margin-top: 10px;
display: flex;
flex-direction: row;
.image_content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.image_content_video {
position: relative;
.image_content_video_item {
width: 90px;
height: 90px;
object-fit: cover;
margin-right: 10px;
}
.image_content_video_icon {
width: 25px;
height: 25px;
position: absolute;
top: 5px;
left: 5px;
}
}
.image_content_item {
width: 90px;
height: 90px;
object-fit: cover;
margin-right: 10px;
}
}
}
}
}
</style>
src/views/consign/consignList.vue
View file @ 67b816db
......@@ -306,8 +306,8 @@ export default {
/**
* 详情
*/
handleToDetail() {
handleToDetail(item) {
this.$router.push({ path: '/consign/consignDetail', query: { saleId: item.saleId }})
},
/**
* 图文评估
......
src/views/goods/infoSet.vue
View file @ 67b816db
......@@ -63,7 +63,6 @@
{{ imageMainPosition === index ? '主图' : '设为主图' }}
</div>
</div>
</div>
</Draggable>
......
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