提交 90a27164 authored 作者: 王鹏飞's avatar 王鹏飞

update

上级 e7a90348
......@@ -60,6 +60,7 @@
:current-page.sync="page.currentPage"
@size-change="pageSizeChange"
@current-change="fetchList"
:hide-on-single-page="true"
v-if="hasPagination"
>
</el-pagination>
......
......@@ -284,7 +284,7 @@ export default {
},
// 成功回调
handleSuccess(data) {
this.$message({ message: '保存商品成功', type: 'success' })
// this.$message({ message: '保存商品成功', type: 'success' })
this.$router.push({ path: '/preview', query: { shop_id: this.shopId, id: data.spu_id } })
},
// 确定添加商品
......
......@@ -9,6 +9,20 @@
<el-button type="primary">发布商品</el-button>
</router-link>
</template>
<template v-slot:table-goods="{ row }">
<div class="table-goods">
<el-image :src="imageUrl(row.chart_oss)" fit="cover" class="table-goods-pic">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<div class="table-goods-name">{{ row.spu_name }}</div>
</div>
</template>
<template v-slot:table-view="{ row }">
<p>访客数:{{ row.usesr_view }}</p>
<p>浏览量:{{ row.page_view }}</p>
</template>
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleUpdate(row)">编辑</el-button>
<el-button type="text" @click="handlePromote(row)">推广</el-button>
......@@ -74,27 +88,37 @@ export default {
}
],
columns: [
{ type: 'selection', align: 'left' },
{ label: '商品名', prop: 'spu_name' },
{ label: '价格(元)', prop: 'price_zone' },
{ label: '访问量', prop: 'page_view' },
{ label: '库存', prop: 'stock' },
{ label: '销量', prop: 'sales_volume' },
{ label: '创建时间', prop: 'create_time', width: 180 },
{ type: 'selection' },
{ label: '商品名', prop: 'spu_name', slots: 'table-goods', minWidth: 140 },
{ label: '价格(元)', prop: 'price_zone', align: 'center' },
{ label: '访问量', prop: 'page_view', slots: 'table-view', minWidth: 120 },
{ label: '库存', prop: 'stock', align: 'center' },
{ label: '销量', prop: 'sales_volume', align: 'center' },
{ label: '创建时间', prop: 'create_time', width: 110 },
{
label: '商品状态',
prop: 'status',
align: 'center',
computed({ row }) {
const map = { 1: '仓库中', 2: '销售中', 3: '已售罄', 4: '下架', 5: '已删除' }
return map[row.status]
}
},
{ label: '操作', slots: 'table-x', width: 150 }
{ label: '操作', slots: 'table-x', align: 'right', width: 150 }
]
}
}
},
methods: {
imageUrl(value) {
try {
const imgList = value ? JSON.parse(value) : []
const [first = {}] = imgList
return first.url
} catch (error) {
return ''
}
},
beforeRequest(params) {
params.status = this.activeName === '0' ? '' : this.activeName
return params
......@@ -145,3 +169,33 @@ export default {
}
}
</script>
<style lang="scss">
.table-goods {
display: flex;
align-items: center;
}
.table-goods-pic {
margin-right: 10px;
width: 60px;
height: 60px;
}
.table-goods-name {
flex: 1;
color: #3276fc;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #f5f7fa;
color: #909399;
font-size: 14px;
}
</style>
<template>
<app-card v-loading="loading" element-loading-text="拼命加载中">
<el-container>
<el-aside width="300px">
<div style="text-align: left; margin-left: 20px">
<div class="order-header">
<div>
<br />
<h2>订单信息</h2>
订单编号:{{ data.order_id }}
<el-popover placement="bottom-start" trigger="click">
<el-button type="text" size="medium" slot="reference">更多</el-button>
<div>外部订单编号: {{ data.order_detail_id }}</div>
<div>支付流水号:{{ data.payment_order_id }}</div>
</el-popover>
</div>
<div style="font-size: 10px; color: #999">
<br />
订单编号: {{ dataDetail.id }} <br /><br />订单类型: 普通订单 <br /><br />订单来源: 其他 <br />
<br />付款方式: 微信安全支付-代销 <br /><br />买家: {{ dataDetail.buyerSubject }}
<br /><br />---------------------------------- <br /><br />配送方式: 快递配送 <br /><br />收货信息:
{{ address }} <br /><br />买家留言: - <br /><br />
<div>下单时间:{{ data.create_time }}</div>
</div>
<div class="order-status">
<el-steps :active="stepActive" align-center>
<el-step title="买家下单" :description="data.create_time"></el-step>
<el-step title="买家付款" :description="data.pay_time"></el-step>
<el-step title="交易成功" :description="data.update_time"></el-step>
</el-steps>
<!-- <el-row>
<el-col :span="8"></el-col>
<el-col :span="16">
<el-steps :active="2" align-center>
<el-step title="买家下单" :description="data.create_time"></el-step>
<el-step title="买家付款" :description="data.pay_time"></el-step>
<el-step title="交易成功" :description="data.update_time"></el-step>
</el-steps>
</el-col>
</el-row> -->
</div>
</el-aside>
<el-main>
<div style="text-align: left; margin-left: 20px">
<div>
<h2>状态信息</h2>
<div class="order-fields">
<el-row>
<el-col :span="12">
<h3 class="order-fields-title">买家信息</h3>
<div class="order-field-item">
<div class="order-field-item__label">实付金额:</div>
<div class="order-field-item__content">{{ data.payment_money }}</div>
</div>
<br />
<div style="font-size: 12px; color: #999">
<a>下单时间:{{ dataDetail.createTime | formatDateTime }}</a>
<a><br /><br />支付时间:{{ dataDetail.payTime | formatDateTime }}</a>
<a><br /><br />支付状态:{{ updatepayState(dataDetail.payState) }}</a>
<a v-if="dataDetail.tradeState > 3"><br /><br />发货时间:{{ dataDetail.shipTime | formatDateTime }}</a>
<a v-if="dataDetail.payState === 110"
><br /><br />完成时间:{{ dataDetail.completeTime | formatDateTime }}</a
>
<a v-if="dataDetail.payState === 110"><br /><br />退款时间:{{ dataDetail.refundTime | formatDateTime }}</a>
<a><br /><br />订单状态:{{ updateTradeState(dataDetail.tradeState) }}</a>
<br /><br />
<el-button v-if="dataDetail.tradeState === 3" @click="Clickshipment(dataDetail)" type="text"
>发货</el-button
>
<el-button
v-if="dataDetail.payState === 60 && dataDetail.goodAmount > 0"
@click="Clickrefund(dataDetail)"
type="text"
>退款</el-button
>
<el-button
v-if="dataDetail.payState === 1 || dataDetail.payState === 110"
@click="Clickclose(dataDetail)"
type="text"
>关闭订单</el-button
>
<div class="order-field-item">
<div class="order-field-item__label">付款方式:</div>
<div class="order-field-item__content">{{ data.payment_method }}</div>
</div>
<div class="order-field-item">
<div class="order-field-item__label">付款时间:</div>
<div class="order-field-item__content">{{ data.pay_time }}</div>
</div>
</el-main>
<div>
<el-dialog title="发货" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="订单编号" :label-width="formLabelWidth">
<el-input v-model="form.id" auto-complete="off" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="快递公司" :label-width="formLabelWidth">
<el-select v-model="form.logisticsCompanyName">
<el-option
v-for="(company, index) in expressList"
:key="`express_${index}`"
:label="company.name"
:value="company.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="快递单号" :label-width="formLabelWidth">
<el-input v-model="form.logisticsNo" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="Btnshipment">确 定</el-button>
</el-col>
<el-col :span="12">
<h3 class="order-fields-title">付款信息</h3>
<div class="order-field-item">
<div class="order-field-item__label">买家:</div>
<div class="order-field-item__content">{{ data.shipping_user }}</div>
</div>
</el-dialog>
<div class="order-field-item">
<div class="order-field-item__label">买家留言:</div>
<div class="order-field-item__content">
<p v-for="(item, index) in messageList" :key="index">{{ item.filed }}:{{ item.value }}</p>
</div>
</el-container>
<br />
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="itemImageUrl" label="" width="80">
<template slot-scope="scope">
<img :src="scope.row.itemImageUrl" alt="" style="width: 60px; height: 60px" />
</template>
</el-table-column>
<el-table-column prop="itemName" label="商品" width="280"></el-table-column>
<el-table-column prop="itemPrice" label="价格" width="180"></el-table-column>
<el-table-column prop="itemCount" label="数量" width="180"></el-table-column>
<el-table-column prop="youhui" label="优惠" width="180"></el-table-column>
<el-table-column prop="xiaoji" label="小计"></el-table-column>
<!-- <el-table-column prop="status" label="状态"></el-table-column> -->
</el-table>
</div>
<br />
<div style="text-align: right; margin-left: 20px">
订单共{{ tableData.length }}件商品,总计: <a style="color: red">¥{{ dataDetail.goodAmount }}</a
>(含运费 ¥0.00)
</el-col>
</el-row>
</div>
<table-list v-bind="tableOptions">
<template v-slot:table-goods="{ row }">
<div class="table-goods">
<el-image :src="imageUrl(row.chart_oss)" fit="cover" class="table-goods-pic">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<div class="table-goods-name">{{ row.spu_name }}</div>
</div>
</template>
</table-list>
</app-card>
</template>
<script>
import AppCard from '@/components/base/card'
import { getOrderDetail, closeOrder, refundOrder, Shipment } from '@/api/order'
import * as utils from '@/utils/index'
import TableList from '@/components/base/tableList'
import { getOrderList } from '@/api/order'
export default {
components: { AppCard },
components: { AppCard, TableList },
data() {
return {
loading: false,
dataDetail: {},
tableData: [],
dialogFormVisible: false,
form: {
id: null,
logisticsCompanyName: null,
logisticsNo: null
},
formLabelWidth: '120px',
expressList: [
{ name: '圆通快递' },
{ name: '中通快递' },
{ name: '顺丰快递' },
{ name: '韵达快递' },
{ name: '申通快递' },
{ name: '天天快递' },
{ name: '百世快递' },
{ name: '邮政' },
{ name: '德邦物流' }
]
data: {}
}
},
computed: {
// 收货地址
address() {
let tradeAddress = this.dataDetail.tradeAddress || null
let results = ''
if (tradeAddress) {
results =
tradeAddress.province +
' ' +
tradeAddress.city +
' ' +
tradeAddress.district +
' ' +
tradeAddress.address +
' ' +
tradeAddress.name +
' ' +
tradeAddress.phone
}
return results
}
},
filters: {
formatDateTime: utils.formatDateTime
},
created() {
this.pid = this.$route.params.id
this.getDetail()
},
methods: {
// 获取详情数据
getDetail() {
getOrderDetail({ id: this.pid }).then(response => {
this.dataDetail = response.data
this.tableData = response.data.tradeItemList.map(item => {
let xiaoji = item.itemPrice * item.itemCount
return Object.assign({}, item, {
xiaoji,
youhui: '--',
status: '完成'
})
})
})
shopId() {
return this.$store.state.shopId
},
// 关闭订单
Clickclose(data) {
this.$confirm('确定要关闭订单?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.closeOrder0(data.id)
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消关闭'
})
})
pid() {
return this.$route.params.id || this.$route.query.id
},
// 关闭
closeOrder0(ArticleId) {
closeOrder({ id: ArticleId }).then(response => {
this.$message({
message: response.message,
type: 'success'
})
// 更改发货状态
this.dataDetail.tradeState = response.data.tradeState
this.dataDetail.payState = response.data.payState
})
tableOptions() {
return {
columns: [
{ label: '商品', prop: 'spu_name', slots: 'table-goods', minWidth: 140 },
{ label: '单价(元)', prop: 'product_price', align: 'center' },
{ label: '数量', prop: 'buy_count', align: 'center' },
{ label: '优惠(元)', prop: 'district_money', align: 'center' },
{ label: '小记(元)', prop: 'payment_money', align: 'center' }
],
data: [this.data]
}
},
// 确定退款
Clickrefund(data) {
this.$confirm('确定要退款?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.Clickrefund0(data.id)
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消退款'
})
})
// 留言
messageList() {
const message = this.data.app_button_text
try {
return message ? JSON.parse(message) : []
} catch (error) {
console.log('留言解析错误')
return []
}
},
// 退款
Clickrefund0(ArticleId) {
refundOrder({ id: ArticleId }).then(response => {
this.$message({
message: response.message,
type: 'success'
})
// 更改发货状态
this.dataDetail.tradeState = response.data.tradeState
this.dataDetail.payState = response.data.payState
// 退款提醒
this.$alert('后台操作完成,请前往手机客户端完成退款流程', '退款提醒', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'success',
message: response.message
})
stepActive() {
return parseInt(this.data.order_status)
}
})
})
},
// 发货表单
Clickshipment(data) {
this.form.id = data.id
this.dialogFormVisible = true
methods: {
init() {
this.viewRender()
},
// 确定发货
Btnshipment() {
this.dialogFormVisible = false
Shipment(this.form).then(response => {
this.$message({
message: response.message,
type: 'success'
})
// 更改发货状态
this.dataDetail.tradeState = response.data.tradeState
viewRender() {
getOrderList({ shop_id: this.shopId, order_id: this.pid }).then(response => {
const [first] = response.data
this.data = first
})
},
// 转换订单状态
updateTradeState(val) {
switch (val) {
case 0:
return '待付款'
case 3:
return '待发货'
case 6:
return '待收货'
case 10:
return '取消'
case 20:
return '完成'
case 40:
return '已退款'
}
},
// 转换支付状态
updatepayState(val) {
switch (val) {
case 1:
return '未支付'
case 30:
imageUrl(value) {
try {
const imgList = value ? JSON.parse(value) : []
const [first = {}] = imgList
return first.url
} catch (error) {
return ''
case 40:
return '用户正在支付'
case 50:
return '支付错误'
case 60:
return '支付成功'
case 70:
return '支付关闭'
case 80:
return '交易结束'
case 100:
return '退款中'
case 110:
return '已退款'
}
}
},
beforeMount() {
this.init()
}
}
</script>
<style scoped>
.el-header,
.el-footer {
background-color: #b3c0d1;
color: #333;
text-align: center;
line-height: 60px;
<style lang="scss">
.table-goods {
display: flex;
align-items: center;
}
.el-aside {
text-align: center;
border: 1px solid #e5e5e5;
/* line-height: 200px; */
.table-goods-pic {
margin-right: 10px;
width: 60px;
height: 60px;
}
.el-main {
border: 1px solid #e5e5e5;
text-align: center;
/* line-height: 160px; */
.table-goods-name {
flex: 1;
color: #3276fc;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
body > .el-container {
margin-bottom: 40px;
.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #f5f7fa;
color: #909399;
font-size: 14px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
.order-header {
display: flex;
align-items: center;
& > div {
margin-right: 20px;
}
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
.order-status {
padding: 40px 20px;
margin-top: 24px;
// border: 1px solid #ebedf0;
.el-col {
padding: 40px 20px;
}
.el-col-16 {
border-left: 1px solid #ebedf0;
}
}
.el-table th {
background: #f4f4f4 !important;
font-size: 10px;
.order-fields {
margin-top: 24px;
background-color: #f7f8fa;
border-radius: 8px;
padding: 20px;
}
.order-fields-title {
margin-bottom: 16px;
color: #323233;
font-weight: 700;
}
.order-field-item {
display: flex;
margin-bottom: 8px;
}
.order-field-item__content {
flex: 1;
overflow: hidden;
}
</style>
......@@ -10,14 +10,22 @@
<el-button type="primary">新增订单</el-button>
</router-link>
</template>
<template v-slot:table-goods="{ row }">
<div class="table-goods">
<el-image :src="imageUrl(row.chart_oss)" fit="cover" class="table-goods-pic">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<div class="table-goods-name">{{ row.spu_name }}</div>
</div>
</template>
<template v-slot:table-price="{ row }">
<p>{{ row.product_price }}</p>
<p>{{ row.buy_count }}</p>
<p>1件</p>
</template>
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleUpdate(row)">编辑</el-button>
<el-button type="text" @click="handlePromote(row)">推广</el-button>
<el-button type="text" @click="handleCopy(row)">复制</el-button>
<el-button type="text" @click="handleView(row)">查看</el-button>
</template>
</table-list>
</app-card>
......@@ -37,7 +45,7 @@ export default {
activeName: '0',
tabList: [
{ label: '全部', name: '0' },
{ label: '付款', name: '2' },
{ label: '付款', name: '2' },
{ label: '待发货', name: '3' },
{ label: '已发货', name: '4' },
{ label: '已完成', name: '5' },
......@@ -52,53 +60,118 @@ export default {
return {
remote: {
httpRequest: getOrderList,
params: { shop_id: this.$store.state.shopId },
params: { shop_id: this.$store.state.shopId, spu_id: '', order_status: '' },
beforeRequest: this.beforeRequest
},
filters: [
{
type: 'input',
prop: 'name',
placeholder: '请输入商品名称'
prop: 'spu_id',
placeholder: '请输入商品编号'
},
{
type: 'select',
prop: 'group_id',
prop: 'order_status',
options: [
{ label: '活动', value: 1 },
{ label: '报名费', value: 2 },
{ label: '学费', value: 3 },
{ label: '活动', value: 4 }
]
{ label: '待付款', name: '2' },
{ label: '待发货', name: '3' },
{ label: '已发货', name: '4' },
{ label: '已完成', name: '5' },
{ label: '已关闭', name: '6' },
{ label: '售后中', name: '7' }
],
valueKey: 'name'
}
],
columns: [
{ label: '商品', prop: 'shop_name' },
{ label: '单价(元)/数量', prop: 'product_price', slots: 'table-price' },
{ label: '售后', prop: 'sellPrice' },
{ label: '买家 / 收货人', prop: 'shipping_user' },
{ label: '配送方式', prop: 'sellCount' },
{ label: '实收金额(元)', prop: 'payment_money' },
{ label: '订单状态', prop: 'order_status' },
{ label: '操作', slots: 'table-x' }
{ label: '商品', prop: 'shop_name', slots: 'table-goods', minWidth: 140 },
{ label: '单价(元)/数量', prop: 'product_price', slots: 'table-price', align: 'right' },
{ label: '订单号', prop: 'order_id' },
{ label: '下单时间', prop: 'create_time', width: 110 },
{ label: '买家 / 收货人', prop: 'shipping_user', align: 'center' },
{ label: '实收金额(元)', prop: 'payment_money', align: 'center' },
{
label: '支付方式',
prop: 'payment_method',
align: 'center',
computed({ row }) {
const map = {
1: '现金',
2: '余额',
3: '网银',
4: '支付宝',
5: '微信',
7: '微信JSAPI',
8: '微信H5'
}
return map[row.payment_method]
}
},
{
label: '订单状态',
prop: 'order_status',
align: 'center',
computed({ row }) {
const map = { 1: '待付款', 2: '待发货', 3: '已发货', 4: '已完成', 5: '已关闭', 6: '售后' }
return map[row.order_status]
}
},
{ label: '操作', slots: 'table-x', align: 'right', width: 60 }
]
}
}
},
methods: {
imageUrl(value) {
try {
const imgList = value ? JSON.parse(value) : []
const [first = {}] = imgList
return first.url
} catch (error) {
return ''
}
},
beforeRequest(params) {
params.status = this.activeName === '0' ? '' : this.activeName
// params.order_status = this.activeName === '0' ? '' : this.activeName
return params
},
handleClick() {
this.$refs.list.refetch(true)
},
// 编辑
handleUpdate() {},
// 推广
handlePromote() {},
// 复制
handleCopy() {}
// 查看
handleView(row) {
this.$router.push({ name: 'orderDetail', params: { id: row.order_id } })
}
}
}
</script>
<style lang="scss">
.table-goods {
display: flex;
align-items: center;
}
.table-goods-pic {
margin-right: 10px;
width: 60px;
height: 60px;
}
.table-goods-name {
flex: 1;
color: #3276fc;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #f5f7fa;
color: #909399;
font-size: 14px;
}
</style>
<template>
<div class="preview"></div>
<div class="preview">
<div class="preview-hd">
<div class="preview-hd-inner">
<div class="preview-hd-left">预览:<span class="active">手机版</span><span>PC版</span></div>
<div class="preview-hd-right">
<el-button size="small" type="primary" plain @click="handleEdit">编辑本商品</el-button>
<el-button size="small" type="primary" plain @click="handleAdd">发布新商品</el-button>
<el-button size="small" type="primary" @click="handleClose">关闭</el-button>
</div>
</div>
</div>
<div class="preview-bd"></div>
</div>
</template>
<script>
export default {}
export default {
computed: {
shopId() {
return this.$route.query.shop_id
},
goodsId() {
return this.$route.query.id
}
},
methods: {
handleEdit() {
this.$router.push({ name: 'goodsEdit', params: { id: this.goodsId } })
},
handleAdd() {
this.$router.push({ name: 'goodsAdd' })
},
handleClose() {
this.$router.replace({ name: 'goodsList' })
}
}
}
</script>
<style>
<style lang="scss">
.preview-hd {
background-color: #fff;
border-bottom: 1px solid #c1c1c1;
}
.preview-hd-inner {
display: flex;
align-items: center;
max-width: 720px;
margin: 0 auto;
padding: 10px 0;
}
.preview-hd-left {
flex: 1;
span {
margin-right: 20px;
}
.active {
border-bottom: 1px solid #3276fc;
}
}
</style>
......@@ -33,6 +33,7 @@ export default [
meta: { title: '商品' },
children: [
{
name: 'goodsList',
path: '',
component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/goods/index'),
meta: { title: '商品列表' }
......@@ -64,15 +65,17 @@ export default [
meta: { title: '订单' },
children: [
{
name: 'orderList',
path: '',
component: () => import(/* webpackChunkName: "order" */ '@/pages/order/index'),
meta: { title: '订单列表' }
},
{
name: 'orderDetail',
path: 'detail/:id',
component: () => import(/* webpackChunkName: "order" */ '@/pages/order/detail'),
meta: { title: '订单详情' }
}
// {
// path: 'detail/:id',
// component: orderDetail,
// meta: { title: '订单详情' }
// }
]
},
// 设置
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论