From 6186c68bc8aa136e86b3e818d79d4dffcc38be0a Mon Sep 17 00:00:00 2001
From: lingling <1077478963@qq.com>
Date: Wed, 26 Feb 2025 19:42:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8E=A8=E5=B9=BF=E8=AF=A6?=
 =?UTF-8?q?=E7=BB=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/promotion.ts                   |  35 ++--
 src/router/routes/modules/promotion.ts |   2 +-
 src/views/promotion/details.vue        | 230 +++++++++++++++++++------
 src/views/promotion/index.vue          |   6 +-
 4 files changed, 201 insertions(+), 72 deletions(-)

diff --git a/src/api/promotion.ts b/src/api/promotion.ts
index 14cce59..0f854fd 100644
--- a/src/api/promotion.ts
+++ b/src/api/promotion.ts
@@ -4,17 +4,24 @@ import axios from 'axios';
  * @param  获取列表推广列表
  * @returns 
  */
-export function lists(key:any) {
-  key=key?key:"";
-    return axios.post<any>('/admin/api/v1/Promotion/list',{key});
-  }
-  
-  /**
-   * 
-   * @param 生成推广链接
-   * @returns 
-   */
-  export function Generatelink() {
-      return axios.post<any>('/admin/api/v1/Promotion/Generatelink');
-    }
-  
\ No newline at end of file
+export function lists(key: any) {
+  key = key ? key : "";
+  return axios.post<any>('/admin/api/v1/Promotion/list', { key });
+}
+
+/**
+ * 
+ * @param 生成推广链接
+ * @returns 
+ */
+export function Generatelink() {
+  return axios.post<any>('/admin/api/v1/Promotion/Generatelink');
+}
+/**
+ * 
+ * @param 获取推广码详情
+ * @returns 
+ */
+export function detailed(invite_code: any,start_date:any,end_date:any) {
+  return axios.post<any>('/admin/api/v1/Promotion/detailed',{invite_code,start_date,end_date});
+}
\ No newline at end of file
diff --git a/src/router/routes/modules/promotion.ts b/src/router/routes/modules/promotion.ts
index 9e1588a..5ff9268 100644
--- a/src/router/routes/modules/promotion.ts
+++ b/src/router/routes/modules/promotion.ts
@@ -22,7 +22,7 @@ const LIST: AppRouteRecordRaw = {
         roles: ['*'],
       },
     },{
-      path: 'details/:id', // The midline path complies with SEO specifications
+      path: 'details/:invite_code', // The midline path complies with SEO specifications
       name: 'details',
       component: () => import('@/views/promotion/details.vue'),
       meta: {
diff --git a/src/views/promotion/details.vue b/src/views/promotion/details.vue
index ec995f9..797857b 100644
--- a/src/views/promotion/details.vue
+++ b/src/views/promotion/details.vue
@@ -1,77 +1,199 @@
 <template>
-    <div class="container">
-        <Breadcrumb :items="['menu.promotion', 'menu.promotion.Table']" />
-        <a-card class="general-card" :title="$t('menu.promotion.Table')">
-            <div>我是详情</div>
-        </a-card>
+  <div class="container">
+    <Breadcrumb :items="['menu.promotion', 'menu.promotion.Table']" />
+    <a-card class="general-card" :title="$t('menu.promotion.Table') + invite_code">
+      <a-row style="padding: 20px;">
+        <a-col :flex="1">
+          <a-form :model="queryParams" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
+            label-align="left">
+            <a-row :gutter="16">
+              <a-col :span="18">
+                <a-form-item field="createdTime" :label="'按照时间查询'">
+                  <a-range-picker v-model="queryParams" style="width: 100%" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </a-col>
+
+        <a-col :flex="'86px'" style="text-align: right">
+          <a-space :size="18">
+            <a-button type="primary" @click="search">
+              <template #icon>
+                <icon-search />
+              </template>
+              查询
+            </a-button>
+            <a-button @click="reset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              重置
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+      <div class="left-side">
+
+
+        <div class="panel">
+
+
+          <a-grid :cols="24" :row-gap="16" class="panel">
+            <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 8 }">
+              <a-space>
+                <a-avatar :size="54" class="col-avatar">
+                  <img alt="avatar"
+                    src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image" />
+                </a-avatar>
+                <a-statistic :title="'注册人数'" :value="data.register" :value-from="0" animation show-group-separator>
+                  <template #suffix>
+                    <span class="unit">个</span>
+                  </template>
+                </a-statistic>
+              </a-space>
+            </a-grid-item>
+            <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 8 }">
+              <a-space>
+                <a-avatar :size="54" class="col-avatar">
+                  <img alt="avatar"
+                    src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image" />
+                </a-avatar>
+                <a-statistic :title="'绑定人数'" :value="data.binding" :value-from="0" animation show-group-separator>
+                  <template #suffix>
+                    <span class="unit">{{ $t('workplace.pecs') }}</span>
+                  </template>
+                </a-statistic>
+              </a-space>
+            </a-grid-item>
+          </a-grid>
+        </div>
+
+      </div>
+    </a-card>
+    
+  </div>
+  <div >
+      <a-row>
+        <a-col :span="12">
+          <div>注册的用户</div>
+          <a-table :data="data.register_user">
+            
+            <template #columns>
+              <a-table-column title="用户id" data-index="id"></a-table-column>
+              <a-table-column title="用户名称" data-index="username"></a-table-column>
+              <a-table-column title="备注" data-index="remark"></a-table-column>
+              <a-table-column title="用户vip等级" data-index="vip_id"></a-table-column>
+              <a-table-column title="用户积分" data-index="money"></a-table-column>
+              <a-table-column title="注册时间">
+                <template #cell="{ record }">
+                  {{ dayjs(record.created_at).format('YYYY-MM-DD HH:mm:ss') }}
+                </template>
+              </a-table-column>
+            </template>
+
+          </a-table>
+        </a-col>
+        <a-col :span="12">
+          <div>绑定手机号的用户</div>
+          <a-table :data="data.binding_user">
+            
+            <template #columns>
+              <a-table-column title="用户id" data-index="id"></a-table-column>
+              <a-table-column title="用户名称" data-index="username"></a-table-column>
+              <a-table-column title="备注" data-index="remark"></a-table-column>
+              <a-table-column title="用户vip等级" data-index="vip_id"></a-table-column>
+              <a-table-column title="用户积分" data-index="money"></a-table-column>
+              <a-table-column title="注册时间">
+                <template #cell="{ record }">
+                  {{ dayjs(record.created_at).format('YYYY-MM-DD HH:mm:ss') }}
+                </template>
+              </a-table-column>
+            </template>
+
+          </a-table>
+        </a-col>
+      </a-row>
+
 
     </div>
 </template>
 
 <script setup>
