From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/mall/promotion/kefu/components/message/OrderItem.vue | 181 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 181 insertions(+), 0 deletions(-)
diff --git a/src/views/mall/promotion/kefu/components/message/OrderItem.vue b/src/views/mall/promotion/kefu/components/message/OrderItem.vue
new file mode 100644
index 0000000..4ebbb7f
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/message/OrderItem.vue
@@ -0,0 +1,181 @@
+<template>
+ <div v-if="isObject(getMessageContent)">
+ <div :key="getMessageContent.id" class="order-list-card-box mt-14px">
+ <div class="order-card-header flex items-center justify-between p-x-5px">
+ <div class="order-no">
+ 璁㈠崟鍙凤細
+ <span style="cursor: pointer" @click="openDetail(getMessageContent.id)">
+ {{ getMessageContent.no }}
+ </span>
+ </div>
+ <div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
+ {{ formatOrderStatus(getMessageContent) }}
+ </div>
+ </div>
+ <div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
+ <ProductItem
+ :num="item.count"
+ :picUrl="item.picUrl"
+ :price="item.price"
+ :skuText="item.properties.map((property: any) => property.valueName).join(' ')"
+ :spu-id="item.spuId"
+ :title="item.spuName"
+ />
+ </div>
+ <div class="pay-box flex justify-end pr-5px">
+ <div class="flex items-center">
+ <div class="discounts-title pay-color"
+ >鍏� {{ getMessageContent?.productCount }} 浠跺晢鍝�,鎬婚噾棰�:
+ </div>
+ <div class="discounts-money pay-color">
+ 锟{ fenToYuan(getMessageContent?.payPrice) }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import { fenToYuan, jsonParse } from '@/utils'
+import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+import { isObject } from '@/utils/is'
+import ProductItem from '@/views/mall/promotion/kefu/components/message/ProductItem.vue'
+
+const { push } = useRouter()
+
+defineOptions({ name: 'OrderItem' })
+const props = defineProps<{
+ message?: KeFuMessageRespVO
+ order?: any
+}>()
+
+const getMessageContent = computed(() =>
+ typeof props.message !== 'undefined' ? jsonParse(props!.message!.content) : props.order
+)
+
+/** 鏌ョ湅璁㈠崟璇︽儏 */
+const openDetail = (id: number) => {
+ console.log(getMessageContent)
+ push({ name: 'TradeOrderDetail', params: { id } })
+}
+
+/**
+ * 鏍煎紡鍖栬鍗曠姸鎬佺殑棰滆壊
+ *
+ * @param order 璁㈠崟
+ * @return {string} 棰滆壊鐨� class 鍚嶇О
+ */
+function formatOrderColor(order: any) {
+ if (order.status === 0) {
+ return 'info-color'
+ }
+ if (order.status === 10 || order.status === 20 || (order.status === 30 && !order.commentStatus)) {
+ return 'warning-color'
+ }
+ if (order.status === 30 && order.commentStatus) {
+ return 'success-color'
+ }
+ return 'danger-color'
+}
+
+/**
+ * 鏍煎紡鍖栬鍗曠姸鎬�
+ *
+ * @param order 璁㈠崟
+ */
+function formatOrderStatus(order: any) {
+ if (order.status === 0) {
+ return '寰呬粯娆�'
+ }
+ if (order.status === 10 && order.deliveryType === 1) {
+ return '寰呭彂璐�'
+ }
+ if (order.status === 10 && order.deliveryType === 2) {
+ return '寰呮牳閿�'
+ }
+ if (order.status === 20) {
+ return '寰呮敹璐�'
+ }
+ if (order.status === 30 && !order.commentStatus) {
+ return '寰呰瘎浠�'
+ }
+ if (order.status === 30 && order.commentStatus) {
+ return '宸插畬鎴�'
+ }
+ return '宸插叧闂�'
+}
+</script>
+
+<style lang="scss" scoped>
+.order-list-card-box {
+ border-radius: 10px;
+ padding: 10px;
+ border: 1px var(--el-border-color) solid;
+ background-color: rgba(128, 128, 128, 0.3); // 閫忔槑鑹诧紝鏆楅粦妯″紡涓嬩篃鑳戒綋鐜�
+
+ .order-card-header {
+ height: 28px;
+ font-weight: bold;
+
+ .order-no {
+ font-size: 13px;
+
+ span {
+ &:hover {
+ text-decoration: underline;
+ color: var(--left-menu-bg-active-color);
+ }
+ }
+ }
+
+ .order-state {
+ font-size: 13px;
+ }
+ }
+
+ .pay-box {
+ padding-top: 10px;
+ font-weight: bold;
+
+ .discounts-title {
+ font-size: 16px;
+ line-height: normal;
+ }
+
+ .discounts-money {
+ font-size: 16px;
+ line-height: normal;
+ font-family: OPPOSANS;
+ }
+
+ .pay-color {
+ font-size: 13px;
+ }
+ }
+}
+
+.warning-color {
+ color: #faad14;
+ font-size: 11px;
+ font-weight: bold;
+}
+
+.danger-color {
+ color: #ff3000;
+ font-size: 11px;
+ font-weight: bold;
+}
+
+.success-color {
+ color: #52c41a;
+ font-size: 11px;
+ font-weight: bold;
+}
+
+.info-color {
+ color: #999999;
+ font-size: 11px;
+ font-weight: bold;
+}
+</style>
--
Gitblit v1.8.0