From c80299bdc03c6e5a390303fb50a7c618bba5ef3e Mon Sep 17 00:00:00 2001
From: "1960116313@qq.com" <1960116313@qq.com>
Date: Sun, 21 Jan 2024 16:30:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E5=8E=86=E5=8F=B2?=
=?UTF-8?q?=E7=AD=BE=E5=88=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 1 +
pnpm-lock.yaml | 3 +
src/components/AppRecharge/index.vue | 8 +-
src/views/task/components/BasicTask/index.vue | 15 +-
src/views/task/components/HisTory/index.ts | 5 +
src/views/task/components/HisTory/index.vue | 257 ++++++++++++++++++
.../task/components/InviteForm/index.vue | 17 +-
7 files changed, 289 insertions(+), 17 deletions(-)
create mode 100644 src/views/task/components/HisTory/index.ts
create mode 100644 src/views/task/components/HisTory/index.vue
diff --git a/package.json b/package.json
index 692cfc6..c16f472 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f86dee7..e524664 100644
--- a/pnpm-lock.yaml
+++ b/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
diff --git a/src/components/AppRecharge/index.vue b/src/components/AppRecharge/index.vue
index 23e091b..0fc6aa9 100644
--- a/src/components/AppRecharge/index.vue
+++ b/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: '';
diff --git a/src/views/task/components/BasicTask/index.vue b/src/views/task/components/BasicTask/index.vue
index a1efe3f..8a2e1c1 100644
--- a/src/views/task/components/BasicTask/index.vue
+++ b/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">
diff --git a/src/views/task/components/HisTory/index.ts b/src/views/task/components/HisTory/index.ts
new file mode 100644
index 0000000..d2f89ae
--- /dev/null
+++ b/src/views/task/components/HisTory/index.ts
@@ -0,0 +1,5 @@
+import HisTory from './index.vue'
+
+export {
+ HisTory,
+}
diff --git a/src/views/task/components/HisTory/index.vue b/src/views/task/components/HisTory/index.vue
new file mode 100644
index 0000000..c9f9f2a
--- /dev/null
+++ b/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>
diff --git a/src/views/task/components/InviteForm/index.vue b/src/views/task/components/InviteForm/index.vue
index 675710b..edd3a4d 100644
--- a/src/views/task/components/InviteForm/index.vue
+++ b/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>