You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
207 lines
5.8 KiB
207 lines
5.8 KiB
<template>
|
|
<view class="quick-order-container" @click="handleClick">
|
|
<view class="new-message" v-if="innerHasNewMessage">
|
|
你有新的快捷下单信息
|
|
</view>
|
|
<view class="quick-order">
|
|
<view class="number-order" v-if="innerMessageCount > 0">
|
|
{{ innerMessageCount }}
|
|
</view>
|
|
<image :src="imageUrl" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'QuickOrderEntry',
|
|
props: {
|
|
// 图标路径
|
|
imageUrl: {
|
|
type: String,
|
|
default: '/static/image/home/7.png'
|
|
},
|
|
// 点击跳转的页面
|
|
targetUrl: {
|
|
type: String,
|
|
default: '/pages_order/order/fastCreateOrder'
|
|
},
|
|
// 是否自动获取快捷下单信息
|
|
autoFetch: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
orderInfo: null,
|
|
innerHasNewMessage: false,
|
|
innerMessageCount: 0,
|
|
isInitialized: false
|
|
}
|
|
},
|
|
methods: {
|
|
// 处理点击事件
|
|
handleClick() {
|
|
// 发出点击事件，便于父组件监听
|
|
this.$emit('click');
|
|
|
|
// 如果有订单信息，提供订单列表
|
|
if (Array.isArray(this.orderInfo) && this.orderInfo.length > 0) {
|
|
this.$emit('order-info', this.orderInfo);
|
|
}
|
|
|
|
if(this.orderInfo.length > 0){
|
|
this.navigateTo('/pages_order/order/firmOrder');
|
|
return
|
|
}
|
|
|
|
// 如果有目标页面，则跳转
|
|
if (this.targetUrl) {
|
|
this.navigateTo(this.targetUrl);
|
|
}
|
|
},
|
|
|
|
// 获取快捷下单的信息
|
|
getQuickOrderInfo() {
|
|
// 调用接口获取快捷下单信息
|
|
this.$api('getOrderInfo', {}, res => {
|
|
if (res.code === 200 && res.result) {
|
|
// 处理返回的订单列表
|
|
const orderList = Array.isArray(res.result) ? res.result : [res.result];
|
|
|
|
if (orderList.length > 0) {
|
|
// 保存订单列表
|
|
this.orderInfo = orderList;
|
|
// 设置消息数量为订单列表长度
|
|
this.innerHasNewMessage = true;
|
|
this.innerMessageCount = orderList.length;
|
|
|
|
// 通知父组件获取到了数据
|
|
this.$emit('order-loaded', this.orderInfo);
|
|
} else {
|
|
this.innerHasNewMessage = false;
|
|
this.innerMessageCount = 0;
|
|
this.orderInfo = [];
|
|
}
|
|
} else {
|
|
this.innerHasNewMessage = false;
|
|
this.innerMessageCount = 0;
|
|
this.orderInfo = [];
|
|
}
|
|
|
|
this.isInitialized = true;
|
|
}, err => {
|
|
console.error('获取快捷下单信息失败', err);
|
|
this.innerHasNewMessage = false;
|
|
this.innerMessageCount = 0;
|
|
this.orderInfo = [];
|
|
this.isInitialized = true;
|
|
});
|
|
},
|
|
|
|
// 导航到指定页面
|
|
navigateTo(url) {
|
|
// 如果有订单列表，则优先使用第一个订单的ID
|
|
if (Array.isArray(this.orderInfo) && this.orderInfo.length > 0 && this.orderInfo[0].id && url.indexOf('?') === -1) {
|
|
url += `?orderId=${this.orderInfo[0].id}`;
|
|
}
|
|
|
|
this.$utils.navigateTo(url);
|
|
},
|
|
|
|
// 刷新快捷下单信息
|
|
refresh() {
|
|
this.getQuickOrderInfo();
|
|
return this; // 链式调用
|
|
},
|
|
|
|
// 清除消息提示
|
|
clearMessage() {
|
|
this.innerHasNewMessage = false;
|
|
this.innerMessageCount = 0;
|
|
return this; // 链式调用
|
|
},
|
|
|
|
// 检查是否有新消息
|
|
hasNewMessage() {
|
|
return this.innerHasNewMessage;
|
|
},
|
|
|
|
// 获取消息数量
|
|
getMessageCount() {
|
|
return this.innerMessageCount;
|
|
},
|
|
|
|
// 获取当前订单信息
|
|
getOrderInfo() {
|
|
return this.orderInfo;
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.quick-order-container {
|
|
position: fixed;
|
|
right: 30rpx;
|
|
bottom: 30vh;
|
|
z-index: 99;
|
|
transition: transform 0.3s;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.new-message {
|
|
position: absolute;
|
|
top: 50rpx;
|
|
right: 100%;
|
|
white-space: nowrap;
|
|
background-color: #DC2828;
|
|
border-radius: 20rpx;
|
|
font-size: 25rpx;
|
|
color: #ffffff;
|
|
padding: 5rpx 15rpx;
|
|
margin-bottom: 10rpx;
|
|
box-shadow: 0 5rpx 10rpx rgba(220, 40, 40, 0.3);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.quick-order {
|
|
position: relative;
|
|
width: 230rpx;
|
|
height: 160rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.number-order {
|
|
background-color: #DC2828;
|
|
position: absolute;
|
|
font-size: 30rpx;
|
|
height: 40rpx;
|
|
width: 40rpx;
|
|
text-align: center;
|
|
border-radius: 20rpx;
|
|
color: #ffffff;
|
|
top: 10rpx;
|
|
left: 25rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|