ali_ai_learn_web/src/pages/Personal/Demand.vue

<template>
  <div class="demand">
    <el-tabs v-model="form.activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="$t(tab.label)" :name="tab.name">
        <ul class="demand-list">
          <li v-for="(item, index) in list" :key="index">
            <div class="flex-center-between">
              <div class="flex-align-center">
                <div v-if="form.activeName == 1" class="tag" :class="{'tag_red':item.applyStatus == 2}">{{ item.applyStatus == 1 ? '报名中' : '已结束' }}{{ item.applyStatus }}</div>
                <div class="title">{{ item.title }}</div>
              </div>
              <div class="price">￥{{ item.budgetMin }}-{{ item.budgetMax }}</div>
            </div>
            <div class="flex-align-center content">
              <div class="flex-align-center">
                <!-- <el-button type="primary" size="small" plain>{{ item.categoryName1 }}</el-button> -->
                <!-- <el-button type="primary" size="small" plain>{{ item.categoryName2 }}</el-button> -->
                <el-button type="primary" size="small" plain>{{ item.categoryName3 }}</el-button>
              </div>
              <ul class="flex-align-center list">
                <div class="li">
                  <img src="/src/assets/imgs/yuangong.png" alt="">
                  <div class="">{{ item.questApplyCount || 0 }}{{ $t('common.renbaoming') }}</div>
                </div>
                <div class="li">
                  <img src="/src/assets/imgs/rili.png" alt="">
                  <div class="">{{ $t('common.signUpDeadline') }}：{{ item.deadline }}</div>
                </div>
              </ul>
            </div>
            <div class="description">{{ item.requirements }}</div>
            <div class="info">
              <div class="info-left">
                <el-avatar :size="30" :src="item.userAvatar || appStore.avatarDefault" />
                <div class="name">{{ item.nickName }}</div>
                <div class="date">{{ item.publishTime }} {{ $t('common.publish') }}</div>
              </div>
              <div class="info-right flex-align-center">
                <template v-if="form.activeName === 0">
                  <div class="btn" @click="changeItem(item, index, 0)">
                    <img src="/src/assets/imgs/my/jilu@2x.png" alt="">
                    <div>{{ $t('personalCenter.viewSignUpRecord') }}</div>
                  </div>
                  <template v-if="item.applyStatus == 1">
                    <div class="btn" @click="changeItem(item, index, 1)">
                      <img src="/src/assets/imgs/my/bianji@2x.png" alt="">
                      <div>{{ $t('common.edit') }}</div>
                    </div>
                    <div class="btn" @click="changeItem(item, index, 2)">
                      <img src="/src/assets/imgs/my/guanbi@2x.png" alt="">
                      <div class="red">{{ $t('personalCenter.endActivity') }}</div>
                    </div>
                  </template>

                  <div class="btn" @click="changeItem(item, index, 3)">
                    <img src="/src/assets/imgs/my/shanchu@2x.png" alt="">
                    <div class="red">{{ $t('common.delete') }}</div>
                  </div>
                </template>

                <div class="btn" v-else @click="changeItem(item, index, 4)">
                  <img src="/src/assets/imgs/my/quxiao@2x.png" alt="">
                  <div class="red">{{ $t('personalCenter.cancelSignUp') }}</div>
                </div>

              </div>
            </div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
    <template v-if="list.length">
      <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum"
        @page-change="handlePageChange" />
    </template>
    <el-empty v-else :description="$t('common.empty')" />

    <el-dialog v-model="dialogVisible" :title="$t('personalCenter.viewSignUpRecord')" width="1138">
      <div class="detail">
        <div class="detail-top">
          <div class="flex-center-between">
            <div class="flex-align-center">
              <div class="tag" :class="{'tag_red':itemData.applyStatus == '2'}">{{ itemData.applyStatus == 1 ? '报名中' : '已结束' }}</div>
              <div class="name">{{ itemData.title }}</div>
            </div>
            <div class="price">￥{{ itemData.budgetMin }}-{{ itemData.budgetMax }}</div>
          </div>
          <div class="flex-align-center content">
            <div class="flex-align-center">
              <!-- <el-button type="primary" size="small" plain>一级分类名称</el-button> -->
              <el-button type="primary" size="small" plain>{{ itemData.categoryName3 }}</el-button>
            </div>
            <ul class="flex-align-center list">
              <div class="li">
                <img src="/src/assets/imgs/yuangong.png" alt="">
                <div class="">{{ itemData.questApplyCount || 0 }}{{ $t('common.renbaoming') }}</div>
              </div>
              <div class="li">
                <img src="/src/assets/imgs/rili.png" alt="">
                <div class="">{{ $t('common.signUpDeadline') }}：{{ itemData.deadline }}</div>
              </div>
            </ul>
          </div>
          <div class="desc">{{ itemData.requirements }}
          </div>
          <div class="time">{{ itemData.publishTime }} {{ $t('common.publish') }}</div>
        </div>
        <div class="detail-txt">{{ $t('personalCenter.baomiliang') }}（{{ itemData.questApplyCount || 0 }} {{ $t('personalCenter.ren') }}）</div>
        <ul class="detail-list">
          <li v-for="(item, index) in recordList" :key="index">
            <div class="flex-align-center detail-list-left">
              <el-avatar :size="20" :src="''" />
              <div class="">花花</div>
              <div class="">13176012742</div>
            </div>
            <div class="detail-list-number">{{ $t('personalCenter.gongzuoliuliang') }}：15</div>
            <div class="flex-align-center detail-list-right">
              <div class="lex-align-center btn green">
                <img src="/src/assets/imgs/my/dui@2x.png" alt="">
                <div class="">{{ $t('common.agree') }}</div>
              </div>
              <div class="lex-align-center btn red">
                <img src="/src/assets/imgs/my/quxiao@2x.png" alt="">
                <div class="">{{ $t('common.reject') }}</div>
              </div>
              <div class="lex-align-center btn blue">
                <img src="/src/assets/imgs/my/jilu@2x.png" alt="">
                <div class="">{{ $t('common.viewHomepage') }}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <template #footer>
        <div class="dialog-footer flex-center">
          <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
          <el-button type="primary" class="gradient" @click="dialogVisible = false">
            {{ $t('common.confirm') }}
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useAppStore } from '@/pinia/appStore'
import type { TabsPaneContext } from 'element-plus'
import Pagination from '@/components/Pagination.vue'

