接口对接

.env.development

@@ -1,6 +1,6 @@
 # 乔功
 VITE_API_BASE_URL=http://192.168.100.134:8080/api
 # 高运甲
-VITE_API_BASE_URL=http://192.168.100.89:8080/api
+# VITE_API_BASE_URL=http://192.168.100.89:8080/api
 
 

src/App.vue

@@ -144,6 +144,9 @@ provide('openLoginDialog', openLoginDialog);
     background: url('@/assets/imgs/bg.png') no-repeat center center fixed;
     background-size: 100% 100%;
   }
+  &.vipHomePage {
+     background: #FBF4F0;
+  }
 }
 .isHomePage{
   .el-header {
@@ -152,6 +155,7 @@ provide('openLoginDialog', openLoginDialog);
   }
 }
 .vipHomePage {
+ 
   .el-header {
     background: rgba(255,255,255,0.5);
   }

src/api/my.js

@@ -17,6 +17,12 @@ export function vipList(data = {}) {
   return request.get('/type/list',data)
 }
 
+
+// 会员权限
+export function privilege(data = {}) {
+  return request.get(`/type/privilege/${data}`)
+}
+
 // 查询我的报名记录列表
 export function getWorkflowApplyByUserId(data = {}) {
   return request.get('/apply/getWorkflowApplyByUserId',data)
@@ -70,4 +76,9 @@ export function userPublishList(data = {}) {
 // 删除登录用户发布的工作流
 export function delectPublish(data = {}) {
   return request.del(`/publish/${data}`)
-}
+}
+
+// 余额记录
+export function recordList(data = {}) {
+  return request.get('/record/list',data)
+}

src/locales/en.js

@@ -99,6 +99,8 @@ export default {
     coverImage:"Cover Image",
     pleaseInputRightPhoneNumber:"Please input right phone number",
     pleaseInputRightEmail:"Please input right email",
+    placeholderInput:"Please input",
+    modify:"Modify",
   },
   login: {
     smsLogin: 'SMS Login',
@@ -112,6 +114,7 @@ export default {
     placeholderNewPassword: 'Please input new password',
     placeholderConfirmPassword: 'Please confirm new password',
     forgetPassword: 'Forget Password',
+    addTags: 'New Tag',
   },
   // 添加路由标题翻译
   route: {
@@ -228,5 +231,7 @@ export default {
     zhuanghuanmibi: 'Convert Mibit',
     zhuanhuanbaomibi:'Convert Boom Mibit',
     orderNumber: 'Order Number',
+    details: ' Details',
+    vipEndTime: 'VIP End Time',
   }
 }

src/locales/zh-CN.js

@@ -103,6 +103,9 @@ export default {
     coverImage:"封面图",
     pleaseInputRightPhoneNumber:"请输入正确的手机号",
     pleaseInputRightEmail:"请输入正确的邮箱",
+    placeholderInput:"请输入",
+    addTags:'添加标签',
+    modify:"修改",
   },
   login: {
     smsLogin: '短信登录',
@@ -231,6 +234,8 @@ export default {
     zhuanghuanmibi: '转换米币',
     zhuanhuanbaomibi:'转换暴米币',
     orderNumber: '订单编号',
+    details: '明细',
+    vipEndTime: '会员到期时间',
   }
 
 }

src/pages/Member.vue

@@ -2,21 +2,21 @@
   <div class="member">
     <div class="member-head">
       <div class="member-head-title">开通会员尊享特权</div>
-      <ul class="member-head-list">
+      <!-- <ul class="member-head-list">
         <li v-for="(item, index) in 4" :key="index">小标题优惠文案</li>
-      </ul>
+      </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="desc">{{ item.description }}</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 class="price-right">￥79.00/月</div> -->
         </div>
         <div class="btn" @click="confirmBuy({
                 callback:getList,
@@ -31,9 +31,9 @@
               })">开通{{ item.typeName }}</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 v-for="(em, ind) in item.privilege" :key="ind" class="li flex-center-between">
+            <div class="">{{ em.privilegeName }}</div>
+            <div class="">{{ em.privilegeValue }}{{ em.unit }}</div>
           </div>
         </div>
       </li>
@@ -51,7 +51,7 @@ import { useRouter } from 'vue-router'
 
 import { useAppStore } from '@/pinia/appStore'
 
-import { vipList } from '@/api/my.js';
+import { vipList,privilege } from '@/api/my.js';
 
 import { confirmBuy } from '@/utils/util.js'
 
@@ -65,12 +65,12 @@ const router = useRouter()
 
 const list = ref([])
 
-const openCard = async (item) => {
-  confirmBuy(item, res.data);
-}
-
 const getList = async () => {
   let res = await vipList();
+  res.data.forEach(async element => {
+    let privilegeRes = await privilege(element.typeId);
+    element.privilege = privilegeRes.data;
+  });
   list.value = res.data;
 }
 
@@ -81,7 +81,7 @@ onMounted(() => {
 </script>
 <style>
 body {
-  /* background: #FBF4F0 !important; */
+  
 }
 </style>
 <style lang="scss">

src/pages/Personal/Demand.vue

@@ -6,7 +6,7 @@
           <li v-for="(item, index) in list" :key="index">
             <div class="flex-center-between">
               <div class="flex-align-center">
-                <div v-if="form.activeName == 1" class="tag">报名中</div>
+                <div v-if="form.activeName == 1" class="tag" :class="{'tag_red':item.applyStatus == 2}">{{ item.applyStatus == 1 ? '报名中' : '已结束' }}{{ item.applyStatus }}</div>
                 <div class="title">{{ item.title }}</div>
               </div>
               <div class="price">￥{{ item.budgetMin }}-{{ item.budgetMax }}</div>
@@ -80,35 +80,34 @@
         <div class="detail-top">
           <div class="flex-center-between">
             <div class="flex-align-center">
-              <div class="tag">报名中</div>
-              <div class="name"></div>
+              <div class="tag" :class="{'tag_red':itemData.applyStatus == '2'}">{{ itemData.applyStatus == 1 ? '报名中' : '已结束' }}</div>
+              <div class="name">{{ itemData.title }}</div>
             </div>
-            <div class="price">￥-</div>
+            <div class="price">￥{{ itemData.budgetMin }}-{{ itemData.budgetMax }}</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>
+              <!-- <el-button type="primary" size="small" plain>一级分类名称</el-button> -->
+              <el-button type="primary" size="small" plain>{{ itemData.categoryName3 }}</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 class="">{{ itemData.questApplyCount || 0 }}{{ $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') }}：{{ itemData.deadline }}</div>
               </div>
             </ul>
           </div>
-          <div class="desc">
-            此n8n工作流是一款强大的AI驱动的潜在客户富集与通知系统，专为市场营销和销售团队设计。它通过智能表单收集线索，利用OpenAI深度分析并丰富客户数据，自动识别关键信息。系统能根据预设条件，通过多种渠道即时发送个性化通知，显著提升线索质量、转化率及团队协作效率，是优化客户关系管理的关键工具。
+          <div class="desc">{{ itemData.requirements }}
           </div>
-          <div class="time">2024-11-18 {{ $t('common.publish') }}</div>
+          <div class="time">{{ itemData.publishTime }} {{ $t('common.publish') }}</div>
         </div>
-        <div class="detail-txt">{{ $t('personalCenter.baomiliang') }}（5 {{ $t('personalCenter.ren') }}）</div>
+        <div class="detail-txt">{{ $t('personalCenter.baomiliang') }}（{{ itemData.questApplyCount || 0 }} {{ $t('personalCenter.ren') }}）</div>
         <ul class="detail-list">
-          <li v-for="(item, index) in 5" :key="index">
+          <li v-for="(item, index) in recordList" :key="index">
             <div class="flex-align-center detail-list-left">
               <el-avatar :size="20" :src="''" />
               <div class="">花花</div>
@@ -185,22 +184,25 @@ const form = ref({
 
 const itemData = ref({})
 
+const recordList = ref([])//报名记录
+
 const changeItem = async (item, index, type) => {
   itemData.value = item;
   if (type == 0) {
 
     let res = await appliList({ questId: item.questId })
     console.log(res)
+    recordList.value = res.rows;
     dialogVisible.value = true;
   } else if (type == 1) {
     router.push({ path: `/workflow-trade/workflow-trade-add`, query: { id: item.questId } });
   } else if (type == 2) {
     ElMessageBox.confirm(
       'proxy will permanently delete the file. Continue?',
-      'Warning',
+      'Warning1',
       {
         confirmButtonText: 'OK',
-        cancelButtonText: 'Cancel',
+        cancelButtonText: t('common.cancel'),
         type: 'warning',
       }
     )
@@ -222,7 +224,7 @@ const changeItem = async (item, index, type) => {
       'Warning',
       {
         confirmButtonText: 'OK',
-        cancelButtonText: 'Cancel',
+        cancelButtonText: t('common.cancel'),
         type: 'warning',
       }
     )
@@ -243,7 +245,7 @@ const changeItem = async (item, index, type) => {
       'Warning',
       {
         confirmButtonText: 'OK',
-        cancelButtonText: 'Cancel',
+        cancelButtonText: t('common.cancel'),
         type: 'warning',
       }
     )
@@ -321,6 +323,9 @@ onMounted(() => {
         border-radius: 4px;
         margin-right: 8px;
       }
+      .tag_red {
+        background: #E43434;
+      }
 
 
 
@@ -430,6 +435,9 @@ onMounted(() => {
       background: #2D71FF;
       border-radius: 4px;
     }
+    .tag_red {
+        background: #E43434;
+      }
 
     .name {
       font-size: 18px;

src/pages/Personal/Orders.vue

@@ -15,13 +15,13 @@
             </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="">
+                :src="item.orderImage" alt="">
               <div class="order-list-con flex-center-between flex_1">
                 <div class="">
                   <div class="title">{{ item.orderTypeName }}</div>
-                  <div class="">
-                    <el-button type="primary" size="small" plain>技能标签</el-button>
-                    <el-button type="primary" size="small" plain>技能标签</el-button>
+                  <div class="">{{ item.description }}
+                    <!-- <el-button type="primary" size="small" plain>技能标签</el-button>
+                    <el-button type="primary" size="small" plain>技能标签</el-button> -->
                   </div>
                 </div>
                 <div class="mi_price">
@@ -29,7 +29,7 @@
                   <div class="">{{ item.payMethod == 'BMI' ? $t('common.baomibi') : $t('common.mibi') }}</div>
                 </div>
                 <div class="mi_price price">
-                  <div class="">￥{{ item.discountAmount || 0 }}</div>
+                  <div class="">{{ item.discountAmount || 0 }}{{ item.amountUnit }}</div>
                   <div class="">{{ $t('common.actualAmount') }}</div>
                 </div>
                 <div class="" >

src/pages/Personal/Wallet.vue

@@ -3,7 +3,7 @@
     <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="">{{ index == 0 ? $t('common.mibi') : $t('common.baomibi') }} {{ $t('personalCenter.yue') }}</div>
           <div class="">{{ index == 0 ? userInfo.pointsBalance || 0 || 0 : userInfo.baoMiBalance || 0 }}</div>
         </div>
         <div class="wallet-list-li-right flex-align-center">
@@ -19,19 +19,20 @@
         </div>
       </li>
     </ul>
-    <el-tabs v-model="form.activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tabs v-model="form.changeType" 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 @click="changeType(index)" :class="{ active: index + 1 == form.balanceType }" class="tab" v-for="(item, index) in 2">{{
+            index == 0 ? $t('common.mibi') : $t('common.baomibi') }}{{ $t('personalCenter.details') }}
           </div>
         </div>
         <ul class="wallet-page-list">
           <li v-for="(item, index) in list" :key="index">
             <div class="title">
-              <div class="">订单米币</div>
-              <div class="">2024-08-24 14:11:11</div>
+              <div class="">{{ item.bizTypeName }}</div>
+              <div class="">{{ item.createTime }}</div>
             </div>
-            <div class="price">+1000</div>
+            <div class="price">{{ form.changeType == 1 ? '+' : '' }}{{ item.balanceChange }}</div>
           </li>
         </ul>
       </el-tab-pane>
@@ -44,12 +45,12 @@
 
     <el-dialog v-model="dialogVisible"
       :title="`${transformationIndex == 0 ? $t('personalCenter.zhuanhuanbaomibi') : $t('personalCenter.zhuanghuanmibi')}`"
-      width="523" :before-close="handleClose">
+      width="523">
       <el-form :model="walletForm" label-width="auto" label-position="top">
         <el-row :gutter="16" v-if="transformationIndex">
           <el-col :span="24">
             <el-form-item :label="$t('common.baomibi')">
-              
+
               <el-input-number v-model="walletForm.orderAmt" :min="1" controls-position="right" size="large"
                 @change="handleChange" style="width: 100%;" />
             </el-form-item>
@@ -68,8 +69,8 @@
         <el-row :gutter="16" v-else>
           <el-col :span="12">
             <el-form-item :label="$t('common.mibi')">
-              <el-input-number v-model="walletForm.orderAmt" :min="configTxt.configValue" :step="configTxt.configValue" controls-position="right" size="large"
-                @change="handleChange" style="width: 100%;" />
+              <el-input-number v-model="walletForm.orderAmt" :min="configTxt.configValue" :step="configTxt.configValue"
+                controls-position="right" size="large" @change="handleChange" style="width: 100%;" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -96,32 +97,39 @@
 import { ref, onMounted } from 'vue'
 
 import type { TabsPaneContext } from 'element-plus'
+
 import Pagination from '@/components/Pagination.vue'
+
 import { getUserInfo } from '@/api/auth'
 
 import { payConfigDearch, calRate } from '@/api/order'
+
+import { recordList } from '@/api/my'
+
 import { createOrder } from '@/api/order.js'
 
 import { useAppStore } from '@/pinia/appStore'
 
 import DGTMessage from '@/utils/message'
 
-import { useI18n } from 'vue-i18n' 
+import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n() 
+const { t } = useI18n()
 
 const appStore = useAppStore();
 
 const tabs = ref([
-  { label: 'personalCenter.incomeDetails', name: 0 },
-  { label: 'personalCenter.usageRecord', name: 1 }
+  { label: 'personalCenter.incomeDetails', name: 1 },
+  { label: 'personalCenter.usageRecord', name: 2 }
 ])
 const list = ref([])
+
 const form = ref({
-  activeName: 0,
   pageNum: 1,
   pageSize: 10,
   total: 0,
+  balanceType: 1,//1-米币 2-暴米币
+  changeType: 1,//1-增加 2-减少
 })
 
 const walletForm = ref({
@@ -131,7 +139,7 @@ const walletForm = ref({
   orderNum: null,
   orderAmt: 1,
   feeRate: 0,
-  targetAmount:0
+  targetAmount: 0
 })
 const configTxt = ref({})
 
@@ -141,7 +149,7 @@ const dialogVisible = ref(false);
 const transformationIndex = ref(0)
 
 // 确认转换
-const confirmTransformation = async () =>{
+const confirmTransformation = async () => {
   let res = await createOrder({
     payMethod: walletForm.value.payMethod,
     orderType: walletForm.value.orderType,
@@ -154,46 +162,56 @@ const confirmTransformation = async () =>{
     if (res.data.paySuccess) {
       dialogVisible.value = false;
       appStore.USERINFO();
-      DGTMessage.success(`  ${ transformationIndex.value ? t('common.zhuanhuanbaomibi') : t('common.zhuanghuanmibi')}${t('common.success')}`)
+      DGTMessage.success(`  ${transformationIndex.value ? t('common.zhuanhuanbaomibi') : t('common.zhuanghuanmibi')}${t('common.success')}`)
     }
   }
 }
 
 // 米币暴米币转换
-const changeTransformation = async (index:any) => {
+const changeTransformation = async (index: any) => {
   transformationIndex.value = index;
   walletForm.value.payMethod = index ? 'BMI' : 'MI';
   walletForm.value.orderType = index ? 'exchange_mi' : 'exchange_bmi';
   let { data } = await payConfigDearch({ id: '03' });
 
-  let result = data.filter((item:any) => item.configCode == 'bmb_to_mb_rate')
+  let result = data.filter((item: any) => item.configCode == 'bmb_to_mb_rate')
   if (result.length) {
     configTxt.value = result[0]
   }
-  walletForm.value.orderAmt = index == 0 ?  configTxt.value.configValue : 1 
+  walletForm.value.orderAmt = index == 0 ? configTxt.value.configValue : 1
   handleChange()
   dialogVisible.value = true;
 }
 
 const handleChange = async () => {
   let res = await calRate({
-    orderType:walletForm.value.orderType,
-    orderNum:walletForm.value.orderAmt
+    orderType: walletForm.value.orderType,
+    orderNum: walletForm.value.orderAmt
   });
   walletForm.value.feeRate = res.data.feeRate
   walletForm.value.targetAmount = res.data.targetAmount
-  
+
   console.log(res);
 }
+// 米币暴米币切换
+const changeType = (index) => {
+  list.value = []
+  form.value.pageNum = 1;
+  form.value.balanceType = index + 1;
+  getList()
+}
 
 const handleClick = (tab: TabsPaneContext) => {
   list.value = []
   form.value.pageNum = 1;
-  form.value.activeName = tab.props.name;
+  form.value.changeType = tab.props.name;
   getList()
 }
 const getList = async () => {
-
+  let res = await await recordList(form.value);
+  console.log(res.rows)
+  list.value = res.rows;
+  form.value.total = res.total;
 }
 
 const handlePageChange = (newPage: number) => {

src/pages/PersonalCenter.vue

@@ -3,17 +3,19 @@
     <Breadcrumb />
     <div class="personal-head">
       <div class="personal-head-left">
-        <el-avatar :size="100" :src="appStore.avatarDefault" />
+        <el-avatar :size="100" :src="appStore.userInfo.userAvatar ? appStore.userInfo.userAvatar : appStore.avatarDefault" />
         <div class="personal-user-info">
           <div class="personal-username">
             <div class="">{{ appStore.userInfo.nickName }}</div>
-            <img src="/src/assets/imgs/my/vip@2x.png" alt="">
+            <template v-if="['0', '1', '2'].includes(appStore.userInfo.memberType)"></template>
+            <img :src="`/src/assets/imgs/my/vip${appStore.userInfo.memberType}@2x.png`" alt="">
             <!-- memberType  会员类型memberType 会员类型分为企业会员（2）和个人会员（1）、免费会员（0） -->
           </div>
           <div class="personal-user-phone mt4">{{ $t('personalCenter.phoneNumber') }}：{{ appStore.userInfo.userPhone }}
           </div>
-          <div class="gap10 mt4" v-if="appStore.userInfo.skillTags">
-            <el-button type="primary" size="large" plain>{{ appStore.userInfo.skillTags }}</el-button>
+          <div class="">{{ $t('personalCenter.vipEndTime') }}: {{ appStore.userInfo.memberExpire }}</div>
+          <div class="mt4" v-if="appStore.userInfo.skillTags">
+            <el-button v-for="(item,index) in appStore.userInfo.skillTags.split(',')" type="primary" plain>{{ item }}</el-button>
           </div>
           <div class="personal-user-list">
             <div class="personal-user-li">
@@ -75,54 +77,72 @@
           <el-col :span="12">
             <el-form-item label="上传头像">
               <!-- 图片类型 -->
-            <FileUploader
-              ref="fileUploader"
-              accept="image/*"
-              :multiple="false"
-              :limit="1"
-              :auto-upload="true"
-              list-type="picture-card"
-              :data="{ directory: 'workflow' }"
-              buttonText=""
-              v-model="coverImage"
-              tip=""
-            />
+              <FileUploader ref="fileUploader" accept="image/*" :multiple="false" :limit="1" :auto-upload="true"
+                list-type="picture-card" :data="{ directory: 'workflow' }" buttonText="" v-model="coverImage" tip="" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="16">
           <el-col :span="12">
             <el-form-item label="昵称">
-              <el-input v-model="userInfo.nickName" />
+              <el-input v-model="userInfo.nickName" :placeholder="$t('common.placeholderInput')" class="inputStyle"
+                :input-style="{
+                  backgroundColor: 'transparent',
+                }" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="联系电话">
-              <el-input v-model="userInfo.userPhone" />
+            <el-form-item label="登录手机号">
+              <el-input :readonly="userInfo.userPhone ? true : false" v-model="userInfo.userPhone"
+                :placeholder="$t('common.placeholderInput')" class="inputStyle" :input-style="{
+                  backgroundColor: 'transparent',
+                }" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="16">
           <el-col :span="12">
             <el-form-item label="n8n账号">
-              <el-input v-model="userInfo.name" />
+              <el-input v-model="userInfo.name" :placeholder="$t('common.placeholderInput')" class="inputStyle"
+                :input-style="{
+                  backgroundColor: 'transparent',
+                }" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="Coze账号">
-              <el-input v-model="userInfo.name" />
+              <el-input v-model="userInfo.name" :placeholder="$t('common.placeholderInput')" class="inputStyle"
+                :input-style="{
+                  backgroundColor: 'transparent',
+                }" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="16">
           <el-col :span="12">
             <el-form-item label="Dify账号">
-              <el-input v-model="userInfo.name" />
+              <el-input v-model="userInfo.name" :placeholder="$t('common.placeholderInput')" class="inputStyle"
+                :input-style="{
+                  backgroundColor: 'transparent',
+                }" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="FastGpt账号">
-              <el-input v-model="userInfo.name" />
+              <el-input v-model="userInfo.name" :placeholder="$t('common.placeholderInput')" class="inputStyle"
+                :input-style="{
+                  backgroundColor: 'transparent',
+                }" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="登录邮箱">
+              <el-input v-model="userInfo.name" :placeholder="$t('common.placeholderInput')" class="inputStyle"
+                :input-style="{
+                  backgroundColor: 'transparent',
+                }" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -134,9 +154,12 @@
                   {{ tag }}
                 </el-tag>
                 <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"
-                  @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
+                  @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" maxlength="5">
+                  <template #append>
+                    <el-button :icon="Plus" />
+                  </template></el-input>
                 <el-button v-else class="button-new-tag" size="small" @click="showInput">
-                  + New Tag
+                  + {{ $t('common.addTags') }}
                 </el-button>
               </div>
             </el-form-item>
@@ -146,7 +169,7 @@
       <template #footer>
         <div class="dialog-footer flex-center">
           <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
-          <el-button class="gradient" type="primary" @click="dialogVisible = false">
+          <el-button class="gradient" type="primary" @click="handleConfirm">
             {{ $t('common.confirm') }}
           </el-button>
         </div>
@@ -157,6 +180,8 @@
 </template>
 <script setup lang="ts">
 
+import { Plus } from '@element-plus/icons-vue'
+
 import { useAppStore } from '@/pinia/appStore'
 
 import { ref, onMounted, computed, nextTick } from 'vue';
@@ -166,9 +191,9 @@ import type { InputInstance } from 'element-plus'
 
 import { useRoute, useRouter } from 'vue-router'
 
-import { getUserInfo } from '@/api/auth.js'
+import { getUserInfo,updateUserInfo } from '@/api/auth.js'
 
-import { checkIn,queryCollectCount } from '@/api/my.js'
+import { checkIn, queryCollectCount } from '@/api/my.js'
 
 import DGTMessage from '@/utils/message'
 
@@ -265,7 +290,22 @@ const navIndex = computed(() => {
 
 const userInfo = ref({})//用户信息
 
-const images = ref([]);
+const coverImage = ref([]);
+
+// 更新用户信息
+const handleConfirm = async () =>{
+  let res = await updateUserInfo({
+    nickName: userInfo.value.nickName,
+    userAvatar:coverImage.value.map(item => item.url).join(';'),
+    skillTags:dynamicTags.value.join(','),
+    userPhone:userInfo.value.userPhone,
+  })
+  if (res.code === 200) {
+    appStore.USERINFO();
+    DGTMessage.success(`${t('common.modify')}${t('common.success')}`)    
+    dialogVisible.value = false;
+  }
+}
 
 const toPath = (item: any, index: number) => {
   if (item.path) {
@@ -283,6 +323,12 @@ const signIn = async () => {
 // 获取用户信息
 const getInfo = async () => {
   let res = await getUserInfo();
+  if (res.user.userAvatar) {
+    coverImage.value = [{url:res.user.userAvatar}]
+  }
+  if (res.user.skillTags) {
+    dynamicTags.value = res.user.skillTags.split(',')
+  }
   userInfo.value = res.user;
 }
 
@@ -359,7 +405,7 @@ div {
         color: #333333;
 
         img {
-          width: 51px;
+          width: 68px;
           height: 21px;
           margin-left: 8px;
         }
@@ -506,8 +552,20 @@ div {
     }
   }
 }
+
 .tags {
   flex-wrap: wrap;
   gap: 16px;
 }
+
+.inputStyle {
+  width: 368px;
+  height: 36px;
+  background: #F5F7FA;
+  border-radius: 4px;
+  border: 1px solid #F2F6FC;
+  ::v-deep .el-input__wrapper {
+    background-color: transparent;
+  }
+}
 </style>