feat: avator limit

pages/avatar/index.vue

@@ -24,19 +24,29 @@
           @touchend.stop="onTouchEnd"
         />
       </view>
-      <text class="preview-tip">实时预览效果</text>
+      <view v-if="selectedDecor" class="interaction-tip">
+        <text>👆 单指拖动</text>
+        <text class="tip-divider">|</text>
+        <text>✌️ 双指缩放/旋转</text>
+      </view>
+      <text v-else class="preview-tip">实时预览效果</text>
     </view>
 
-    <view class="quick-actions">
-      <button class="btn wechat" @tap="useWeChatAvatar">使用微信头像</button>
+    <view class="action-buttons">
+      <button class="btn secondary" @tap="saveAndUse">保存</button>
+      <button class="btn primary" open-type="share">分享给朋友</button>
     </view>
 
     <view class="section">
       <view class="section-header">
-        <text class="section-title">系统推荐头像</text>
+        <text class="section-title">选择底图</text>
       </view>
       <scroll-view scroll-x class="avatar-scroll" show-scrollbar="false">
         <view class="avatar-list">
+          <view class="avatar-card upload-card" @tap="useWeChatAvatar">
+            <view class="upload-icon">📷</view>
+            <text class="upload-text">微信头像</text>
+          </view>
           <view
             v-for="(item, i) in systemAvatars"
             :key="i"
@@ -72,7 +82,7 @@
         :key="i"
         class="grid-item"
         :class="{ active: selectedFrame === frame }"
-        @tap="selectedFrame = frame"
+        @tap="toggleFrame(frame)"
       >
         <image :src="frame" class="grid-img" mode="aspectFill" />
         <view v-if="selectedFrame === frame" class="check">✔</view>
@@ -92,11 +102,6 @@
       </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"
@@ -110,8 +115,15 @@
 
 <script setup>
 import { ref, computed } from "vue";
-import { getBavBarHeight } from "@/utils/system";
+import { onShareAppMessage } from "@dcloudio/uni-app";
+import { getBavBarHeight, getDeviceInfo } from "@/utils/system";
 import { useUserStore } from "@/stores/user";
+import {
+  createShareToken,
+  getShareReward,
+  abilityCheck,
+} from "@/api/system.js";
+import { avatarDownloadRecord } from "@/api/avatar.js";
 
 const userStore = useUserStore();
 const loginPopupRef = ref(null);
@@ -139,6 +151,14 @@ const selectedFrame = ref("");
 const selectedDecor = ref("");
 const activeTab = ref("frame");
 
+const toggleFrame = (frame) => {
+  if (selectedFrame.value === frame) {
+    selectedFrame.value = "";
+  } else {
+    selectedFrame.value = frame;
+  }
+};
+
 // 挂饰状态
 const decorState = ref({
   x: 300, // 初始中心 X (rpx)
@@ -231,6 +251,28 @@ const goBack = () => {
 };
 
 const saveAndUse = async () => {
+  const abilityRes = await abilityCheck("avatar_download");
+  if (!abilityRes.canUse) {
+    if (
+      abilityRes?.blockType === "need_share" &&
+      abilityRes?.message === "分享可继续"
+    ) {
+      uni.showToast({
+        title: "分享到群聊可继续使用",
+        icon: "none",
+      });
+      return;
+    }
+    uni.showToast({
+      title: "您今日头像下载次数已用完，明日再试",
+      icon: "none",
+    });
+    return;
+  }
+  // 调用avatarDownloadRecord API记录下载次数
+  await avatarDownloadRecord({
+    avatarUrl: currentAvatar.value,
+  });
   const ctx = uni.createCanvasContext("avatarCanvas");
   const size = 600;
   const avatarPath = await loadImage(currentAvatar.value);
@@ -265,7 +307,7 @@ const saveAndUse = async () => {
         uni.saveImageToPhotosAlbum({
           filePath: res.tempFilePath,
           success: () => {
-            uni.showToast({ title: "已保存并设置", icon: "success" });
+            uni.showToast({ title: "已保存到相册", icon: "success" });
           },
         });
       },
@@ -277,6 +319,39 @@ const share = () => {
   uni.showToast({ title: "已生成，可在相册分享", icon: "none" });
 };
 
+onShareAppMessage(async () => {
+  const deviceInfo = getDeviceInfo();
+  const shareTokenRes = await createShareToken({
+    targetId: "",
+    scene: "avatar_download",
+    ...deviceInfo,
+  });
+  getRewardByShare();
+
+  return {
+    title: "制作我的新春头像",
+    path: `/pages/avatar/index?shareToken=${shareTokenRes.shareToken}`,
+    imageUrl:
+      "https://file.lihailezzc.com/resource/b48c41054c2633c478463ac1b1f1ca23.png", // 使用默认封面或 popularCards 的封面
+  };
+});
+
+const getRewardByShare = async () => {
+  const res = await getShareReward({ scene: "avatar_download" });
+  if (res.success) {
+    uni.showToast({ title: "分享成功，可下载头像" });
+    checkDrawStatus();
+  }
+};
+
+// onShareTimeline(() => {
+//   return {
+//     title: "制作我的新春头像",
+//     imageUrl:
+//       "https://file.lihailezzc.com/resource/b48c41054c2633c478463ac1b1f1ca23.png",
+//   };
+// });
+
 const loadImage = (url) => {
   return new Promise((resolve, reject) => {
     uni.getImageInfo({
@@ -370,21 +445,30 @@ const loadImage = (url) => {
   color: #ffccc7;
   margin: 0 4rpx;
 }
-.quick-actions {
+
+.action-buttons {
   display: flex;
-  gap: 16rpx;
-  padding: 0 24rpx;
-  margin-top: 8rpx;
+  padding: 0 48rpx;
+  gap: 32rpx;
+  margin-top: 32rpx;
 }
+
 .btn {
-  height: 80rpx;
+  flex: 1;
+  height: 88rpx;
   border-radius: 999rpx;
-  padding: 0 32rpx;
-  font-size: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30rpx;
+  font-weight: 600;
+  margin: 0;
+  padding: 0;
+  border: none;
+  line-height: normal;
 }
-.btn.wechat {
-  background: #ff3b30;
-  color: #fff;
+.btn::after {
+  border: none;
 }
 
 .section {
@@ -419,6 +503,26 @@ const loadImage = (url) => {
 .avatar-card.active {
   outline: 4rpx solid #ff3b30;
 }
+
+.upload-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #fff5f5;
+  border: 2rpx dashed #ffccc7;
+  box-sizing: border-box;
+}
+.upload-icon {
+  font-size: 48rpx;
+  margin-bottom: 8rpx;
+}
+.upload-text {
+  font-size: 22rpx;
+  color: #ff3b30;
+  font-weight: 500;
+}
+
 .avatar-thumb {
   width: 100%;
   height: 100%;
@@ -480,12 +584,6 @@ const loadImage = (url) => {
   height: 100%;
 }
 
-.bottom-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20rpx 24rpx 40rpx;
-}
 .btn.primary {
   background: #ff3b30;
   color: #fff;
@@ -495,7 +593,6 @@ const loadImage = (url) => {
   background: #f5f5f5;
   color: #333;
 }
-
 .hidden-canvas {
   position: fixed;
   left: -9999px;