designer-hub/packages/app/src/pages-sub/mine/components/tasks-card.vue

<script setup lang="ts">
import { Task } from '../../../core/libs/models'
import { taskCenterBg } from '../../../core/libs/pngs'
import { useRouter } from '../../../core/utils/router'
import { usePermissions } from '@/composables/permissions'

const { clickByPermission } = usePermissions()
const router = useRouter()
defineProps({
  customClass: {
    type: String,
    default: '',
  },
  items: {
    type: Array as PropType<(Task & { btnProps: any })[]>,
    default: () => [],
  },
})
const styles = ref({
  header: {
    width: '100%',
    height: '60px',
    background: `url(${taskCenterBg}) -9px -9px`,
  },
  content: {
    background: `url(${taskCenterBg}) -9px -69px no-repeat`,
  },
  main: {
    background: `url(${taskCenterBg}) -9px -9px`,
  },
})
const taskExtends = ref([
  {
    id: 1,
    action: () => router.push('/pages-sub/publish/moment/index?circleType=1'),
    completed: false,
  },
])
const taskExtendsById = computed(() =>
  taskExtends.value.reduce((acc, item) => {
    acc[item.id] = item
    return acc
  }, {}),
)
onMounted(async () => {})
</script>
<template>
  <view class="relative w-full box-border">
    <view class="relative h-full mx--2.5 mb--6 mt--1 box-border">
      <wd-img :width="'100%'" :height="'100%'" :src="taskCenterBg" mode="widthFix"></wd-img>
    </view>
    <view class="absolute left-0 right-0 top-1 bottom-6 z-1 p-3.5">
      <view class="w-full h-full flex flex-col justify-between">
        <div class="text-start text-black text-lg font-normal font-['PingFang_SC'] leading-normal">
          任务中心
        </div>
        <div class="flex-grow mt-4 overflow-auto">
          <template v-for="({ taskKey, taskValue, status, id, btnProps }, i) in items" :key="i">
            <div class="flex items-center my-6">
              <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
                {{ taskKey }}
              </div>
              <div
                v-if="Number(taskValue) !== 0"
                class="ml-1 text-[#dc753a] text-xs font-normal font-['PingFang_SC'] leading-normal"
              >
                ＋{{ taskValue }}积分
              </div>
              <div class="flex-1"></div>
              <wd-button
                type="info"
                plain
                size="small"
                :disabled="btnProps?.disabled"
                @click="clickByPermission('task', () => btnProps?.onClick())"
              >
                {{ btnProps?.content }}
                <!-- {{ taskExtendsById[id]?.completed ? '已完成' : '去完成' }} -->
              </wd-button>
            </div>
          </template>
        </div>
      </view>
    </view>
  </view>
  <!-- <div>
    <div :style="styles.header">1</div>
    <div :style="styles.content" class="p-3.5">
      <template v-for="({ title, score }, i) in items" :key="i">
        <div class="flex items-center my-6">
          <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
            {{ title }}
          </div>
          <div class="ml-1 text-[#dc753a] text-xs font-normal font-['PingFang_SC'] leading-normal">
            ＋{{ score }}积分
          </div>
          <div class="flex-1"></div>
          <wd-button type="info" plain size="small">去完成</wd-button>
        </div>
      </template>
    </div>
    <div></div>
  </div> -->
  <!-- <div class="card" :style="styles.main">
    <div class="card-content">
      <h2>任务中心</h2>
      <ul>
        <li>每日发布圈子获取积分</li>
        <li>到店打卡获取积分</li>
        <li>到店打卡获取积分</li>
        <li>到店打卡获取积分</li>
        <li>到店打卡获取积分</li>
        <li>到店打卡获取积分</li>
        <li>到店打卡获取积分</li>
        <li>到店打卡获取积分</li>
        <li>到店打卡获取积分</li>
        <li>到店打卡获取积分</li>
        <li>到店打卡获取积分</li>
        <li>到店打卡获取积分</li>
        <li>到店打卡获取积分</li>
        <li>到店打卡获取积分</li>
        <li>到店打卡获取积分</li>
      </ul>
    </div>
  </div> -->
</template>

<style scoped>
.card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-height: 200px;
  padding: 20px;
  /* background-image: url('your-image-path'); */
  /* 背景图片路径 */
  background-repeat: no-repeat;
  background-position: top center; /* 背景图片头部固定 */
  background-size: auto; /* 固定背景图片的宽度，不拉伸 */
  border-radius: 10px;
}

.card-content {
  flex-grow: 1;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
  border-radius: 10px;
}
</style>