123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- <route lang="yaml">
- style:
- navigationBarTitleText: 全部任务
- navigationBarBackgroundColor: '#fff'
- </route>
- <script setup lang="ts">
- import Card from '@designer-hub/app/src/components/card.vue'
- const tasks = ref([
- {
- status: 0,
- type: 1,
- name: 'imola',
- brand: 'imola瓷砖',
- start: '2024/06/07',
- end: '2024/06/15',
- targe: 30,
- finished: 22,
- },
- {
- status: 0,
- type: 2,
- name: 'imola',
- brand: 'imola瓷砖',
- start: '2024/06/07',
- end: '2024/06/15',
- targe: 30,
- finished: 22,
- },
- {
- status: 0,
- type: 1,
- name: 'imola',
- brand: 'imola瓷砖',
- start: '2024/06/07',
- end: '2024/06/15',
- targe: 30,
- finished: 22,
- },
- ])
- const types = ref({
- 1: { title: '到店', bg: '', bgClass: 'bg-gradient-to-r from-[#cfe0ff] to-[#e1ecff]' },
- 2: { title: '订单', bg: '', bgClass: 'bg-gradient-to-r from-[#ffe8cf] to-[#fff3e1]' },
- })
- const toDetail = async () => {
- await uni.navigateTo({ url: '/pages/home/tasks/detail/index' })
- }
- </script>
- <template>
- <div class="bg-white rounded-lg shadow flex m-[18px] p-[11px]">
- <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-relaxed">
- 任务积分
- </div>
- <div class="flex-1"></div>
- <div class="text-[#ff2e2e] text-[22px] font-medium font-['DIN'] leading-none">6153</div>
- <div class="w-6 h-6 relative"></div>
- </div>
- <div class="flex-grow flex flex-col gap-4 p-4">
- <template v-for="({ type }, i) of tasks" :key="i">
- <div @click="toDetail()">
- <Card :custom-class="`${types[type].bgClass} p-0`" style="padding: 0">
- <div class="flex p-4 items-center">
- <div
- class="w-[47px] h-[23px] px-1 bg-[#2357e9] rounded border justify-center items-center gap-2.5 inline-flex"
- >
- <div
- class="text-right text-white text-xs font-normal font-['PingFang_SC'] leading-tight"
- >
- 进行中
- </div>
- </div>
- <div class="mx-2.5 text-black/90 text-lg font-normal font-['PingFang_SC'] leading-none">
- {{ types[type].title }}量
- </div>
- <div class="flex-1"></div>
- <div class="mx-1.5 text-black/40 text-xs font-normal font-['PingFang_SC'] leading-none">
- 奖励积分
- </div>
- <div class="text-[#ff2e2e] text-[22px] font-medium font-['DIN'] leading-none">2000</div>
- </div>
- <div class="flex flex-col gap-4 bg-white p-5 rounded-2xl">
- <div>
- <span class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-none">
- 材料商:
- </span>
- <span class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-none">
- imola
- </span>
- </div>
- <div>
- <span class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-none">
- 品牌:
- </span>
- <span class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-none">
- imola瓷砖
- </span>
- </div>
- <div>
- <span class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-none">
- 任务时间:
- </span>
- <span class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-none">
- 2024/06/07-2024/09/16
- </span>
- </div>
- <div class="flex items-center border-t border-t-solid border-t-[#efefef] pt-1.5">
- <div class="text-black/90 text-sm font-normal font-['PingFang SC']">目标 30</div>
- <div class="flex-1"></div>
- <div class="mr-[16px] w-[68px] h-7 px-2.5 py-[3px] rounded-[30px] border border-[#fe5053] justify-center items-center gap-2.5 inline-flex" style="border: 1px solid #fe5053">
- <div class="w-9 text-[#ff2d2d] text-xs font-normal font-['PingFang SC']">不接单</div>
- </div>
- <div
- class="w-[68px] h-7 px-2.5 py-[3px] bg-[#2357e9] rounded-[30px] justify-center items-center gap-2.5 inline-flex"
- >
- <div class="text-white text-xs font-normal font-['PingFang SC']">接单</div>
- </div>
- </div>
- </div>
- </Card>
- </div>
- </template>
- </div>
- </template>
|