-import { ref, onMounted, h } from 'vue';
-import { lists, Generatelink } from '@/api/promotion';
+import { ref, onMounted, h, reactive } from 'vue';
+import { detailed } from '@/api/promotion';
 import { IconSearch } from '@arco-design/web-vue/es/icon';
 import { Modal } from '@arco-design/web-vue';
 import { Message } from '@arco-design/web-vue';
 import { del, set_user_remark } from '@/api/jobuser';
+import dayjs from 'dayjs';
+import { useRoute } from 'vue-router';
+const route = useRoute()
 
-import router from '@/router';
-// route.params.id
 
-const data = ref([])
+const invite_code = ref(route.params.invite_code)
+
+// const data = reactive({
+//   register: 0,
+//   binding: 0,
+// });
+const data = ref({
+  register: 0, // 注册的用户数量
+  binding: 0,  // 绑定手机号的用户数量
+  register_user: [], // 注册用户的详细信息
+  binding_user: [] // 绑定用户的详细信息
+});
 
-//保存需要修改的用户id
-const userid = ref(0)
-//设置备注弹窗
-const modal_visible_remark = ref(false)
-const remark = ref("")
-const createlink = async () => {
-    const res1 = await Generatelink()
-    const res = await lists()
-    data.value = res.data
-}
-const set_remark = (id) => {
-    userid.value = id
-    modal_visible_remark.value = true
-}
 onMounted(async () => {
-    getAll()
-})
+  // 获取今天的日期
+  const startDate = dayjs().format("YYYY-MM-DD");
+  const endDate = startDate; // 如果时间段是今天，可以将开始和结束日期设置为相同的日期
 
