YY_MP_REFACTOR/src/pages-mine/points-rule/index.vue

<template>
  <page-meta :page-style="descVisible ? 'overflow:hidden;' : 'overflow:visible;'" />

  <view class="rules-box">
    <image class="rules-top-img" :src="topImgBg" mode="aspectFill" />

    <view class="enterprise-switch" @click="showEnterprisePicker">
      <view class="enterprise-switch__icon">
        <wd-icon name="loop" size="34rpx" />
      </view>
      <text>切换企业</text>
    </view>

    <wd-picker
      v-model:visible="pickerShow"
      title="切换企业"
      :columns="enterpriseList"
      label-key="label"
      value-key="value"
      root-portal
      @confirm="handleEnterpriseConfirm"
    />

    <view class="table-box">
      <view class="table-header">
        <view class="table-tab table-tab--left">获取途径</view>
        <view class="table-tab">获得积分</view>
      </view>

      <view class="table-con">
        <view class="table-bg">
          <view v-if="loading" class="loading">
            <view class="loading__item" />
            <view class="loading__item" />
            <view class="loading__item" />
          </view>

          <template v-else-if="sections.length">
            <view v-for="section in sections" :key="section.title" class="section">
              <view class="section-title">{{ section.title }}</view>

              <view v-for="item in section.items" :key="item.id" class="table-item">
                <view class="item-left">
                  <text class="task-name">{{ item.taskTypeName }}</text>

                  <image
                    class="tips"
                    :src="tipsIcon"
                    mode="aspectFit"
                    @click.stop="openDesc(item)"
                  />
                </view>

                <text class="score-text">+{{ formatThousands(item.score) || '0' }}积分</text>
              </view>
            </view>
          </template>

          <view v-else class="empty">暂无数据</view>
        </view>
      </view>
    </view>

    <wd-popup
      v-model="descVisible"
      position="bottom"
      root-portal
      lock-scroll
      :safe-area-inset-bottom="true"
      custom-style="border-radius: 40rpx 40rpx 0 0;"
    >
      <view class="info">
        <view class="title">
          <text>{{ activeTask?.taskTypeName || '任务说明' }}</text>
          <wd-icon name="close" size="34rpx" @click="descVisible = false" />
        </view>

        <view class="list">
          <view class="tit">定义：</view>
          <view class="cont">{{ activeDesc }}</view>
        </view>

        <view v-if="activeTask?.taskRemark" class="list">
          <view class="tit">任务要求：</view>
          <view class="cont">{{ activeTask.taskRemark }}</view>
        </view>

        <view class="btn" @click="descVisible = false">知道了</view>
      </view>
    </wd-popup>
  </view>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'

import config from '@/config'

import { getDictTypeApi } from '@/services/modules/common'
import type { DictItem } from '@/services/modules/common/type'
import {
  getTaskTypeDeptListApi,
  getTaskTypeListByRuleIdApi,
} from '@/services/modules/mine/pointsRule'
import type {
  TaskTypeDeptListResponse,
  TaskTypeListByRuleIdResponse,
} from '@/services/modules/mine/pointsRule/type'

type TaskRuleItem = TaskTypeListByRuleIdResponse[string][number]

const topImgBg = `${config.imgHost}home-top-bg2.png`
const tipsIcon = 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/tips.png'

const selectedRuleId = ref('')
const pickerShow = ref(false)
const loading = ref(false)
const descVisible = ref(false)

const enterpriseList = ref<TaskTypeDeptListResponse>([])
const dictList = ref<DictItem[]>([])
const sections = ref<Array<{ title: string; items: TaskRuleItem[] }>>([])
const activeTask = ref<TaskRuleItem>()

const activeDesc = computed(() => {
  const taskName = activeTask.value?.taskTypeName?.trim()

  if (!taskName) return '暂无定义'

  const dict = dictList.value.find((item) => {
    return [item.label, item.value, item.externalValue].includes(taskName)
  })

  return dict?.description || dict?.remarks || '暂无定义'
})

onMounted(() => {
  initPage()
})

const initPage = async () => {
  await Promise.all([loadEnterpriseList(), loadDictList()])

  const firstRuleId = enterpriseList.value[0]?.value

  if (!firstRuleId) return

  selectedRuleId.value = firstRuleId
  await loadRules(firstRuleId)
}

const loadEnterpriseList = async () => {
  try {
    const res = await getTaskTypeDeptListApi()
    enterpriseList.value = res.data
  } catch (error) {
    console.log(error)
    enterpriseList.value = []
  }
}

const loadDictList = async () => {
  try {
    const res = await getDictTypeApi('task_type_desc')
    dictList.value = res.data
  } catch (error) {
    console.log(error)
    dictList.value = []
  }
}

const loadRules = async (ruleId: string) => {
  if (!ruleId) {
    sections.value = []
    return
  }

  loading.value = true

  try {
    const res = await getTaskTypeListByRuleIdApi(ruleId)
    sections.value = Object.entries(res.data)
      .map(([title, items]) => ({ title, items }))
      .filter((section) => section.items.length > 0)
  } catch (error) {
    console.log(error)
    sections.value = []
  } finally {
    loading.value = false
  }
}

