From 5298ed1acf18b6dab445c799aae7a50f8f55b080 Mon Sep 17 00:00:00 2001
From: ty200947752 <ty200947752@users.noreply.local>
Date: Mon, 15 Dec 2025 11:41:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=AA=E6=8E=A8=E9=80=81=E5=88=B0=E7=9A=84?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/PaymentPopup.vue  | 271 +++++++++++++++++++++++
 components/YifanSelector.vue | 411 +++++++++++++++++++++++++++++++++++
 2 files changed, 682 insertions(+)
 create mode 100644 components/PaymentPopup.vue
 create mode 100644 components/YifanSelector.vue

diff --git a/components/PaymentPopup.vue b/components/PaymentPopup.vue
new file mode 100644
index 0000000..0af85e9
--- /dev/null
+++ b/components/PaymentPopup.vue
@@ -0,0 +1,271 @@
+<template>
+  <view v-if="visible" class="payment-popup-mask" @tap="handleMaskClick">
+    <view class="payment-popup-content" @tap.stop>
+      <!-- 顶部提示 -->
+      <view class="risk-warning">
+        <text>盲盒具有随机性，请理性消费，购买即表示同意</text>
+        <text class="agreement-link" @tap="openAgreement">《购买协议》</text>
+      </view>
+
+      <view class="popup-header">
+        <text class="popup-title">确认支付</text>
+        <view class="close-icon" @tap="handleClose">×</view>
+      </view>
+      
+      <view class="popup-body">
+        <view class="amount-section" v-if="amount !== undefined && amount !== null">
+           <text class="label">支付金额</text>
+           <text class="amount">¥{{ amount }}</text>
+        </view>
+
+        <view class="form-item">
+          <text class="label">优惠券</text>
+          <picker 
+            mode="selector" 
+            :range="coupons" 
+            range-key="name" 
+            @change="onCouponChange"
+            :value="couponIndex"
+            :disabled="!coupons || coupons.length === 0"
+          >
+            <view class="picker-display">
+              <text v-if="selectedCoupon" class="selected-text">{{ selectedCoupon.name }} (-¥{{ selectedCoupon.amount }})</text>
+              <text v-else-if="!coupons || coupons.length === 0" class="placeholder">暂无优惠券可用</text>
+              <text v-else class="placeholder">请选择优惠券</text>
+              <text class="arrow"></text>
+            </view>
+          </picker>
+        </view>
+
+        <view class="form-item" v-if="showCards">
+          <text class="label">道具卡</text>
+          <picker 
+            mode="selector" 
+            :range="propCards" 
+            range-key="name" 
+            @change="onCardChange"
+            :value="cardIndex"
+            :disabled="!propCards || propCards.length === 0"
+          >
+            <view class="picker-display">
+              <text v-if="selectedCard" class="selected-text">{{ selectedCard.name }}</text>
+              <text v-else-if="!propCards || propCards.length === 0" class="placeholder">暂无道具卡可用</text>
+              <text v-else class="placeholder">请选择道具卡</text>
+              <text class="arrow"></text>
+            </view>
+          </picker>
+        </view>
+      </view>
+
+      <view class="popup-footer">
+        <button class="btn-cancel" @tap="handleClose">取消</button>
+        <button class="btn-confirm" @tap="handleConfirm">确认支付</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  amount: { type: [Number, String], default: 0 },
+  coupons: { type: Array, default: () => [] },
+  propCards: { type: Array, default: () => [] },
+  showCards: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['update:visible', 'confirm', 'cancel'])
+
+const couponIndex = ref(-1)
+const cardIndex = ref(-1)
+
+const selectedCoupon = computed(() => {
+  if (couponIndex.value >= 0 && props.coupons[couponIndex.value]) {
+    return props.coupons[couponIndex.value]
+  }
+  return null
+})
+
+const selectedCard = computed(() => {
+  if (cardIndex.value >= 0 && props.propCards[cardIndex.value]) {
+    return props.propCards[cardIndex.value]
+  }
+  return null
+})
+
+watch(() => props.visible, (val) => {
+  if (val) {
+    couponIndex.value = -1
+    cardIndex.value = -1
+  }
+})
+
+function onCouponChange(e) {
+  couponIndex.value = e.detail.value
+}
+
+function onCardChange(e) {
+  cardIndex.value = e.detail.value
+}
+
+function openAgreement() {
+  uni.navigateTo({
+    url: '/pages/agreement/purchase' // 假设协议页面路径，如果没有请替换为实际路径
+  })
+}
+
+function handleMaskClick() {
+  handleClose()
+}
+
+function handleClose() {
+  emit('update:visible', false)
+  emit('cancel')
+}
+
+function handleConfirm() {
+  emit('confirm', {
+    coupon: selectedCoupon.value,
+    card: props.showCards ? selectedCard.value : null
+  })
+}
+</script>
+
+<style scoped>
+.payment-popup-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 999;
+  display: flex;
+  align-items: flex-end;
+}
+
+.payment-popup-content {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 30rpx;
+  padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
+  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
+}
+
+.risk-warning {
+  background-color: #fffbe6;
+  color: #ed6a0c;
+  font-size: 24rpx;
+  padding: 16rpx 24rpx;
+  border-radius: 8rpx;
+  margin-bottom: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.agreement-link {
+  color: #1890ff;
+  text-decoration: underline;
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 40rpx;
+}
+.popup-title {
+  font-size: 32rpx;
+  font-weight: bold;
+}
+.close-icon {
+  position: absolute;
+  right: 30rpx;
+  font-size: 40rpx;
+  color: #999;
+  line-height: 1;
+  padding: 10rpx;
+}
+.popup-body {
+  padding: 30rpx;
+}
+.amount-section {
+  text-align: center;
+  margin-bottom: 40rpx;
+}
+.amount-section .label {
+  font-size: 28rpx;
+  color: #666;
+  margin-right: 10rpx;
+}
+.amount-section .amount {
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #ff4d4f;
+}
+.form-item {
+  margin-bottom: 30rpx;
+}
+.form-item .label {
+  display: block;
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+.picker-display {
+  border: 1rpx solid #ddd;
+  border-radius: 8rpx;
+  padding: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 28rpx;
+  background: #f9f9f9;
+}
+.selected-text {
+  color: #333;
+}
+.placeholder {
+  color: #999;
+}
+.arrow {
+  color: #ccc;
+  width: 16rpx;
+  height: 16rpx;
+  border-right: 2rpx solid #ccc;
+  border-bottom: 2rpx solid #ccc;
+  transform: rotate(-45deg);
+  margin-right: 8rpx;
+}
+.popup-footer {
+  display: flex;
+  border-top: 1rpx solid #eee;
+}
+.btn-cancel, .btn-confirm {
+  flex: 1;
+  border: none;
+  background: #fff;
+  border-radius: 0;
+  font-size: 30rpx;
+  padding: 24rpx 0;
+  line-height: 1.5;
+}
+.btn-cancel::after, .btn-confirm::after {
+  border: none;
+}
+.btn-cancel {
+  color: #666;
+  border-right: 1rpx solid #eee;
+}
+.btn-confirm {
+  color: #007AFF;
+  font-weight: bold;
+}
+</style>
diff --git a/components/YifanSelector.vue b/components/YifanSelector.vue
new file mode 100644
index 0000000..ed55465
--- /dev/null
+++ b/components/YifanSelector.vue
@@ -0,0 +1,411 @@
+<template>
+  <view class="choice-grid-container">
+    <view v-if="loading" class="loading-state">加载中...</view>
+    <view v-else-if="!choices || choices.length === 0" class="empty-state">暂无可选位置</view>
+    
+    <view v-else class="grid-wrapper">
+      <view class="choices-grid">
+        <view 
+          v-for="(item, index) in choices" 
+          :key="item.id || index"
+          class="choice-item"
+          :class="{
+            'is-sold': item.status === 'sold' || item.is_sold,
+            'is-selected': isSelected(item),
+            'is-available': !item.status || item.status === 'available'
+          }"
+          @tap="handleSelect(item)"
+        >
+          <text class="choice-number">{{ item.number || item.position || index + 1 }}</text>
+          <view class="choice-status">
+            <text v-if="item.status === 'sold' || item.is_sold">已售</text>
+            <text v-else-if="isSelected(item)">已选</text>
+            <text v-else>可选</text>
+          </view>
+        </view>
+      </view>
+      
+      <view class="action-bar">
+        <view class="selection-info" v-if="selectedItems.length > 0">
+          已选 <text class="highlight">{{ selectedItems.length }}</text> 个位置
+        </view>
+        <view class="selection-info" v-else>
+           请选择位置
+        </view>
+        
+        <view class="action-buttons">
+             <button v-if="selectedItems.length === 0" class="btn-random" @tap="handleRandomOne">随机一发</button>
+             <button v-else class="btn-buy" @tap="handleBuy">去支付</button>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 支付弹窗 -->
+    <PaymentPopup
+      v-model:visible="paymentVisible"
+      :amount="totalAmount"
+      :coupons="coupons"
+      :showCards="false"
+      @confirm="onPaymentConfirm"
+    />
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { getIssueChoices, getUserCoupons, joinLottery, createWechatOrder, getLotteryResult } from '@/api/appUser'
+import PaymentPopup from '@/components/PaymentPopup.vue'
+
+const props = defineProps({
+  activityId: { type: [String, Number], required: true },
+  issueId: { type: [String, Number], required: true },
+  pricePerDraw: { type: Number, default: 0 } // 单抽价格，用于计算总价
+})
+
+const emit = defineEmits(['payment-success'])
+
+const choices = ref([])
+const loading = ref(false)
+const selectedItems = ref([])
+const paymentVisible = ref(false)
+
+// 模拟优惠券和道具卡数据，实际项目中可能需要从接口获取
+const coupons = ref([]) 
+
+const totalAmount = computed(() => {
+  return (selectedItems.value.length * props.pricePerDraw).toFixed(2)
+})
+
+watch(() => props.issueId, (newVal) => {
+  if (newVal) {
+    loadChoices()
+    selectedItems.value = []
+  }
+})
+
+onMounted(() => {
+  if (props.issueId) {
+    loadChoices()
+  }
+})
+
+async function loadChoices() {
+  loading.value = true
+  try {
+    const res = await getIssueChoices(props.activityId, props.issueId)
+    
+    // 处理 { total_slots: 1, available: [1], claimed: [] } 这种格式
+    if (res && typeof res.total_slots === 'number' && Array.isArray(res.available)) {
+      const total = res.total_slots
+      const list = []
+      // 转换为 Set 提高查找效率，确保类型一致
+      const availableSet = new Set(res.available.map(v => Number(v)))
+      
+      for (let i = 1; i <= total; i++) {
+        const isAvailable = availableSet.has(i)
+        list.push({
+          id: i,
+          number: i,
+          position: i,
+          status: isAvailable ? 'available' : 'sold',
+          is_sold: !isAvailable
+        })
+      }
+      choices.value = list
+    } 
+    // 兼容旧的/其他的返回结构
+    else if (Array.isArray(res)) {
+      choices.value = res
+    } else if (res && Array.isArray(res.data)) {
+      choices.value = res.data
+    } else if (res && Array.isArray(res.choices)) {
+      choices.value = res.choices
+    } else {
+      choices.value = []
+    }
+  } catch (error) {
+    console.error('Failed to load choices:', error)
+    uni.showToast({ title: '加载位置失败', icon: 'none' })
+  } finally {
+    loading.value = false
+  }
+}
+
+function isSelected(item) {
+  return selectedItems.value.some(i => i.id === item.id || (i.position && i.position === item.position))
+}
+
+function handleSelect(item) {
+  if (item.status === 'sold' || item.is_sold) {
+    return
+  }
+  
+  const index = selectedItems.value.findIndex(i => i.id === item.id || (i.position && i.position === item.position))
+  if (index > -1) {
+    selectedItems.value.splice(index, 1)
+  } else {
+    selectedItems.value.push(item)
+  }
+}
+
+function handleBuy() {
+  if (selectedItems.value.length === 0) return
+  paymentVisible.value = true
+  fetchCoupons()
+}
+
+function handleRandomOne() {
+  const available = choices.value.filter(item => 
+    !item.is_sold && item.status !== 'sold' && !isSelected(item)
+  )
+  
+  if (available.length === 0) {
+    uni.showToast({ title: '没有可选位置了', icon: 'none' })
+    return
+  }
+  
+  const randomIndex = Math.floor(Math.random() * available.length)
+  const randomItem = available[randomIndex]
+  
+  // 选中该位置
+  selectedItems.value.push(randomItem)
+  
+  // 立即弹出支付
+  paymentVisible.value = true
+  fetchCoupons()
+}
+
+
+async function fetchCoupons() {
+  const user_id = uni.getStorageSync('user_id')
+  if (!user_id) return
+  try {
+    const res = await getUserCoupons(user_id, 0, 1, 100)
+    let list = []
+    if (Array.isArray(res)) list = res
+    else if (res && Array.isArray(res.list)) list = res.list
+    else if (res && Array.isArray(res.data)) list = res.data
+    coupons.value = list.map((i, idx) => {
+      const cents = (i.remaining !== undefined && i.remaining !== null) ? Number(i.remaining) : Number(i.amount ?? i.value ?? 0)
+      const yuan = isNaN(cents) ? 0 : (cents / 100)
+      return {
+        id: i.id ?? i.coupon_id ?? String(idx),
+        name: i.name ?? i.title ?? '优惠券',
+        amount: Number(yuan).toFixed(2)
+      }
+    })
+  } catch (e) {
+    console.error('fetchCoupons error', e)
+    coupons.value = []
+  }
+}
+
+async function onPaymentConfirm(paymentData) {
+  paymentVisible.value = false
+  
+  const selectedSlots = selectedItems.value.map(item => item.id || item.position)
+  
+  if (selectedSlots.length === 0) {
+     uni.showToast({ title: '未选择位置', icon: 'none' })
+     return
+  }
+  
+  const openid = uni.getStorageSync('openid')
+  if (!openid) {
+     uni.showToast({ title: '未获取到OpenID，请重新登录', icon: 'none' })
+     return
+  }
+
+  uni.showLoading({ title: '处理中...' })
+  
+  try {
+    // 1. 先调用抽奖接口 (joinLottery)，服务器会返回订单号等信息
+    const payload = {
+      activity_id: Number(props.activityId),
+      issue_id: Number(props.issueId),
+      channel: 'miniapp',
+      count: selectedSlots.length,
+      coupon_id: paymentData.coupon ? Number(paymentData.coupon.id) : 0,
+      slot_index: selectedSlots.map(Number)
+    }
+
+    const joinRes = await joinLottery(payload)
+    // 假设 joinRes 包含 order_no，如果结构不同请调整
+    const orderNo = joinRes.order_no || joinRes.data?.order_no || joinRes.result?.order_no
+    
+    if (!orderNo) {
+       throw new Error('未获取到订单号')
+    }
+
+    // 2. 使用返回的订单号去发起支付
+    const payRes = await createWechatOrder({
+      openid: openid,
+      order_no: orderNo
+    })
+    
+    // 调起微信支付
+    await new Promise((resolve, reject) => {
+       uni.requestPayment({
+         provider: 'wxpay',
+         timeStamp: payRes.timeStamp || payRes.timestamp,
+         nonceStr: payRes.nonceStr || payRes.noncestr,
+         package: payRes.package,
+         signType: payRes.signType || 'MD5',
+         paySign: payRes.paySign,
+         success: resolve,
+         fail: reject
+       })
+    })
+
+    uni.hideLoading()
+    uni.showLoading({ title: '查询结果...' })
+    
+    // 3. 支付成功，查询抽奖结果
+    const resultRes = await getLotteryResult(orderNo)
+    console.log('Lottery Result:', resultRes) // 打印结果供查看
+
+    uni.hideLoading()
+    uni.showToast({ title: '支付成功', icon: 'success' })
+    
+    // 触发支付成功事件
+    emit('payment-success', {
+      result: resultRes,
+      items: selectedItems.value
+    })
+    
+    // 清空选择并刷新
+    selectedItems.value = []
+    loadChoices()
+    
+  } catch (e) {
+    uni.hideLoading()
+    console.error('Flow failed:', e)
+    
+    if (e.errMsg && e.errMsg.indexOf('cancel') !== -1) {
+       uni.showToast({ title: '支付已取消', icon: 'none' })
+    } else {
+       uni.showToast({ title: e.message || '操作失败', icon: 'none' })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.choice-grid-container {
+  padding: 20rpx;
+}
+
+.loading-state, .empty-state {
+  text-align: center;
+  padding: 40rpx;
+  color: #999;
+}
+
+.choices-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr); /* 一行5个 */
+  gap: 16rpx;
+  margin-bottom: 120rpx; /* 留出底部操作栏空间 */
+}
+
+.choice-item {
+  aspect-ratio: 1;
+  background: #fff;
+  border: 2rpx solid #e0e0e0;
+  border-radius: 8rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.choice-number {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.choice-status {
+  font-size: 20rpx;
+  margin-top: 4rpx;
+  color: #666;
+}
+
+/* 状态样式 */
+.is-available {
+  background: #fff;
+}
+
+.is-sold {
+  background: #f5f5f5;
+  border-color: #eee;
+  opacity: 0.6;
+}
+.is-sold .choice-number {
+  color: #ccc;
+  text-decoration: line-through;
+}
+
+.is-selected {
+  background: #e6f7ff;
+  border-color: #1890ff;
+}
+.is-selected .choice-number {
+  color: #1890ff;
+}
+.is-selected .choice-status {
+  color: #1890ff;
+}
+
+/* 底部操作栏 */
+.action-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  padding: 20rpx 30rpx;
+  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 100;
+  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+}
+
+.selection-info {
+  font-size: 28rpx;
+  color: #333;
+}
+
+.highlight {
+  color: #ff4d4f;
+  font-weight: bold;
+  margin: 0 4rpx;
+}
+
+.btn-buy {
+  background: #ff4d4f;
+  color: #fff;
+  border-radius: 40rpx;
+  padding: 0 60rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  font-size: 30rpx;
+  margin: 0;
+}
+
+.btn-random {
+  background: #007AFF;
+  color: #fff;
+  border-radius: 40rpx;
+  padding: 0 60rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  font-size: 30rpx;
+  margin: 0;
+}
+</style>