接口对接

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" :class="{'isHomePage': $route.path === '/' || $route.path === '/index'}">
+  <div id="app" :class="{'isHomePage': $route.path === '/' || $route.path === '/index',vipHomePage: $route.path === '/member'}">
     <ElConfigProvider :locale="langStore.elLocale">
     <el-container style="min-height: 100vh;">
       <el-header class="box_shadow_card">
@@ -38,6 +38,7 @@
       </el-header>
       <!-- 固定头部占位 -->
       <div style="height: 60px;"></div>
+      <div class="header-bj" v-if="$route.path === '/member'"></div>
       <el-main class="container">
         <router-view />
       </el-main>
@@ -109,7 +110,10 @@ const activeIndex = computed(() => {
   if (route.path.startsWith('/mibi-shop')) {
     return '5'
   }
-  return '1' // 默认返回首页
+  if (route.path.startsWith('/personal-center')) {
+    return null
+  }
+  return null // 默认返回首页
 });
 // 去个人中心
 const toPersonal = () => {
@@ -143,6 +147,11 @@ const handleLogout = () => {
     background-size: 100% 100%;
   }
 }
+.vipHomePage {
+  .el-header {
+    background: rgba(255,255,255,0.5);
+  }
+}
 
 .el-header {
   background: url('@/assets/imgs/bg-header_2.png') no-repeat;
@@ -193,6 +202,15 @@ const handleLogout = () => {
     }
   }
 }
