southnote-mini-sdk 1.0.0

package/pages/wheelActivivty/wheelActivivty.js

@@ -0,0 +1,492 @@
+// pages/wheel-activity/index.js
+import {
+  queryGameActivityInfo
+} from '../../services/home'
+
+Page({
+  data: {
+    activityData: {},
+    showRuleModal: false,
+    showGiftModal: false,
+    showTaskModal: false,
+    canvasSize: 320,
+
+
+    // 计算属性数据
+    rewards: {},
+    chanceData: {},
+    winners: [],
+    ownRecord: [],
+    wheelItems: [],
+    totalChance: 0,
+    ruleItems: [],
+    taskItems: [],
+    taskDetailItems: []
+  },
+
+  // 图片缓存
+  imgCache: new Map(),
+
+  onLoad(options) {
+    const activityId = options.activity_id
+    this.loadActivityData(activityId)
+  },
+
+  onReady() {
+    // 获取容器尺寸并初始化canvas
+    this.initCanvas()
+  },
+
+ 
+
+  // 加载活动数据
+  loadActivityData(activityId) {
+    queryGameActivityInfo(activityId).then(res => {
+
+      const safeData = this.convertToHttps(res.data)
+
+      this.setData({
+        activityData: safeData
+      }, () => {
+        this.computeDerivedData()
+        this.drawWheel()
+      })
+    })
+  },
+
+  convertToHttps(obj) {
+    if (typeof obj === 'string') {
+      return obj.replace(/^http:\/\//i, 'https://')
+    }
+  
+    if (Array.isArray(obj)) {
+      return obj.map(item => this.convertToHttps(item)) // ✅ 加 this
+    }
+  
+    if (typeof obj === 'object' && obj !== null) {
+      const newObj = {}
+      for (const key in obj) {
+        newObj[key] = this.convertToHttps(obj[key]) // ✅ 加 this
+      }
+      return newObj
+    }
+  
+    return obj
+  },
+
+
+// 计算派生数据
+computeDerivedData() {
+  const { activityData } = this.data
+  const rewards = activityData.rewards || {}
+  const chanceData = rewards.chance_data || {}
+  const winners = Array.isArray(rewards.winners) ? rewards.winners : []
+  const ownRecordRaw = Array.isArray(rewards.own_record) ? rewards.own_record : []
+  const wheelItems = rewards.wheel || []
+  const totalChance = chanceData.total_chance || 0
+
+  // 格式化活动时间
+  const startTimeFormatted = this.formatTime(activityData.start_time)
+  const endTimeFormatted = this.formatTime(activityData.end_time)
+
+  // 为礼包记录添加格式化后的时间字段
+  const ownRecord = ownRecordRaw.map(item => ({
+    ...item,
+    created_at_formatted: this.formatTime(item.created_at)
+  }))
+
+  // 计算规则条目
+  const ruleItems = this.computeRuleItems(activityData, chanceData)
+  const taskItems = this.computeTaskItems(chanceData)
+  const taskDetailItems = this.computeTaskDetailItems(chanceData)
+
+  this.setData({
+    rewards,
+    chanceData,
+    winners,
+    ownRecord,
+    wheelItems,
+    totalChance,
+    ruleItems,
+    taskItems,
+    taskDetailItems,
+    startTimeFormatted,
+    endTimeFormatted
+  })
+},
+
+  // 计算规则条目
+  computeRuleItems(activityData, chanceData) {
+    const items = []
+
+    if (activityData.activity_desc) {
+      items.push({
+        type: 'text',
+        value: activityData.activity_desc
+      })
+    }
+
+    items.push({
+      type: 'time',
+      value: `${this.formatTime(activityData.start_time)} - ${this.formatTime(activityData.end_time)}`
+    })
+
+    const taskItems = this.computeTaskItems(chanceData)
+    if (taskItems.length > 1) {
+      items.push({
+        type: 'tasks',
+        value: ''
+      })
+    } else if (taskItems.length === 1) {
+      items.push({
+        type: 'text',
+        value: taskItems[0]
+      })
+    }
+
+    items.push({
+      type: 'text',
+      value: '在本页面点击【开始抽奖】,即可抽取对应的礼包,礼包先到先得,抽完为止。'
+    })
+    items.push({
+      type: 'text',
+      value: '抽奖次数于每日00:00清零'
+    })
+
+    return items
+  },
+
+  // 计算任务条目
+  computeTaskItems(chanceData) {
+    const list = []
+
+    if ('daily_chance' in chanceData) {
+      list.push(`每日登录得次数(${chanceData.daily_chance || 0}/1)`)
+    }
+    if ('comment_chance' in chanceData) {
+      list.push(`每日评论得次数(${chanceData.comment_chance || 0}/1)`)
+    }
+    if ('like_chance' in chanceData) {
+      list.push(`每日点赞得次数(${chanceData.like_chance || 0}/1)`)
+    }
+    if ('topic_chance' in chanceData) {
+      list.push(`每日发表话题#${chanceData.topic_name || ''}#得次数(${chanceData.topic_chance || 0}/1)`)
+    }
+    if ('post_chance' in chanceData) {
+      list.push(`每日发帖得次数(${chanceData.post_chance || 0}/1)`)
+    }
+
+    return list
+  },
+
+  // 计算任务详情条目
+  computeTaskDetailItems(chanceData) {
+    const list = []
+
+    if ('daily_chance' in chanceData) {
+      list.push({
+        label: `每日登录得次数(${chanceData.daily_chance || 0}/1)`,
+        done: !!chanceData.daily_chance,
+        got: chanceData.daily_chance || 0,
+        type: 'login'
+      })
+    }
+    if ('comment_chance' in chanceData) {
+      list.push({
+        label: `每日评论得次数(${chanceData.comment_chance || 0}/1)`,
+        done: !!chanceData.comment_chance,
+        got: chanceData.comment_chance || 0,
+        type: 'comment'
+      })
+    }
+    if ('like_chance' in chanceData) {
+      list.push({
+        label: `每日点赞得次数(${chanceData.like_chance || 0}/1)`,
+        done: !!chanceData.like_chance,
+        got: chanceData.like_chance || 0,
+        type: 'like'
+      })
+    }
+    if ('topic_chance' in chanceData) {
+      list.push({
+        label: '',
+        done: !!chanceData.topic_chance,
+        got: chanceData.topic_chance || 0,
+        type: 'topic'
+      })
+    }
+    if ('post_chance' in chanceData) {
+      list.push({
+        label: `每日发帖得次数(${chanceData.post_chance || 0}/1)`,
+        done: !!chanceData.post_chance,
+        got: chanceData.post_chance || 0,
+        type: 'post'
+      })
+    }
+
+    return list
+  },
+
+  // 格式化时间
+  formatTime(ts) {
+    if (!ts) return ''
+    const d = new Date(Number(ts) * 1000)
+    const pad = (n) => String(n).padStart(2, '0')
+    return `${d.getFullYear()}/${pad(d.getMonth() + 1)}/${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+  },
+
+  // 初始化Canvas
+  initCanvas() {
+    const query = wx.createSelectorQuery()
+    query.select('#wheelContainer').boundingClientRect()
+    query.exec((res) => {
+      if (res[0]) {
+        const containerWidth = res[0].width
+        const size = Math.min(containerWidth, 340)
+        this.setData({
+          canvasSize: size
+        }, () => {
+          this.setupCanvas()
+        })
+      }
+    })
+  },
+
+  // 设置Canvas
+  setupCanvas() {
+    const query = wx.createSelectorQuery()
+    query.select('#wheelCanvas')
+      .fields({
+        node: true,
+        size: true
+      })
+      .exec((res) => {
+        if (res[0]) {
+          const canvas = res[0].node
+          const ctx = canvas.getContext('2d')
+
+          const dpr = wx.getSystemInfoSync().pixelRatio
+          const size = this.data.canvasSize
+
+          canvas.width = size * dpr
+          canvas.height = size * dpr
+          ctx.scale(dpr, dpr)
+
+          this.canvas = canvas
+          this.ctx = ctx
+
+          this.preloadImages().then(() => {
+            this.drawWheel()
+          })
+        }
+      })
+  },
+
+  // 预加载图片
+  preloadImages() {
+    const {
+      wheelItems
+    } = this.data
+    const promises = []
+
+    wheelItems.forEach((item) => {
+      if (!item.item_icon) return
+      if (this.imgCache.has(item.item_icon)) return
+
+      promises.push(
+        new Promise((resolve) => {
+          const img = this.canvas.createImage()
+          img.src = item.item_icon
+          img.onload = () => {
+            this.imgCache.set(item.item_icon, img)
+            resolve()
+          }
+          img.onerror = () => resolve()
+        })
+      )
+    })
+
+    return Promise.all(promises)
+  },
+
+  // 绘制转盘
+  drawWheel() {
+    if (!this.ctx || !this.canvas) return
+
+    const ctx = this.ctx
+    const size = this.data.canvasSize
+    const cx = size / 2
+    const cy = size / 2
+    const r = size / 2 - 4
+
+    const items = this.data.wheelItems || []
+    const count = 6
+    const angleStep = (Math.PI * 2) / count
+    const colors = ['#fbf7eb', '#faead0']
+    const flipIndices = [2, 3]
+
+    ctx.clearRect(0, 0, size, size)
+
+    // 整体旋转:让第一个扇区中心对准顶部指针
+    ctx.save()
+    ctx.translate(cx, cy)
+    ctx.rotate(-angleStep / 2)
+    ctx.translate(-cx, -cy)
+
+    for (let i = 0; i < count; i++) {
+      const startAngle = -Math.PI / 2 + i * angleStep
+      const endAngle = startAngle + angleStep
+      const midAngle = startAngle + angleStep / 2
+
+      // 绘制扇形
+      ctx.beginPath()
+      ctx.moveTo(cx, cy)
+      ctx.arc(cx, cy, r, startAngle, endAngle)
+      ctx.closePath()
+      ctx.fillStyle = colors[i % 2]
+      ctx.fill()
+      ctx.strokeStyle = '#e8d5b0'
+      ctx.stroke()
+
+      const item = items.find((it) => it.position === i + 1)
+      if (!item) continue
+
+      const isThankYou = item.item_type === 3
+
+      // 绘制图片
+      ctx.save()
+      ctx.translate(cx, cy)
+      ctx.rotate(midAngle)
+
+      if (!isThankYou && item.item_icon) {
+        const img = this.imgCache.get(item.item_icon)
+        if (img) {
+          const imgSize = size * 0.125
+          const imgRadius = r * 0.5
+          const imgX = imgRadius - imgSize / 2
+          const imgY = -imgSize / 2
+
+          ctx.translate(imgX + imgSize / 2, imgY + imgSize / 2)
+          ctx.rotate(Math.PI / 2)
+          ctx.translate(-(imgSize / 2), -(imgSize / 2))
+          ctx.drawImage(img, 0, 0, imgSize, imgSize)
+        }
+      }
+
+      ctx.restore()
+
+      // 绘制文字
+      const textRadius = r * 0.78
+      const x = cx + Math.cos(midAngle) * textRadius
+      const y = cy + Math.sin(midAngle) * textRadius
+
+      let textAngle = midAngle + Math.PI / 2
+      if (textAngle > Math.PI / 2 && textAngle < (Math.PI * 3) / 2) {
+        textAngle += Math.PI
+      }
+
+      if (flipIndices.includes(i)) {
+        textAngle += Math.PI
+      }
+
+      ctx.save()
+      ctx.translate(x, y)
+      ctx.rotate(textAngle)
+      ctx.fillStyle = '#bc977f'
+      const fontSize = size * 0.044
+      ctx.font = `bold ${fontSize}px sans-serif`
+      ctx.textAlign = 'center'
+      ctx.textBaseline = 'middle'
+
+      const nameLines = isThankYou ? ['谢谢参与'] : this.wrapText(item.item_name || '', 8)
+      nameLines.forEach((line, li) => {
+        ctx.fillText(line, 0, (li - (nameLines.length - 1) / 2) * fontSize)
+      })
+
+      ctx.restore()
+    }
+
+    ctx.restore()
+  },
+
+  // 文字换行
+  wrapText(text, maxLen) {
+    const lines = []
+    for (let i = 0; i < text.length; i += maxLen) {
+      lines.push(text.slice(i, i + maxLen))
+    }
+    return lines
+  },
+
+  // 显示规则弹窗
+  showRule() {
+    this.setData({
+      showRuleModal: true
+    })
+  },
+
+  hideRule() {
+    this.setData({
+      showRuleModal: false
+    })
+  },
+
+  // 显示礼包弹窗
+  showGift() {
+    this.setData({
+      showGiftModal: true
+    })
+  },
+
+  hideGift() {
+    this.setData({
+      showGiftModal: false
+    })
+  },
+
+  // 显示任务弹窗
+  showTask() {
+    this.setData({
+      showTaskModal: true
+    })
+  },
+
+  hideTask() {
+    this.setData({
+      showTaskModal: false
+    })
+  },
+
+  // 阻止冒泡
+  stopPropagation() {},
+
+  // 拷贝文本
+  copyText(e) {
+    const text = e.currentTarget.dataset.text
+    wx.setClipboardData({
+      data: text,
+      success: () => {
+        wx.showToast({
+          title: '拷贝成功',
+          icon: 'success'
+        })
+      }
+    })
+  },
+
+  // 前往APP
+  goToApp() {
+    // wx.showToast({
+    //   title: '请前往APP参与抽奖',
+    //   icon: 'none'
+    // })
+
+    // 小程序跳转逻辑
+    // 可以使用 wx.navigateToMiniProgram 跳转到其他小程序
+    // 或使用其他方式引导用户下载APP
+
+    wx.navigateTo({
+      url: `/pages/copyOfficial/copyOfficial?url=${encodeURIComponent('https://www.southnote.cn')}`
+    });
+  }
+})

package/pages/wheelActivivty/wheelActivivty.json

@@ -0,0 +1,8 @@
+{
+  "navigationBarTitleText": "抽奖活动",
+  "navigationBarBackgroundColor": "#ffffff",
+  "navigationBarTextStyle": "black",
+  "backgroundColor": "#f8f8f8",
+  "enablePullDownRefresh": false,
+  "usingComponents": {}
+}

package/pages/wheelActivivty/wheelActivivty.wxml

@@ -0,0 +1,131 @@
+<!-- pages/wheel-activity/index.wxml -->
+<view class="wheel-activity">
+  <image class="bg-image" src="../assets/wheel/wheel_bg.png" mode="scaleToFill"></image>
+  <!-- 右上角按钮 -->
+  <view class="top-right-btns">
+    <view class="side-btn" bindtap="showRule">活动规则</view>
+    <view class="side-btn" bindtap="showGift">我的礼包</view>
+  </view>
+
+  <!-- title图 -->
+  <view class="title-image-wrap" wx:if="{{activityData.rewards.title_image}}">
+    <image src="{{activityData.rewards.title_image}}" class="title-image" mode="widthFix" />
+  </view>
+
+  <!-- 活动时间 -->
+  <view class="activity-time">
+    活动时间:{{startTimeFormatted}} - {{endTimeFormatted}}
+  </view>
+
+  <!-- 今日剩余抽奖次数 -->
+  <view class="chance-bar">
+    <image class="chance-bar-bg" src="../assets/wheel/wheel_bg2.png" mode="scaleToFill"></image>
+    <text class="chance-label">今日剩余抽奖次数:</text>
+    <text class="chance-num">{{totalChance}}</text>
+    <text class="chance-label">次</text>
+    <text wx:if="{{taskDetailItems.length > 1}}" class="chance-question" bindtap="showTask">?</text>
+  </view>
+
+  <!-- 大转盘 -->
+  <view class="wheel-container" id="wheelContainer">
+    <view class="wheel-ring">
+      <image class="wheel-ring-bg" src="../assets/wheel/wheel_fore.png" mode="scaleToFill"></image>
+    </view>
+    <view class="wheel-content">
+      <canvas 
+        type="2d" 
+        id="wheelCanvas" 
+        class="wheel-canvas"
+        style="width: {{canvasSize}}px; height: {{canvasSize}}px;"
+      ></canvas>
+    </view>
+    <!-- 中间指针+文字 -->
+    <view class="wheel-center" bindtap="goToApp">
+      <image src="../assets/wheel/wheel_to.png" class="wheel-pointer" mode="widthFix" />
+      <view class="wheel-start-text">
+        <text>开始</text>
+        <text>抽奖</text>
+      </view>
+    </view>
+  </view>
+
+  <!-- 中奖名单 -->
+  <view class="winners-section">
+    <view class="winners-title">中奖名单</view>
+    <scroll-view class="winners-list" scroll-y>
+      <view wx:if="{{winners.length === 0}}" class="empty-tip">暂无记录</view>
+      <view wx:for="{{winners}}" wx:key="index" class="winner-cell">
+        <text class="winner-text">恭喜</text>
+        <text class="winner-name">{{item.nickname}}</text>
+        <text class="winner-text">获得</text>
+        <text class="winner-reward">{{item.reward}}</text>
+      </view>
+    </scroll-view>
+  </view>
+
+  <!-- 活动规则弹窗 -->
+  <view wx:if="{{showRuleModal}}" class="modal-overlay" bindtap="hideRule">
+    <view class="modal-box" catchtap="stopPropagation">
+      <view class="modal-title">活动规则</view>
+      <view style="padding: 15px;">
+        <view wx:for="{{ruleItems}}" wx:key="index" class="rule-item">
+          <text class="rule-index">{{index + 1}}.</text>
+          <block wx:if="{{item.type === 'time'}}">
+            <text class="rule-text">活动时间:<text style="color: #002fa7;">{{item.value}}</text>
+            </text>
+          </block>
+          <block wx:elif="{{item.type === 'tasks'}}">
+            <text class="rule-text">以下任务可获得抽奖次数
+              <block wx:for="{{taskItems}}" wx:for-item="task" wx:key="index">
+                <text class="rule-task-item">· {{task}}\n</text>
+              </block>
+            </text>
+          </block>
+          <block wx:else>
+            <text class="rule-text">{{item.value}}</text>
+          </block>
+        </view>
+      </view>
+      <view class="modal-close-btn" bindtap="hideRule">关闭</view>
+    </view>
+  </view>
+
+  <!-- 我的礼包弹窗 -->
+  <view wx:if="{{showGiftModal}}" class="modal-overlay" bindtap="hideGift">
+    <view class="modal-box modal-box-gradient" catchtap="stopPropagation">
+      <view class="modal-title">我的礼包</view>
+      <view style="padding: 15px;">
+        <view wx:if="{{ownRecord.length === 0}}" class="empty-tip">暂无记录</view>
+        <view wx:for="{{ownRecord}}" wx:key="record_id" class="gift-item">
+          <image src="{{item.item_icon}}" class="gift-icon" mode="aspectFill" />
+          <view class="gift-info">
+            <view class="gift-name">{{item.item_name}}</view>
+            <view class="gift-cdk">兑换码:{{item.cdk}}</view>
+            <view class="gift-date">{{item.created_at_formatted}}</view>
+
+          </view>
+          <view class="copy-btn" bindtap="copyText" data-text="{{item.cdk}}">拷贝</view>
+        </view>
+      </view>
+      <view class="modal-close-btn" bindtap="hideGift">关闭</view>
+    </view>
+  </view>
+
+  <!-- 我的任务弹窗 -->
+  <view wx:if="{{showTaskModal}}" class="modal-overlay" bindtap="hideTask">
+    <view class="modal-box" catchtap="stopPropagation">
+      <view class="modal-title">我的任务</view>
+      <view style="padding: 15px;">
+        <view wx:for="{{taskDetailItems}}" wx:key="index" class="task-item {{item.done ? 'task-done' : ''}}">
+          <text class="task-index">{{index + 1}}.</text>
+          <text class="task-text {{item.done ? 'task-text-done' : 'task-text-active'}}">
+            <block wx:if="{{item.type === 'topic'}}">每日发表话题<text style="{{item.done ? '' : 'color:#002fa7;'}}"> #{{chanceData.topic_name}}# </text>得次数({{item.got}}/1)
+            </block>
+            <block wx:else>{{item.label}}</block>
+          </text>
+        </view>
+      </view>
+      <view class="modal-close-btn" bindtap="hideTask">关闭</view>
+    </view>
+  </view>
+</view>