Browse Source

feat:新增历史签到

dxj
杜贤金 1 year ago
parent
commit
c80299bdc0
  1. 1
      package.json
  2. 3
      pnpm-lock.yaml
  3. 8
      src/components/AppRecharge/index.vue
  4. 15
      src/views/task/components/BasicTask/index.vue
  5. 5
      src/views/task/components/HisTory/index.ts
  6. 257
      src/views/task/components/HisTory/index.vue
  7. 17
      src/views/task/components/InviteForm/index.vue

1
package.json

@ -23,6 +23,7 @@
"axios": "^1.6.5",
"clipboard-copy": "^4.0.1",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.10",
"lodash-es": "^4.17.21",
"md-editor-v3": "^4.11.0",
"mqtt": "^5.3.4",

3
pnpm-lock.yaml

@ -23,6 +23,9 @@ dependencies:
crypto-js:
specifier: ^4.2.0
version: 4.2.0
dayjs:
specifier: ^1.11.10
version: 1.11.10
lodash-es:
specifier: ^4.17.21
version: 4.17.21

8
src/components/AppRecharge/index.vue

@ -10,6 +10,8 @@ import { useRechargeStore } from '@/store/moules/rechareStore'
const rechargeStore = useRechargeStore()
const carouselRef = ref()
//
const activeTab = ref(0)
function getType() {
goodsType().then((res) => {
console.log(res)
@ -19,6 +21,7 @@ getType()
//
function handleClose() {
rechargeStore.rechargeClose()
activeTab.value = 0
}
//
const tabs = ref([
@ -28,8 +31,7 @@ const tabs = ref([
{ title: '年套餐', active: false },
{ title: '至尊礼遇卡', active: false },
])
//
const activeTab = ref(0)
const items = ref(['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8'])
//
@ -632,7 +634,7 @@ function onNextClick() {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
position: relative;
transition: all 0.3s ease;
transition: all 0.3s ease-out;
}
.tab:not(:last-child)::after {
content: '';

15
src/views/task/components/BasicTask/index.vue

@ -1,7 +1,8 @@
<script lang="ts" setup>
import { ref } from 'vue'
import handleAck from 'mqtt/lib/handlers/ack'
import { Popover } from 'ant-design-vue'
import { InviteForm } from '../InviteForm/index'
import { HisTory } from '../HisTory/index'
import History from '@/assets/images/task/history.png'
import unclaimed from '@/assets/images/task/dlq.png'
import dot from '@/assets/images/task/dot.png'
@ -86,9 +87,15 @@ function handleInvite() {
</div>
<div class="historyBox">
<img class="historyImg" :src="History" alt="">
<div class="historyName">
历史
</div>
<Popover placement="bottomRight" trigger="click">
<template #content>
<HisTory />
</template>
<div class="historyName">
历史
</div>
</Popover>
</div>
</div>
<div class="bottom">

5
src/views/task/components/HisTory/index.ts

@ -0,0 +1,5 @@
import HisTory from './index.vue'
export {
HisTory,
}

257
src/views/task/components/HisTory/index.vue

@ -0,0 +1,257 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import { Button, Calendar } from 'ant-design-vue'
import {
LeftOutlined,
RightOutlined,
} from '@ant-design/icons-vue'
const data = ref(dayjs())
const datesData = ref<any>([])
const month = ref(data.value.month() + 1)
//
function changeMonth(type: number) {
if (type > 0) {
const tempDate = dayjs(data.value).add(1, 'month')
if (tempDate.isAfter(dayjs(), 'month')) {
return
}
data.value = tempDate
}
else {
data.value = dayjs(data.value).subtract(1, 'month')
}
month.value = data.value.month() + 1
}
//
function format(val: string | number | dayjs.Dayjs | Date | null | undefined) {
const newVal = dayjs(val).format('YYYY年MM月')
return newVal
}
// 1 2 3 return
const getCellTypeClass = function (value: { $D: string | number }) {
const data = datesData.value[value.$D]
if (!data) {
return 'future-date'
}
switch (data.type) {
case 1:
return 'current-date'
case 2:
return 'past-date'
case 3:
return 'future-date'
}
}
onMounted(async () => {
// fetchDatesData()
datesData.value = [
{
num: 10,
type: 1,
},
{
num: 1,
type: 1,
},
{
num: 1,
type: 2,
},
{
num: 10,
type: 2,
},
{
num: 1,
type: 1,
},
{
num: 1,
type: 2,
},
{
num: 1,
type: 2,
},
{
num: 1,
type: 1,
},
{
num: 1,
type: 2,
},
{
num: 1,
type: 2,
},
{
num: 10,
type: 1,
},
{
num: 1,
type: 1,
},
{
num: 1,
type: 1,
},
{
num: 1,
type: 2,
},
{
num: 10,
type: 2,
},
{
num: 1,
type: 1,
},
{
num: 1,
type: 2,
},
{
num: 1,
type: 2,
},
{
num: 1,
type: 1,
},
{
num: 1,
type: 2,
},
{
num: 1,
type: 2,
},
{
num: 10,
type: 3,
},
]
})
</script>
<template>
<div class="haitoryBox">
<Calendar
v-model:value="data"
:fullscreen="false"
>
<template #headerRender="{ value }">
<div class="header">
<Button type="link" style="margin-right: 8px;color: #B3B6BB;" @click="changeMonth(-1)">
<LeftOutlined />
</Button>
<span>{{ format(value) }}</span>
<Button type="link" style="margin-left: 8px;color: #B3B6BB;" @click="changeMonth(1)">
<RightOutlined />
</Button>
</div>
</template>
<!-- :class="getDateClass(value)" -->
<template #dateFullCellRender="{ current: value }">
<div v-if="value.month() === data.month() && value.year() === data.year()">
<div class="cellBox">
<div class="cellItem" :class="getCellTypeClass(value)">
<div class="count">
{{ datesData[value.$D]?.num ? datesData[value.$D]?.num : "1" }}点数
</div>
</div>
<div v-if="dayjs(value).isSame(dayjs(), 'day') && datesData[value.$D]?.type === 3 " class="getbtn">
领取
</div>
<div v-else class="monthday">
{{ month }}.{{ value.date() }}
</div>
</div>
</div>
</template>
</Calendar>
</div>
</template>
<style scoped lang="scss">
.haitoryBox {
width: 30vw;
.header {
width: 97%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.cellBox {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.getbtn {
width: 35px;
height: 14px;
background: linear-gradient(180deg, #ffb33d 0%, #ff9b00 100%);
border-radius: 11px;
font-size: 10px;
color: white;
margin-top: 1px;
}
.monthday {
width: 35px;
height: 14px;
font-size: 11px;
}
.cellItem {
width: 40px;
height: 50px;
&.future-date {
width: 40px;
height: 50px;
background-image: url(@/assets/images/task/dlq.png);
background-size: 100% 100%;
}
&.past-date {
width: 40px;
height: 50px;
background-image: url(@/assets/images/task/wlq.png);
background-size: 100% 100%;
}
&.current-date {
width: 40px;
height: 50px;
background-image: url(@/assets/images/task/ylq.png);
background-size: 100% 100%;
}
&.current-date2 {
width: 100px;
height: 50px;
background-image: url(@/assets/images/task/ylq.png);
background-size: 100% 100%;
}
.count {
font-size: 9px;
font-family: PingFang-SC, PingFang-SC;
font-weight: 500;
color: #ff9b00;
text-align: center;
font-weight: bold;
padding-top: 3px;
}
}
}
}
</style>

17
src/views/task/components/InviteForm/index.vue

@ -38,13 +38,9 @@ function copyText() {
message.success({
content: () => '复制成功',
class: 'message-class',
})
//
})
// .catch(() => {
// console.log('Failed to copy!')
// //
// })
}
</script>
@ -88,9 +84,13 @@ function copyText() {
</template>
<style scoped lang="scss">
.modal-mask {
position: fixed;
.message-class {
position: relative;
z-index: 9999;
}
.modal-mask {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
@ -215,7 +215,4 @@ function copyText() {
.modal-leave-from {
opacity: 1;
}
:deep(.message-class) {
z-index: 200;
}
</style>

Loading…
Cancel
Save