feat: 新增前端任务界面，切图崽

Yi.Bbs.Vue3/src/views/assignment/Index.vue

@@ -1,61 +1,95 @@
 <script setup>
 import {getAssignmentList, getCanReceiveAssignment, acceptAssignment, receiveAssignment} from '@/apis/assignmentApi'
 import {onMounted, reactive, ref} from "vue";
+import AssignmentCard from "./components/AssignmentCard.vue"
+const canReceiveAssignmentList = ref([]);
 
-const canReceiveAssignmentList=ref([]);
-
-const assignmentList=ref([]);
-const queryForm=reactive({
-  assignmentQueryState:"Progress"
+const assignmentList = ref([]);
+const queryForm = reactive({
+  assignmentQueryState: "Progress"
 });
 
-onMounted( async ()=>{
- await  refreshData();
+//当前选择table页
+const currentTableSelect = ref("canAccept");
+
+//切换tab
+const changeClickTable = async (tabName) => {
+  console.log(tabName,"tabName")
+  switch (tabName) {
+    case "canAccept":
+      const {data: canReceiveAssignmentListData} = await getCanReceiveAssignment();
+      canReceiveAssignmentList.value = canReceiveAssignmentListData;
+      return;
+    case "progress":
+      queryForm.assignmentQueryState = "Progress";
+      break;
+    case "end":
+      queryForm.assignmentQueryState = "End";
+      break;
+  }
+  const {data} = await getAssignmentList(queryForm);
+  assignmentList.value = data;
+}
+onMounted(async () => {
+  const {data: canReceiveAssignmentListData} = await getCanReceiveAssignment();
+  canReceiveAssignmentList.value = canReceiveAssignmentListData;
 });
 //刷新数据
-const  refreshData=async ()=>{
+const refreshData = async () => {
 
-  const {data:canReceiveAssignmentListData}= await getCanReceiveAssignment();
-  canReceiveAssignmentList.value=canReceiveAssignmentListData;
+  const {data: canReceiveAssignmentListData} = await getCanReceiveAssignment();
+  canReceiveAssignmentList.value = canReceiveAssignmentListData;
 
-  const {data}= await getAssignmentList(queryForm);
-  assignmentList.value=data;
+  const {data} = await getAssignmentList(queryForm);
+  assignmentList.value = data;
 }
 
 //接收任务
-const onClickAcceptAssignment=async (id)=>{
-   await acceptAssignment(id);
-  await  refreshData();
+const onClickAcceptAssignment = async (item) => {
+  await acceptAssignment(item.id);
+  await refreshData();
 }
 
-const onClickReceiveAssignment=async (id)=>{
+const onClickReceiveAssignment = async (id) => {
   await receiveAssignment(id);
-  await  refreshData();
+  await refreshData();
 }
 
 //切换tab
-const  changeTab=async (state)=>{
-  queryForm.assignmentQueryState=state;
-  await  refreshData();
+const changeTab = async (state) => {
+  queryForm.assignmentQueryState = state;
+  await refreshData();
 }
+
+
 </script>
 
 <template>
+  <div class="content-body">
+    <el-tabs
+        v-model="currentTableSelect"
+        type="border-card"
+        @tab-change="changeClickTable"
+    >
+      <el-tab-pane label="可接受" name="canAccept"/>
+      <el-tab-pane label="已接受" name="progress"/>
+      <el-tab-pane label="已结束" name="end"/>
+      
+      <div v-for="item in canReceiveAssignmentList" v-if="currentTableSelect==='canAccept'">
+        <AssignmentCard :data="item" @onClick="onClickAcceptAssignment"/>
+      </div>
 
-  <h3>可接收任务</h3>
-  <div>
-    <div v-for="item in canReceiveAssignmentList">{{item}}
-      <button type="button" @click="onClickAcceptAssignment(item.id)">接收任务</button>
-    </div>
+      <div v-for="item in assignmentList" v-else>{{ item }}
+        <button type="button" @click="onClickReceiveAssignment(item.id)">领取奖励</button>
+      </div>
+    </el-tabs>
   </div>
+</template>
+<style scoped lang="scss">
+.content-body{
+  
+  padding: 30px ;
+}
 
-<hr/>
-  <h3>已接收任务
-    <button type="button" @click="changeTab('Progress')">切换正在进行</button>
-    <button type="button" @click="changeTab('End')">切换已结束</button></h3>
-  <div>
-    <div v-for="item in assignmentList">{{item}}
-      <button type="button" @click="onClickReceiveAssignment(item.id)">领取奖励</button>
-    </div>
-  </div>
-</template>
+
+</style>

Yi.Bbs.Vue3/src/views/assignment/components/AssignmentCard.vue

@@ -0,0 +1,83 @@
+<script setup>
+import {ref} from "vue";
+
+const props = defineProps(['data'])
+const cardData=ref(props.data);
+
+const emit =defineEmits(['onClick'])
+const  onClick=()=>{
+  emit('onClick',cardData.value)
+}
+
+</script>
+
+<template>
+  <div class="card-box">
+    <div class="left">
+      <div class="left-type">每日任务</div>
+      <div class="content">
+        <h2>{{cardData.name}}</h2>
+       <h4>{{cardData.remarks}}</h4> 
+      </div>
+    </div>
+    <div class="right">
+      <div class="right-btn"> 
+        <h3>过期时间：无限制</h3>
+        <el-button @click="onClick()" type="primary">接受任务</el-button>
+      </div>
+      
+    </div>
+  
+   
+  </div>
+</template>
+<style scoped lang="scss">
+.el-button{
+  width: 100px;
+  height: 40px;
+}
+h2{
+  margin: 0 0 10px 0;
+}
+h3{
+  margin: 0;
+}
+h4{
+  margin: 0;
+}
+.card-box{
+  padding: 10px;
+  border: 2px solid #dcdfe6;
+  display: flex;
+  justify-content: space-between;
+  height: 100px;
+  width: 100%;
+  align-content: center;
+  flex-wrap: wrap;
+  .right{
+    display: flex;
+    align-content: center;
+    flex-wrap: wrap;
+    .right-btn{
+      text-align: right;
+    }
+  }
+  .left{
+    display: flex;
+    .content{
+      margin-left: 30px;
+    }
+    .left-type
+    {
+      border: 1px solid #dcdfe6;
+      height: 60px;
+      width: 100px;
+      display: flex;
+      align-content: center;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+  }
+}
+
+</style>