Skip to content

C
center-shop
提交 90a27164 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

update

上级 e7a90348
显示空白字符变更
内嵌 并排
正在显示 包含 394 行增加 和 344 行删除
src/components/base/tableList.vue
浏览文件 @ 90a27164
...@@ -60,6 +60,7 @@ ...@@ -60,6 +60,7 @@
:current-page.sync="page.currentPage" :current-page.sync="page.currentPage"
@size-change="pageSizeChange" @size-change="pageSizeChange"
@current-change="fetchList" @current-change="fetchList"
:hide-on-single-page="true"
v-if="hasPagination" v-if="hasPagination"
> >
</el-pagination> </el-pagination>
......
src/pages/goods/goods/edit.vue
浏览文件 @ 90a27164
...@@ -284,7 +284,7 @@ export default { ...@@ -284,7 +284,7 @@ export default {
}, },
// 成功回调 // 成功回调
handleSuccess(data) { 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 } }) this.$router.push({ path: '/preview', query: { shop_id: this.shopId, id: data.spu_id } })
}, },
// 确定添加商品 // 确定添加商品
......
src/pages/goods/goods/index.vue
浏览文件 @ 90a27164
...@@ -9,6 +9,20 @@ ...@@ -9,6 +9,20 @@
<el-button type="primary">发布商品</el-button> <el-button type="primary">发布商品</el-button>
</router-link> </router-link>
</template> </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 }"> <template v-slot:table-x="{ row }">
<el-button type="text" @click="handleUpdate(row)">编辑</el-button> <el-button type="text" @click="handleUpdate(row)">编辑</el-button>
<el-button type="text" @click="handlePromote(row)">推广</el-button> <el-button type="text" @click="handlePromote(row)">推广</el-button>
...@@ -74,27 +88,37 @@ export default { ...@@ -74,27 +88,37 @@ export default {
} }
], ],
columns: [ columns: [
{ type: 'selection', align: 'left' }, { type: 'selection' },
{ label: '商品名', prop: 'spu_name' }, { label: '商品名', prop: 'spu_name', slots: 'table-goods', minWidth: 140 },
{ label: '价格(元)', prop: 'price_zone' }, { label: '价格(元)', prop: 'price_zone', align: 'center' },
{ label: '访问量', prop: 'page_view' }, { label: '访问量', prop: 'page_view', slots: 'table-view', minWidth: 120 },
{ label: '库存', prop: 'stock' }, { label: '库存', prop: 'stock', align: 'center' },
{ label: '销量', prop: 'sales_volume' }, { label: '销量', prop: 'sales_volume', align: 'center' },
{ label: '创建时间', prop: 'create_time', width: 180 }, { label: '创建时间', prop: 'create_time', width: 110 },
{ {
label: '商品状态', label: '商品状态',
prop: 'status', prop: 'status',
align: 'center',
computed({ row }) { computed({ row }) {
const map = { 1: '仓库中', 2: '销售中', 3: '已售罄', 4: '下架', 5: '已删除' } const map = { 1: '仓库中', 2: '销售中', 3: '已售罄', 4: '下架', 5: '已删除' }
return map[row.status] return map[row.status]
} }
}, },
{ label: '操作', slots: 'table-x', width: 150 } { label: '操作', slots: 'table-x', align: 'right', width: 150 }
] ]
} }
} }
}, },
methods: { methods: {
imageUrl(value) {
try {
const imgList = value ? JSON.parse(value) : []
const [first = {}] = imgList
return first.url
} catch (error) {
return ''
}
},
beforeRequest(params) { beforeRequest(params) {
params.status = this.activeName === '0' ? '' : this.activeName params.status = this.activeName === '0' ? '' : this.activeName
return params return params
...@@ -145,3 +169,33 @@ export default { ...@@ -145,3 +169,33 @@ export default {
} }
} }
</script> </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>
src/pages/order/detail.vue
浏览文件 @ 90a27164
<template> <template>
<app-card v-loading="loading" element-loading-text="拼命加载中"> <app-card v-loading="loading" element-loading-text="拼命加载中">
<el-container> <div class="order-header">
<el-aside width="300px">
<div style="text-align: left; margin-left: 20px">
<div> <div>
<br /> 订单编号：{{ data.order_id }}
<h2>订单信息</h2> <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>
<div style="font-size: 10px; color: #999"> <div>下单时间：{{ data.create_time }}</div>
<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> </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> </div>
</el-aside> <div class="order-fields">
<el-main> <el-row>
<div style="text-align: left; margin-left: 20px"> <el-col :span="12">
<div> <h3 class="order-fields-title">买家信息</h3>
<h2>状态信息</h2> <div class="order-field-item">
<div class="order-field-item__label">实付金额：</div>
<div class="order-field-item__content">{{ data.payment_money }}</div>
</div> </div>
<br /> <div class="order-field-item">
<div style="font-size: 12px; color: #999"> <div class="order-field-item__label">付款方式：</div>
<a>下单时间：{{ dataDetail.createTime | formatDateTime }}</a> <div class="order-field-item__content">{{ data.payment_method }}</div>
<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> </div>
<div class="order-field-item">
<div class="order-field-item__label">付款时间：</div>
<div class="order-field-item__content">{{ data.pay_time }}</div>
</div> </div>
</el-main> </el-col>
<div> <el-col :span="12">
<el-dialog title="发货" :visible.sync="dialogFormVisible"> <h3 class="order-fields-title">付款信息</h3>
<el-form :model="form"> <div class="order-field-item">
<el-form-item label="订单编号" :label-width="formLabelWidth"> <div class="order-field-item__label">买家：</div>
<el-input v-model="form.id" auto-complete="off" :disabled="true"></el-input> <div class="order-field-item__content">{{ data.shipping_user }}</div>
</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>
</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> </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> </div>
<br /> </el-col>
<div style="text-align: right; margin-left: 20px"> </el-row>
订单共{{ tableData.length }}件商品，总计： <a style="color: red">￥{{ dataDetail.goodAmount }}</a
>（含运费 ￥0.00）
</div> </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> </app-card>
</template> </template>
<script> <script>
import AppCard from '@/components/base/card' import AppCard from '@/components/base/card'
import { getOrderDetail, closeOrder, refundOrder, Shipment } from '@/api/order' import TableList from '@/components/base/tableList'
import * as utils from '@/utils/index' import { getOrderList } from '@/api/order'
export default { export default {
components: { AppCard }, components: { AppCard, TableList },
data() { data() {
return { return {
loading: false, loading: false,
dataDetail: {}, data: {}
tableData: [],
dialogFormVisible: false,
form: {
id: null,
logisticsCompanyName: null,
logisticsNo: null
},
formLabelWidth: '120px',
expressList: [
{ name: '圆通快递' },
{ name: '中通快递' },
{ name: '顺丰快递' },
{ name: '韵达快递' },
{ name: '申通快递' },
{ name: '天天快递' },
{ name: '百世快递' },
{ name: '邮政' },
{ name: '德邦物流' }
]
} }
}, },
computed: { computed: {
// 收货地址 shopId() {
address() { return this.$store.state.shopId
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: '完成'
})
})
})
}, },
// 关闭订单 pid() {
Clickclose(data) { return this.$route.params.id || this.$route.query.id
this.$confirm('确定要关闭订单？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.closeOrder0(data.id)
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消关闭'
})
})
}, },
// 关闭 tableOptions() {
closeOrder0(ArticleId) { return {
closeOrder({ id: ArticleId }).then(response => { columns: [
this.$message({ { label: '商品', prop: 'spu_name', slots: 'table-goods', minWidth: 140 },
message: response.message, { label: '单价(元)', prop: 'product_price', align: 'center' },
type: 'success' { label: '数量', prop: 'buy_count', align: 'center' },
}) { label: '优惠(元)', prop: 'district_money', align: 'center' },
// 更改发货状态 { label: '小记(元)', prop: 'payment_money', align: 'center' }
this.dataDetail.tradeState = response.data.tradeState ],
this.dataDetail.payState = response.data.payState data: [this.data]
}) }
}, },
// 确定退款 // 留言
Clickrefund(data) { messageList() {
this.$confirm('确定要退款？', '提示', { const message = this.data.app_button_text
confirmButtonText: '确定', try {
cancelButtonText: '取消', return message ? JSON.parse(message) : []
type: 'warning' } catch (error) {
}) console.log('留言解析错误')
.then(() => { return []
this.Clickrefund0(data.id) }
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消退款'
})
})
}, },
// 退款 stepActive() {
Clickrefund0(ArticleId) { return parseInt(this.data.order_status)
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
})
} }
})
})
}, },
// 发货表单 methods: {
Clickshipment(data) { init() {
this.form.id = data.id this.viewRender()
this.dialogFormVisible = true
}, },
// 确定发货 viewRender() {
Btnshipment() { getOrderList({ shop_id: this.shopId, order_id: this.pid }).then(response => {
this.dialogFormVisible = false const [first] = response.data
Shipment(this.form).then(response => { this.data = first
this.$message({
message: response.message,
type: 'success'
})
// 更改发货状态
this.dataDetail.tradeState = response.data.tradeState
}) })
}, },
// 转换订单状态 imageUrl(value) {
updateTradeState(val) { try {
switch (val) { const imgList = value ? JSON.parse(value) : []
case 0: const [first = {}] = imgList
return '待付款' return first.url
case 3: } catch (error) {
return '待发货'
case 6:
return '待收货'
case 10:
return '取消'
case 20:
return '完成'
case 40:
return '已退款'
}
},
// 转换支付状态
updatepayState(val) {
switch (val) {
case 1:
return '未支付'
case 30:
return '' 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> </script>
<style scoped> <style lang="scss">
.el-header, .table-goods {
.el-footer { display: flex;
background-color: #b3c0d1; align-items: center;
color: #333;
text-align: center;
line-height: 60px;
} }
.table-goods-pic {
.el-aside { margin-right: 10px;
text-align: center; width: 60px;
border: 1px solid #e5e5e5; height: 60px;
/* line-height: 200px; */
} }
.table-goods-name {
.el-main { flex: 1;
border: 1px solid #e5e5e5; color: #3276fc;
text-align: center; display: -webkit-box;
/* line-height: 160px; */ -webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
} }
.image-slot {
body > .el-container { display: flex;
margin-bottom: 40px; justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #f5f7fa;
color: #909399;
font-size: 14px;
} }
.order-header {
.el-container:nth-child(5) .el-aside, display: flex;
.el-container:nth-child(6) .el-aside { align-items: center;
line-height: 260px; & > div {
margin-right: 20px;
}
} }
.order-status {
.el-container:nth-child(7) .el-aside { padding: 40px 20px;
line-height: 320px; margin-top: 24px;
// border: 1px solid #ebedf0;
.el-col {
padding: 40px 20px;
}
.el-col-16 {
border-left: 1px solid #ebedf0;
}
} }
.order-fields {
.el-table th { margin-top: 24px;
background: #f4f4f4 !important; background-color: #f7f8fa;
font-size: 10px; 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> </style>
src/pages/order/index.vue
浏览文件 @ 90a27164
...@@ -10,14 +10,22 @@ ...@@ -10,14 +10,22 @@
<el-button type="primary">新增订单</el-button> <el-button type="primary">新增订单</el-button>
</router-link> </router-link>
</template> </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 }"> <template v-slot:table-price="{ row }">
<p>{{ row.product_price }}</p> <p>{{ row.product_price }}</p>
<p>{{ row.buy_count }}</p> <p>1件</p>
</template> </template>
<template v-slot:table-x="{ row }"> <template v-slot:table-x="{ row }">
<el-button type="text" @click="handleUpdate(row)">编辑</el-button> <el-button type="text" @click="handleView(row)">查看</el-button>
<el-button type="text" @click="handlePromote(row)">推广</el-button>
<el-button type="text" @click="handleCopy(row)">复制</el-button>
</template> </template>
</table-list> </table-list>
</app-card> </app-card>
...@@ -37,7 +45,7 @@ export default { ...@@ -37,7 +45,7 @@ export default {
activeName: '0', activeName: '0',
tabList: [ tabList: [
{ label: '全部', name: '0' }, { label: '全部', name: '0' },
{ label: '代付款', name: '2' }, { label: '待付款', name: '2' },
{ label: '待发货', name: '3' }, { label: '待发货', name: '3' },
{ label: '已发货', name: '4' }, { label: '已发货', name: '4' },
{ label: '已完成', name: '5' }, { label: '已完成', name: '5' },
...@@ -52,53 +60,118 @@ export default { ...@@ -52,53 +60,118 @@ export default {
return { return {
remote: { remote: {
httpRequest: getOrderList, httpRequest: getOrderList,
params: { shop_id: this.$store.state.shopId }, params: { shop_id: this.$store.state.shopId, spu_id: '', order_status: '' },
beforeRequest: this.beforeRequest beforeRequest: this.beforeRequest
}, },
filters: [ filters: [
{ {
type: 'input', type: 'input',
prop: 'name', prop: 'spu_id',
placeholder: '请输入商品名称' placeholder: '请输入商品编号'
}, },
{ {
type: 'select', type: 'select',
prop: 'group_id', prop: 'order_status',
options: [ options: [
{ label: '活动', value: 1 }, { label: '待付款', name: '2' },
{ label: '报名费', value: 2 }, { label: '待发货', name: '3' },
{ label: '学费', value: 3 }, { label: '已发货', name: '4' },
{ label: '活动', value: 4 } { label: '已完成', name: '5' },
] { label: '已关闭', name: '6' },
{ label: '售后中', name: '7' }
],
valueKey: 'name'
} }
], ],
columns: [ columns: [
{ label: '商品', prop: 'shop_name' }, { label: '商品', prop: 'shop_name', slots: 'table-goods', minWidth: 140 },
{ label: '单价(元)/数量', prop: 'product_price', slots: 'table-price' }, { label: '单价(元)/数量', prop: 'product_price', slots: 'table-price', align: 'right' },
{ label: '售后', prop: 'sellPrice' }, { label: '订单号', prop: 'order_id' },
{ label: '买家 / 收货人', prop: 'shipping_user' }, { label: '下单时间', prop: 'create_time', width: 110 },
{ label: '配送方式', prop: 'sellCount' }, { label: '买家 / 收货人', prop: 'shipping_user', align: 'center' },
{ label: '实收金额(元)', prop: 'payment_money' }, { label: '实收金额(元)', prop: 'payment_money', align: 'center' },
{ label: '订单状态', prop: 'order_status' }, {
{ label: '操作', slots: 'table-x' } 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: { methods: {
imageUrl(value) {
try {
const imgList = value ? JSON.parse(value) : []
const [first = {}] = imgList
return first.url
} catch (error) {
return ''
}
},
beforeRequest(params) { beforeRequest(params) {
params.status = this.activeName === '0' ? '' : this.activeName // params.order_status = this.activeName === '0' ? '' : this.activeName
return params return params
}, },
handleClick() { handleClick() {
this.$refs.list.refetch(true) this.$refs.list.refetch(true)
}, },
// 编辑 // 查看
handleUpdate() {}, handleView(row) {
// 推广 this.$router.push({ name: 'orderDetail', params: { id: row.order_id } })
handlePromote() {}, }
// 复制
handleCopy() {}
} }
} }
</script> </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>
src/pages/preview.vue
浏览文件 @ 90a27164
<template> <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> </template>
<script> <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> </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> </style>
src/router/routes.js
浏览文件 @ 90a27164
...@@ -33,6 +33,7 @@ export default [ ...@@ -33,6 +33,7 @@ export default [
meta: { title: '商品' }, meta: { title: '商品' },
children: [ children: [
{ {
name: 'goodsList',
path: '', path: '',
component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/goods/index'), component: () => import(/* webpackChunkName: "goods" */ '@/pages/goods/goods/index'),
meta: { title: '商品列表' } meta: { title: '商品列表' }
...@@ -64,15 +65,17 @@ export default [ ...@@ -64,15 +65,17 @@ export default [
meta: { title: '订单' }, meta: { title: '订单' },
children: [ children: [
{ {
name: 'orderList',
path: '', path: '',
component: () => import(/* webpackChunkName: "order" */ '@/pages/order/index'), component: () => import(/* webpackChunkName: "order" */ '@/pages/order/index'),
meta: { title: '订单列表' } 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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论