init
This commit is contained in:
yixu
312
src/components/TodoList.vue
Normal file
312
src/components/TodoList.vue
Normal file
@@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<div class="home-wrapper" style="z-index: 9;">
|
||||
<img src="../assets/images/todo-bg.png" alt="任务列表背景图">
|
||||
|
||||
<div class="scene-item item-1" @click="closeTodoList">
|
||||
<img src="../assets/images/close-btn.png" alt="关闭按钮">
|
||||
</div>
|
||||
<div class="scene-item item-2" @click="openQiwei($event)">
|
||||
<img src="../assets/images/add-wx.png" alt="去添加">
|
||||
</div>
|
||||
<div class="scene-item item-3" @click="handleScan($event)">
|
||||
<img src="../assets/images/scan-code.png" alt="去扫码">
|
||||
</div>
|
||||
<div class="scene-item item-4" @click="openHaibao($event)">
|
||||
<img src="../assets/images/share-link.png" alt="去分享">
|
||||
</div>
|
||||
</div>
|
||||
<ModalTransition class="todolist" :show="show">
|
||||
<div class="todolist-wrapper">
|
||||
<div class="btn-group">
|
||||
<div class="btn-share" :class="globalStore.invitees >= globalStore.MAX_INVITE_DAILY && 'has'"
|
||||
@click="openHaibao($event)"></div>
|
||||
<div class="btn-qiwei" :class="globalStore.followed_official && 'has'" @click="openQiwei($event)"></div>
|
||||
<div class="btn-scan" :class="globalStore.cap_scan >= globalStore.MAX_CAP_SCAN && 'has'"
|
||||
@click="handleScan($event)"></div>
|
||||
<div class="btn-peifang" :class="globalStore.game_chances_view_recipes >= globalStore.MAX_VIEW_RECIPES_DAILY && 'has'" @click="openPeifang($event)"></div>
|
||||
</div>
|
||||
<div class="close" @click="$emit('close')"></div>
|
||||
</div>
|
||||
<div class="fullsection" v-show="haibaoShow">
|
||||
<div class="haibao">
|
||||
<img :src="haibaoUrl" alt="">
|
||||
<div class="close" @click="haibaoShow = false"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fullsection" v-show="qiweiShow">
|
||||
<div class="qiwei">
|
||||
<img src="../assets/images/qiwei-bg.webp" alt="">
|
||||
<div class="close" @click="qiweiShow = false"></div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalTransition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
import { globalStore } from "@/globalstore";
|
||||
import ModalTransition from "./ModalTransition.vue"
|
||||
import { Storage, generateQR, isWeixin, isMiniPage } from "../libs/utils"
|
||||
import Haibao from "@/libs/haibao"
|
||||
import bg from "../assets/images/haibao-bg.webp"
|
||||
const props = defineProps({
|
||||
show: true,
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close','open'])
|
||||
const shareShow = ref(false)
|
||||
const qiweiShow = ref(false)
|
||||
const haibaoShow = ref(false)
|
||||
const haibaoUrl = ref('')
|
||||
|
||||
const handleHaibao = async () => {
|
||||
if (haibaoUrl.value) {
|
||||
return
|
||||
}
|
||||
const loading = weui.loading()
|
||||
const infos = Storage.get("userinfos")
|
||||
const haibao = new Haibao(1080, 2160)
|
||||
const qrcode = await generateQR(`fromid=${infos.invite_code}&org_id=${infos.org_id}`)
|
||||
haibao.add(bg, 0, 0)
|
||||
haibao.add(qrcode, 802, 1908)
|
||||
haibao.generate().then(url => {
|
||||
haibaoUrl.value = url
|
||||
loading.hide()
|
||||
}).catch(err => {
|
||||
weui.alert("海报生成失败，请重新生成")
|
||||
})
|
||||
}
|
||||
const openQiwei = (e) => {
|
||||
const target = e.currentTarget
|
||||
|
||||
if (target.classList.contains("has")) {
|
||||
return
|
||||
}
|
||||
|
||||
qiweiShow.value = true
|
||||
}
|
||||
const openHaibao = (e) => {
|
||||
const target = e.currentTarget
|
||||
|
||||
if (target.classList.contains("has")) {
|
||||
return
|
||||
}
|
||||
haibaoShow.value = true
|
||||
handleHaibao()
|
||||
}
|
||||
const openPeifang = (e) => {
|
||||
const target = e.currentTarget
|
||||
|
||||
if (target.classList.contains("has")) {
|
||||
return
|
||||
}
|
||||
emit('open',{ type: 'peifang' })
|
||||
}
|
||||
const handleScan = (e) => {
|
||||
const target = e.currentTarget
|
||||
|
||||
if (target.classList.contains("has")) {
|
||||
return
|
||||
}
|
||||
if (!(isWeixin() || isMiniPage())) {
|
||||
weui.alert("请使用微信打开进行扫码")
|
||||
return
|
||||
}
|
||||
|
||||
wx.scanQRCode({
|
||||
needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
|
||||
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
|
||||
fail (err) {
|
||||
weui.alert(err.errMsg)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
.home-wrapper img {
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.scene-item {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s ease;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 3px solid transparent;
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.scene-item:hover {
|
||||
transform: scale(1.05);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.scene-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item-1 {
|
||||
width: 40px;
|
||||
bottom: 54%;
|
||||
right: 3%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.item-1 {
|
||||
width: 40px;
|
||||
bottom: 54%;
|
||||
right: 3%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.item-2 {
|
||||
width: 110px;
|
||||
bottom: 36%;
|
||||
right: 6%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.item-3 {
|
||||
width: 110px;
|
||||
bottom: 25%;
|
||||
right: 6%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.item-4 {
|
||||
width: 110px;
|
||||
bottom: 14%;
|
||||
right: 6%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.qiwei {
|
||||
position: relative;
|
||||
width: 71.851852vw;
|
||||
height: 89.259259vw;
|
||||
}
|
||||
|
||||
.qiwei img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fullsection {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
}
|
||||
|
||||
.haibao {
|
||||
position: relative;
|
||||
width: 65.37037vw;
|
||||
height: 119.444444vw;
|
||||
background-image: url("../assets/images/haibao-cover.webp");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
|
||||
.haibao .close {
|
||||
right: -10vw;
|
||||
}
|
||||
|
||||
.qiwei .close {
|
||||
right: -10vw;
|
||||
}
|
||||
|
||||
.haibao img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
width: 8.148148vw;
|
||||
height: 8.055556vw;
|
||||
right: 5vw;
|
||||
top: 0;
|
||||
background-image: url("../assets/images/icon-close.webp");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.todolist-wrapper {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 136.018519vw;
|
||||
background-image: url("../assets/images/todo-bg.webp");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
position: absolute;
|
||||
right: 6vw;
|
||||
top: 46vw;
|
||||
width: 23.981481vw;
|
||||
height: 84vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.btn-group div {
|
||||
width: 23.981481vw;
|
||||
height: 9.074074vw;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.btn-share {
|
||||
background-image: url("../assets/images/btn-share.webp");
|
||||
}
|
||||
|
||||
.btn-share.has {
|
||||
background-image: url("../assets/images/btn-max.webp");
|
||||
}
|
||||
|
||||
.btn-qiwei {
|
||||
background-image: url("../assets/images/btn-qiwei.webp");
|
||||
}
|
||||
|
||||
.btn-qiwei.has {
|
||||
background-image: url("../assets/images/btn-added.webp");
|
||||
}
|
||||
|
||||
.btn-scan {
|
||||
background-image: url("../assets/images/btn-scan.webp");
|
||||
}
|
||||
.btn-scan.has {
|
||||
background-image: url("../assets/images/btn-max.webp");
|
||||
}
|
||||
.btn-peifang {
|
||||
background-image: url("../assets/images/btn-look.webp");
|
||||
}
|
||||
.btn-peifang.has {
|
||||
background-image: url("../assets/images/btn-max.webp");
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user