feat(task): 任务中心

src/core/libs/pngs.ts

@@ -5,5 +5,15 @@ import vipBg from '@/assets/pngs/vip-bg.png'
 import treaty from '@/assets/pngs/treaty.png'
 import settled from '@/assets/pngs/settled.png'
 import designer from '@/assets/pngs/designer.png'
+import taskCenterBg from '@/assets/pngs/task-center-bg.png'
 
-export { scheduleCardBg, studyTourItemBg, scheduleBg, vipBg, treaty, settled, designer }
+export {
+  scheduleCardBg,
+  studyTourItemBg,
+  scheduleBg,
+  vipBg,
+  treaty,
+  settled,
+  designer,
+  taskCenterBg,
+}

src/pages/mine/components/tasks-card.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { taskCenterBg } from '@/core/libs/pngs'
+defineProps({
+  customClass: {
+    type: String,
+    default: '',
+  },
+  items: {
+    type: Array as PropType<
+      {
+        title: string
+        score: number
+        completed?: boolean
+      }[]
+    >,
+    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`,
+  },
+})
+</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="({ title, score, completed }, 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" :disabled="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>

src/pages/mine/index.vue

@@ -4,26 +4,16 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import Card from '@/components/card.vue'
 import CardMenu from '@/components/card-menu.vue'
 import SectionHeading from '@/components/section-heading.vue'
 import StartMenuButton from '@/components/start-menu-button.vue'
 import { designer, settled, treaty, vipBg } from '@/core/libs/pngs'
-import {
-  integral,
-  coupon,
-  order,
-  agent,
-  setting,
-  wechat,
-  award,
-  camera,
-  vip,
-} from '@/core/libs/svgs'
+import { integral, coupon, order, agent, setting, vip } from '@/core/libs/svgs'
 import { getMemberUserInfo } from '@/core/libs/requests'
 import { useUserStore } from '@/store'
 import { storeToRefs } from 'pinia'
 import { isEmpty } from 'radash'
+import TasksCard from './components/tasks-card.vue'
 
 const userStore = useUserStore()
 const { isLogined, userInfo } = storeToRefs(userStore)
@@ -59,6 +49,13 @@ const pieces = ref([
     iconSize: 44,
   },
 ])
+const tasks = ref([
+  { title: '到店打卡获取积分', score: 150, completed: true },
+  { title: '到店打卡获取积分', score: 150 },
+  { title: '到店打卡获取积分', score: 150 },
+  { title: '到店打卡获取积分', score: 150 },
+  { title: '到店打卡获取积分', score: 150 },
+])
 const avatar = computed(() =>
   !isEmpty(userInfo.value.avatar) ? userInfo.value.avatar : 'https://via.placeholder.com/72x72',
 )
@@ -184,7 +181,8 @@ onMounted(async () => {
           </div>
         </template>
       </div>
-      <SectionHeading title="和筑巢荟一起共同成长"></SectionHeading>
+      <TasksCard custom-class="my-6" :items="tasks"></TasksCard>
+      <SectionHeading custom-class="my-6" title="和筑巢荟一起共同成长"></SectionHeading>
       <CardMenu :items="pieces" custom-class="grid-cols-2" />
     </view>
   </view>