当前位置：首页 > VUE

vue实现理财超市

2026-01-08 08:25:02VUE

Vue实现理财超市功能

理财超市通常包含产品展示、筛选、排序、详情页等功能，以下是基于Vue的实现方案：

技术栈建议

Vue 2/3 + Vue Router
UI库：Element UI/Ant Design Vue/Vant（移动端）
状态管理：Vuex/Pinia
数据请求：Axios

项目结构设计

src/
├── assets/               # 静态资源
├── components/           # 公共组件
│   ├── ProductCard.vue   # 产品卡片
│   └── FilterBar.vue     # 筛选栏
├── views/
│   ├── Home.vue          # 首页
│   ├── ProductList.vue   # 产品列表
│   └── ProductDetail.vue # 详情页
├── store/                # 状态管理
│   └── products.js       # 产品相关状态
└── router/               # 路由配置

核心功能实现

产品列表展示

<template>
  <div class="product-list">
    <ProductCard 
      v-for="product in filteredProducts"
      :key="product.id"
      :product="product"
      @click="goToDetail(product.id)"
    />
  </div>
</template>

<script>
import ProductCard from '@/components/ProductCard.vue'

export default {
  components: { ProductCard },
  computed: {
    filteredProducts() {
      return this.$store.getters.filteredProducts
    }
  },
  methods: {
    goToDetail(id) {
      this.$router.push(`/product/${id}`)
    }
  }
}
</script>

筛选功能实现

<template>
  <div class="filter-bar">
    <el-select v-model="riskLevel" placeholder="风险等级">
      <el-option label="低风险" value="1"></el-option>
      <el-option label="中风险" value="2"></el-option>
    </el-select>

    <el-select v-model="profitType" placeholder="收益类型">
      <el-option label="固定收益" value="fixed"></el-option>
      <el-option label="浮动收益" value="float"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      riskLevel: '',
      profitType: ''
    }
  },
  watch: {
    riskLevel() {
      this.$store.commit('SET_FILTER', { 
        key: 'riskLevel', 
        value: this.riskLevel 
      })
    },
    profitType() {
      this.$store.commit('SET_FILTER', { 
        key: 'profitType', 
        value: this.profitType 
      })
    }
  }
}
</script>

Vuex状态管理

// store/products.js
export default {
  state: {
    products: [],
    filters: {
      riskLevel: null,
      profitType: null
    }
  },
  getters: {
    filteredProducts(state) {
      return state.products.filter(product => {
        return (
          (!state.filters.riskLevel || product.risk === state.filters.riskLevel) &&
          (!state.filters.profitType || product.type === state.filters.profitType)
        )
      })
    }
  },
  mutations: {
    SET_PRODUCTS(state, products) {
      state.products = products
    },
    SET_FILTER(state, { key, value }) {
      state.filters[key] = value
    }
  },
  actions: {
    async fetchProducts({ commit }) {
      const res = await axios.get('/api/products')
      commit('SET_PRODUCTS', res.data)
    }
  }
}

高级功能实现

产品排序功能

// 在getters中添加
sortedProducts: (state) => (sortBy) => {
  return [...state.products].sort((a, b) => {
    if (sortBy === 'profit') {
      return b.expectedProfit - a.expectedProfit
    } else if (sortBy === 'period') {
      return a.investmentPeriod - b.investmentPeriod
    }
    return 0
  })
}

收藏功能实现

// 在store中添加
state: {
  favorites: []
},
mutations: {
  TOGGLE_FAVORITE(state, productId) {
    const index = state.favorites.indexOf(productId)
    if (index === -1) {
      state.favorites.push(productId)
    } else {
      state.favorites.splice(index, 1)
    }
  }
}