新增聊天模块

src/views/shop/order/components/search.vue

@@ -1,19 +1,20 @@
 <!-- 搜索表单 -->
 <template>
   <a-space :size="10" style="flex-wrap: wrap">
-    <a-button type="primary" class="ele-btn-icon" @click="add">
-      <template #icon>
-        <PlusOutlined />
-      </template>
-      <span>添加</span>
-    </a-button>
+    <a-input-search
+      allow-clear
+      v-model:value="where.keywords"
+      placeholder="请输入关键词"
+      @search="search"
+      @pressEnter="search"
+    />
   </a-space>
 </template>
 
 <script lang="ts" setup>
-  import { PlusOutlined } from '@ant-design/icons-vue';
-  import type { GradeParam } from '@/api/user/grade/model';
   import { watch } from 'vue';
+  import useSearch from '@/utils/use-search';
+  import { OrderParam } from '@/api/shop/order/model';
 
   const props = withDefaults(
     defineProps<{
@@ -24,15 +25,20 @@
   );
 
   const emit = defineEmits<{
-    (e: 'search', where?: GradeParam): void;
+    (e: 'search', where?: OrderParam): void;
     (e: 'add'): void;
     (e: 'remove'): void;
     (e: 'batchMove'): void;
   }>();
 
-  // 新增
-  const add = () => {
-    emit('add');
+  // 表单数据
+  const { where } = useSearch<OrderParam>({
+    keywords: ''
+  });
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', where);
   };
 
   watch(

src/views/shop/order/index.vue

@@ -25,6 +25,144 @@
             <template v-if="column.key === 'image'">
               <a-image :src="record.image" :width="50" />
             </template>
+            <template v-if="column.key === 'payType'">
+              <a-tag v-if="record.payType == 1" color="green"
+                ><WechatOutlined class="tag-icon" />微信支付</a-tag
+              >
+              <a-tag v-if="record.payType == 2" color="green">积分</a-tag>
+              <a-tag v-if="record.payType == 3" color="green"
+                ><AlipayCircleOutlined class="tag-icon" />支付宝</a-tag
+              >
+              <a-tag v-if="record.payType == 4" color="green"
+                ><IdcardOutlined class="tag-icon" />现金</a-tag
+              >
+              <a-tag v-if="record.payType == 5" color="green"
+                ><IdcardOutlined class="tag-icon" />POS机</a-tag
+              >
+              <a-tag v-if="record.payType == 6" color="green"
+                ><IdcardOutlined class="tag-icon" />VIP月卡</a-tag
+              >
+              <a-tag v-if="record.payType == 7" color="green"
+                ><IdcardOutlined class="tag-icon" />VIP年卡</a-tag
+              >
+              <a-tag v-if="record.payType == 8" color="green"
+                ><IdcardOutlined class="tag-icon" />VIP次卡</a-tag
+              >
+              <a-tag v-if="record.payType == 9" color="green"
+                ><IdcardOutlined class="tag-icon" />IC月卡</a-tag
+              >
+              <a-tag v-if="record.payType == 10" color="green"
+                ><IdcardOutlined class="tag-icon" />IC年卡</a-tag
+              >
+              <a-tag v-if="record.payType == 11" color="green"
+                ><IdcardOutlined class="tag-icon" />IC次卡</a-tag
+              >
+              <a-tag v-if="record.payType == 12" color="green"
+                ><IdcardOutlined class="tag-icon" />免费</a-tag
+              >
+              <a-tag v-if="record.payType == 13" color="green"
+                ><IdcardOutlined class="tag-icon" />VIP充值卡</a-tag
+              >
+              <a-tag v-if="record.payType == 14" color="green"
+                ><IdcardOutlined class="tag-icon" />IC充值卡</a-tag
+              >
+              <a-tag v-if="record.payType == 15" color="green"
+                ><IdcardOutlined class="tag-icon" />积分支付</a-tag
+              >
+              <a-tag v-if="record.payType == 16" color="green"
+                ><IdcardOutlined class="tag-icon" />VIP季卡</a-tag
+              >
+              <a-tag v-if="record.payType == 17" color="green"
+                ><IdcardOutlined class="tag-icon" />IC季卡</a-tag
+              >
+            </template>
+            <template v-if="column.key === 'type'">
+              <a-tag v-if="record.type == 0">无</a-tag>
+              <a-tag v-if="record.type == 1" color="blue"
+                ><IdcardOutlined class="tag-icon" />抵扣优惠券</a-tag
+              >
+              <a-tag v-if="record.type == 2" color="blue"
+                ><IdcardOutlined class="tag-icon" />折扣优惠券</a-tag
+              >
+              <a-tag v-if="record.type == 3" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP月卡</a-tag
+              >
+              <a-tag v-if="record.type == 4" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP年卡</a-tag
+              >
+              <a-tag v-if="record.type == 5" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP次卡</a-tag
+              >
+              <a-tag v-if="record.type == 6" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP会员卡</a-tag
+              >
+              <a-tag v-if="record.type == 7" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC月卡</a-tag
+              >
+              <a-tag v-if="record.type == 8" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC年卡</a-tag
+              >
+              <a-tag v-if="record.type == 9" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC次卡</a-tag
+              >
+              <a-tag v-if="record.type == 10" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC会员卡</a-tag
+              >
+              <a-tag v-if="record.type == 11" color="blue"
+                ><IdcardOutlined class="tag-icon" />免费订单</a-tag
+              >
+              <a-tag v-if="record.type == 12" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP充值卡</a-tag
+              >
+              <a-tag v-if="record.type == 13" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC充值卡</a-tag
+              >
+              <a-tag v-if="record.type == 14" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP季卡</a-tag
+              >
+              <a-tag v-if="record.type == 15" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC季卡</a-tag
+              >
+            </template>
+            <template v-if="column.key === 'payStatus'">
+              <a-tag v-if="record.payStatus == 1" color="green"
+                ><CheckOutlined class="tag-icon" />已付款</a-tag
+              >
+              <a-tag v-if="record.payStatus == 2" color="error"
+                ><CloseOutlined class="tag-icon" />未付款</a-tag
+              >
+              <a-tag v-if="record.payStatus == 3" color="cyan"
+                ><CoffeeOutlined class="tag-icon" />未付款,占场中</a-tag
+              >
+            </template>
+            <template v-if="column.key === 'orderStatus'">
+              <a-tag v-if="record.orderStatus == 1" color="green"
+                ><CheckOutlined class="tag-icon" />已付款</a-tag
+              >
+              <a-tag v-if="record.orderStatus == 2" color="blue"
+                ><ClockCircleOutlined class="tag-icon" />未使用</a-tag
+              >
+              <a-tag v-if="record.orderStatus == 3" color="error"
+                ><CloseOutlined class="tag-icon" />已取消</a-tag
+              >
+              <a-tag v-if="record.orderStatus == 4" color="error"
+                >退款申请中</a-tag
+              >
+              <a-tag v-if="record.orderStatus == 5" color="error"
+                >退款被拒绝</a-tag
+              >
+              <a-tag v-if="record.orderStatus == 6" color="green"
+                >退款成功</a-tag
+              >
+              <a-tag v-if="record.orderStatus == 7" color="green"
+                >客户端申请退款</a-tag
+              >
+            </template>
+            <template v-if="column.key === 'isInvoice'">
+              <a-tag v-if="record.isInvoice == 1" color="green">已开</a-tag>
+              <a-tag v-if="record.isInvoice == 2" color="green">未开</a-tag>
+              <a-tag v-if="record.isInvoice == 1" color="green">不能开</a-tag>
+            </template>
             <template v-if="column.key === 'status'">
               <a-tag v-if="record.status === 0" color="green">显示</a-tag>
               <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
@@ -47,8 +185,18 @@
 <script lang="ts" setup>
   import { createVNode, ref } from 'vue';
   import { message, Modal } from 'ant-design-vue';
-  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-  import { EleProTable, toDateString } from "ele-admin-pro";
+  import {
+    ExclamationCircleOutlined,
+    CheckOutlined,
+    CloseOutlined,
+    RestOutlined,
+    ClockCircleOutlined,
+    IdcardOutlined,
+    WechatOutlined,
+    CoffeeOutlined,
+    AlipayCircleOutlined
+  } from '@ant-design/icons-vue';
+  import { EleProTable, toDateString } from 'ele-admin-pro';
   import type {
     DatasourceFunction,
     ColumnItem
@@ -174,16 +322,16 @@
     //   align: 'center',
     //   customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
     // },
-    {
-      title: '备注',
-      dataIndex: 'comments',
-      key: 'comments',
-      align: 'center'
-    },
+    // {
+    //   title: '备注',
+    //   dataIndex: 'comments',
+    //   key: 'comments',
+    //   align: 'center'
+    // },
     {
       title: '操作',
       key: 'action',
-      width: 180,
+      width: 120,
       fixed: 'right',
       align: 'center',
       hideInSetting: true
@@ -276,4 +424,8 @@
   };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .tag-icon {
+    padding-right: 6px;
+  }
+</style>