const showEnterprisePicker = () => {
  if (!enterpriseList.value.length) {
    uni.showToast({
      title: '暂无可切换企业',
      icon: 'none',
    })
    return
  }

  pickerShow.value = true
}

const handleEnterpriseConfirm = async (event: { value: string | string[] }) => {
  const ruleId = Array.isArray(event.value) ? event.value[0] : event.value

  if (!ruleId) return

  selectedRuleId.value = ruleId
  activeTask.value = undefined
  descVisible.value = false

  await loadRules(ruleId)
}

const openDesc = (task: TaskRuleItem) => {
  activeTask.value = task
  descVisible.value = true
}

</script>

<style lang="scss" scoped>
.rules-box {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: #019cd0;
}

.rules-top-img {
  display: block;
  width: 750rpx;
  height: 526rpx;
}

.enterprise-switch {
  position: fixed;
  z-index: 99;
  right: 0;
  top: 360rpx;
  display: flex;
  align-items: center;
  height: 76rpx;
  padding: 0 22rpx 0 18rpx;
  box-sizing: border-box;
  border-radius: 999rpx 0 0 999rpx;
  color: #ffffff;
  background: linear-gradient(135deg, #2f8cff 0%, #13c2c2 100%);
  box-shadow:
    0 12rpx 28rpx rgba(19, 129, 210, 0.32),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.32);

  text {
    font-size: 28rpx;
    font-weight: 700;
    line-height: 76rpx;
    white-space: nowrap;
  }
}

.enterprise-switch__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46rpx;
  height: 46rpx;
  margin-right: 10rpx;
  border-radius: 50%;
  color: #2f8cff;
  background: rgba(255, 255, 255, 0.96);
}

.table-box {
  min-height: calc(100vh - 526rpx);
  background: #019cd0;
}

.table-header {
  display: flex;
  align-items: center;
  height: 120rpx;
}

.table-tab {
  width: 50%;
  color: #ffffff;
  font-size: 38rpx;
  font-weight: 800;
  line-height: 120rpx;
  text-align: center;
  letter-spacing: 1rpx;
  text-shadow: 0 4rpx 12rpx rgba(0, 72, 120, 0.2);
}

.table-tab--left {
  border-right: 1rpx solid rgba(255, 255, 255, 0.78);
}

.table-con {
  padding: 0 26rpx 50rpx;
}

.table-bg {
  min-height: 420rpx;
  padding: 46rpx;
  border-radius: 18rpx;
  background: linear-gradient(180deg, rgba(241, 253, 255, 0.96) 0%, #ffffff 38%), #ffffff;
  box-shadow:
    inset 0 8rpx 54rpx rgba(110, 219, 255, 0.42),
    0 18rpx 36rpx rgba(0, 96, 140, 0.12);
}

.section + .section {
  margin-top: 56rpx;
  padding-top: 42rpx;
  border-top: 1rpx solid rgba(104, 193, 228, 0.28);
}

.section-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #4f3a9f;
  font-size: 34rpx;
  font-weight: 800;
  line-height: 46rpx;
}

.section-title::before {
  content: '';
  width: 10rpx;
  height: 30rpx;
  margin-right: 14rpx;
  border-radius: 999rpx;
  background: linear-gradient(180deg, #24c6dc 0%, #514a9d 100%);
}

.table-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32rpx;
  margin-left: 32rpx;
  color: #5f4b8b;
  font-size: 32rpx;
  line-height: 44rpx;
}

.item-left {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
}

.task-name {
  min-width: 0;
  overflow: hidden;
  color: #5b4b8a;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tips {
  flex: none;
  width: 36rpx;
  height: 36rpx;
  margin-left: 10rpx;
}

.score-text {
  flex: none;
  min-width: 172rpx;
  margin-left: 24rpx;
  color: #0b8fc8;
  font-size: 32rpx;
  font-weight: 800;
  line-height: 44rpx;
  text-align: right;
  text-shadow: 0 4rpx 12rpx rgba(11, 143, 200, 0.12);
}

.loading {
  padding: 20rpx 0;
}

.loading__item {
  height: 72rpx;
  margin-top: 24rpx;
  border-radius: 12rpx;
  background: linear-gradient(90deg, #eff9fd 0%, #e0f5fb 50%, #f7fdff 100%);
}

.empty {
  padding: 80rpx 0;
  color: #999999;
  font-size: 28rpx;
  text-align: center;
}

.info {
  position: relative;
  padding: 30rpx;
  background: #ffffff;
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 60rpx;

  text {
    color: #000000;
    font-size: 36rpx;
    font-weight: 600;
  }
}

.list {
  margin: 10rpx 0;
}

.tit {
  margin-bottom: 10rpx;
  color: #333333;
  font-size: 32rpx;
}

.cont {
  min-height: 5vh;
  margin-bottom: 60rpx;
  color: #666666;
  font-size: 24rpx;
  line-height: 42rpx;
}

.btn {
  height: 80rpx;
  margin-top: 40rpx;
  color: #333333;
  font-size: 30rpx;
  line-height: 80rpx;
  text-align: center;
  background: #f1f1f1;
}
</style>