import { getWorkflowApplyByUserId, userQuestList, appliList, updateQuestStatus, delectQuest, cancelApply } from '@/api/my.js'

import { useRoute, useRouter } from 'vue-router'

import DGTMessage from '@/utils/message'

import { ElMessageBox } from 'element-plus'

import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const appStore = useAppStore();

const route = useRoute()

const router = useRouter()

const tabs = ref([
  { label: 'personalCenter.publishDemandRecord', name: 0 },
  { label: 'personalCenter.myDemandRecord', name: 1 }
])

const dialogVisible = ref(false)

const list = ref([])
const form = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  activeName: 0
})

const itemData = ref({})

const recordList = ref([])//报名记录

const changeItem = async (item, index, type) => {
  itemData.value = item;
  if (type == 0) {

    let res = await appliList({ questId: item.questId })
    console.log(res)
    recordList.value = res.rows;
    dialogVisible.value = true;
  } else if (type == 1) {
    router.push({ path: `/workflow-trade/workflow-trade-add`, query: { id: item.questId } });
  } else if (type == 2) {
    ElMessageBox.confirm(
      'proxy will permanently delete the file. Continue?',
      'Warning1',
      {
        confirmButtonText: 'OK',
        cancelButtonText: t('common.cancel'),
        type: 'warning',
      }
    )
      .then(async () => {
        let res = await updateQuestStatus({
          questId: item.questId
        })
        if (res.code === 200) {
          getList()
          DGTMessage.success(`${t('common.success')}`)
        }
      })
      .catch(() => {

      })
  } else if (type == 3) {
    ElMessageBox.confirm(
      'proxy will permanently delete the file. Continue?',
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: t('common.cancel'),
        type: 'warning',
      }
    )
      .then(async () => {
        let res = await delectQuest(item.questId)
        if (res.code === 200) {
          getList()
          DGTMessage.success(`${t('common.delete')}${t('common.success')}`)
        }

      })
      .catch(() => {

      })
  } else if (type == 4) {
    ElMessageBox.confirm(
      'proxy will permanently delete the file. Continue?',
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: t('common.cancel'),
        type: 'warning',
      }
    )
      .then(async () => {
        let res = await cancelApply(item.id)
        if (res.code === 200) {
          getList()
          DGTMessage.success(`${t('common.cancel')}${t('common.success')}`)
        }
      })
      .catch(() => {

      })
  }
}

