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>