-const getAll = async () => {
-    const res = await lists()
-    data.value = res.data
-}
-
-const showConfirm_del = (id) => {
-    Modal.confirm({
-        title: '操作提醒',
-        content: '请确认是否要删除该用户',
-        onOk: () => deluser(id),
-    });
-};
-
-const deluser = async (id) => {
-    const res = await del(id);
-    if (res.code == 200) {
-        getAll()
-    }
-};
-
-const handleBeforeOk_remark = async () => {
-    const res = await set_user_remark(userid.value, remark.value);
-    if (res.code == 200) {
-        Message.success('修改备注成功')
-        getAll()
-    }
-    remark.value = ""
+  try {
+    const res = await detailed(invite_code.value, queryParams.value[0], queryParams.value[1]); // 调用接口
+
+    // 将返回的数据赋值给响应式对象
+    data.value.register = res.data.register;
+    data.value.binding = res.data.binding;
+    data.value.register_user = res.data.register_user;
+    data.value.binding_user = res.data.binding_user;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    // 这里可以加入错误处理逻辑，例如显示提示信息
+  }
+});
+const reset = () => { }
+const search = async () => {
+  const res = await detailed(invite_code.value, queryParams.value[0], queryParams.value[1]); // 调用接口
+
+  // 将返回的数据赋值给响应式对象
+  data.value.register = res.data.register;
+  data.value.binding = res.data.binding;
+  data.value.register_user = res.data.register_user;
+  data.value.binding_user = res.data.binding_user;
 }
+const queryParams = ref([dayjs().subtract(1, 'day').format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")])
 
 </script>
 
 <style lang="less" scoped>
 .container {
-    padding: 0 20px 20px 20px;
+  padding: 0 20px 20px 20px;
+}
+
+.panel {
+  background-color: var(--color-bg-2);
+  border-radius: 4px;
+  overflow: auto;
+}
+
+.left-side {
+  flex: 1;
+  overflow: auto;
+}
+
+:deep(.panel-border) {
+  margin-bottom: 0;
+  border-bottom: 1px solid rgb(var(--gray-2));
 }
 </style>
\ No newline at end of file
diff --git a/src/views/promotion/index.vue b/src/views/promotion/index.vue
index 4202b86..88b3e9c 100644
--- a/src/views/promotion/index.vue
+++ b/src/views/promotion/index.vue
@@ -55,7 +55,7 @@
                     <a-table-column title="操作">
                         <template #cell="{ record }">
                             <a-space>
-                                <a-button @click="toDetails(record.id)">查看详情</a-button>
+                                <a-button @click="toDetails(record.invite_code)">查看详情</a-button>
                                 <a-button @click="set_remark(record.id)">修改备注</a-button>
                                 <a-button status="danger" @click="showConfirm_del(record.id)">删除</a-button>
                             </a-space>
@@ -86,8 +86,8 @@ import { Modal } from '@arco-design/web-vue';
 import { Message } from '@arco-design/web-vue';
 import { del, set_user_remark } from '@/api/jobuser';
 import router from '@/router';
-const toDetails=(id)=>{
-    router.push({name:"details",params: {id}})
+const toDetails=(invite_code)=>{
+    router.push({name:"details",params: {invite_code}})
 }
 
 const data = ref([])