+.header-bj {
+  top: 0;
+  width: 100%;
+  height: 463px;
+  background: url('/src/assets/imgs/header-bj@2x.png') no-repeat;
+  background-size: cover;
+  position: fixed;
+  z-index: -1;
+}
 
 .el-footer {
   color: #666;

src/api/my.js

@@ -6,4 +6,37 @@ export function checkIn(data = {}) {
 // 收藏列表
 export function collectList(data = {}) {
   return request.get('/collect/list',data)
+}
+// 查询会员类型
+export function vipList(data = {}) {
+  return request.get('/type/list',data)
+}
+
+// 查询我的报名记录列表
+export function getWorkflowApplyByUserId(data = {}) {
+  return request.get('/apply/getWorkflowApplyByUserId',data)
+}
+// 查询登录用户的寻找工作流列表
+export function userQuestList(data = {}) {
+  return request.get('/quest/userQuestList',data)
+}
+
+// 我的订单
+export function orderList(data = {}) {
+  return request.get('/order/list',data)
+}
+
+// 我的发票
+export function invoiceList(data = {}) {
+  return request.get('/invoice/list',data)
+}
+
+// 查看登录用户发布的工作流
+export function userPublishList(data = {}) {
+  return request.get('/publish/userPublishList',data)
+}
+
+// 删除登录用户发布的工作流
+export function delectPublish(data = {}) {
+  return request.del(`/publish/${data}`)
 }

src/locales/en.js

@@ -49,7 +49,8 @@ export default {
     publishWorkflow: 'Publish Workflow',
     agree: 'Agree',
     reject: 'Reject',
-    viewHomepage: 'View Homepage'
+    viewHomepage: 'View Homepage',
+    empty:'No data available'
   },
   login: {
     smsLogin: 'SMS Login',

src/locales/zh-CN.js

@@ -52,7 +52,8 @@ export default {
     publishWorkflow: '发布工作流',
     agree: '同意',
     reject: '拒绝',
-    viewHomepage: '查看主页'
+    viewHomepage: '查看主页',
+    empty:'暂无数据'
   },
   login: {
     smsLogin: '短信登录',

src/pages/Member.vue

@@ -1,11 +1,169 @@
 <template>
   <div class="member">
-
+    <div class="member-head">
+      <div class="member-head-title">开通会员尊享特权</div>
+      <ul class="member-head-list">
+        <li v-for="(item, index) in 4" :key="index">小标题优惠文案</li>
+      </ul>
+    </div>
+    <ul class="member-list">
+      <li v-for="(item, index) in list" :key="index">
+        <div class="name">{{ item.typeName }}</div>
+        <div class="desc">xxxxxxxxxxxxxxxxxxxxxxxx</div>
+        <div class="flex-align-center price">
+          <div class="price-left">
+            <span>￥</span>
+            <span>{{ item.price }}</span>
+            <span>/月</span>
+          </div>
+          <div class="price-right">￥79.00/月</div>
+        </div>
+        <div class="btn">开通月卡</div>
+        <div class="line">尊享权益</div>
+        <div class="ul">
+          <div v-for="(item, index) in 4" :key="index" class="li flex-center-between">
+            <div class="">权益一</div>
+            <div class="">限量</div>
+          </div>
+        </div>
+      </li>
+    </ul>
   </div>
 </template>
-<script setup ></script>
+<script setup lang="ts">
+import { vipList } from '@/api/my.js';
+import { ref, onMounted } from 'vue';
+const list = ref([])
+
+const getList = async () => {
+  let res = await vipList();
+  console.log(res.data)
+  list.value = res.data;
+}
+
+onMounted(() => {
+  getList()
+})
+
+</script>
+<style>
+body {
+  /* background: #FBF4F0 !important; */
+}
+</style>
 <style lang="scss">
-  PAGE {
-    color: transparent;
+.member {
+  max-width: 1246px;
+  margin: 0 auto;
+}
+
+.member-head {
+  padding: 70px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  line-height: 1;
+
+  .member-head-title {
+    color: #8B3D22;
+    font-size: 36px;
+    font-weight: bold;
+  }
+
+  .member-head-list {
+    display: flex;
+
+    margin-top: 24px;
+
+    li {
+      font-size: 18px;
+      margin-right: 66px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.member-list {
+  display: flex;
+  gap: 48px;
+  flex-wrap: wrap;
+
+  li {
+    width: 383px;
+    padding: 24px 32px;
+    background: #FFFFFF;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    .desc {
+      margin: 16px 0 24px;
+      font-size: 16px;
+    }
+
+    .name {
+      color: #8B3D22;
+      font-size: 24px;
+      font-weight: bold;
+    }
+
+    .price {
+      font-size: 14px;
+      line-height: 1;
+      align-items: flex-end;
+
+      .price-left {
+        span {
+          &:nth-child(2) {
+            font-size: 24px;
+            font-weight: bold;
+          }
+        }
+      }
+
+      .price-right {
+        margin-left: 20px;
+      }
+    }
+
+    .btn {
+      width: 100%;
+      margin: 24px 0;
+      color: #5A1D07;
+      font-size: 16px;
+      font-weight: bold;
+      text-align: center;
+      line-height: 50px;
+      cursor: pointer;
+      background: linear-gradient(270deg, #FBE8CF 0%, #F8C79D 52.05%, #FADCB9 100%);
+      border-radius: 10px;
+    }
+
+    .line {
+      width: 164px;
+      color: #8B3D22;
+      font-weight: bold;
+      font-size: 14px;
+      text-align: center;
+      background: url('/src/assets/imgs/line@2x.png') no-repeat;
+      background-size: 164px 3px;
+      background-position: center center;
+    }
+
+    .ul {
+      width: 100%;
+      color: #8B3D22;
+      font-size: 14px;
+
+      .li {
+        margin-top: 16px;
+      }
+    }
   }
+}
 </style>

src/pages/Personal/Collection.vue

@@ -5,7 +5,7 @@
       <div class="">{{ $t('personalCenter.myCollection') }}</div>
     </div>
     <ul class="collection-list">
-      <li class="flex-center-between" v-for="(item, index) in 5" :key="index">
+      <li class="flex-center-between" v-for="(item, index) in list" :key="index">
         <img class="image"
           src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" alt="">
         <div class="collection-list-main">
@@ -23,7 +23,11 @@
         </div>
       </li>
     </ul>
-    <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum" @page-change="handlePageChange" />
+    <template v-if="list.length">
+      <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum"
+        @page-change="handlePageChange" />
+    </template>
+    <el-empty v-else :description="$t('common.empty')" />
   </div>
 </template>
 <script setup lang="ts">
@@ -31,8 +35,8 @@ import Pagination from '@/components/Pagination.vue'
 import { ref, onMounted } from 'vue'
 import { collectList } from '@/api/my.js'
 const form = ref({
-  pageNum:1,
-  pageSize:10,
+  pageNum: 1,
+  pageSize: 10,
   total: 0
 })
 
@@ -44,8 +48,10 @@ const getList = async () => {
   form.value.total = res.total;
   list.value = res.rows
 }
-const handlePageChange = (page) =>{
-  console.log(page)
+const handlePageChange = (page) => {
+  list.value = []
+  form.value.pageNum = page;
+  getList()
 }
 onMounted(() => {
   getList()
@@ -116,9 +122,11 @@ onMounted(() => {
           cursor: pointer;
           background: linear-gradient(270deg, #0055FE 0%, #C832FA 100%);
           border-radius: 4px;
+
           &:hover {
             opacity: 0.7;
           }
+
           img {
             width: 14px;
             height: 14px;

src/pages/Personal/Demand.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="demand">
-    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tabs v-model="form.activeName" class="demo-tabs" @tab-click="handleClick">
       <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="$t(tab.label)" :name="tab.name">
         <ul class="demand-list">
-          <li v-for="(item, index) in 5" :key="index">
+          <li v-for="(item, index) in list" :key="index">
             <div class="flex-center-between">
-              <div class="title">需求标题需求标题需求标题需求标题</div>
-              <div class="price">￥2000.00-3000.00</div>
+              <div class="title">{{ item.title }}</div>
+              <div class="price">￥{{ item.budgetMin }}-{{ item.budgetMax }}</div>
             </div>
             <div class="flex-align-center content">
               <div class="flex-align-center">
@@ -16,11 +16,11 @@
               <ul class="flex-align-center list">
                 <div class="li">
                   <img src="/src/assets/imgs/yuangong.png" alt="">
-                  <div class="">15{{ $t('common.renbaoming') }}</div>
+                  <div class="">{{ item.publishCount }}{{ $t('common.renbaoming') }}</div>
                 </div>
                 <div class="li">
                   <img src="/src/assets/imgs/rili.png" alt="">
-                  <div class="">{{ $t('common.signUpDeadline') }}：2024-11-19 17:00</div>
+                  <div class="">{{ $t('common.signUpDeadline') }}：{{ item.publishTime }}</div>
                 </div>
               </ul>
             </div>
@@ -28,11 +28,11 @@
             <div class="info">
               <div class="info-left">
                 <el-avatar :size="30" :src="appStore.avatarDefault" />
-                <div class="name">花花</div>
+                <div class="name">{{ item.nickName }}</div>
                 <div class="date">2024-11-18 {{ $t('common.publish') }}</div>
               </div>
               <div class="info-right flex-align-center">
-                <template v-if="activeName == 'first'">
+                <template v-if="form.activeName === 0">
                   <div class="btn" @click="dialogVisible = true">
                     <img src="/src/assets/imgs/my/jilu@2x.png" alt="">
                     <div>{{ $t('personalCenter.viewSignUpRecord') }}</div>
@@ -62,18 +62,20 @@
         </ul>
       </el-tab-pane>
     </el-tabs>
-    <Pagination :total="20" :page-size="10" :current-page="1" @page-change="handlePageChange" />
+   <template v-if="list.length">
+     <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum" @page-change="handlePageChange" />
+   </template>
+   <el-empty v-else :description="$t('common.empty')" />
 
-    <el-dialog v-model="dialogVisible" :title="$t('personalCenter.viewSignUpRecord')" width="1138"
-      :before-close="handleClose">
+    <el-dialog v-model="dialogVisible" :title="$t('personalCenter.viewSignUpRecord')" width="1138">
       <div class="detail">
         <div class="detail-top">
           <div class="flex-center-between">
             <div class="flex-align-center">
               <div class="tag">报名中</div>
-              <div class="name">【Linux】【操作】Linux操作集锦系列之十五——如何破解pdf、doc、zip、rar等密码</div>
+              <div class="name">{{ item.title }}</div>
             </div>
-            <div class="price">￥2000.00-3000.00</div>
+            <div class="price">￥{{ item.budgetMin }}-{{ item.budgetMax }}</div>
           </div>
           <div class="flex-align-center content">
             <div class="flex-align-center">
@@ -135,22 +137,55 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref,onMounted } from 'vue'
 import { useAppStore } from '@/pinia/appStore'
 import type { TabsPaneContext } from 'element-plus'
 import Pagination from '@/components/Pagination.vue'
+
+import { getWorkflowApplyByUserId,userQuestList } from '@/api/my.js'
+
 const appStore = useAppStore();
-const activeName = ref('first')
 const tabs = ref([
-  { label: 'personalCenter.publishDemandRecord', name: 'first' },
-  { label: 'personalCenter.myDemandRecord', name: 'second' }
+  { label: 'personalCenter.publishDemandRecord', name: 0 },
+  { label: 'personalCenter.myDemandRecord', name: 1 }
 ])
 
 const dialogVisible = ref(false)
 
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event)
+const list = ref([])
+const form = ref({
+  pageNum:1,
+  pageSize:10,
+  total: 0,
+  activeName:0
+})
+
+const handleClick = (tab: TabsPaneContext) => {
+  list.value = []
+  form.value.pageNum = 1;
+  form.value.activeName = tab.props.name;
+  getList()
 }
+
+// 获取列表
+const getList = async () =>{
+  let res = await (form.value.activeName === 0 ? userQuestList(form.value) : getWorkflowApplyByUserId(form.value))
+  console.log(res.rows)
+  list.value = res.rows || [];
+  form.value.total = res.total;
+}
+
+const handlePageChange = (page) =>{
+  list.value = []
+  form.value.pageNum = page;
+  getList()
+}
+
+onMounted(()=>{
+  getList()
+})
+
+
 </script>
 <style scoped lang="scss">
 .demand {
@@ -360,6 +395,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
           height: 32px;
           border-radius: 4px;
           font-size: 14px;
+
           &:hover {
             opacity: 0.7;
           }

src/pages/Personal/Invoice.vue

@@ -2,10 +2,10 @@
   <div class="invoice">
     <div class="gap10 invoice-title">
       <div class="line_vertical"></div>
-      <div class="">{{$t('personalCenter.myInvoice')}}</div>
+      <div class="">{{ $t('personalCenter.myInvoice') }}</div>
     </div>
     <ul class="invoice-list">
-      <li v-for="(item, index) in 5" :key="index">
+      <li v-for="(item, index) in list" :key="index">
         <div class="invoice-list-t flex-center-between">
           <div class="">这是订单名称</div>
           <div class="">￥5000.00</div>
@@ -22,16 +22,47 @@
           <div class=""></div>
           <div class="">
             <img src="/src/assets/imgs/my/jilu@2x.png" alt="">
-           <span>{{ $t('common.viewDetails') }}</span>
+            <span>{{ $t('common.viewDetails') }}</span>
           </div>
         </div>
       </li>
     </ul>
-    <Pagination :total="20" :page-size="10" :current-page="1" @page-change="handlePageChange" />
+    <template v-if="list.length">
+      <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum"
+        @page-change="handlePageChange" />
+    </template>
+    <el-empty v-else :description="$t('common.empty')" />
   </div>
 </template>
 <script setup lang="ts">
-  import Pagination from '@/components/Pagination.vue'
+import Pagination from '@/components/Pagination.vue'
+import { invoiceList } from '@/api/my.js'
+import { ref, onMounted } from 'vue'
+const list = ref([])
+const form = ref({
+  pageNum: 1,
+  pageSize: 10,
+  total: 0
+})
+
+
+// 获取列表
+const getList = async () => {
+  let res = await invoiceList(form.value)
+  console.log(res.rows)
+  list.value = res.rows || [];
+  form.value.total = res.total;
+}
+
+const handlePageChange = (page) => {
+  list.value = []
+  form.value.pageNum = page;
+  getList()
+}
+
+onMounted(() => {
+  getList()
+})
 </script>
 <style scoped lang="scss">
 .invoice {
@@ -95,6 +126,7 @@
           border-radius: 4px;
           color: #2D71FF;
           font-size: 14px;
+
           img {
             width: 14px;
             height: 14px;

src/pages/Personal/MemberDetails.vue

@@ -2,10 +2,10 @@
   <div class="member-details">
     <div class="gap10 title">
       <div class="line_vertical"></div>
-      <div class="">{{$t('personalCenter.openMembershipDetails')}}</div>
+      <div class="">{{ $t('personalCenter.openMembershipDetails') }}</div>
     </div>
     <ul class="member-details-list">
-      <li v-for="(item, index) in 5" :key="index">
+      <li v-for="(item, index) in list" :key="index">
         <div class="member-details-list-t flex-center-between">
           <div class="">{{ $t('personalCenter.goumaishichang') }}：1个月</div>
           <div class="">￥99.99</div>
@@ -16,16 +16,39 @@
         </div>
       </li>
     </ul>
-    <Pagination 
-        :total="20"
-        :page-size="10"
-        :current-page="1"
-        @page-change="handlePageChange"
-      />
+    <template v-if="list.length">
+      <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum"
+        @page-change="handlePageChange" />
+    </template>
+    <el-empty v-else :description="$t('common.empty')" />
   </div>
 </template>
 <script setup lang="ts">
 import Pagination from '@/components/Pagination.vue'
+import { ref, onMounted } from 'vue'
+import { collectList } from '@/api/my.js'
+const form = ref({
+  pageNum: 1,
+  pageSize: 10,
+  total: 0
+})
+
+const list = ref([])
+
+const getList = async () => {
+  let res = await collectList(form.value);
+  console.log(res);
+  form.value.total = res.total;
+  list.value = res.rows
+}
+const handlePageChange = (page) => {
+  list.value = []
+  form.value.pageNum = page;
+  getList()
+}
+onMounted(() => {
+  getList()
+})
 </script>
 <style scoped lang="scss">
 .member-details {
@@ -44,18 +67,23 @@ import Pagination from '@/components/Pagination.vue'
       margin-bottom: 16px;
       background: #F5F7FA;
       border-radius: 16px;
+
       &:last-child {
         margin-bottom: 0;
       }
+
       .member-details-list-t {
         margin-bottom: 8px;
+
         div {
           font-size: 16px;
+
           &:last-child {
             color: #F52929;
           }
         }
       }
+
       .member-details-list-b {
         div {
           font-size: 14px;

src/pages/Personal/Orders.vue

@@ -3,16 +3,19 @@
     <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
       <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="$t(tab.label)" :name="tab.name">
         <ul class="order-list">
-          <li v-for="(item, index) in 5" :key="index">
+          <li v-for="(item, index) in list" :key="index">
             <div class="order-list-top flex-center-between">
               <div class="order-list-top-l flex-align-center">
-                <el-tag :type="index == 0 ? 'primary' : index == 1 ? 'success' : 'danger'">{{ index == 0 ? $t('personalCenter.daifukuan') : index == 1 ? $t('personalCenter.yiwancheng') : $t('personalCenter.yiquxiao') }}</el-tag>
+                <el-tag :type="index == 0 ? 'primary' : index == 1 ? 'success' : 'danger'">{{ index == 0 ?
+                  $t('personalCenter.daifukuan') : index == 1 ? $t('personalCenter.yiwancheng') :
+                    $t('personalCenter.yiquxiao') }}</el-tag>
                 <div class="">{{ $t('personalCenter.dingdanhao') }}: 3056207306143088789</div>
               </div>
               <div class="order-list-top-r">{{ $t('common.orderTime') }}: 2025-11-11 12:00:00</div>
             </div>
             <div class="order-list-main flex">
-              <img class="image" src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" alt="">
+              <img class="image"
+                src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" alt="">
               <div class="order-list-con flex-center-between flex_1">
                 <div class="">
                   <div class="title">UI界面设计教程</div>
@@ -45,7 +48,7 @@
                       <img src="/src/assets/imgs/my/order3@2x.png" alt="">
                       <div class="">{{ $t('common.applyInvoice') }}</div>
                     </div>
-                     <div class="red btn mt8">
+                    <div class="red btn mt8">
                       <img src="/src/assets/imgs/my/order4@2x.png" alt="">
                       <div class="">{{ $t('common.applyRefund') }}</div>
                     </div>
@@ -63,14 +66,19 @@
         </ul>
       </el-tab-pane>
     </el-tabs>
-    <Pagination :total="20" :page-size="10" :current-page="1" @page-change="handlePageChange" />
+    <template v-if="list.length">
+      <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum"
+        @page-change="handlePageChange" />
+    </template>
+    <el-empty v-else :description="$t('common.empty')" />
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 
 import type { TabsPaneContext } from 'element-plus'
 import Pagination from '@/components/Pagination.vue'
+import { orderList } from '@/api/my.js'
 
 const tabs = ref([
   { label: 'personalCenter.allOrders', name: 'first' },
@@ -80,10 +88,37 @@ const tabs = ref([
 ])
 
 const activeName = ref('first')
-
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event)
+const list = ref([]);
+const form = ref({
+  pageNum: 1,
+  pageSize: 10,
+  total: 0,
+  activeName: 0
+})
+
+const handleClick = (tab: TabsPaneContext) => {
+  list.value = []
+  form.value.pageNum = 1;
+  form.value.activeName = tab.props.name;
+  getList()
+}
+// 获取我的订单
+const getList = async () => {
+  let res = await orderList(form.value);
+  console.log(res.rows)
+  list.value = res.rows || [];
+  form.value.total = res.total;
 }
+const handlePageChange = (page) => {
+  list.value = []
+  form.value.pageNum = page;
+  getList()
+}
+
+onMounted(() => {
+  getList()
+})
+
 </script>
 <style scoped lang="scss">
 .order {
@@ -93,10 +128,12 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
     li {
       background: #FFFFFF;
       border-radius: 16rpx;
-       margin-bottom: 16px;
+      margin-bottom: 16px;
+
       &:last-child {
         margin-bottom: 0;
       }
+
       .order-list-top {
         height: 42px;
         padding: 0 16px;
@@ -156,9 +193,11 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
             }
           }
         }
+
         .mt8 {
           margin-top: 8px;
         }
+
         .btn {
           display: flex;
           align-items: center;
@@ -167,27 +206,32 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
           height: 32px;
           cursor: pointer;
           border-radius: 4px;
+
           img {
             width: 14px;
             height: 14px;
             margin-right: 4px;
           }
+
           div {
             font-size: 14px;
             color: #FFFFFF;
           }
         }
 
-        
+
 
         .red {
           background: #FCEBEB;
+
           div {
             color: #E43434;
           }
         }
+
         .blue {
           background: #EAF0FF;
+
           div {
             color: #2D71FF;
           }

src/pages/Personal/Wallet.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="wallet-page">
     <ul class="wallet-list flex-between">
-      <li class="gradient flex-center-between" v-for="(item,index) in 2" :key="index">
+      <li class="gradient flex-center-between" v-for="(item, index) in 2" :key="index">
         <div class="wallet-list-li-left">
           <div class="">{{ index == 0 ? $t('common.mibi') : $t('common.baomibi') }}{{ $t('personalCenter.yue') }}</div>
           <div class="">5000</div>
@@ -11,28 +11,20 @@
             <img src="/src/assets/imgs/my/tixian@2x.png" alt="">
             <div class="">{{ $t('personalCenter.shenqingtixian') }}</div>
           </div>
-           <div v-if="index == 1" class="flex-align-center btn">
+          <div v-if="index == 1" class="flex-align-center btn">
             <img src="/src/assets/imgs/my/zhuanhuan@2x.png" alt="">
             <div class="">{{ $t('personalCenter.zhuanghuanmibi') }}</div>
           </div>
         </div>
       </li>
     </ul>
-    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-      <el-tab-pane :label="$t('personalCenter.incomeDetails')" name="first">
-        <ul class="wallet-page-list">
-          <li v-for="(item, index) in 5" :key="index">
-            <div class="title">
-              <div class="">订单米币</div>
-              <div class="">2024-08-24 14:11:11</div>
-            </div>
-            <div class="price">+1000</div>
-          </li>
-        </ul>
-      </el-tab-pane>
-      <el-tab-pane :label="$t('personalCenter.usageRecord')" name="second">
+    <el-tabs v-model="form.activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane :label="$t(tab.label)" v-for="tab in tabs" :key="tab.name" :name="tab.name">
+        <div class="tabs flex-align-center">
+          <div :class="{active:index == 0}" class="tab" v-for="(item, index) in 2">{{ index == 0 ? '米币' : '暴米币' }}明细</div>
+        </div>
         <ul class="wallet-page-list">
-          <li v-for="(item, index) in 5" :key="index">
+          <li v-for="(item, index) in list" :key="index">
             <div class="title">
               <div class="">订单米币</div>
               <div class="">2024-08-24 14:11:11</div>
@@ -42,30 +34,73 @@
         </ul>
       </el-tab-pane>
     </el-tabs>
-    <Pagination :total="20" :page-size="10" :current-page="1" @page-change="handlePageChange" />
+    <template v-if="list.length">
+      <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum"
+        @page-change="handlePageChange" />
+    </template>
+    <el-empty v-else :description="$t('common.empty')" />
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 
 import type { TabsPaneContext } from 'element-plus'
 import Pagination from '@/components/Pagination.vue'
 
 const activeName = ref('first')
+const tabs = ref([
+  { label: 'personalCenter.incomeDetails', name: 0 },
+  { label: 'personalCenter.usageRecord', name: 1 }
+])
+const list = ref([])
+const form = ref({
+  activeName: 0,
+  pageNum: 1,
+  pageSize: 10,
+  total: 0,
+})
+
+const handleClick = (tab: TabsPaneContext) => {
+  list.value = []
+  form.value.pageNum = 1;
+  form.value.activeName = tab.props.name;
+  getList()
+}
+const getList = async () => {
 
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event)
 }
 
 const handlePageChange = (newPage: number) => {
-  console.log('当前页码:', newPage)
+  list.value = []
+  form.value.pageNum = page;
+  getList()
 }
+onMounted(() => {
+  getList()
+})
 </script>
 <style scoped lang="scss">
 .wallet-page {
 
   padding-bottom: 16px;
 
+  .tabs {
+    .tab {
+      cursor: pointer;
+      color: #2D71FF;
+      padding: 0 12px;
+      line-height: 30px;
+      font-size: 14px;
+      background: #EAF0FF;
+      border-radius: 4px;
+      margin-right: 16px;
+    }
+    .active {
+      color: #FFFFFF;
+      background: linear-gradient( 90deg, #0055FE 0%, #C832FA 100%);
+    }
+  }
+
   .wallet-list {
     gap: 16px;
     padding: 16px;
@@ -106,7 +141,8 @@ const handlePageChange = (newPage: number) => {
             height: 16px;
             margin-right: 4px;
           }
-          &:hover{
+
+          &:hover {
             opacity: 0.7;
           }
         }

src/pages/Personal/Workflow.vue

@@ -1,22 +1,21 @@
 <template>
   <div class="workflow">
-    <div class="gradient workflow-btn flex-center">
+    <div @click="router.push({path:'/workflow-add'})" class="gradient workflow-btn flex-center">
       <img src="/src/assets/imgs/add.png" alt="">
       <div class="">{{ $t('common.publishWorkflow') }}</div>
     </div>
     <ul class="workflow-list">
-      <li v-for="(item, index) in 6" :key="index" class="">
-        <img class="image"
-          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" alt="">
+      <li v-for="(item, index) in list" :key="index" class="">
+        <img class="image" :src="item.coverImage" alt="">
         <div class="kong"></div>
         <div class="workflow-list-con flex-column flex-between">
           <div class="top">
             <div class="workflow-list-time flex-align-center">
               <img src="/src/assets/imgs/rili.png" alt="">
-              <div class="">2023-10-15</div>
+              <div class="">{{ item.createTime }}</div>
             </div>
-            <div class="title">Linux操作集锦系列之十五——如何破解pdf、doc、word、png、MP3、mp4、表格...</div>
-            <div class="desc">- 本文介绍两款开源的密码破解工具John the Ripp...</div>
+            <div class="title">{{ item.workflowTitle }}</div>
+            <div class="desc">{{ item.description }}</div>
           </div>
           <div class="flex_1">
             <div class="info flex-center-between">
@@ -26,15 +25,15 @@
               </div>
               <div class="info-right flex-align-center">
                 <img src="/src/assets/imgs/yun.png" alt="">
-                <div class="">n8n平台</div>
+                <div class="">{{ item.categoryName1 }}平台</div>
               </div>
             </div>
             <div class="footer flex-center-between">
-              <div class="flex-center btn">
+              <div @click="changeItem(item, index, 0)" class="flex-center btn">
                 <img src="/src/assets/imgs/my/edit@2x.png" alt="">
                 <div class="">{{ $t('common.edit') }}</div>
               </div>
-              <div class="flex-center btn">
+              <div @click="changeItem(item, index, 1)" class="flex-center btn">
                 <img src="/src/assets/imgs/my/del@2x.png" alt="">
                 <div class="">{{ $t('common.delete') }}</div>
               </div>
@@ -43,11 +42,79 @@
         </div>
       </li>
     </ul>
-    <Pagination :total="20" :page-size="10" :current-page="1" @page-change="handlePageChange" />
+    <template v-if="list.length">
+      <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum"
+        @page-change="handlePageChange" />
+    </template>
+    <el-empty v-else :description="$t('common.empty')" />
   </div>
 </template>
 <script setup lang="ts">
+
 import Pagination from '@/components/Pagination.vue'
+
+import { ref, onMounted } from 'vue';
+
+import { useRoute, useRouter } from 'vue-router'
+
+import { userPublishList, delectPublish } from '@/api/my'
+
+import { ElMessageBox } from 'element-plus'
+
+import DGTMessage from '@/utils/message'
+
+const route = useRoute()
+const router = useRouter()
+
+let list = ref([])
+const form = ref({
+  categoryId1: null,
+  categoryId2: null,
+  categoryId3: null,
+  workflowTitle: ''
+})
+// 编辑删除
+const changeItem = async (item: any, index: any, type: any) => {
+  if (type == 0) {
+
+  } else if (type == 1) {
+    ElMessageBox.confirm(
+      'proxy will permanently delete the file. Continue?',
+      'Warning',
+      {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning',
+      }
+    )
+      .then(async () => {
+        console.log('222', item)
+        let res = await delectPublish(item.publishId);
+        DGTMessage.success('删除成功')
+        getList()
+        console.log(res);
+      })
+      .catch(() => {
+
+      })
+  }
+}
+
+const getList = async () => {
+  let res = await userPublishList(form.value);
+  console.log(res);
+  form.value.total = res.total;
+  list.value = res.rows
+}
+const handlePageChange = (page) => {
+  list.value = []
+  form.value.pageNum = page;
+  getList()
+}
+onMounted(() => {
+  getList()
+})
+
 </script>
 <style scoped lang="scss">
 .workflow {
@@ -189,6 +256,7 @@ import Pagination from '@/components/Pagination.vue'
             &:last-child {
               color: #E43434;
             }
+
             &:hover {
               opacity: 0.7;
             }

src/pages/PersonalCenter.vue

@@ -6,10 +6,10 @@
         <el-avatar :size="100" :src="appStore.avatarDefault" />
         <div class="personal-user-info">
           <div class="personal-username">
-            <div class="">用户名</div>
+            <div class="">{{ userInfo.nickName }}</div>
             <img src="/src/assets/imgs/my/vip@2x.png" alt="">
           </div>
-          <div class="personal-user-phone mt4">{{ $t('personalCenter.phoneNumber') }}：13212345678</div>
+          <div class="personal-user-phone mt4">{{ $t('personalCenter.phoneNumber') }}：{{ userInfo.userPhone }}</div>
           <div class="gap10 mt4">
             <el-button type="primary" size="large" plain>技能标签</el-button>
           </div>
@@ -37,7 +37,7 @@
           <img src="/src/assets/imgs/my/bianji@2x.png" alt="">
           <div class="">{{ $t('personalCenter.editProfile') }}</div>
         </div>
-        <div class="personal-head-right-li">
+        <div @click="router.push({path:'/member'})" class="personal-head-right-li">
           <img src="/src/assets/imgs/my/huiyuan@2x.png" alt="">
           <div class="">{{ $t('personalCenter.openMembership') }}</div>
         </div>
@@ -70,7 +70,7 @@
 <script setup lang="ts">
 import { useAppStore } from '@/pinia/appStore'
 
-import { ref, onMounted } from 'vue';
+import { ref, onMounted,computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router'
 
 import { getUserInfo } from '@/api/auth.js'
@@ -123,28 +123,72 @@ const navList = ref([
     iconActive: '/src/assets/imgs/my/icon7a@2x.png'
   }
 ])
-const navIndex = ref(0);
+const navIndex = computed(()=>{
+  switch (route.name) {
+    case 'Wallet':
+      return 0
+      break;
+    case 'MemberDetails':
+      return 1
+      break;
+    case 'Wallet':
+      return 0
+      break;
+    case 'Collection':
+      return 2
+      break;
+    case 'Demand':
+      return 3
+      break;
+    case 'Orders':
+      return 4
+      break;
+     case 'Invoice':
+      return 5
+      break;
+    case 'Workflow':
+      return 6
+      break;
+    default:
+      break;
+  }
+  return null;
+})
+
+const userInfo = ref({})//用户信息
+
 const toPath = (item: any, index: number) => {
-  navIndex.value = index;
   if (item.path) {
     router.push(item.path);
   }
 };
 // 签到
-const signIn = async () =>{
-  let res = await checkIn({actionType:1});
+const signIn = async () => {
+  let res = await checkIn({ actionType: 1 });
   console.log(res);
 }
 // 获取用户信息
 const getInfo = async () => {
   let res = await getUserInfo();
-  console.log(res);
+  userInfo.value = res.user;
+  console.log(res.user);
 }
 onMounted(() => {
   getInfo()
 })
 </script>
 <style lang="scss" scoped>
+div {
+  -webkit-user-select: none;
+  /* Safari, Chrome */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* IE 10+ */
+  user-select: none;
+  /* 标准语法 */
+}
+
 .personal-head {
   border-radius: 16px;
   padding: 24px 16px;