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">
        <div class="demand-list">
          <div v-for="(item, index) in list" :key="index" @click.stop="toDetail(item)" class="li">
            <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 == null }">{{
                    item.applyStatus == 1 ? $t('workflowTrade.demandStatusSignUping') :
                      $t('workflowTrade.demandStatusEnded') }}</div>
                <div class="title">{{ item.title }}</div>
              </div>
              <div class="price" v-if="item.budgetMin || item.budgetMax">￥{{ item.budgetMin }}-{{ item.budgetMax }}
              </div>
            </div>
            <div class="flex-align-center content" v-if="item.categoryName3">
              <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>
              <div class="flex-align-center list">
                <div class="lis">
                  <img src="/src/assets/imgs/yuangong.png" alt="">
                  <div class="">{{ item.questApplyCount || 0 }}{{ $t('common.renbaoming') }}</div>
                </div>
                <div class="lis">
                  <img src="/src/assets/imgs/rili.png" alt="">
                  <div class="">{{ $t('common.signUpDeadline') }}：{{ item.deadline }}</div>
                </div>
              </div>
            </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.stop="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.stop="changeItem(item, index, 1)">
                      <img src="/src/assets/imgs/my/bianji@2x.png" alt="">
                      <div>{{ $t('common.edit') }}</div>
                    </div>
                    <div class="btn" @click.stop="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.stop="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.stop="changeItem(item, index, 4)">
                  <img src="/src/assets/imgs/my/quxiao@2x.png" alt="">
                  <div class="red">{{ $t('personalCenter.cancelSignUp') }}</div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </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 ?
                $t('workflowTrade.demandStatusSignUping')
                :
                $t('workflowTrade.demandStatusEnded')
              }}</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>
            <div class="flex-align-center list">
              <div class="lis">
                <img src="/src/assets/imgs/yuangong.png" alt="">
                <div class="">{{ itemData.questApplyCount || 0 }}{{ $t('common.renbaoming') }}</div>
              </div>
              <div class="lis">
                <img src="/src/assets/imgs/rili.png" alt="">
                <div class="">{{ $t('common.signUpDeadline') }}：{{ itemData.deadline }}</div>
              </div>
            </div>
          </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>
        <div class="detail-list">
          <div v-for="(item, index) in recordList" :key="index" class="li" :class="{'success':item.applyStatus == 1,'failure':item.applyStatus == 2}">
            <div class="flex-align-center detail-list-left">
              <el-avatar :size="20" :src="item.userAvatar" />
              <div class="">{{ item.applyUserName }}</div>
              <div class="">{{ item.userPhone }}</div>
            </div>
            <div class="flex_1 flex-between">
              <div class="detail-list-number">{{ $t('personalCenter.gongzuoliuliang') }}：{{ item.publishCount }}</div>
            <div class="flex-align-center detail-list-right">
              <template v-if="item.applyStatus == 0">
                <div @click.stop="changeDemand(item, index, 1)" class="lex-align-center btn green">
                  <img src="/src/assets/imgs/my/dui@2x.png" alt="">
                  <div class="">{{ $t('common.agree') }}</div>
                </div>
                <div @click.stop="changeDemand(item, index, 2)" class="lex-align-center btn red">
                  <img src="/src/assets/imgs/my/quxiao@2x.png" alt="">
                  <div class="">{{ $t('common.reject') }}</div>
                </div>
              </template>
              <!-- <div @click="changeDemand(item, index, 3)" class="lex-align-center btn blue">
                <img src="/src/assets/imgs/my/jilu@2x.png" alt="">
                <div class="">{{ $t('common.viewHomepage') }}</div>
              </div> -->
            </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer flex-center">
          <el-button @click.prevent="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
          <el-button type="primary" class="gradient" @click.prevent="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, applyUpdateQuestStatus } 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,
  orderByColumn: 'create_time',
  isAsc: 'desc'
})

const itemData = ref({})

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

// 同意拒绝
const changeDemand = async (item, index, applyStatus) => {
  if (applyStatus == 3) {

  } else {
    let res = await applyUpdateQuestStatus({
      id: item.id,
      applyUserId: item.applyUserId,
      applyStatus
    })
    if (res.code === 200) {
      DGTMessage.success(`${t('common.success')}`)
      // dialogVisible.value = false;
      let result = await appliList({ questId: item.questId });
      if (result.code === 200) {
        recordList.value = result.rows;
      }
    }
  }

}

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

    let res = await appliList({ questId: item.questId })
    if (res.code === 200) {
      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(
      t('personalCenter.jieshuxuqiu') + '?',
      t('common.warning'),
      {
        confirmButtonText: t('common.confirm'),
        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(
      t('personalCenter.shifoushanchu'),
      t('common.warning'),
      {
        confirmButtonText: t('common.confirm'),
        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(
      t('personalCenter.sfqxbm'),
      t('common.warning'),
      {
        confirmButtonText: t('common.confirm'),
        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 toDetail = (item) => {
  if (item.title) {
    router.push({
      path: `/workflow-trade/workflow-trade-detail`,
      query: {
        questId: item.questId,
        metaTitle: item.title
      }
    })
  } else {
    DGTMessage.warning(t('personalCenter.gxxybsc'))
  }

}

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;
      cursor: pointer;
      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 {
    .lis {
      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 {
        width: 40%;
        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;
          }
        }
      }
    }

    .success {
      background: #E9F7EF;
    }

    .failure {
      background: #FCEBEB;
    }
  }
}
</style>