feat: add web application

2026-10-10 20:55:59 +08:00
parent 3eb5d78875
commit 50fcfd2d3d
571 changed files with 73992 additions and 135 deletions
@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <div class="n-layout-page-header"><n-card :bordered="false" title="订单列表">“匹配中”的订单可在操作栏选择商品完成匹配。</n-card></div>
+    <n-card :bordered="false" class="proCard">
+      <BasicForm ref="searchFormRef" @register="register" @submit="reloadTable" @reset="reloadTable" />
+      <BasicTable ref="actionRef" :columns="columns" :request="loadDataTable" :row-key="(row)=>row.id" :action-column="actionColumn" :scroll-x="scrollX" :resize-height-offset="-10000">
+        <template #tableTitle><n-space align="center"><n-switch v-model:value="autoRefresh"/><span>自动刷新</span><span v-if="autoRefresh">({{ refreshCountdown }}S)</span></n-space></template>
+      </BasicTable>
+    </n-card>
+    <n-modal v-model:show="showMatch" preset="card" title="匹配订单" class="match-order-modal" :mask-closable="false">
+      <n-spin :show="matchLoading">
+        <n-form label-placement="left" :label-width="90">
+          <n-form-item label="用户名称"><n-input :value="matchMember.username" disabled /></n-form-item>
+          <n-form-item label="账号余额"><n-input :value="yuanPlain(matchMember.availableAmount)" disabled /></n-form-item>
+          <n-form-item label="冻结金额"><n-input :value="yuanPlain(matchMember.frozenAmount)" disabled /></n-form-item>
+          <n-form-item label="选择商品">
+            <n-space vertical class="match-product-area">
+              <n-space align="center" wrap>
+                <span>商品名称</span><n-input v-model:value="productFilter.name" placeholder="商品名称" clearable class="filter-name" />
+                <span>商品价格</span><n-input-number v-model:value="productFilter.priceMin" :min="0" placeholder="最低价" clearable class="filter-price" />
+                <span>-</span><n-input-number v-model:value="productFilter.priceMax" :min="0" placeholder="最高价" clearable class="filter-price" />
+                <n-button type="primary" @click="searchProducts">筛选商品</n-button>
+                <n-button @click="clearProductFilter">清理缓存</n-button>
+              </n-space>
+              <n-data-table
+                :columns="productColumns"
+                :data="products"
+                :loading="productLoading"
+                :row-key="(row) => row.id"
+                :max-height="410"
+                striped
+              />
+              <n-pagination
+                v-if="productPager.total > productPager.pageSize"
+                v-model:page="productPager.page"
+                :page-size="productPager.pageSize"
+                :item-count="productPager.total"
+                @update:page="loadProducts"
+              />
+            </n-space>
+          </n-form-item>
+          <n-form-item label="商品单价">
+            <n-input :value="selectedProduct ? yuanPlain(selectedProduct.priceAmount) : ''" disabled placeholder="请先选择商品" />
+          </n-form-item>
+          <n-form-item label="商品数量">
+            <n-input-number v-model:value="matchForm.quantity" :min="1" :max="999" />
+          </n-form-item>
+        </n-form>
+      </n-spin>
+      <template #action>
+        <n-space>
+          <n-button @click="showMatch=false">取消</n-button>
+          <n-button type="primary" :loading="matchSubmitting" @click="confirmMatch">确定</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+    <n-modal v-model:show="showDetail" preset="card" title="订单详情" class="max-w-900px">
+      <n-descriptions v-if="detail" bordered label-placement="left" :column="2">
+        <n-descriptions-item label="订单号">{{ detail.orderNo }}</n-descriptions-item><n-descriptions-item label="会员">{{ detail.username }} / {{ detail.mobileMask }}</n-descriptions-item>
+        <n-descriptions-item label="商品/任务">{{ detail.productName || '-' }}</n-descriptions-item><n-descriptions-item label="规则等级ID">{{ detail.memberLevelId }}</n-descriptions-item>
+        <n-descriptions-item label="订单金额">{{ yuan(detail.totalAmount) }}</n-descriptions-item><n-descriptions-item label="佣金">{{ yuan(detail.commissionAmount) }}</n-descriptions-item>
+        <n-descriptions-item label="规则快照" :span="2"><n-code :code="JSON.stringify(detail.ruleSnapshot || {}, null, 2)" language="json" word-wrap /></n-descriptions-item>
+      </n-descriptions>
+    </n-modal>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, h, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+import { NButton, NImage, NTag, useMessage } from 'naive-ui';
+import { BasicTable, TableAction } from '@/components/Table';import { BasicForm,useForm } from '@/components/Form';import { adaTableScrollX } from '@/utils/hotgo';
+import { TradeOrderList,TradeOrderMatch,TradeOrderMatchProducts,TradeOrderView } from '@/api/trade';import { columns,schemas,loadOptions } from './model';
+const message=useMessage();const actionRef=ref(),searchFormRef=ref<any>({}),showDetail=ref(false),showMatch=ref(false),detail=ref<any>(),current=ref<any>(),autoRefresh=ref(false),refreshCountdown=ref(10);let timer:any;
+const [register]=useForm({gridProps:{cols:'1 s:1 m:2 l:3 xl:5'},labelWidth:80,schemas});const loadDataTable=(res)=>TradeOrderList({...searchFormRef.value?.formModel,...res});const reloadTable=()=>actionRef.value?.reload();const yuan=(v)=>`¥${((v||0)/100).toFixed(2)}`;
+const yuanPlain=(v)=>((v||0)/100).toFixed(2);
+const matchLoading=ref(false),productLoading=ref(false),matchSubmitting=ref(false),products=ref<any[]>([]),selectedProduct=ref<any>();
+const matchMember=reactive({id:0,username:'',availableAmount:0,frozenAmount:0});
+const matchForm=reactive({id:0,productId:0,quantity:1});
+const productFilter=reactive<{name:string;priceMin:number|null;priceMax:number|null}>({name:'',priceMin:null,priceMax:null});
+const productPager=reactive({page:1,pageSize:10,total:0});
+const productColumns=[
+  {title:'图片',key:'coverUrl',width:90,render:(row)=>h(NImage,{width:54,height:54,objectFit:'cover',src:row.coverUrl,previewDisabled:true})},
+  {title:'商品名称',key:'name',minWidth:300,ellipsis:{tooltip:true}},
+  {title:'商品单价',key:'priceAmount',width:130,sorter:'default',render:(row)=>yuanPlain(row.priceAmount)},
+  {title:'操作',key:'action',width:100,render:(row)=>selectedProduct.value?.id===row.id?h(NTag,{type:'success',bordered:false},{default:()=> '已选择'}):h(NButton,{size:'small',type:'primary',onClick:()=>selectProduct(row)},{default:()=> '选择'})},
+];
+async function openMatch(row){
+  current.value=row;Object.assign(matchMember,{id:row.memberId,username:row.username,availableAmount:row.availableAmount,frozenAmount:row.frozenAmount||0});
+  Object.assign(matchForm,{id:row.id,productId:0,quantity:1});Object.assign(productFilter,{name:'',priceMin:null,priceMax:null});selectedProduct.value=undefined;productPager.page=1;showMatch.value=true;await loadProducts();
+}
+async function loadProducts(){
+  productLoading.value=true;
+  try{const res:any=await TradeOrderMatchProducts({page:productPager.page,pageSize:productPager.pageSize,name:productFilter.name,priceMin:productFilter.priceMin,priceMax:productFilter.priceMax});products.value=res.list||[];productPager.total=res.totalCount||0}finally{productLoading.value=false}
+}
+function searchProducts(){productPager.page=1;loadProducts()}
+function clearProductFilter(){Object.assign(productFilter,{name:'',priceMin:null,priceMax:null});productPager.page=1;selectedProduct.value=undefined;matchForm.productId=0;loadProducts();message.success('商品列表已刷新')}
+function selectProduct(row){selectedProduct.value=row;matchForm.productId=row.id}
+async function confirmMatch(){
+  if(!matchForm.productId){message.error('请先选择商品');return}
+  matchSubmitting.value=true;try{await TradeOrderMatch(matchForm);message.success('订单匹配成功');showMatch.value=false;reloadTable()}finally{matchSubmitting.value=false}
+}
+async function view(row){detail.value=await TradeOrderView({id:row.id});showDetail.value=true}
+const actionColumn=reactive({width:180,title:'操作',key:'action',fixed:'right',render:(row)=>h(TableAction as any,{style:'button',actions:[
+  {label:'匹配订单',type:'primary',disabled:!row.canMatch,title:row.canMatch?'匹配订单':'仅“匹配中”的订单可操作',onClick:()=>openMatch(row)},
+  {label:'详情',onClick:()=>view(row)},
+]})});const scrollX=computed(()=>adaTableScrollX(columns,actionColumn.width));
+watch(autoRefresh,(enabled)=>{
+  clearInterval(timer);refreshCountdown.value=10;
+  if(!enabled)return;
+  timer=setInterval(()=>{
+    refreshCountdown.value-=1;
+    if(refreshCountdown.value>0)return;
+    reloadTable();refreshCountdown.value=10;
+  },1000);
+});
+onBeforeUnmount(()=>clearInterval(timer));onMounted(loadOptions);
+</script>
+<style lang="less" scoped>
+  :deep(.match-order-modal) { width: min(1040px, 94vw); }
+  .match-product-area { width: 100%; }
+  .filter-name { width: 180px; }
+  .filter-price { width: 130px; }
+</style>
@@ -0,0 +1,36 @@
+import { computed, h, ref } from 'vue';
+import { NTag } from 'naive-ui';
+import { FormSchema } from '@/components/Form';
+import { useDictStore } from '@/store/modules/dict';
+import { defRangeShortcuts } from '@/utils/dateUtil';
+
+const dict = useDictStore();
+export const schemas = ref<FormSchema[]>([
+  { field: 'orderNo', component: 'NInput', label: '订单号', componentProps: { placeholder: '请输入订单号', clearable: true } },
+  { field: 'username', component: 'NInput', label: '用户名', componentProps: { clearable: true } },
+  { field: 'mobile', component: 'NInput', label: '手机号', componentProps: { placeholder: '精确查询', clearable: true } },
+  { field: 'orderStatus', component: 'NSelect', label: '订单状态', componentProps: { options: computed(() => dict.getOptionUnRef('tradeOrderStatus')), clearable: true } },
+  { field: 'createdAt', component: 'NDatePicker', label: '下单时间', componentProps: { type: 'datetimerange', clearable: true, shortcuts: defRangeShortcuts() } },
+]);
+const tag = (type, value) => h(NTag, { type: dict.getType(type, value), bordered: false }, { default: () => dict.getLabel(type, value) || '-' });
+const yuan = (value) => `¥${((value || 0) / 100).toFixed(2)}`;
+export const columns = [
+  { title: '订单号', key: 'orderNo', width: 210 },
+  { title: '绑卡姓名', key: 'realNameMask', width: 110 },
+  { title: '用户名', key: 'username', width: 120 },
+  { title: '手机号', key: 'mobileMask', width: 130 },
+  { title: '自动派单', key: 'autoDispatch', width: 100, render: (r) => tag('tradeAutoDispatch', r.autoDispatch) },
+  { title: '余额', key: 'availableAmount', width: 120, render: (r) => yuan(r.availableAmount) },
+  { title: '当日交易', key: 'todayTradeCount', width: 90 },
+  { title: '商品/任务', key: 'productName', width: 160, ellipsis: { tooltip: true } },
+  { title: '类型', key: 'orderType', width: 100, render: (r) => tag('tradeOrderType', r.orderType) },
+  { title: '数量', key: 'quantity', width: 70 },
+  { title: '订单金额', key: 'totalAmount', width: 120, render: (r) => yuan(r.totalAmount) },
+  { title: '佣金', key: 'commissionAmount', width: 110, render: (r) => yuan(r.commissionAmount) },
+  { title: '下单时间', key: 'createdAt', width: 180 },
+  { title: '解冻时间', key: 'unfrozenAt', width: 180 },
+  { title: '消息', key: 'message', width: 180, ellipsis: { tooltip: true } },
+  { title: '订单状态', key: 'orderStatus', width: 100, render: (r) => tag('tradeOrderStatus', r.orderStatus) },
+  { title: '冻结状态', key: 'freezeStatus', width: 110, render: (r) => tag('tradeFreezeStatus', r.freezeStatus) },
+];
+export const loadOptions = () => dict.loadOptions(['tradeOrderType', 'tradeOrderStatus', 'tradeFreezeStatus', 'tradeAutoDispatch', 'trade_exception_reason']);