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

145
src/components/QuestTabs.vue
View File

@ -1,36 +1,54 @@
<template>
<div class="p-15">
<el-collapse v-model="activeNames" accordion>
<template v-if="list.length != 0">
<el-collapse-item class="mainFontColor" v-for="(item, index) in list" :key="item.id"
:title="'订单ID：' + item.id + ' | 时间：' + parseTime(item.addtime)" :name="item.id">
<el-descriptions direction="vertical" :column="3" border>
<el-descriptions-item label="状态" span="1">{{ orderState(item.status, item.back, item.quest) }}
<template v-if="orderListArr.length != 0">
<el-collapse-item class="mainFontColor" v-for="(item, index) in orderListArr" :key="index" :name="item.id">
<template slot="title">
<div class="clearB w-100">
<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 label="订单号" span="2">{{ 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.order_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-table :data="item.products" style="width: 100%">
<el-table-column prop="pid" label="ID" width="60">
<el-table v-for="spu, i in item.product_snapshot" :show-header="i === 0" :data="spu.sku_arr"
style="width: 100%">
<el-table-column prop="sku_name" label="名称">
</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 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 prop="num" label="数量" width="60">
<el-table-column label="详情" width="120">
<el-button type="primary" size="small">查看</el-button>
</el-table-column>
</el-table>
</el-descriptions-item>
<el-descriptions-item :label="item.back == 0 ? '客户备注' : '退货缘由'" span="3">
{{ item.back == 0 ? item.remark != '' ? item.remark : '无' : item.back_remark }}
<el-descriptions-item :label="item.back == 'normal' ? '客户备注' : '退货缘由'" span="3">
{{ item.back == 'requested' ? (item.back_remark || '无') : (item.remark || '无') }}
</el-descriptions-item>
<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">
<font class="m-l-5">同意退款</font>
</el-button>
@ -38,9 +56,9 @@
<font class="m-l-5">拒绝退款</font>
</el-button>
</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">
<font class="m-l-5">承接订单</font>
<font class="m-l-5">确认备货</font>
</el-button>
<el-button type="danger" icon="iconfont icon-cuowu">
<font class="m-l-5">取消订单</font>
@ -49,7 +67,7 @@
<font class="m-l-5" @click="orderPrint(index)">打印小票</font>
</el-button>
</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">
<font class="m-l-5">取消订单</font>
</el-button>
@ -71,42 +89,59 @@
<script>
import { parseTime } from '@/utils/index'
import { questAss } from '@/utils/api/table'
export default {
data () {
return {
list: [],
activeNames: []
}
},
props: ['fil'],
props: {
fil: Number,
shop_id: String
},
computed: {
/**
* @description: 获取订单列表 ps:待发货及待收货 并没有发起退款和正在退款状态
* @description: 获取订单列表
*/
questList () {
return this.$store.state.questList
orderList () {
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: {
parseTime, // 时间戳格式化
questAss,
orderState (status, back, quest) {
if (back === 1) {
orderState (back, status) {
if (back === 'requested') {
return '申请退款'
} else {
if (quest === 1) {
return '已确认接单'
if (status === 'pending') {
return '处理中'
} else {
return '未确认订单'
return '备货中'
}
}
},
/**
* @description: 通过蓝牙打印机并打印小票
* @param {number} index 订单列表下标索引
*/
* @description: 通过蓝牙打印机并打印小票
* @param {number} index 订单列表下标索引
*/
orderPrint (index) {
// 订单文本编辑
// console.log(this.list[index])
@ -163,11 +198,11 @@ export default {
// this.btPrint(con, '0', '1')
},
/**
* @description: cordova 打印api接口
* @param {string} str 内容
* @param {string} size 字体大小预设
* @param {string} algin 对齐
*/
* @description: cordova 打印api接口
* @param {string} str 内容
* @param {string} size 字体大小预设
* @param {string} algin 对齐
*/
btPrint (str, size = '0', align = '0') {
// BTPrinter.printTitle(function (data) {
// console.log('Success')
@ -176,30 +211,18 @@ export default {
// console.log('Error')
// console.log(err)
// }, 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: {
questList () {
this.computeQuestList()
}
},
mounted () {
this.computeQuestList()
created () {
}
}
</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 }) {
const res = await api.get('getOrderList', 'Admin')
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 {
commit('setOrderList', [])
}

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

@ -7,7 +7,15 @@
<span>{{ newLog.timestamp | parseTime('{h}:{i}:{s}') }}</span>
<span class="m-l-10">{{ newLog.content }}</span>
</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-item v-for="(activity, index) in log" :key="index" :icon="activity.icon" :type="activity.type"
: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>
</div>
<!-- 订单信息按钮 -->
<el-badge :hidden="orderCount == 0 ? true : false" :value="orderCount" class="navbarBadge l-h-50 p-r-15 r">
<el-button :type="orderCount !== 0 ? 'primary' : ''" @click="drawer = true" size="small" :icon="orderIcon"
circle></el-button>
<el-badge :hidden="pendingCount + processingCount + requestedCount == 0 ? true : false"
:value="pendingCount + processingCount + requestedCount" class="navbarBadge l-h-50 p-r-15 r">
<el-button :type="pendingCount + processingCount + requestedCount !== 0 ? 'primary' : ''" @click="drawer = true"
size="small" :icon="orderIcon" circle></el-button>
</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-tab-pane label="未接订单">
<QuestTabs :fil='0' />
<el-tab-pane>
<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 label="已接订单">
<QuestTabs :fil='1' />
<el-tab-pane>
<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 label="申请退款订单">
<QuestTabs :fil='2' />
<el-tab-pane>
<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-tabs>
</el-drawer>
@ -65,13 +92,16 @@
import mqtt from '@/utils/mqtt'
import Breadcrumb from '@/components/Breadcrumb'
import QuestTabs from '@/components/QuestTabs'
import SelectionShopId from '@/components/SelectionShopId'
export default {
name: 'Headbar',
data () {
return {
orderCount: null, // 订单总数
rebackCount: null, // 退款订单总数
shop_id: '', // 商铺id 过滤条件
pendingCount: null, // 处理中 订单总数
processingCount: null, // 备货中 订单总数
requestedCount: null, // 申请退款 订单总数
drawer: false,
getQuestInterval: null, // 用于销毁时间轴
animationTrumpet: true // 喇叭动画
@ -79,7 +109,8 @@ export default {
},
components: {
Breadcrumb,
QuestTabs
QuestTabs,
SelectionShopId
},
computed: {
/**
@ -101,17 +132,17 @@ export default {
return this.$store.state.settings.host + this.$store.state.user.photo
},
/**
* @description: 获取订单列表 ps:待发货及待收货 并没有发起退款和正在退款状态
* @description: 获取订单列表
*/
questList () {
return this.$store.state.questList
orderList () {
return this.$store.state.orderList
},
/**
* @description: 面包条 订单图标动画
* @return {*} 图标样式
*/
orderIcon () {
if (this.orderCount === 0) {
if (this.pendingCount + this.processingCount + this.requestedCount === 0) {
return 'iconfont icon-meiyoudingdan-01'
} else {
if (this.animationTrumpet) {
@ -137,16 +168,18 @@ export default {
if (this.getQuestInterval !== null) {
clearInterval(this.getQuestInterval)
}
const waitShip = list.filter(item => item.status === '20')// 过滤待处理订单
if (this.orderCount < waitShip.length && this.orderCount != null) { // 有新的数据 播放提示声音
const pending = list.filter(item => item.status === 'pending')// 过滤处理中 订单
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.orderCount = waitShip.length// 待处理订单总数（待发货订单总数）
const reBack = list.filter(item => item.back === '1')// 过滤退款订单
if (this.rebackCount < reBack.length && this.rebackCount != null) { // 有新的数据 播放提示声音
if (this.requestedCount < requested.length && this.requestedCount != null) { // 有新的数据 播放提示声音
this.playMusic('rebackMsg')// 退款 声音播放
}
this.rebackCount = reBack.length// 待处理订单总数（待发货订单总数）
this.pendingCount = pending.length// 处理中 订单总数
this.processingCount = processing.length// 备货中 订单总数
this.requestedCount = requested.length// 申请退款 订单总数
this.getQuestInterval = setInterval(() => {
this.animationTrumpet = !this.animationTrumpet// 面包条订单图标跳动
}, 500)
@ -187,7 +220,7 @@ export default {
}
},
watch: {
questList (val) {
orderList (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__extra"></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">
<template slot="label">
<i class="iconfont icon-chanpinliebiao-02"></i>
@ -254,16 +255,6 @@ export default {
} else {
return {}
}
},
/**
* @description: 解构spu
*/
spuList () {
if (Object.keys(this.orderDetails).length > 0) {
return JSON.parse(this.orderDetails.product_snapshot)
} else {
return {}
}
}
},
methods: {
@ -277,9 +268,9 @@ export default {
} else if (val.status === 'unpaid') {
this.orderStatus = '未付款'
} else if (val.status === 'pending') {
this.orderStatus = '未承接订单'
this.orderStatus = '已付款处理中'
} else if (val.status === 'processing') {
this.orderStatus = '备货中'
this.orderStatus = '已接单备货中'
} else if (val.status === 'shipped') {
this.orderStatus = '已发货'
} else if (val.status === 'completed') {