Просмотр исходного кода

```
feat(router): 添加米币商城路由并修复导航菜单链接

- 修改App.vue中的导航菜单,将米币商城的路由链接从/my-learning更改为/mibi-shop
- 在路由激活索引计算逻辑中添加对/learn-note和/mibi-shop路径的支持
- 在国际化文件中添加米币商城的中英文翻译
- 在路由配置中添加米币商城页面的路由定义
```

zhangningning 1 месяц назад
Родитель
Сommit
8d38c0d572
5 измененных файлов с 107 добавлено и 1 удалено
  1. 7 1
      src/App.vue
  2. 1 0
      src/locales/en.js
  3. 1 0
      src/locales/zh-CN.js
  4. 92 0
      src/pages/mibiShop/mibiShop.vue
  5. 6 0
      src/router/index.js

+ 7 - 1
src/App.vue

@@ -11,7 +11,7 @@
             <el-menu-item index="2" @click="goMyLearning">{{ $t('common.gongzuoliu_trade') }}</el-menu-item>
             <el-menu-item index="3" @click="$router.push('/learning-system')">{{ $t('route.learning_system') }}</el-menu-item>
             <el-menu-item index="4" @click="$router.push('/learn-note')">{{ $t('common.xuxibiji') }}</el-menu-item>
-            <el-menu-item index="5" @click="$router.push('/my-learning')">米币商城</el-menu-item>
+            <el-menu-item index="5" @click="$router.push('/mibi-shop')">米币商城</el-menu-item>
             <!-- <el-menu-item index="5" @click="$router.push('/my-learning')">米币商城</el-menu-item> -->
           </el-menu>
           <div class="header-right">
@@ -102,6 +102,12 @@ const activeIndex = computed(() => {
   if (route.path.startsWith('/learning-system')) {
     return '3'
   }
+  if (route.path.startsWith('/learn-note')) {
+    return '4'
+  }
+  if (route.path.startsWith('/mibi-shop')) {
+    return '5'
+  }
   return '1' // 默认返回首页
 });
 // 处理注销

+ 1 - 0
src/locales/en.js

@@ -53,6 +53,7 @@ export default {
     WorkflowDetail: 'Workflow Detail',
     learning_system: 'Learning System',
     orderConfirm: 'Order Confirm',
+    mibiShop: 'Mibit Shop',
 
 
 

+ 1 - 0
src/locales/zh-CN.js

@@ -54,6 +54,7 @@ export default {
     WorkflowDetail: '工作流详情',
     learning_system: '学习教程系统',
     orderConfirm: '确认订单',
+    mibiShop: '米币商城',
 
 
 

+ 92 - 0
src/pages/mibiShop/mibiShop.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="mibiShop container-height">
+    <Breadcrumb />
+    <div class="list">
+      <div class="list_item bg_color_fff border_radius_16 box_shadow_card"
+      v-for="item in 10" :key="item"
+      >
+        <img src="" alt="" style="width: 291.2px; height: 291.2px;" class="bg_color_f5">
+        <div class="item_info padding16">
+          <div class="line2 font_size18 bold line_height24">
+            {{item==1?'小红xhs书虚拟电商赚钱项目开店选品定价上架自动发货在...':'小红xhs书虚拟'}}
+          </div>
+          <div class="flex-center-between">
+            <div class="bold color_price font_size20">900米币</div>
+            <div class="border_radius_4 lijiduihuan  color_fff gradient font_size14 flex-center mt10">
+              立即兑换
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+     <Pagination 
+        :total="listTotal"
+        :page-size="searchFom.pageSize"
+        :current-page="searchFom.pageNum"
+        @page-change="handlePageChange"
+      />
+  </div>
+</template>
+<script setup>
+import Pagination from '@/components/Pagination.vue'
+import { ref, onMounted,reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import { useAppStore } from '@/pinia/appStore'
+const appStore = useAppStore()
+const route = useRoute()
+const query = route.query;
+const learnNoteId = ref(query.learnNoteId || '');
+
+
+// 添加分页相关数据
+const list = ref([]);
+const listTotal = ref(0);
+const searchFom = reactive({
+  pageNum: 1,
+  pageSize: 10,
+})
+onMounted(() => {
+  // getList();
+});
+
+const handlePageChange = (page) => {
+  searchFom.pageNum = page
+  // 这里可以添加获取数据的逻辑
+  console.log('当前页:', page);
+  getList();
+}
+// 查询寻找工作流列表
+const getList = async (type) => {
+  if(type === 'init'){
+    searchFom.pageNum = 1
+  }
+  // const res = await getQuestList(searchFom)
+  // if(res.code === 200){
+  //   listTotal.value = res.total
+  //   list.value = res.rows
+  // }
+};
+
+</script>
+<style lang="scss">
+.mibiShop{
+  .list{
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(291.2px, 1fr));
+    gap: 16px;
+    .list_item{
+      width: 291.2px;
+      .item_info{
+        height: 124px;
+        .line2{
+          height: 52px;
+        }
+        .lijiduihuan{
+          height: 32px;
+          padding: 0 16px;
+        }
+      }
+    }
+  }
+}
+</style>

+ 6 - 0
src/router/index.js

@@ -113,6 +113,12 @@ const routes = [
     component: () => import('@/pages/LearnNote/LearnNote.vue'),
     meta: { title: 'common.xuxibiji' }
   },
+  {
+    path: '/mibi-shop',
+    name: 'MibiShopHome',
+    component: () => import('@/pages/mibiShop/mibiShop.vue'),
+    meta: { title: 'route.mibiShop' }
+  },