新增页面

src/App.vue

@@ -113,7 +113,7 @@ const activeIndex = computed(() => {
 });
 // 去个人中心
 const toPersonal = () => {
-  router.push('/personal-center')
+  router.push('/personal-center/wallet')
 };
 
 // 处理注销

src/api/my.js

@@ -0,0 +1,9 @@
+import request from './request.js'
+// 签到
+export function checkIn(data = {}) {
+  return request.post('/in',data)
+}
+// 收藏列表
+export function collectList(data = {}) {
+  return request.get('/collect/list',data)
+}

src/locales/en.js

@@ -17,6 +17,7 @@ export default {
     hour: 'Hour',
     lijixuexi: 'Learn Now',
     renkanguo: 'People Have Seen',
+    renbaoming: 'People Registered',
     qitakechengtuijian: 'Other Course Recommendations',
     kechengjieshao: 'Course Description',
     kechengmulu: 'Course Directory',
@@ -32,6 +33,23 @@ export default {
     payWay: 'Pay Way',
     orderInfo: 'Order Info',
     payNow: 'Pay Now',
+    signUpDeadline: 'Sign Up Deadline',
+    publish: 'Publish',
+    actualAmount: 'Actual Amount',
+    goPay: 'Go Pay',
+    cancelOrder: 'Cancel Order',
+    applyInvoice: 'Apply Invoice',
+    applyRefund: 'Apply Refund',
+    reorder: 'Reorder',
+    orderTime: 'Order Time',
+    collected: 'Collected',
+    cancelCollect: 'Cancel Collect',
+    orderCreateTime: 'Order Create Time',
+    viewDetails: 'View Details',
+    publishWorkflow: 'Publish Workflow',
+    agree: 'Agree',
+    reject: 'Reject',
+    viewHomepage: 'View Homepage'
   },
   login: {
     smsLogin: 'SMS Login',
@@ -68,6 +86,40 @@ export default {
     publishSuccess: 'Publish Success',
   },
   personalCenter:{
-    personalCenter: 'Personal Center'
+    personalCenter: 'Personal Center',
+    phoneNumber: 'Phone Number',
+    follow: 'Follow',
+    editProfile: 'Edit Profile',
+    openMembership: 'Open Membership',
+    checkIn: 'Check In',
+    myWallet: 'My Wallet',
+    membershipInfo: 'Membership Info',
+    myCollection: 'My Collection',
+    myDemand: 'My Demand',
+    myOrders: 'My Orders',
+    myInvoice: 'My Invoice',
+    myWorkflow: 'My Workflow',
+    incomeDetails: 'Income Details',
+    usageRecord: 'Usage Record',
+    openMembershipDetails: 'Open Membership Details',
+    publishDemandRecord: 'Publish Demand Record',
+    myDemandRecord: 'My Demand Record',
+    viewSignUpRecord: 'View Sign Up Record',
+    endActivity: 'End Activity',
+    cancelSignUp: 'Cancel Sign Up',
+    allOrders: 'All Orders',
+    daifukuan: 'Pending Payment',
+    yiwancheng: 'Completed',
+    yiquxiao: 'Cancelled',
+    dingdanhao: 'Order Number',
+    goumaishichang: 'Purchase Duration',
+    youxiaoqi: 'Validity Period',
+    zhifushijian: 'Payment Time',
+    gongzuoliuliang: 'Workflow Quantity',
+    baomiliang: 'Registration Record',
+    ren: 'People',
+    yue: 'Balance',
+    shenqingtixian: 'Apply for Withdrawal',
+    zhuanghuanmibi: 'Convert Mibit'
   }
 }

src/locales/zh-CN.js

@@ -20,6 +20,7 @@ export default {
     hour: '小时',
     lijixuexi: '立即学习',
     renkanguo: '人看过',
+    renbaoming: '人报名',
     qitakechengtuijian: '其他课程推荐',
     kechengjieshao: '课程介绍',
     kechengmulu: '课程目录',
@@ -35,6 +36,23 @@ export default {
     payWay: '支付方式',
     orderInfo: '订单信息',
     payNow: '立即支付',
+    signUpDeadline: '报名截止时间',
+    publish: '发布',
+    actualAmount: '实际金额',
+    goPay: '去支付',
+    cancelOrder: '取消订单',
+    applyInvoice: '申请开票',
+    applyRefund: '申请退款',
+    reorder: '重新下单',
+    orderTime: '下单时间',
+    collected: '已收藏',
+    cancelCollect: '取消收藏',
+    orderCreateTime: '订单创建时间',
+    viewDetails: '查看详情',
+    publishWorkflow: '发布工作流',
+    agree: '同意',
+    reject: '拒绝',
+    viewHomepage: '查看主页'
   },
   login: {
     smsLogin: '短信登录',
@@ -70,7 +88,41 @@ export default {
     publishSuccess: '发布成功',
   },
   personalCenter:{
-    personalCenter: '个人中心'
+    personalCenter: '个人中心',
+    phoneNumber: '手机号',
+    follow: '关注',
+    editProfile: '编辑资料',
+    openMembership: '开通会员',
+    checkIn: '签到',
+    myWallet: '我的钱包',
+    membershipInfo: '会员信息',
+    myCollection: '我的收藏',
+    myDemand: '我的需求',
+    myOrders: '我的订单',
+    myInvoice: '我的发票',
+    myWorkflow: '我的工作流',
+    incomeDetails: '收益明细',
+    usageRecord: '使用记录',
+    openMembershipDetails: '开通会员明细',
+    publishDemandRecord: '发布需求记录',
+    myDemandRecord: '我的报名记录',
+    viewSignUpRecord: '查看报名记录',
+    endActivity: '结束活动',
+    cancelSignUp: '取消报名',
+    allOrders: '全部订单',
+    daifukuan: '待付款',
+    yiwancheng: '已完成',
+    yiquxiao: '已取消',
+    dingdanhao: '订单号',
+    goumaishichang: '购买时长',
+    youxiaoqi: '有效期',
+    zhifushijian: '支付时间',
+    gongzuoliuliang: '工作流数量',
+    baomiliang: '报名记录',
+    ren: '人',
+    yue: '余额',
+    shenqingtixian: '申请提现',
+    zhuanghuanmibi: '转换米币'
   }
 
 }

src/pages/LearningSystem/LearningSystemDetail.vue

@@ -114,7 +114,7 @@
   };
   const goDetail = (item) => {
     //如果未支付，跳转到支付页面
-    if(true){
+    if(false){
       router.push({
         path: `/order-confirm`,
         query: {

src/pages/Member.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="member">
+
+  </div>
+</template>
+<script setup ></script>
+<style lang="scss">
+  PAGE {
+    color: transparent;
+  }
+</style>

src/pages/Personal/Collection.vue

@@ -2,11 +2,12 @@
   <div class="collection">
     <div class="gap10 title">
       <div class="line_vertical"></div>
-      <div class="">我的收藏</div>
+      <div class="">{{ $t('personalCenter.myCollection') }}</div>
     </div>
     <ul class="collection-list">
       <li class="flex-center-between" v-for="(item, index) in 5" :key="index">
-        <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="collection-list-main">
           <div class="collection-list-main-left">
             <div class="titles">UI界面设计教程</div>
@@ -17,16 +18,38 @@
           </div>
           <div class="btn flex-center">
             <img src="/src/assets/imgs/my/star-a@2x.png" alt="">
-            <div class="">已收藏</div>
+            <div class="">{{ index == 0 ? $t('common.collected') : $t('common.cancelCollect') }}</div>
           </div>
         </div>
       </li>
     </ul>
-    <Pagination :total="20" :page-size="10" :current-page="1" @page-change="handlePageChange" />
+    <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum" @page-change="handlePageChange" />
   </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) =>{
+  console.log(page)
+}
+onMounted(() => {
+  getList()
+})
 </script>
 <style scoped lang="scss">
 .collection {
@@ -86,19 +109,23 @@ import Pagination from '@/components/Pagination.vue'
         }
 
         .btn {
-          width: 106px;
+          width: 120px;
           height: 32px;
           color: #FFFFFF;
           font-size: 14px;
           cursor: pointer;
-          background: linear-gradient( 270deg, #0055FE 0%, #C832FA 100%);
+          background: linear-gradient(270deg, #0055FE 0%, #C832FA 100%);
           border-radius: 4px;
+          &:hover {
+            opacity: 0.7;
+          }
           img {
             width: 14px;
             height: 14px;
             margin-right: 4px;
           }
         }
+
         .active {
           background: #FFFFFF;
           color: #2D71FF;

src/pages/Personal/Demand.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demand">
     <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
+      <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">
             <div class="flex-center-between">
@@ -16,11 +16,11 @@
               <ul class="flex-align-center list">
                 <div class="li">
                   <img src="/src/assets/imgs/yuangong.png" alt="">
-                  <div class="">15人报名</div>
+                  <div class="">15{{ $t('common.renbaoming') }}</div>
                 </div>
                 <div class="li">
                   <img src="/src/assets/imgs/rili.png" alt="">
-                  <div class="">报名截止时间：2024-11-19 17:00</div>
+                  <div class="">{{ $t('common.signUpDeadline') }}：2024-11-19 17:00</div>
                 </div>
               </ul>
             </div>
@@ -29,31 +29,31 @@
               <div class="info-left">
                 <el-avatar :size="30" :src="appStore.avatarDefault" />
                 <div class="name">花花</div>
-                <div class="date">2024-11-18 发布</div>
+                <div class="date">2024-11-18 {{ $t('common.publish') }}</div>
               </div>
               <div class="info-right flex-align-center">
                 <template v-if="activeName == 'first'">
-                  <div class="btn">
+                  <div class="btn" @click="dialogVisible = true">
                     <img src="/src/assets/imgs/my/jilu@2x.png" alt="">
-                    <div>查看报名记录</div>
+                    <div>{{ $t('personalCenter.viewSignUpRecord') }}</div>
                   </div>
                   <div class="btn">
                     <img src="/src/assets/imgs/my/bianji@2x.png" alt="">
-                    <div>编辑</div>
+                    <div>{{ $t('common.edit') }}</div>
                   </div>
                   <div class="btn">
                     <img src="/src/assets/imgs/my/guanbi@2x.png" alt="">
-                    <div class="red">结束活动</div>
+                    <div class="red">{{ $t('personalCenter.endActivity') }}</div>
                   </div>
                   <div class="btn">
                     <img src="/src/assets/imgs/my/shanchu@2x.png" alt="">
-                    <div class="red">删除</div>
+                    <div class="red">{{ $t('common.delete') }}</div>
                   </div>
                 </template>
 
                 <div class="btn" v-else>
                   <img src="/src/assets/imgs/my/quxiao@2x.png" alt="">
-                  <div class="red">取消报名</div>
+                  <div class="red">{{ $t('personalCenter.cancelSignUp') }}</div>
                 </div>
 
               </div>
@@ -63,6 +63,75 @@
       </el-tab-pane>
     </el-tabs>
     <Pagination :total="20" :page-size="10" :current-page="1" @page-change="handlePageChange" />
+
+    <el-dialog v-model="dialogVisible" :title="$t('personalCenter.viewSignUpRecord')" width="1138"
+      :before-close="handleClose">
+      <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>
+            <div class="price">￥2000.00-3000.00</div>
+          </div>
+          <div class="flex-align-center content">
+            <div class="flex-align-center">
+              <el-button type="primary" size="small" plain>一级分类名称</el-button>
+              <el-button type="primary" size="small" plain>二级分类名称</el-button>
+            </div>
+            <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>
+              <div class="li">
+                <img src="/src/assets/imgs/rili.png" alt="">
+                <div class="">{{ $t('common.signUpDeadline') }}：2024-11-19 17:00</div>
+              </div>
+            </ul>
+          </div>
+          <div class="desc">
+            此n8n工作流是一款强大的AI驱动的潜在客户富集与通知系统，专为市场营销和销售团队设计。它通过智能表单收集线索，利用OpenAI深度分析并丰富客户数据，自动识别关键信息。系统能根据预设条件，通过多种渠道即时发送个性化通知，显著提升线索质量、转化率及团队协作效率，是优化客户关系管理的关键工具。
+          </div>
+          <div class="time">2024-11-18 {{ $t('common.publish') }}</div>
+        </div>
+        <div class="detail-txt">{{ $t('personalCenter.baomiliang') }}（5 {{ $t('personalCenter.ren') }}）</div>
+        <ul class="detail-list">
+          <li v-for="(item, index) in 5" :key="index">
+            <div class="flex-align-center detail-list-left">
+              <el-avatar :size="20" :src="''" />
+              <div class="">花花</div>
+              <div class="">13176012742</div>
+            </div>
+            <div class="detail-list-number">{{ $t('personalCenter.gongzuoliuliang') }}：15</div>
+            <div class="flex-align-center detail-list-right">
+              <div class="lex-align-center btn green">
+                <img src="/src/assets/imgs/my/dui@2x.png" alt="">
+                <div class="">{{ $t('common.agree') }}</div>
+              </div>
+              <div class="lex-align-center btn red">
+                <img src="/src/assets/imgs/my/quxiao@2x.png" alt="">
+                <div class="">{{ $t('common.reject') }}</div>
+              </div>
+              <div class="lex-align-center btn blue">
+                <img src="/src/assets/imgs/my/jilu@2x.png" alt="">
+                <div class="">{{ $t('common.viewHomepage') }}</div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <template #footer>
+        <div class="dialog-footer flex-center">
+          <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+          <el-button type="primary" class="gradient" @click="dialogVisible = false">
+            {{ $t('common.confirm') }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
   </div>
 </template>
 <script lang="ts" setup>
@@ -73,10 +142,12 @@ import Pagination from '@/components/Pagination.vue'
 const appStore = useAppStore();
 const activeName = ref('first')
 const tabs = ref([
-  { label: '发布需求记录', name: 'first' },
-  { label: '我的报名记录', name: 'second' }
+  { label: 'personalCenter.publishDemandRecord', name: 'first' },
+  { label: 'personalCenter.myDemandRecord', name: 'second' }
 ])
 
+const dialogVisible = ref(false)
+
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab, event)
 }
@@ -106,28 +177,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
         color: #333333;
       }
 
-      .content {
-        margin-top: 8px;
-
-        .list {
-          .li {
-            display: flex;
-            align-items: center;
-
-            img {
-              width: 16px;
-              height: 16px;
-              margin-right: 4px;
-            }
 
-            margin-left: 8px;
-
-            div {
-              font-size: 12px;
-            }
-          }
-        }
-      }
 
       .description {
         font-size: 16px;
@@ -193,4 +243,161 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
     }
   }
 }
+
+.content {
+  margin-top: 8px;
+
+  .list {
+    .li {
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 16px;
+        height: 16px;
+        margin-right: 4px;
+      }
+
+      margin-left: 8px;
+
+      div {
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.detail {
+  padding: 16px;
+  border-top: 1px solid #EBEEF5;
+
+  .detail-top {
+    padding: 16px;
+    background: #F5F7FA;
+    border-radius: 16px;
+    border: 1px solid #FFFFFF;
+
+    .tag {
+      padding: 0 12px;
+      line-height: 30px;
+      font-size: 14px;
+      color: #FFFFFF;
+      background: #2D71FF;
+      border-radius: 4px;
+    }
+
+    .name {
+      font-size: 18px;
+      font-weight: bold;
+      color: #333333;
+      margin-left: 8px;
+    }
+
+    .price {
+      color: #FD5F3C;
+      font-size: 24px;
+    }
+
+    .desc {
+      margin: 8px 0;
+      line-height: 24px;
+      font-size: 16px;
+      color: #666666;
+    }
+
+    .time {
+      font-size: 14px;
+      color: #666666;
+    }
+  }
+
+  .detail-txt {
+    line-height: 58px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .detail-list {
+    li {
+      display: flex;
+      padding: 0 16px;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+      height: 64px;
+      background: #F5F7FA;
+      border-radius: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .detail-list-left {
+        div {
+          color: #666666;
+          font-size: 14px;
+
+          &:nth-child(2) {
+            margin: 0 8px;
+            font-size: 16px;
+            color: #333333;
+          }
+        }
+      }
+
+      .detail-list-number {
+        font-size: 14px;
+        color: #333333;
+      }
+
+      .detail-list-right {
+        .btn {
+          display: flex;
+          margin-left: 8px;
+          align-items: center;
+          cursor: pointer;
+          padding: 0px 16px;
+          height: 32px;
+          border-radius: 4px;
+          font-size: 14px;
+          &:hover {
+            opacity: 0.7;
+          }
+
+          img {
+            width: 14px;
+            height: 14px;
+            margin-right: 4px;
+          }
+        }
+
+        .green {
+          background: #E9F7EF;
+
+          div {
+            color: #1FB362;
+          }
+        }
+
+        .red {
+
+          background: #FCEBEB;
+
+          div {
+            color: #E43434;
+          }
+        }
+
+        .blue {
+
+          background: #EAF0FF;
+
+          div {
+            color: #2D71FF;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/pages/Personal/Invoice.vue

@@ -2,7 +2,7 @@
   <div class="invoice">
     <div class="gap10 invoice-title">
       <div class="line_vertical"></div>
-      <div class="">我的发票</div>
+      <div class="">{{$t('personalCenter.myInvoice')}}</div>
     </div>
     <ul class="invoice-list">
       <li v-for="(item, index) in 5" :key="index">
@@ -11,18 +11,18 @@
           <div class="">￥5000.00</div>
         </div>
         <div class="flex-center-between invoice-list-c">
-          <div class="">订单编号：</div>
+          <div class="">{{ $t('personalCenter.orderNumber') }}：</div>
           <div class="">20251024001</div>
         </div>
         <div class="flex-center-between invoice-list-time">
-          <div class="">订单创建时间：</div>
+          <div class="">{{ $t('common.orderCreateTime') }}：</div>
           <div class="">2025-10-24 13:00</div>
         </div>
         <div class="flex-center-between invoice-list-b">
           <div class=""></div>
           <div class="">
             <img src="/src/assets/imgs/my/jilu@2x.png" alt="">
-           <span>查看详情</span>
+           <span>{{ $t('common.viewDetails') }}</span>
           </div>
         </div>
       </li>

src/pages/Personal/MemberDetails.vue

@@ -2,17 +2,17 @@
   <div class="member-details">
     <div class="gap10 title">
       <div class="line_vertical"></div>
-      <div class="">开通会员明细</div>
+      <div class="">{{$t('personalCenter.openMembershipDetails')}}</div>
     </div>
     <ul class="member-details-list">
       <li v-for="(item, index) in 5" :key="index">
         <div class="member-details-list-t flex-center-between">
-          <div class="">购买时长：1个月</div>
+          <div class="">{{ $t('personalCenter.goumaishichang') }}：1个月</div>
           <div class="">￥99.99</div>
         </div>
         <div class="member-details-list-b flex-center-between">
-          <div class="">有效期：2026-01-01至2026-02-01</div>
-          <div class="">支付时间：2026-01-01 16:11:11</div>
+          <div class="">{{ $t('personalCenter.youxiaoqi') }}：2026-01-01至2026-02-01</div>
+          <div class="">{{ $t('personalCenter.zhifushijian') }}：2026-01-01 16:11:11</div>
         </div>
       </li>
     </ul>

src/pages/Personal/Orders.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="order">
     <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
+      <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">
             <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 ? '待付款' : index == 1 ? '已完成' : '已取消' }}</el-tag>
-                <div class="">订单号: 3056207306143088789</div>
+                <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">下单时间: 2025-11-11 12:00:00</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="">
@@ -23,37 +23,37 @@
                 </div>
                 <div class="mi_price">
                   <div class="">29900</div>
-                  <div class="">米币</div>
+                  <div class="">{{ $t('common.mibi') }}</div>
                 </div>
                 <div class="mi_price price">
                   <div class="">￥239.20</div>
-                  <div class="">实际金额</div>
+                  <div class="">{{ $t('common.actualAmount') }}</div>
                 </div>
                 <div class="">
                   <template v-if="index == 0">
                     <div class="gradient btn">
                       <img src="/src/assets/imgs/my/order1@2x.png" alt="">
-                      <div class="">去支付</div>
+                      <div class="">{{ $t('common.goPay') }}</div>
                     </div>
                     <div class="blue btn mt8">
                       <img src="/src/assets/imgs/my/order2@2x.png" alt="">
-                      <div class="">取消订单</div>
+                      <div class="">{{ $t('common.cancelOrder') }}</div>
                     </div>
                   </template>
                   <template v-else-if="index == 1">
                     <div class="blue btn">
                       <img src="/src/assets/imgs/my/order3@2x.png" alt="">
-                      <div class="">申请开票</div>
+                      <div class="">{{ $t('common.applyInvoice') }}</div>
                     </div>
                      <div class="red btn mt8">
                       <img src="/src/assets/imgs/my/order4@2x.png" alt="">
-                      <div class="">申请退款</div>
+                      <div class="">{{ $t('common.applyRefund') }}</div>
                     </div>
                   </template>
                   <template v-else-if="index == 2">
                     <div class="btn gradient">
                       <img src="/src/assets/imgs/my/order5@2x.png" alt="">
-                      <div class="">重新下单</div>
+                      <div class="">{{ $t('common.reorder') }}</div>
                     </div>
                   </template>
                 </div>
@@ -73,10 +73,10 @@ import type { TabsPaneContext } from 'element-plus'
 import Pagination from '@/components/Pagination.vue'
 
 const tabs = ref([
-  { label: '全部订单', name: 'first' },
-  { label: '待付款', name: 'second' },
-  { label: '已完成', name: 'third' },
-  { label: '已取消', name: 'fourth' },
+  { label: 'personalCenter.allOrders', name: 'first' },
+  { label: 'personalCenter.daifukuan', name: 'second' },
+  { label: 'personalCenter.yiwancheng', name: 'third' },
+  { label: 'personalCenter.yiquxiao', name: 'fourth' },
 ])
 
 const activeName = ref('first')

src/pages/Personal/Wallet.vue

@@ -1,7 +1,25 @@
 <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">
+        <div class="wallet-list-li-left">
+          <div class="">{{ index == 0 ? $t('common.mibi') : $t('common.baomibi') }}{{ $t('personalCenter.yue') }}</div>
+          <div class="">5000</div>
+        </div>
+        <div class="wallet-list-li-right flex-align-center">
+          <div class="flex-align-center btn">
+            <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">
+            <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="收益明细" name="first">
+      <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">
@@ -12,7 +30,7 @@
           </li>
         </ul>
       </el-tab-pane>
-      <el-tab-pane label="使用记录" name="second">
+      <el-tab-pane :label="$t('personalCenter.usageRecord')" name="second">
         <ul class="wallet-page-list">
           <li v-for="(item, index) in 5" :key="index">
             <div class="title">
@@ -24,12 +42,7 @@
         </ul>
       </el-tab-pane>
     </el-tabs>
-    <Pagination 
-        :total="20"
-        :page-size="10"
-        :current-page="1"
-        @page-change="handlePageChange"
-      />
+    <Pagination :total="20" :page-size="10" :current-page="1" @page-change="handlePageChange" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -49,37 +62,91 @@ const handlePageChange = (newPage: number) => {
 }
 </script>
 <style scoped lang="scss">
-  .wallet-page {
-    padding-bottom: 16px;
-  }
-  .wallet-page-list {
+.wallet-page {
+
+  padding-bottom: 16px;
+
+  .wallet-list {
+    gap: 16px;
+    padding: 16px;
+
     li {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+      flex: 1;
       padding: 16px;
       border-radius: 16px;
-      background: #F5F7FA;
-      margin-bottom: 16px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-      .title {
+
+      .wallet-list-li-left {
+
         div {
-          font-size: 16px;
+          color: #FFFFFF;
+          font-size: 14px;
           line-height: 1;
+
           &:last-child {
             margin-top: 8px;
-            color: #666666;
-            font-size: 14px;
+            font-size: 32px;
+            font-weight: bold;
+          }
+        }
+      }
+
+      .wallet-list-li-right {
+        .btn {
+          cursor: pointer;
+          margin-left: 8px;
+          color: #2D71FF;
+          font-size: 14px;
+          padding: 0 20px;
+          height: 40px;
+          background: #FFFFFF;
+          border-radius: 10px;
+
+          img {
+            width: 16px;
+            height: 16px;
+            margin-right: 4px;
+          }
+          &:hover{
+            opacity: 0.7;
           }
         }
       }
-      .price {
+    }
+  }
+}
+
+.wallet-page-list {
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    border-radius: 16px;
+    background: #F5F7FA;
+    margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .title {
+      div {
         font-size: 16px;
-        font-weight: bold;
-        color: #F52929;
+        line-height: 1;
+
+        &:last-child {
+          margin-top: 8px;
+          color: #666666;
+          font-size: 14px;
+        }
       }
     }
+
+    .price {
+      font-size: 16px;
+      font-weight: bold;
+      color: #F52929;
+    }
   }
+}
 </style>

src/pages/Personal/Workflow.vue

@@ -2,15 +2,43 @@
   <div class="workflow">
     <div class="gradient workflow-btn flex-center">
       <img src="/src/assets/imgs/add.png" alt="">
-      <div class="">发布工作流</div>
+      <div class="">{{ $t('common.publishWorkflow') }}</div>
     </div>
     <ul class="workflow-list">
-      <li>
-        <img class="image" src="" alt="">
-        <div class="workflow-list-con">
-          <div class="workflow-list-time flex-align-center">
-            <img src="/src/assets/imgs/rili.png" alt="">
-            <div class="">2023-10-15</div>
+      <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="">
+        <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>
+            <div class="title">Linux操作集锦系列之十五——如何破解pdf、doc、word、png、MP3、mp4、表格...</div>
+            <div class="desc">- 本文介绍两款开源的密码破解工具John the Ripp...</div>
+          </div>
+          <div class="flex_1">
+            <div class="info flex-center-between">
+              <div class="info-left flex-align-center">
+                <el-avatar :size="30" :src="''" />
+                <div class="">花花</div>
+              </div>
+              <div class="info-right flex-align-center">
+                <img src="/src/assets/imgs/yun.png" alt="">
+                <div class="">n8n平台</div>
+              </div>
+            </div>
+            <div class="footer flex-center-between">
+              <div 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">
+                <img src="/src/assets/imgs/my/del@2x.png" alt="">
+                <div class="">{{ $t('common.delete') }}</div>
+              </div>
+            </div>
           </div>
         </div>
       </li>
@@ -19,22 +47,161 @@
   </div>
 </template>
 <script setup lang="ts">
- import Pagination from '@/components/Pagination.vue'
+import Pagination from '@/components/Pagination.vue'
 </script>
 <style scoped lang="scss">
 .workflow {
-  padding:16px 0 20px;
+  padding: 16px 0 20px;
+
   .workflow-btn {
     height: 50px;
     color: #FFFFFF;
     cursor: pointer;
     border-radius: 10px;
     font-size: 18px;
+
+    &:hover {
+      opacity: 0.9;
+    }
+
     img {
       width: 30px;
       height: 30px;
       margin-right: 4px;
     }
   }
+
+  .workflow-list {
+    gap: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 16px;
+
+    li {
+      width: 380px;
+      cursor: pointer;
+      position: relative;
+      background: #F5F7FA;
+      border-radius: 16px;
+      overflow: hidden;
+      border: 1px solid #FFFFFF;
+
+      .image {
+        width: 100%;
+        height: 204px;
+        display: block;
+        object-fit: cover;
+        border-radius: 16px 16px 0 0;
+      }
+
+      .kong {
+        height: 166px;
+      }
+
+      .workflow-list-con {
+        height: 224px;
+        padding: 16px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        position: absolute;
+        transform: translateY(58px);
+        transition: transform 0.3s ease;
+
+        background: #F5F7FA;
+        border-radius: 0px 0px 16px 16px;
+
+        .top {
+          line-height: 1;
+          height: 120px;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .workflow-list-time {
+          font-size: 14px;
+
+          img {
+            width: 16px;
+            height: 16px;
+            margin-right: 8px;
+          }
+        }
+
+        .title {
+          margin: 8px 0;
+          font-size: 18px;
+          font-weight: bold;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          line-height: 26px;
+        }
+
+        .desc {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .info {
+          font-size: 14px;
+
+          .info-left {
+            div {
+              margin-left: 8px;
+            }
+          }
+
+          .info-right {
+            padding: 0 4px;
+            height: 22px;
+            background: #E9F3FF;
+            border-radius: 4px;
+
+            img {
+              width: 16px;
+              height: 16px;
+              margin-right: 8px;
+            }
+          }
+        }
+
+        .footer {
+          margin-top: 8px;
+
+          .btn {
+            width: 166px;
+            height: 40px;
+            font-size: 14px;
+            color: #2D71FF;
+            background: #FFFFFF;
+            border-radius: 10px;
+
+            img {
+              width: 16px;
+              height: 16px;
+              margin-right: 4px;
+            }
+
+            &:last-child {
+              color: #E43434;
+            }
+            &:hover {
+              opacity: 0.7;
+            }
+          }
+        }
+      }
+
+      &:hover {
+        .workflow-list-con {
+          transform: translateY(0);
+        }
+      }
+    }
+  }
 }
 </style>

src/pages/PersonalCenter.vue

@@ -9,24 +9,24 @@
             <div class="">用户名</div>
             <img src="/src/assets/imgs/my/vip@2x.png" alt="">
           </div>
-          <div class="personal-user-phone mt4">手机号：13212345678</div>
+          <div class="personal-user-phone mt4">{{ $t('personalCenter.phoneNumber') }}：13212345678</div>
           <div class="gap10 mt4">
             <el-button type="primary" size="large" plain>技能标签</el-button>
           </div>
           <div class="personal-user-list">
             <div class="personal-user-li">
               <span>0</span>
-              <span>米币</span>
+              <span>{{ $t('common.mibi') }}</span>
             </div>
             <div class="personal-user-line"></div>
             <div class="personal-user-li">
               <span>0</span>
-              <span>暴米粒</span>
+              <span>{{ $t('common.baomibi') }}</span>
             </div>
             <div class="personal-user-line"></div>
             <div class="personal-user-li">
               <span>0</span>
-              <span>关注</span>
+              <span>{{ $t('personalCenter.follow') }}</span>
             </div>
           </div>
         </div>
@@ -35,15 +35,15 @@
       <div class="personal-head-right">
         <div class="personal-head-right-li">
           <img src="/src/assets/imgs/my/bianji@2x.png" alt="">
-          <div class="">编辑资料</div>
+          <div class="">{{ $t('personalCenter.editProfile') }}</div>
         </div>
         <div class="personal-head-right-li">
           <img src="/src/assets/imgs/my/huiyuan@2x.png" alt="">
-          <div class="">开通会员</div>
+          <div class="">{{ $t('personalCenter.openMembership') }}</div>
         </div>
-        <div class="personal-head-right-li gradient">
+        <div @click="signIn" class="personal-head-right-li gradient">
           <img src="/src/assets/imgs/my/qiandao@2x.png" alt="">
-          <div class="">签到</div>
+          <div class="">{{ $t('personalCenter.checkIn') }}</div>
         </div>
       </div>
     </div>
@@ -54,7 +54,7 @@
             v-for="(item, index) in navList" :key="index">
             <img v-if="index == navIndex" :src="item.iconActive" alt="">
             <img v-else :src="item.icon" alt="">
-            <div class="">{{ item.name }}</div>
+            <div class="">{{ $t(item.name) }}</div>
           </div>
         </div>
       </div>
@@ -70,50 +70,54 @@
 <script setup lang="ts">
 import { useAppStore } from '@/pinia/appStore'
 
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router'
+
+import { getUserInfo } from '@/api/auth.js'
+import { checkIn } from '@/api/my.js'
+
 const appStore = useAppStore();
 const route = useRoute()
 const router = useRouter()
 const navList = ref([
   {
-    name: '我的钱包',
+    name: 'personalCenter.myWallet',
     path: '/personal-center/wallet',
     icon: '/src/assets/imgs/my/icon1@2x.png',
     iconActive: '/src/assets/imgs/my/icon1a@2x.png'
   },
   {
-    name: '会员信息',
+    name: 'personalCenter.membershipInfo',
     path: '/personal-center/member-details',
     icon: '/src/assets/imgs/my/icon2@2x.png',
     iconActive: '/src/assets/imgs/my/icon2a@2x.png'
   },
   {
-    name: '我的收藏',
+    name: 'personalCenter.myCollection',
     path: '/personal-center/collection',
     icon: '/src/assets/imgs/my/icon3@2x.png',
     iconActive: '/src/assets/imgs/my/icon3a@2x.png'
   },
   {
-    name: '我的需求',
+    name: 'personalCenter.myDemand',
     path: '/personal-center/demand',
     icon: '/src/assets/imgs/my/icon4@2x.png',
     iconActive: '/src/assets/imgs/my/icon4a@2x.png'
   },
   {
-    name: '我的订单',
+    name: 'personalCenter.myOrders',
     path: '/personal-center/orders',
     icon: '/src/assets/imgs/my/icon5@2x.png',
     iconActive: '/src/assets/imgs/my/icon5a@2x.png'
   },
   {
-    name: '我的发票',
+    name: 'personalCenter.myInvoice',
     path: '/personal-center/invoice',
     icon: '/src/assets/imgs/my/icon6@2x.png',
     iconActive: '/src/assets/imgs/my/icon6a@2x.png'
   },
   {
-    name: '我的工作流',
+    name: 'personalCenter.myWorkflow',
     path: '/personal-center/workflow',
     icon: '/src/assets/imgs/my/icon7@2x.png',
     iconActive: '/src/assets/imgs/my/icon7a@2x.png'
@@ -126,6 +130,19 @@ const toPath = (item: any, index: number) => {
     router.push(item.path);
   }
 };
+// 签到
+const signIn = async () =>{
+  let res = await checkIn({actionType:1});
+  console.log(res);
+}
+// 获取用户信息
+const getInfo = async () => {
+  let res = await getUserInfo();
+  console.log(res);
+}
+onMounted(() => {
+  getInfo()
+})
 </script>
 <style lang="scss" scoped>
 .personal-head {
@@ -220,6 +237,10 @@ const toPath = (item: any, index: number) => {
         color: #2D71FF;
         font-size: 14px;
       }
+
+      &:hover {
+        opacity: 0.7;
+      }
     }
   }
 }

src/router/index.js

@@ -163,7 +163,11 @@ const routes = [
       }
     ]
   },
-
+  {
+    path:'/member',
+    name:'Member',
+    component: () => import('@/pages/Member.vue')
+  },