const handleClick = (tab: TabsPaneContext) => {
  list.value = []
  form.value.pageNum = 1;
  form.value.activeName = tab.props.name;
  getList()
}

// 获取列表
const getList = async () => {
  let res = await (form.value.activeName === 0 ? userQuestList(form.value) : getWorkflowApplyByUserId(form.value))

  list.value = res.rows || [];
  form.value.total = res.total;
}

const handlePageChange = (page) => {
  list.value = []
  form.value.pageNum = page;
  getList()
}

onMounted(() => {
  getList()
})


</script>
<style scoped lang="scss">
.demand {
  padding-bottom: 20px;

  div {
    line-height: 1;
  }

  .demand-list {
    li {
      padding: 16px;
      margin-bottom: 16px;
      background: #F5F7FA;
      border-radius: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      .title {
        font-size: 18px;
        font-weight: bold;
        color: #333333;
      }

      .tag {
        padding: 0 12px;
        line-height: 30px;
        color: #FFFFFF;
        font-size: 14px;
        background: #2D71FF;
        border-radius: 4px;
        margin-right: 8px;
      }
      .tag_red {
        background: #E43434;
      }



      .description {
        font-size: 16px;
        color: #666666;
        line-height: 24px;
        margin: 8px 0;
      }

      .info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .info-left {
          display: flex;
          align-items: center;

          .name {
            font-size: 16px;
            margin: 0 8px;
          }

          .date {
            font-size: 14px;
            color: #666666;
          }
        }

        .info-right {
          .btn {
            height: 32px;
            display: flex;
            align-items: center;
            padding: 0px 16px;
            background: #FFFFFF;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 8px;

            img {
              width: 14px;
              height: 14px;
              margin-right: 4px;
            }

            div {
              font-size: 14px;
              color: #2D71FF;
            }

            .red {
              color: #E43434;
            }
          }
        }

      }

      .price {
        font-size: 24px;
        color: #FD5F3C;
      }
    }
  }
}

.content {
  margin-top: 8px;

  .list {
    .li {
      display: flex;
      align-items: center;

      img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }

      margin-left: 8px;

      div {
        font-size: 12px;
      }
    }
  }
}

.detail {
  padding: 16px;
  border-top: 1px solid #EBEEF5;

  .detail-top {
    padding: 16px;
    background: #F5F7FA;
    border-radius: 16px;
    border: 1px solid #FFFFFF;

    .tag {
      padding: 0 12px;
      line-height: 30px;
      font-size: 14px;
      color: #FFFFFF;
      background: #2D71FF;
      border-radius: 4px;
    }
    .tag_red {
        background: #E43434;
      }

    .name {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
      margin-left: 8px;
    }

    .price {
      color: #FD5F3C;
      font-size: 24px;
    }

    .desc {
      margin: 8px 0;
      line-height: 24px;
      font-size: 16px;
      color: #666666;
    }

    .time {
      font-size: 14px;
      color: #666666;
    }
  }

  .detail-txt {
    line-height: 58px;
    font-size: 18px;
    font-weight: bold;
  }

  .detail-list {
    li {
      display: flex;
      padding: 0 16px;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      height: 64px;
      background: #F5F7FA;
      border-radius: 8px;

      &:last-child {
        margin-bottom: 0;
      }

      .detail-list-left {
        div {
          color: #666666;
          font-size: 14px;

          &:nth-child(2) {
            margin: 0 8px;
            font-size: 16px;
            color: #333333;
          }
        }
      }

      .detail-list-number {
        font-size: 14px;
        color: #333333;
      }

      .detail-list-right {
        .btn {
          display: flex;
          margin-left: 8px;
          align-items: center;
          cursor: pointer;
          padding: 0px 16px;
          height: 32px;
          border-radius: 4px;
          font-size: 14px;

          &:hover {
            opacity: 0.7;
          }

          img {
            width: 14px;
            height: 14px;
            margin-right: 4px;
          }
        }

        .green {
          background: #E9F7EF;

          div {
            color: #1FB362;
          }
        }

        .red {

          background: #FCEBEB;

          div {
            color: #E43434;
          }
        }

        .blue {

          background: #EAF0FF;

          div {
            color: #2D71FF;
          }
        }
      }
    }
  }
}
</style>