Compare commits
2 Commits
3d2d20dd5f
...
9d5b9b6812
| Author | SHA1 | Date | |
|---|---|---|---|
|
9d5b9b6812 | ||
|
|
67684572da |
@@ -57,7 +57,8 @@
|
|||||||
"usingComponents" : true
|
"usingComponents" : true
|
||||||
},
|
},
|
||||||
"mp-alipay" : {
|
"mp-alipay" : {
|
||||||
"usingComponents" : true
|
"usingComponents" : true,
|
||||||
|
"appid" : "2021006125616610"
|
||||||
},
|
},
|
||||||
"mp-baidu" : {
|
"mp-baidu" : {
|
||||||
"usingComponents" : true
|
"usingComponents" : true
|
||||||
|
|||||||
16
pages.json
16
pages.json
@@ -26,6 +26,14 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/avatar/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "新春头像挂饰",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/detail/index",
|
"path": "pages/detail/index",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -33,6 +41,14 @@
|
|||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/fortune/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "新年运势",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
|
|||||||
392
pages/avatar/index.vue
Normal file
392
pages/avatar/index.vue
Normal file
@@ -0,0 +1,392 @@
|
|||||||
|
<template>
|
||||||
|
<view class="avatar-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||||||
|
<view class="nav-bar">
|
||||||
|
<view class="back" @tap="goBack">‹</view>
|
||||||
|
<text class="nav-title-left">新春头像挂饰</text>
|
||||||
|
</view>
|
||||||
|
<view class="preview-card">
|
||||||
|
<view class="preview-square">
|
||||||
|
<image class="avatar-img" :src="currentAvatar" mode="aspectFill" />
|
||||||
|
<image
|
||||||
|
v-if="selectedFrame"
|
||||||
|
class="frame-img"
|
||||||
|
:src="selectedFrame"
|
||||||
|
mode="aspectFill"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
v-if="selectedDecor"
|
||||||
|
class="decor-img"
|
||||||
|
:src="selectedDecor"
|
||||||
|
mode="aspectFit"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<text class="preview-tip">实时预览效果</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="quick-actions">
|
||||||
|
<button class="btn wechat" @tap="useWeChatAvatar">使用微信头像</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="section">
|
||||||
|
<view class="section-header">
|
||||||
|
<text class="section-title">系统推荐头像</text>
|
||||||
|
</view>
|
||||||
|
<scroll-view scroll-x class="avatar-scroll" show-scrollbar="false">
|
||||||
|
<view class="avatar-list">
|
||||||
|
<view
|
||||||
|
v-for="(item, i) in systemAvatars"
|
||||||
|
:key="i"
|
||||||
|
class="avatar-card"
|
||||||
|
:class="{ active: currentAvatar === item }"
|
||||||
|
@tap="currentAvatar = item"
|
||||||
|
>
|
||||||
|
<image :src="item" class="avatar-thumb" mode="aspectFill" />
|
||||||
|
<view v-if="currentAvatar === item" class="check">✔</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="tabs">
|
||||||
|
<view
|
||||||
|
class="tab"
|
||||||
|
:class="{ active: activeTab === 'frame' }"
|
||||||
|
@tap="activeTab = 'frame'"
|
||||||
|
>头像框</view
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="tab"
|
||||||
|
:class="{ active: activeTab === 'decor' }"
|
||||||
|
@tap="activeTab = 'decor'"
|
||||||
|
>挂饰配件</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="activeTab === 'frame'" class="grid">
|
||||||
|
<view
|
||||||
|
v-for="(frame, i) in frames"
|
||||||
|
:key="i"
|
||||||
|
class="grid-item"
|
||||||
|
:class="{ active: selectedFrame === frame }"
|
||||||
|
@tap="selectedFrame = frame"
|
||||||
|
>
|
||||||
|
<image :src="frame" class="grid-img" mode="aspectFill" />
|
||||||
|
<view v-if="selectedFrame === frame" class="check">✔</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-else class="grid">
|
||||||
|
<view
|
||||||
|
v-for="(decor, i) in decors"
|
||||||
|
:key="i"
|
||||||
|
class="grid-item"
|
||||||
|
:class="{ active: selectedDecor === decor }"
|
||||||
|
@tap="selectedDecor = decor"
|
||||||
|
>
|
||||||
|
<image :src="decor" class="grid-img" mode="aspectFit" />
|
||||||
|
<view v-if="selectedDecor === decor" class="check">✔</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="bottom-actions">
|
||||||
|
<button class="btn primary" @tap="saveAndUse">保存并使用</button>
|
||||||
|
<button class="btn secondary" @tap="share">分享</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<canvas
|
||||||
|
canvas-id="avatarCanvas"
|
||||||
|
class="hidden-canvas"
|
||||||
|
style="width: 600px; height: 600px"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Login Popup -->
|
||||||
|
<LoginPopup ref="loginPopupRef" @logind="handleLogind" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from "vue";
|
||||||
|
import { getBavBarHeight } from "@/utils/system";
|
||||||
|
import { useUserStore } from "@/stores/user";
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const loginPopupRef = ref(null);
|
||||||
|
|
||||||
|
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
||||||
|
|
||||||
|
const systemAvatars = [
|
||||||
|
"https://file.lihailezzc.com/20260109082842_666_1.jpg",
|
||||||
|
"https://file.lihailezzc.com/20260108222141_644_1.jpg",
|
||||||
|
"https://file.lihailezzc.com/9a929a32-439f-453b-b603-fda7b04cbe08.png",
|
||||||
|
];
|
||||||
|
const frames = [
|
||||||
|
"https://file.lihailezzc.com/6.png",
|
||||||
|
"https://file.lihailezzc.com/7.png",
|
||||||
|
"https://file.lihailezzc.com/yunshi.png",
|
||||||
|
"https://file.lihailezzc.com/x_CURXRzG4wHF2dp_zu_r-removebg-preview.png",
|
||||||
|
];
|
||||||
|
const decors = [
|
||||||
|
"https://file.lihailezzc.com/6.png",
|
||||||
|
"https://file.lihailezzc.com/7.png",
|
||||||
|
];
|
||||||
|
|
||||||
|
const currentAvatar = ref(systemAvatars[0]);
|
||||||
|
const selectedFrame = ref("");
|
||||||
|
const selectedDecor = ref("");
|
||||||
|
const activeTab = ref("frame");
|
||||||
|
|
||||||
|
const handleLogind = async () => {
|
||||||
|
// Logic after successful login if needed
|
||||||
|
};
|
||||||
|
|
||||||
|
const useWeChatAvatar = () => {
|
||||||
|
if (!isLoggedIn.value) {
|
||||||
|
loginPopupRef.value.open();
|
||||||
|
} else {
|
||||||
|
currentAvatar.value = userStore.userInfo.avatarUrl;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
uni.navigateBack();
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveAndUse = async () => {
|
||||||
|
const ctx = uni.createCanvasContext("avatarCanvas");
|
||||||
|
const size = 600;
|
||||||
|
const avatarPath = await loadImage(currentAvatar.value);
|
||||||
|
ctx.clearRect(0, 0, size, size);
|
||||||
|
ctx.drawImage(avatarPath, 0, 0, size, size);
|
||||||
|
if (selectedFrame.value) {
|
||||||
|
const framePath = await loadImage(selectedFrame.value);
|
||||||
|
ctx.drawImage(framePath, 0, 0, size, size);
|
||||||
|
}
|
||||||
|
if (selectedDecor.value) {
|
||||||
|
const decorPath = await loadImage(selectedDecor.value);
|
||||||
|
ctx.drawImage(decorPath, 0, 0, size, size);
|
||||||
|
}
|
||||||
|
ctx.draw(false, () => {
|
||||||
|
uni.canvasToTempFilePath({
|
||||||
|
canvasId: "avatarCanvas",
|
||||||
|
success: (res) => {
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: res.tempFilePath,
|
||||||
|
success: () => {
|
||||||
|
uni.showToast({ title: "已保存并设置", icon: "success" });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const share = () => {
|
||||||
|
uni.showToast({ title: "已生成，可在相册分享", icon: "none" });
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadImage = (url) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.getImageInfo({
|
||||||
|
src: url,
|
||||||
|
success: (res) => resolve(res.path),
|
||||||
|
fail: reject,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.avatar-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
.nav-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16rpx 24rpx;
|
||||||
|
}
|
||||||
|
.back {
|
||||||
|
font-size: 40rpx;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
}
|
||||||
|
.nav-title-left {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.preview-card {
|
||||||
|
margin: 20rpx 24rpx;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
.preview-square {
|
||||||
|
width: 600rpx;
|
||||||
|
height: 600rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
background: #f5dfc9;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.avatar-img {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.frame-img {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.decor-img {
|
||||||
|
position: absolute;
|
||||||
|
top: -40rpx;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 240rpx;
|
||||||
|
height: 240rpx;
|
||||||
|
}
|
||||||
|
.preview-tip {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
font-size: 22rpx;
|
||||||
|
margin-top: 12rpx;
|
||||||
|
}
|
||||||
|
.quick-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 16rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 999rpx;
|
||||||
|
padding: 0 32rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
.btn.wechat {
|
||||||
|
background: #ff3b30;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
margin-top: 24rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
}
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.avatar-scroll {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.avatar-list {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.avatar-card {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
.avatar-card.active {
|
||||||
|
outline: 4rpx solid #ff3b30;
|
||||||
|
}
|
||||||
|
.avatar-thumb {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.check {
|
||||||
|
position: absolute;
|
||||||
|
right: 8rpx;
|
||||||
|
top: 8rpx;
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #ff3b30;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 22rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
padding: 16rpx 24rpx 8rpx;
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
.tab {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
background: #f7f7f7;
|
||||||
|
border-radius: 999rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
line-height: 64rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.tab.active {
|
||||||
|
background: #fff0f0;
|
||||||
|
color: #ff3b30;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 16rpx;
|
||||||
|
padding: 8rpx 24rpx 24rpx;
|
||||||
|
}
|
||||||
|
.grid-item {
|
||||||
|
height: 200rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
background: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
.grid-item.active {
|
||||||
|
outline: 4rpx solid #ff3b30;
|
||||||
|
}
|
||||||
|
.grid-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 24rpx 40rpx;
|
||||||
|
}
|
||||||
|
.btn.primary {
|
||||||
|
background: #ff3b30;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 12rpx 24rpx rgba(255, 59, 48, 0.35);
|
||||||
|
}
|
||||||
|
.btn.secondary {
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden-canvas {
|
||||||
|
position: fixed;
|
||||||
|
left: -9999px;
|
||||||
|
top: -9999px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
549
pages/fortune/index.vue
Normal file
549
pages/fortune/index.vue
Normal file
@@ -0,0 +1,549 @@
|
|||||||
|
<template>
|
||||||
|
<view class="fortune-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<view class="nav-bar">
|
||||||
|
<view class="back-btn" @tap="goBack">‹</view>
|
||||||
|
<text class="nav-title">2026 新年运势</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 初始状态：签筒 -->
|
||||||
|
<view class="state-initial" v-if="status !== 'result'">
|
||||||
|
<view class="header-text">
|
||||||
|
<text class="title">点击开启你的</text>
|
||||||
|
<text class="year">2026</text>
|
||||||
|
<text class="title">年度关键词</text>
|
||||||
|
<view class="underline"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="shaker-container" :class="{ shaking: status === 'shaking' }">
|
||||||
|
<view class="shaker-body">
|
||||||
|
<view class="sticks">
|
||||||
|
<view class="stick s1"></view>
|
||||||
|
<view class="stick s2"></view>
|
||||||
|
<view class="stick s3"></view>
|
||||||
|
<view class="stick s4"></view>
|
||||||
|
<view class="stick s5"></view>
|
||||||
|
</view>
|
||||||
|
<view class="label-box">
|
||||||
|
<text class="label-text">祈福</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="action-btn"
|
||||||
|
@tap="startShake"
|
||||||
|
:disabled="status === 'shaking'"
|
||||||
|
>
|
||||||
|
{{ status === "shaking" ? "抽取中..." : "立即抽取" }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<view class="footer-info">
|
||||||
|
<text class="info-icon">ⓘ</text>
|
||||||
|
<text>今日还有 {{ remainingCount }} 次抽取机会，分享可增加次数</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 结果状态：运势卡片 -->
|
||||||
|
<view class="state-result" v-else>
|
||||||
|
<view class="result-card" id="result-card">
|
||||||
|
<view class="card-header">
|
||||||
|
<text class="year-tag">2026 乙巳年</text>
|
||||||
|
</view>
|
||||||
|
<view class="card-body">
|
||||||
|
<view class="icon-circle">
|
||||||
|
<text class="result-icon">☀</text>
|
||||||
|
</view>
|
||||||
|
<text class="result-title">{{ currentFortune.title }}</text>
|
||||||
|
<view class="divider"></view>
|
||||||
|
<text class="result-desc">{{ currentFortune.desc }}</text>
|
||||||
|
<text class="result-sub">旧岁千般皆如意，新年万事定称心。</text>
|
||||||
|
</view>
|
||||||
|
<view class="card-footer">
|
||||||
|
<view class="footer-left">
|
||||||
|
<text class="sub-en">LUCKY CHARM</text>
|
||||||
|
<text class="sub-cn">每日运势签</text>
|
||||||
|
</view>
|
||||||
|
<view class="footer-right">
|
||||||
|
<text class="scan-tip">长按识别\n扫码祈福</text>
|
||||||
|
<view class="qr-code"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="result-actions">
|
||||||
|
<view class="limit-tip">● 每日仅限一次抽取</view>
|
||||||
|
<button class="share-btn" open-type="share">
|
||||||
|
<text class="icon">♥</text> 分享获取额外抽取机会
|
||||||
|
</button>
|
||||||
|
<view class="secondary-btns">
|
||||||
|
<button class="sec-btn" @tap="saveCard">
|
||||||
|
<text class="icon">📥</text> 保存运势卡片
|
||||||
|
</button>
|
||||||
|
<button class="sec-btn" @tap="reset">
|
||||||
|
<text class="icon">↺</text> 我的记录
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
<view class="footer-status">
|
||||||
|
已分享 0/3 次 · 今日剩余机会: {{ remainingCount }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- Canvas 用于生成图片 (隐藏) -->
|
||||||
|
<canvas
|
||||||
|
canvas-id="shareCanvas"
|
||||||
|
class="share-canvas"
|
||||||
|
style="width: 300px; height: 500px; position: fixed; left: 9999px"
|
||||||
|
></canvas>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onUnmounted } from "vue";
|
||||||
|
import { getBavBarHeight } from "@/utils/system";
|
||||||
|
|
||||||
|
const status = ref("initial"); // initial, shaking, result
|
||||||
|
const remainingCount = ref(1);
|
||||||
|
|
||||||
|
// 音效控制
|
||||||
|
const audioContext = uni.createInnerAudioContext();
|
||||||
|
audioContext.src = "/static/music/shake.mp3";
|
||||||
|
let playCount = 0;
|
||||||
|
|
||||||
|
audioContext.onEnded(() => {
|
||||||
|
playCount++;
|
||||||
|
if (playCount < 3) {
|
||||||
|
audioContext.play();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
audioContext.destroy();
|
||||||
|
});
|
||||||
|
|
||||||
|
const fortunes = [
|
||||||
|
{ title: "好运连连", desc: "2026年你将万事如意，惊喜不断。", icon: "☀" },
|
||||||
|
{ title: "财源滚滚", desc: "正财偏财滚滚来，荷包满满乐开怀。", icon: "💰" },
|
||||||
|
{ title: "事业有成", desc: "职场顺风又顺水，升职加薪在眼前。", icon: "🚀" },
|
||||||
|
{ title: "身体健康", desc: "无病无灾身体棒，吃嘛嘛香精神爽。", icon: "💪" },
|
||||||
|
{ title: "桃花朵朵", desc: "单身贵族遇良缘，花前月下共缠绵。", icon: "🌸" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const currentFortune = ref(fortunes[0]);
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
if (status.value === "result") {
|
||||||
|
status.value = "initial";
|
||||||
|
} else {
|
||||||
|
uni.navigateBack();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const startShake = () => {
|
||||||
|
if (remainingCount.value <= 0) {
|
||||||
|
uni.showToast({ title: "今日次数已用完", icon: "none" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
status.value = "shaking";
|
||||||
|
|
||||||
|
// 播放音效
|
||||||
|
playCount = 0;
|
||||||
|
audioContext.play();
|
||||||
|
|
||||||
|
// 模拟摇晃动画和数据请求
|
||||||
|
setTimeout(() => {
|
||||||
|
const idx = Math.floor(Math.random() * fortunes.length);
|
||||||
|
currentFortune.value = fortunes[idx];
|
||||||
|
status.value = "result";
|
||||||
|
remainingCount.value--;
|
||||||
|
}, 2000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const reset = () => {
|
||||||
|
status.value = "initial";
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveCard = () => {
|
||||||
|
uni.showLoading({ title: "生成中..." });
|
||||||
|
|
||||||
|
const ctx = uni.createCanvasContext("shareCanvas");
|
||||||
|
|
||||||
|
// 绘制背景
|
||||||
|
ctx.setFillStyle("#FFF8F0");
|
||||||
|
ctx.fillRect(0, 0, 300, 500);
|
||||||
|
|
||||||
|
// 绘制边框
|
||||||
|
ctx.setStrokeStyle("#D4AF37");
|
||||||
|
ctx.setLineWidth(2);
|
||||||
|
ctx.strokeRect(10, 10, 280, 480);
|
||||||
|
|
||||||
|
// 绘制内容
|
||||||
|
ctx.setFillStyle("#CC0000");
|
||||||
|
ctx.setFontSize(24);
|
||||||
|
ctx.setTextAlign("center");
|
||||||
|
ctx.fillText(currentFortune.value.title, 150, 100);
|
||||||
|
|
||||||
|
ctx.setFillStyle("#333333");
|
||||||
|
ctx.setFontSize(14);
|
||||||
|
ctx.fillText(currentFortune.value.desc, 150, 150);
|
||||||
|
|
||||||
|
ctx.draw(false, () => {
|
||||||
|
uni.canvasToTempFilePath({
|
||||||
|
canvasId: "shareCanvas",
|
||||||
|
success: (res) => {
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: res.tempFilePath,
|
||||||
|
success: () => {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({ title: "已保存到相册" });
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({ title: "保存失败", icon: "none" });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
console.error(err);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.fortune-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #590000; /* 深红背景 */
|
||||||
|
background-image: linear-gradient(180deg, #590000 0%, #3d0000 100%);
|
||||||
|
color: #ffe4c4;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 导航栏 */
|
||||||
|
.nav-bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 44px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 16px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.back-btn {
|
||||||
|
font-size: 32px;
|
||||||
|
color: #ffe4c4;
|
||||||
|
margin-right: 12px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.nav-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #ffe4c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 初始状态 */
|
||||||
|
.state-initial {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-text {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #ffd700;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
.year {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffd700;
|
||||||
|
margin: 0 4px;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: #d4af37;
|
||||||
|
text-underline-offset: 4px;
|
||||||
|
}
|
||||||
|
.underline {
|
||||||
|
width: 40px;
|
||||||
|
height: 2px;
|
||||||
|
background: #d4af37;
|
||||||
|
margin: 8px auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 签筒动画 */
|
||||||
|
.shaker-container {
|
||||||
|
margin-bottom: 60px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.shaker-body {
|
||||||
|
width: 160px;
|
||||||
|
height: 240px;
|
||||||
|
background: linear-gradient(135deg, #8b0000 0%, #500000 100%);
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 2px solid #d4af37;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.label-box {
|
||||||
|
width: 60px;
|
||||||
|
height: 100px;
|
||||||
|
border: 1px solid #d4af37;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.label-text {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #ffd700;
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
}
|
||||||
|
.sticks {
|
||||||
|
position: absolute;
|
||||||
|
top: -40px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 100px;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
.stick {
|
||||||
|
width: 12px;
|
||||||
|
height: 80px;
|
||||||
|
background: #daa520;
|
||||||
|
margin: 0 2px;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
border: 1px solid #b8860b;
|
||||||
|
}
|
||||||
|
.s2 {
|
||||||
|
height: 90px;
|
||||||
|
}
|
||||||
|
.s3 {
|
||||||
|
height: 70px;
|
||||||
|
background: #ffd700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shaking {
|
||||||
|
animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shake {
|
||||||
|
10%,
|
||||||
|
90% {
|
||||||
|
transform: translate3d(-1px, 0, 0) rotate(-1deg);
|
||||||
|
}
|
||||||
|
20%,
|
||||||
|
80% {
|
||||||
|
transform: translate3d(2px, 0, 0) rotate(2deg);
|
||||||
|
}
|
||||||
|
30%,
|
||||||
|
50%,
|
||||||
|
70% {
|
||||||
|
transform: translate3d(-4px, 0, 0) rotate(-4deg);
|
||||||
|
}
|
||||||
|
40%,
|
||||||
|
60% {
|
||||||
|
transform: translate3d(4px, 0, 0) rotate(4deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
width: 240px;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
background: linear-gradient(90deg, #d4af37 0%, #ffd700 100%);
|
||||||
|
border-radius: 25px;
|
||||||
|
color: #590000;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
|
||||||
|
}
|
||||||
|
.footer-info {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(255, 228, 196, 0.6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.info-icon {
|
||||||
|
margin-right: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 结果状态 */
|
||||||
|
.state-result {
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 30px;
|
||||||
|
animation: fadeIn 0.8s ease-out;
|
||||||
|
}
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-card {
|
||||||
|
background: #fffbf0;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 20px;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.card-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.year-tag {
|
||||||
|
background: #e63946;
|
||||||
|
color: #fff;
|
||||||
|
padding: 4px 16px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.card-body {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.icon-circle {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background: rgba(230, 57, 70, 0.1);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 auto 20px;
|
||||||
|
}
|
||||||
|
.result-icon {
|
||||||
|
font-size: 40px;
|
||||||
|
color: #e63946;
|
||||||
|
}
|
||||||
|
.result-title {
|
||||||
|
font-size: 36px;
|
||||||
|
color: #e63946;
|
||||||
|
font-weight: bold;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.divider {
|
||||||
|
width: 40px;
|
||||||
|
height: 2px;
|
||||||
|
background: #d4af37;
|
||||||
|
margin: 0 auto 20px;
|
||||||
|
}
|
||||||
|
.result-desc {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.result-sub {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.card-footer {
|
||||||
|
border-top: 1px dashed #d4af37;
|
||||||
|
padding-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.footer-left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.sub-en {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #999;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
.sub-cn {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.footer-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.scan-tip {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #999;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.qr-code {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: #ddd; /* 占位 */
|
||||||
|
background-image: url("https://file.lihailezzc.com/resource/qr-placeholder.png"); /* 替换为真实二维码 */
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.limit-tip {
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.share-btn {
|
||||||
|
background: #e63946;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.secondary-btns {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.sec-btn {
|
||||||
|
width: 48%;
|
||||||
|
background: #fff;
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.footer-status {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #d4af37;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -95,7 +95,7 @@ const features = ref([
|
|||||||
type: "video",
|
type: "video",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "新春头像挂饰",
|
title: "新春头像",
|
||||||
subtitle: "焕上节日新饰",
|
subtitle: "焕上节日新饰",
|
||||||
icon: "/static/icon/guashi.png",
|
icon: "/static/icon/guashi.png",
|
||||||
type: "avatar_decor",
|
type: "avatar_decor",
|
||||||
@@ -104,7 +104,7 @@ const features = ref([
|
|||||||
title: "新年运势",
|
title: "新年运势",
|
||||||
subtitle: "抽取新年关键词",
|
subtitle: "抽取新年关键词",
|
||||||
icon: "/static/icon/yunshi.png",
|
icon: "/static/icon/yunshi.png",
|
||||||
type: "avatar_frame",
|
type: "fortune",
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
@@ -140,8 +140,19 @@ const popularCards = ref([
|
|||||||
]);
|
]);
|
||||||
|
|
||||||
const onFeatureTap = (item) => {
|
const onFeatureTap = (item) => {
|
||||||
|
if (item.type === "avatar_decor" || item.type === "avatar_frame") {
|
||||||
|
uni.navigateTo({ url: "/pages/avatar/index" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (item.type === "fortune") {
|
||||||
|
uni.navigateTo({ url: "/pages/fortune/index" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (item.type === "card") {
|
||||||
|
uni.navigateTo({ url: "/pages/make/index" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
uni.showToast({ title: `进入：${item.title}`, icon: "none" });
|
uni.showToast({ title: `进入：${item.title}`, icon: "none" });
|
||||||
// uni.navigateTo({ url: `/pages/${item.type}/index` })
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const previewCard = (card) => {
|
const previewCard = (card) => {
|
||||||
|
|||||||
@@ -215,8 +215,8 @@ const greetingLib = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
onLoad((options) => {
|
onLoad((options) => {
|
||||||
// cardId.value = "69674f307307beac4519025f";
|
cardId.value = "69674f307307beac4519025f";
|
||||||
createCard();
|
// createCard();
|
||||||
});
|
});
|
||||||
|
|
||||||
const createCard = async () => {
|
const createCard = async () => {
|
||||||
@@ -321,27 +321,27 @@ const preview = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const shareOrSave = async () => {
|
const shareOrSave = async () => {
|
||||||
const tempPath = await saveByCanvas(false);
|
// const tempPath = await saveByCanvas(false);
|
||||||
const fileKeyRes = await uni.uploadFile({
|
// const fileKeyRes = await uni.uploadFile({
|
||||||
url: "https://api.ai-meng.com/api/common/upload",
|
// url: "https://api.ai-meng.com/api/common/upload",
|
||||||
filePath: tempPath,
|
// filePath: tempPath,
|
||||||
name: "file", // 和后端接收文件字段名一致
|
// name: "file", // 和后端接收文件字段名一致
|
||||||
header: {
|
// header: {
|
||||||
"x-app-id": "69665538a49b8ae3be50fe5d",
|
// "x-app-id": "69665538a49b8ae3be50fe5d",
|
||||||
},
|
// },
|
||||||
});
|
// });
|
||||||
if (fileKeyRes.statusCode < 400) {
|
// if (fileKeyRes.statusCode < 400) {
|
||||||
const keyJson = JSON.parse(fileKeyRes.data);
|
// const keyJson = JSON.parse(fileKeyRes.data);
|
||||||
const url = `https://file.lihailezzc.com/${keyJson?.data.key}`;
|
// const url = `https://file.lihailezzc.com/${keyJson?.data.key}`;
|
||||||
// const url =
|
// // const url =
|
||||||
// "https://file.lihailezzc.com/resource/99c9f7e0086ed66d20bd1675b4ab22e9.png";
|
// // "https://file.lihailezzc.com/resource/99c9f7e0086ed66d20bd1675b4ab22e9.png";
|
||||||
updateCard({
|
// updateCard({
|
||||||
id: cardId.value,
|
// id: cardId.value,
|
||||||
imageUrl: url,
|
// imageUrl: url,
|
||||||
status: 1,
|
// status: 1,
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
createCard();
|
// createCard();
|
||||||
// uni.showToast({ title: '已保存到相册并可分享', icon: 'none' })
|
// uni.showToast({ title: '已保存到相册并可分享', icon: 'none' })
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
BIN
static/music/shake.mp3
Normal file
BIN
static/music/shake.mp3
Normal file
Binary file not shown.
@@ -1,54 +1,54 @@
|
|||||||
import { defineStore } from 'pinia'
|
import { defineStore } from "pinia";
|
||||||
import { wxLogin, wxGetUserProfile } from '@/utils/login.js'
|
import { wxLogin, wxGetUserProfile } from "@/utils/login.js";
|
||||||
import {getPlatformProvider} from '@/utils/system'
|
import { getPlatformProvider } from "@/utils/system";
|
||||||
|
|
||||||
export const useUserStore = defineStore('user', {
|
export const useUserStore = defineStore("user", {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
token: '',
|
token: "",
|
||||||
userInfo: {}
|
userInfo: {},
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
setToken(token) {
|
setToken(token) {
|
||||||
this.token = token
|
this.token = token;
|
||||||
uni.setStorageSync('token', token) // 持久化 tokenx
|
uni.setStorageSync("token", token); // 持久化 tokenx
|
||||||
},
|
},
|
||||||
setUserInfo(userInfo) {
|
setUserInfo(userInfo) {
|
||||||
this.userInfo = userInfo
|
this.userInfo = userInfo;
|
||||||
uni.setStorageSync('userInfo', JSON.stringify(userInfo)) // 持久化用户信息
|
uni.setStorageSync("userInfo", JSON.stringify(userInfo)); // 持久化用户信息
|
||||||
},
|
},
|
||||||
loadFromStorage() {
|
loadFromStorage() {
|
||||||
const token = uni.getStorageSync('token')
|
const token = uni.getStorageSync("token");
|
||||||
const userInfoStr = uni.getStorageSync('userInfo')
|
const userInfoStr = uni.getStorageSync("userInfo");
|
||||||
if (token) this.token = token
|
if (token) this.token = token;
|
||||||
if (userInfoStr) {
|
if (userInfoStr) {
|
||||||
try {
|
try {
|
||||||
this.userInfo = JSON.parse(userInfoStr)
|
this.userInfo = JSON.parse(userInfoStr);
|
||||||
} catch {
|
} catch (e) {
|
||||||
this.userInfo = {}
|
this.userInfo = {};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
clear() {
|
clear() {
|
||||||
this.token = ''
|
this.token = "";
|
||||||
this.userInfo = {}
|
this.userInfo = {};
|
||||||
uni.removeStorageSync('token')
|
uni.removeStorageSync("token");
|
||||||
uni.removeStorageSync('userInfo')
|
uni.removeStorageSync("userInfo");
|
||||||
},
|
},
|
||||||
loadUserInfo() {
|
loadUserInfo() {
|
||||||
const userStr = uni.getStorageSync('userInfo')
|
const userStr = uni.getStorageSync("userInfo");
|
||||||
if (userStr) {
|
if (userStr) {
|
||||||
try {
|
try {
|
||||||
this.userInfo = JSON.parse(userStr)
|
this.userInfo = JSON.parse(userStr);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.userInfo = {}
|
this.userInfo = {};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
logout() {
|
logout() {
|
||||||
this.userInfo = {}
|
this.userInfo = {};
|
||||||
this.token = ''
|
this.token = "";
|
||||||
uni.removeStorageSync('userInfo')
|
uni.removeStorageSync("userInfo");
|
||||||
uni.removeStorageSync('token')
|
uni.removeStorageSync("token");
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ export const getLeftIconLeft = () => {
|
|||||||
|
|
||||||
export function getPlatformProvider() {
|
export function getPlatformProvider() {
|
||||||
const platform = process.env.UNI_PLATFORM;
|
const platform = process.env.UNI_PLATFORM;
|
||||||
return platform ?? "mp-weixin";
|
return platform || "mp-weixin";
|
||||||
// const platform = uni.getSystemInfoSync().platform;
|
// const platform = uni.getSystemInfoSync().platform;
|
||||||
// console.log(1111111, platform)
|
// console.log(1111111, platform)
|
||||||
// // H5 模拟器调试时使用 __wxConfig 环境变量判断
|
// // H5 模拟器调试时使用 __wxConfig 环境变量判断
|
||||||
|
|||||||
114
utils/track.js
114
utils/track.js
@@ -1,23 +1,23 @@
|
|||||||
import { request } from "@/utils/request"
|
import { request } from "@/utils/request";
|
||||||
|
|
||||||
// 生成并缓存 device_id
|
// 生成并缓存 device_id
|
||||||
function getOrCreateDeviceId() {
|
function getOrCreateDeviceId() {
|
||||||
let deviceId = uni.getStorageSync('device_id')
|
let deviceId = uni.getStorageSync("device_id");
|
||||||
if (!deviceId) {
|
if (!deviceId) {
|
||||||
deviceId = Date.now() + '_' + Math.random().toString(36).substr(2, 9)
|
deviceId = Date.now() + "_" + Math.random().toString(36).substr(2, 9);
|
||||||
uni.setStorageSync('device_id', deviceId)
|
uni.setStorageSync("device_id", deviceId);
|
||||||
}
|
}
|
||||||
return deviceId
|
return deviceId;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取网络类型
|
// 获取网络类型
|
||||||
function getNetworkType() {
|
function getNetworkType() {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
uni.getNetworkType({
|
uni.getNetworkType({
|
||||||
success: (res) => resolve(res.networkType || 'unknown'),
|
success: (res) => resolve(res.networkType || "unknown"),
|
||||||
fail: () => resolve('unknown')
|
fail: () => resolve("unknown"),
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取系统平台
|
// 获取系统平台
|
||||||
@@ -25,67 +25,71 @@ function getSystemInfo() {
|
|||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
uni.getSystemInfo({
|
uni.getSystemInfo({
|
||||||
success: (res) => resolve(res),
|
success: (res) => resolve(res),
|
||||||
fail: () => resolve({})
|
fail: () => resolve({}),
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取当前页面路径
|
// 获取当前页面路径
|
||||||
function getCurrentPagePath() {
|
function getCurrentPagePath() {
|
||||||
const pages = getCurrentPages()
|
const pages = getCurrentPages();
|
||||||
const currentPage = pages[pages.length - 1]
|
const currentPage = pages[pages.length - 1];
|
||||||
return currentPage?.route || ''
|
return currentPage?.route || "";
|
||||||
}
|
}
|
||||||
|
|
||||||
function getMiniProgramVersion() {
|
function getMiniProgramVersion() {
|
||||||
const platform = process.env.UNI_PLATFORM
|
const platform = process.env.UNI_PLATFORM;
|
||||||
let version = ''
|
let version = "";
|
||||||
let envVersion = ''
|
let envVersion = "";
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (platform === 'mp-weixin') {
|
if (platform === "mp-weixin") {
|
||||||
// 微信小程序
|
// 微信小程序
|
||||||
const info = wx.getAccountInfoSync()
|
const info = wx.getAccountInfoSync();
|
||||||
version = info?.miniProgram?.version || ''
|
version = info?.miniProgram?.version || "";
|
||||||
envVersion = info?.miniProgram?.envVersion || ''
|
envVersion = info?.miniProgram?.envVersion || "";
|
||||||
} else if (platform === 'mp-alipay') {
|
} else if (platform === "mp-alipay") {
|
||||||
// 支付宝小程序
|
// 支付宝小程序
|
||||||
const info = my.getAppInfoSync()
|
const info = my.getAppInfoSync();
|
||||||
version = info?.version || ''
|
version = info?.version || "";
|
||||||
} else if (platform === 'mp-toutiao' || platform === 'mp-jd') {
|
} else if (platform === "mp-toutiao" || platform === "mp-jd") {
|
||||||
// 抖音/头条/京东小程序
|
// 抖音/头条/京东小程序
|
||||||
const info = tt.getAccountInfoSync?.()
|
const info = tt.getAccountInfoSync?.();
|
||||||
version = info?.miniProgram?.version || ''
|
version = info?.miniProgram?.version || "";
|
||||||
envVersion = info?.miniProgram?.envVersion || ''
|
envVersion = info?.miniProgram?.envVersion || "";
|
||||||
} else if (platform === 'mp-baidu') {
|
} else if (platform === "mp-baidu") {
|
||||||
// 百度小程序（无标准方法获取版本号）
|
// 百度小程序（无标准方法获取版本号）
|
||||||
version = '' // 百度不支持获取版本号
|
version = ""; // 百度不支持获取版本号
|
||||||
} else {
|
} else {
|
||||||
version = ''
|
version = "";
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
version = ''
|
version = "";
|
||||||
envVersion = ''
|
envVersion = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
platform, // 当前小程序平台
|
platform, // 当前小程序平台
|
||||||
version, // 小程序版本号
|
version, // 小程序版本号
|
||||||
envVersion // develop / trial / release（微信等支持）
|
envVersion, // develop / trial / release（微信等支持）
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// 构造埋点对象
|
// 构造埋点对象
|
||||||
async function buildEventData(eventName, eventType = 'click', customParams = {}) {
|
async function buildEventData(
|
||||||
const deviceId = getOrCreateDeviceId()
|
eventName,
|
||||||
const systemInfo = await getSystemInfo()
|
eventType = "click",
|
||||||
const networkType = await getNetworkType()
|
customParams = {}
|
||||||
|
) {
|
||||||
|
const deviceId = getOrCreateDeviceId();
|
||||||
|
const systemInfo = await getSystemInfo();
|
||||||
|
const networkType = await getNetworkType();
|
||||||
// const location = await getLocation()
|
// const location = await getLocation()
|
||||||
const appVersion = (typeof plus !== 'undefined') ? plus?.runtime?.version : ''
|
const appVersion = typeof plus !== "undefined" ? plus?.runtime?.version : "";
|
||||||
const { envVersion, platform, version} = getMiniProgramVersion()
|
const { envVersion, platform, version } = getMiniProgramVersion();
|
||||||
|
|
||||||
return {
|
return {
|
||||||
userId: uni.getStorageSync('user_id') || null,
|
userId: uni.getStorageSync("user_id") || null,
|
||||||
deviceId: deviceId,
|
deviceId: deviceId,
|
||||||
eventName: eventName,
|
eventName: eventName,
|
||||||
eventType: eventType,
|
eventType: eventType,
|
||||||
@@ -95,23 +99,23 @@ async function buildEventData(eventName, eventType = 'click', customParams = {})
|
|||||||
elementContent: customParams.element_content || null,
|
elementContent: customParams.element_content || null,
|
||||||
customParams: customParams,
|
customParams: customParams,
|
||||||
networkType: networkType,
|
networkType: networkType,
|
||||||
os: systemInfo.platform || 'unknown',
|
os: systemInfo.platform || "unknown",
|
||||||
appVersion: version || 'unknown',
|
appVersion: version || "unknown",
|
||||||
envVersion: envVersion ?? '',
|
envVersion: envVersion || "",
|
||||||
platform: platform ?? ''
|
platform: platform || "",
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// 发送埋点数据到服务器
|
// 发送埋点数据到服务器
|
||||||
async function sendTrack(eventName, eventType = 'click', customParams = {}) {
|
async function sendTrack(eventName, eventType = "click", customParams = {}) {
|
||||||
const eventData = await buildEventData(eventName, eventType, customParams);
|
const eventData = await buildEventData(eventName, eventType, customParams);
|
||||||
request({
|
request({
|
||||||
url: '/api/common/tracking/create',
|
url: "/api/common/tracking/create",
|
||||||
method: 'POST',
|
method: "POST",
|
||||||
data: eventData
|
data: eventData,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
sendTrack
|
sendTrack,
|
||||||
}
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user