vue项目开发总结——任务悬赏平台（前端）

最新推荐文章于 2022-08-02 12:36:21 发布

boboj1

最新推荐文章于 2022-08-02 12:36:21 发布

阅读量912

点赞数

分类专栏：项目总结 Vue 文章标签： vue.js elementui 前端框架前端 tailwindcss

本文链接：https://blog.csdn.net/Wind_AN/article/details/121465115

版权

本文总结了一位开发者在实习期间使用Vue2、ElementUI和TailwindCSS开发任务悬赏平台前端的经验。项目涉及用户端、企业端和后台管理端，涵盖了多条件查询任务、自定义对话框组件、登录加密、状态管理等方面。通过该项目，作者深入理解了项目目录结构、路由命名、组件封装、状态管理及性能优化等关键点。

摘要由CSDN通过智能技术生成

项目简介：
该项目实习中的第一个项目，该项目分为用户端、企业端、后台管理端。用户可以在任务大厅接受任务，每完成任务都会获得响应的报酬，用户只能接受一个任务，该任务完成后才能继续下一个任务。任务进行期间，该任务可以被企业取消，若企业取消用户正在完成的任务，则返回5%的奖励给用户。企业可以发布任务，发布任务之前需要上传企业认证凭证给后台管理端，后台管理员审核通过之后企业才可发布任务，企业可以对用户已完成的任务进行确认完成任务和打回重做。

一、相关技术

vue2
scss
axios
cookie
element UI
crypto-js
tailwindcss

二、个人所写组件

1、多条件查询任务

在这里插入图片描述

<div class="task_hall_select">
  <div class="task_hall_item">
    <div class="item_title">任务级别:</div>
    <div class="items_container">
      <div
        class="select_item"
        :class="{
    'active_item': index === activeLevelIndex}"
        v-for="(item, index) in taskLevelItems"
        :key="index"
        @click="selectLevelClick(index, item.value)"
      >{
  {item.name}}</div>
    </div>
  </div>
  <div class="task_hall_item">
    <div class="item_title">任务时限:</div>
    <div class="items_container">
      <div
        class="select_item"
        :class="{
    'active_item': index === activeTimeIndex}"
        v-for="(item, index) in taskTimeItems"
        :key="index"
        @click="selectTimeClick(index, item.value)"
      >{
  {item.name}}</div>