Food/food
3
0
Fork 0
Code Issues 60 Pull Requests Actions Packages Projects Releases Wiki Activity

订单抽屉组件修改；页头组件标题修改；日志组件标题修改

Browse Source
This commit is contained in:
szdot 2023-11-09 21:39:50 +08:00
parent 04dd2efe46
commit 5a667351c6
5 changed files with 161 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
src/components/QuestTabs.vue
View File

@ -1,36 +1,54 @@
<template> <template>
<div class="p-15"> <div class="p-15">
<el-collapse v-model="activeNames" accordion> <el-collapse v-model="activeNames" accordion>
<template v-if="list.length != 0"> <template v-if="orderListArr.length != 0">
<el-collapse-item class="mainFontColor" v-for="(item, index) in list" :key="item.id" <el-collapse-item class="mainFontColor" v-for="(item, index) in orderListArr" :key="index" :name="item.id">
:title="'订单ID：' + item.id + ' | 时间：' + parseTime(item.addtime)" :name="item.id"> <template slot="title">
<el-descriptions direction="vertical" :column="3" border> <div class="clearB w-100">
<el-descriptions-item label="状态" span="1">{{ orderState(item.status, item.back, item.quest) }} <div class="fb l w-30">
订单ID：{{ item.id }}
</div>
<div class="r fb w-70 fr p-r-15">
下单时间：{{ parseTime(item.addtime) }}
</div>
</div>
</template>
<el-descriptions direction=" vertical" :column="3" border>
<el-descriptions-item label="状态">{{ orderState(item.back, item.status) }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="订单号" span="2">{{ item.order_sn }}</el-descriptions-item> <el-descriptions-item label="订单号">{{ item.order_sn }}</el-descriptions-item>
<el-descriptions-item label="昵称">{{ item.name }}</el-descriptions-item>
<el-descriptions-item label="手机号">{{ item.tel }}</el-descriptions-item>
<el-descriptions-item label="价格">{{ item.price }}</el-descriptions-item>
<el-descriptions-item label="货品总数">{{ item.product_num }}</el-descriptions-item>
<el-descriptions-item label="收货站点">{{ item.receive_site_name }}</el-descriptions-item>
<el-descriptions-item label="取餐号">{{ item.food_sn }}</el-descriptions-item> <el-descriptions-item label="取餐号">{{ item.food_sn }}</el-descriptions-item>
<el-descriptions-item label="收货人">{{ item.receiver }}</el-descriptions-item>
<el-descriptions-item label="手机号">{{ item.tel }}</el-descriptions-item>
<el-descriptions-item label="收货站点">{{ item.receive_site_name }}</el-descriptions-item>
<el-descriptions-item label="总重量">{{ item.total_weight }}克</el-descriptions-item>
<el-descriptions-item label="总价">{{ item.total_price }}元</el-descriptions-item>
<el-descriptions-item label="货品总数">{{ item.total_num }}件</el-descriptions-item>
<el-descriptions-item label="订单详情" span="3"> <el-descriptions-item label="订单详情" span="3">
<el-table :data="item.products" style="width: 100%"> <el-table v-for="spu, i in item.product_snapshot" :show-header="i === 0" :data="spu.sku_arr"
<el-table-column prop="pid" label="ID" width="60"> style="width: 100%">
<el-table-column prop="sku_name" label="名称">
</el-table-column> </el-table-column>
<el-table-column prop="name" label="名称"> <el-table-column label="编号">
<template slot-scope="scope">
{{ scope.row.sku_number }}
</template>
</el-table-column> </el-table-column>
<el-table-column prop="pro_buff" label="属性"> <el-table-column label="数量">
<template slot-scope="scope">
{{ scope.row.sku_totol }}{{ scope.row.sku_unit }}
</template>
</el-table-column> </el-table-column>
<el-table-column prop="num" label="数量" width="60"> <el-table-column label="详情" width="120">
<el-button type="primary" size="small">查看</el-button>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item :label="item.back == 0 ? '客户备注' : '退货缘由'" span="3"> <el-descriptions-item :label="item.back == 'normal' ? '客户备注' : '退货缘由'" span="3">
{{ item.back == 0 ? item.remark != '' ? item.remark : '无' : item.back_remark }} {{ item.back == 'requested' ? (item.back_remark || '无') : (item.remark || '无') }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="操作" span="3"> <el-descriptions-item label="操作" span="3">
<el-button-group v-if="item.back == 1"> <el-button-group v-if="item.back == 'requested'">
<el-button type="danger" icon="iconfont icon-zhengque"> <el-button type="danger" icon="iconfont icon-zhengque">
<font class="m-l-5">同意退款</font> <font class="m-l-5">同意退款</font>
</el-button> </el-button>
@ -38,9 +56,9 @@
<font class="m-l-5">拒绝退款</font> <font class="m-l-5">拒绝退款</font>
</el-button> </el-button>
</el-button-group> </el-button-group>
<el-button-group v-else-if="item.back == 0 && item.quest == 0"> <el-button-group v-else-if="item.back == 'normal' && item.status == 'pending'">
<el-button @click="questAss(item.id, 'quest', '1')" type="primary" icon="iconfont icon-chengjie"> <el-button @click="questAss(item.id, 'quest', '1')" type="primary" icon="iconfont icon-chengjie">
<font class="m-l-5">承接订单</font> <font class="m-l-5">确认备货</font>
</el-button> </el-button>
<el-button type="danger" icon="iconfont icon-cuowu"> <el-button type="danger" icon="iconfont icon-cuowu">
<font class="m-l-5">取消订单</font> <font class="m-l-5">取消订单</font>
@ -49,7 +67,7 @@
<font class="m-l-5" @click="orderPrint(index)">打印小票</font> <font class="m-l-5" @click="orderPrint(index)">打印小票</font>
</el-button> </el-button>
</el-button-group> </el-button-group>
<el-button-group v-else-if="item.back == 0 && item.quest == 1 && item.status == 20"> <el-button-group v-else-if="item.back == 'normal' && item.status == 'processing'">
<el-button type="danger" icon="iconfont icon-cuowu"> <el-button type="danger" icon="iconfont icon-cuowu">
<font class="m-l-5">取消订单</font> <font class="m-l-5">取消订单</font>
</el-button> </el-button>
@ -71,35 +89,52 @@
<script> <script>
import { parseTime } from '@/utils/index' import { parseTime } from '@/utils/index'
import { questAss } from '@/utils/api/table'
export default { export default {
data () { data () {
return { return {
list: [],
activeNames: [] activeNames: []
} }
}, },
props: ['fil'], props: {
fil: Number,
shop_id: String
},
computed: { computed: {
/** /**
* @description: 获取订单列表 ps:待发货及待收货 并没有发起退款和正在退款状态 * @description: 获取订单列表
*/ */
questList () { orderList () {
return this.$store.state.questList return this.$store.state.orderList
},
/**
* @description: 获取订单列表
*/
orderListArr () {
let list = this.orderList // 初始化list变量为this.orderList数组
if (list.length > 0) {
if (this.fil === 2) { // 过滤“申请退款”的订单
list = list.filter(item => item.shop_id === this.shop_id && item.back === 'requested')
} else if (this.fil === 0) { // 过滤“待处理”的订单
list = list.filter(item => item.shop_id === this.shop_id && item.back === 'normal' && item.status === 'pending')
} else if (this.fil === 1) { // 过滤“备货中”的订单
list = list.filter(item => item.shop_id === this.shop_id && item.back === 'normal' && item.status === 'processing')
}
return list
}
return []
} }
}, },
methods: { methods: {
parseTime, // 时间戳格式化 parseTime, // 时间戳格式化
questAss, orderState (back, status) {
orderState (status, back, quest) { if (back === 'requested') {
if (back === 1) {
return '申请退款' return '申请退款'
} else { } else {
if (quest === 1) { if (status === 'pending') {
return '已确认接单' return '处理中'
} else { } else {
return '未确认订单' return '备货中'
} }
} }
}, },
@ -176,30 +211,18 @@ export default {
// console.log('Error') // console.log('Error')
// console.log(err) // console.log(err)
// }, str, size, align)// string, size, align // }, str, size, align)// string, size, align
},
/**
* @description: 按父组件的fil参数 条件 显示列表
* @param {*} list 要处理的列表
*/
computeQuestList () {
if (this.fil === 2) {
this.list = this.questList.filter(item => item.back === '1')
} else if (this.fil === 0) {
this.list = this.questList.filter(item => item.back === '0' && item.quest === '0' && item.status === '20')
} else if (this.fil === 1) {
this.list = this.questList.filter(item => item.back === '0' && item.quest === '1' && item.status === '20')
}
} }
}, },
watch: { watch: {
questList () {
this.computeQuestList()
}
}, },
mounted () { created () {
this.computeQuestList()
} }
} }
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.orterTit {
display: flex;
justify-content: space-between;
}
</style>

8
src/store/index.js
View File

@ -896,7 +896,13 @@ const store = new Vuex.Store({
async fetchOrderList ({ commit }) { async fetchOrderList ({ commit }) {
const res = await api.get('getOrderList', 'Admin') const res = await api.get('getOrderList', 'Admin')
if (res.data.status === 1) { if (res.data.status === 1) {
commit('setOrderList', res.data.orderList) const list = res.data.orderList
list.forEach((item, index) => { // 拿到订单列表数据 直接把订单列表数据反序列化
if (item.product_snapshot !== '') {
list[index].product_snapshot = JSON.parse(item.product_snapshot)
}
})
commit('setOrderList', list)
} else { } else {
commit('setOrderList', []) commit('setOrderList', [])
} }

10
src/views/layout/components/BlogBox.vue
View File

@ -7,7 +7,15 @@
<span>{{ newLog.timestamp | parseTime('{h}:{i}:{s}') }}</span> <span>{{ newLog.timestamp | parseTime('{h}:{i}:{s}') }}</span>
<span class="m-l-10">{{ newLog.content }}</span> <span class="m-l-10">{{ newLog.content }}</span>
</div> </div>
<el-drawer title="程序日志" :modal-append-to-body="false" :visible.sync="drawer" direction="btt" size="50%"> <el-drawer :modal-append-to-body="false" :visible.sync="drawer" direction="btt" size="50%">
<template slot="title">
<div>
<i class="l f-s-18 vm iconfont icon-zengjia m-r-10"></i>
<h3>
程序日志
</h3>
</div>
</template>
<el-timeline :reverse="true" class="p-l-50 p-r-50"> <el-timeline :reverse="true" class="p-l-50 p-r-50">
<el-timeline-item v-for="(activity, index) in log" :key="index" :icon="activity.icon" :type="activity.type" <el-timeline-item v-for="(activity, index) in log" :key="index" :icon="activity.icon" :type="activity.type"
:color="activity.color" :size="activity.size" :color="activity.color" :size="activity.size"

81
src/views/layout/components/headbar.vue
View File

@ -35,20 +35,47 @@
<el-button size="small" icon="iconfont icon-shuaxin" @click="refreshPage" circle></el-button> <el-button size="small" icon="iconfont icon-shuaxin" @click="refreshPage" circle></el-button>
</div> </div>
<!-- 订单信息按钮 --> <!-- 订单信息按钮 -->
<el-badge :hidden="orderCount == 0 ? true : false" :value="orderCount" class="navbarBadge l-h-50 p-r-15 r"> <el-badge :hidden="pendingCount + processingCount + requestedCount == 0 ? true : false"
<el-button :type="orderCount !== 0 ? 'primary' : ''" @click="drawer = true" size="small" :icon="orderIcon" :value="pendingCount + processingCount + requestedCount" class="navbarBadge l-h-50 p-r-15 r">
circle></el-button> <el-button :type="pendingCount + processingCount + requestedCount !== 0 ? 'primary' : ''" @click="drawer = true"
size="small" :icon="orderIcon" circle></el-button>
</el-badge> </el-badge>
<el-drawer title="待处理订单" :visible.sync="drawer" size="40%" :append-to-body="true" :modal-append-to-body="false"> <el-drawer :visible.sync="drawer" size="40%" :append-to-body="true" :modal-append-to-body="false">
<template slot="title">
<div>
<i class="l f-s-18 iconfont icon-jinjidingdan m-r-5 l-h-18"></i>
<h3>
待处理订单
</h3>
</div>
</template>
<el-button-group class="m-l-20 m-b-15">
<SelectionShopId v-model="shop_id" />
</el-button-group>
<el-tabs type="card"> <el-tabs type="card">
<el-tab-pane label="未接订单"> <el-tab-pane>
<QuestTabs :fil='0' /> <template slot="label">
<span>已付款处理中</span>
<el-badge :hidden="pendingCount == 0 ? true : false" :value="pendingCount">
</el-badge>
</template>
<QuestTabs :fil='0' :shop_id="shop_id" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="已接订单"> <el-tab-pane>
<QuestTabs :fil='1' /> <template slot="label">
<span>已接单备货中</span>
<el-badge :hidden="processingCount == 0 ? true : false" :value="processingCount">
</el-badge>
</template>
<QuestTabs :fil='1' :shop_id="shop_id" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="申请退款订单"> <el-tab-pane>
<QuestTabs :fil='2' /> <template slot="label">
<span>申请退款订单</span>
<el-badge :hidden="requestedCount == 0 ? true : false" :value="requestedCount">
</el-badge>
</template>
<QuestTabs :fil='2' :shop_id="shop_id" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-drawer> </el-drawer>
@ -65,13 +92,16 @@
import mqtt from '@/utils/mqtt' import mqtt from '@/utils/mqtt'
import Breadcrumb from '@/components/Breadcrumb' import Breadcrumb from '@/components/Breadcrumb'
import QuestTabs from '@/components/QuestTabs' import QuestTabs from '@/components/QuestTabs'
import SelectionShopId from '@/components/SelectionShopId'
export default { export default {
name: 'Headbar', name: 'Headbar',
data () { data () {
return { return {
orderCount: null, // 订单总数 shop_id: '', // 商铺id 过滤条件
rebackCount: null, // 退款订单总数 pendingCount: null, // 处理中 订单总数
processingCount: null, // 备货中 订单总数
requestedCount: null, // 申请退款 订单总数
drawer: false, drawer: false,
getQuestInterval: null, // 用于销毁时间轴 getQuestInterval: null, // 用于销毁时间轴
animationTrumpet: true // 喇叭动画 animationTrumpet: true // 喇叭动画
@ -79,7 +109,8 @@ export default {
}, },
components: { components: {
Breadcrumb, Breadcrumb,
QuestTabs QuestTabs,
SelectionShopId
}, },
computed: { computed: {
/** /**
@ -101,17 +132,17 @@ export default {
return this.$store.state.settings.host + this.$store.state.user.photo return this.$store.state.settings.host + this.$store.state.user.photo
}, },
/** /**
* @description: 获取订单列表 ps:待发货及待收货 并没有发起退款和正在退款状态 * @description: 获取订单列表
*/ */
questList () { orderList () {
return this.$store.state.questList return this.$store.state.orderList
}, },
/** /**
* @description: 面包条 订单图标动画 * @description: 面包条 订单图标动画
* @return {*} 图标样式 * @return {*} 图标样式
*/ */
orderIcon () { orderIcon () {
if (this.orderCount === 0) { if (this.pendingCount + this.processingCount + this.requestedCount === 0) {
return 'iconfont icon-meiyoudingdan-01' return 'iconfont icon-meiyoudingdan-01'
} else { } else {
if (this.animationTrumpet) { if (this.animationTrumpet) {
@ -137,16 +168,18 @@ export default {
if (this.getQuestInterval !== null) { if (this.getQuestInterval !== null) {
clearInterval(this.getQuestInterval) clearInterval(this.getQuestInterval)
} }
const waitShip = list.filter(item => item.status === '20')// 过滤待处理订单 const pending = list.filter(item => item.status === 'pending')// 过滤处理中 订单
if (this.orderCount < waitShip.length && this.orderCount != null) { // 有新的数据 播放提示声音 const processing = list.filter(item => item.status === 'processing')// 过滤 备货中订单
const requested = list.filter(item => item.back === 'requested')// 过滤退款订单
if (this.pendingCount < pending.length && this.pendingCount != null) { // 有新的数据 播放提示声音
this.playMusic('newMsg')// 新消息 声音播放 this.playMusic('newMsg')// 新消息 声音播放
} }
this.orderCount = waitShip.length// 待处理订单总数（待发货订单总数） if (this.requestedCount < requested.length && this.requestedCount != null) { // 有新的数据 播放提示声音
const reBack = list.filter(item => item.back === '1')// 过滤退款订单
if (this.rebackCount < reBack.length && this.rebackCount != null) { // 有新的数据 播放提示声音
this.playMusic('rebackMsg')// 退款 声音播放 this.playMusic('rebackMsg')// 退款 声音播放
} }
this.rebackCount = reBack.length// 待处理订单总数（待发货订单总数） this.pendingCount = pending.length// 处理中 订单总数
this.processingCount = processing.length// 备货中 订单总数
this.requestedCount = requested.length// 申请退款 订单总数
this.getQuestInterval = setInterval(() => { this.getQuestInterval = setInterval(() => {
this.animationTrumpet = !this.animationTrumpet// 面包条订单图标跳动 this.animationTrumpet = !this.animationTrumpet// 面包条订单图标跳动
}, 500) }, 500)
@ -187,7 +220,7 @@ export default {
} }
}, },
watch: { watch: {
questList (val) { orderList (val) {
this.computeQuestList(val) this.computeQuestList(val)
} }
} }

17
src/views/layout/components/main/order/show.vue
View File

@ -132,7 +132,8 @@
<div class="el-descriptions__title">订单详情</div> <div class="el-descriptions__title">订单详情</div>
<div class="el-descriptions__extra"></div> <div class="el-descriptions__extra"></div>
</div> </div>
<el-descriptions class="margin-top m-b-20" v-for="spu, index in spuList" :key="index" :column="3" border> <el-descriptions class="margin-top m-b-20" v-for="spu, index in orderDetails.product_snapshot" :key="index"
:column="3" border>
<el-descriptions-item :span="3"> <el-descriptions-item :span="3">
<template slot="label"> <template slot="label">
<i class="iconfont icon-chanpinliebiao-02"></i> <i class="iconfont icon-chanpinliebiao-02"></i>
@ -254,16 +255,6 @@ export default {
} else { } else {
return {} return {}
} }
},
/**
* @description: 解构spu
*/
spuList () {
if (Object.keys(this.orderDetails).length > 0) {
return JSON.parse(this.orderDetails.product_snapshot)
} else {
return {}
}
} }
}, },
methods: { methods: {
@ -277,9 +268,9 @@ export default {
} else if (val.status === 'unpaid') { } else if (val.status === 'unpaid') {
this.orderStatus = '未付款' this.orderStatus = '未付款'
} else if (val.status === 'pending') { } else if (val.status === 'pending') {
this.orderStatus = '未承接订单' this.orderStatus = '已付款处理中'
} else if (val.status === 'processing') { } else if (val.status === 'processing') {
this.orderStatus = '备货中' this.orderStatus = '已接单备货中'
} else if (val.status === 'shipped') { } else if (val.status === 'shipped') {
this.orderStatus = '已发货' this.orderStatus = '已发货'
} else if (val.status === 'completed') { } else if (val.status === 'completed') {