Initial commit

wechat-mini-program/pages/coupon/coupon.js

@@ -0,0 +1,76 @@
+const app = getApp()
+
+Page({
+  data: {
+    coupons: []
+  },
+  onLoad() {
+    this.fetchCoupons();
+  },
+  fetchCoupons() {
+    const { request } = require('../../utils/request')
+    request({ url: '/coupons' })
+      .then((data) => {
+        const list = Array.isArray(data) ? data : (data && data.results) || []
+        this.setData({ coupons: list })
+      })
+      .catch(() => {
+        this.setData({
+          coupons: [
+            {
+              id: 1,
+              amount: '50',
+              unit: '元',
+              title: '新人见面礼',
+              desc: '无门槛使用，适用于所有课程',
+              expiry: '2023-12-31',
+              status: 'available',
+              color: 'from-blue-500 to-cyan-400',
+              bgStart: 'from-blue-50',
+              bgEnd: 'to-cyan-50',
+              shadow: 'shadow-blue-100'
+            },
+            {
+              id: 2,
+              amount: '8.5',
+              unit: '折',
+              title: '编程课程专享',
+              desc: '仅限编程开发类课程使用',
+              expiry: '2023-11-30',
+              status: 'available',
+              color: 'from-violet-500 to-fuchsia-500',
+              bgStart: 'from-violet-50',
+              bgEnd: 'to-fuchsia-50',
+              shadow: 'shadow-violet-100'
+            },
+            {
+              id: 3,
+              amount: '100',
+              unit: '元',
+              title: '高阶课程抵扣券',
+              desc: '满 999 元可用',
+              expiry: '2023-10-15',
+              status: 'claimed',
+              color: 'from-orange-400 to-rose-500',
+              bgStart: 'from-orange-50',
+              bgEnd: 'to-rose-50',
+              shadow: 'shadow-orange-100'
+            }
+          ]
+        })
+      })
+  },
+  handleClaim(e) {
+      const id = e.currentTarget.dataset.id;
+      if (this.data.coupons.find(c => c.id === id).status === 'claimed') return;
+
+      const updatedCoupons = this.data.coupons.map(c => 
+        c.id === id ? { ...c, status: 'claimed' } : c
+      );
+      this.setData({ coupons: updatedCoupons });
+      wx.showToast({
+        title: '领取成功',
+        icon: 'success'
+      })
+  }
+})

wechat-mini-program/pages/coupon/coupon.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "优惠券"
+}

wechat-mini-program/pages/coupon/coupon.wxml

@@ -0,0 +1,38 @@
+<view class="container">
+    <view class="header">
+        <text class="title">优惠券中心</text>
+    </view>
+    
+    <!-- VIP Banner -->
+    <view class="vip-banner">
+        <view class="vip-content">
+            <view class="vip-title">
+                <text class="icon">🎁</text> VIP 会员权益
+            </view>
+            <view class="vip-desc">每月免费领取 3 张大额优惠券</view>
+        </view>
+        <view class="vip-btn">立即开通</view>
+    </view>
+
+    <!-- Coupon List -->
+    <view class="section-title">可领取的优惠券</view>
+    <view class="coupon-list">
+        <block wx:for="{{coupons}}" wx:key="id">
+            <view class="coupon-card {{item.status === 'claimed' ? 'claimed' : ''}}" bindtap="handleClaim" data-id="{{item.id}}">
+                <view class="coupon-left">
+                    <view class="amount">
+                        <text class="num">{{item.amount}}</text>
+                        <text class="unit">{{item.unit}}</text>
+                    </view>
+                    <view class="info">
+                        <view class="coupon-name">{{item.title}}</view>
+                        <view class="coupon-desc">{{item.desc}}</view>
+                    </view>
+                </view>
+                <view class="coupon-right">
+                    <text class="btn-text">{{item.status === 'claimed' ? '已领取' : '领取'}}</text>
+                </view>
+            </view>
+        </block>
+    </view>
+</view>

wechat-mini-program/pages/coupon/coupon.wxss

@@ -0,0 +1,110 @@
+.container {
+    padding: 30rpx;
+    background-color: #f9fafb;
+    min-height: 100vh;
+}
+.header {
+    padding: 20rpx 0;
+    text-align: center;
+    margin-bottom: 20rpx;
+}
+.title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #1f2937;
+}
+.vip-banner {
+    background: linear-gradient(to bottom right, #111827, #1f2937);
+    border-radius: 30rpx;
+    padding: 40rpx;
+    color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 40rpx;
+    box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.1);
+}
+.vip-title {
+    color: #fcd34d;
+    font-weight: bold;
+    font-size: 32rpx;
+    margin-bottom: 10rpx;
+}
+.vip-desc {
+    color: #d1d5db;
+    font-size: 24rpx;
+}
+.vip-btn {
+    background: linear-gradient(to right, #fcd34d, #fbbf24);
+    color: #111827;
+    font-size: 24rpx;
+    font-weight: bold;
+    padding: 10rpx 30rpx;
+    border-radius: 40rpx;
+    margin: 0;
+}
+.section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    margin-bottom: 20rpx;
+    color: #1f2937;
+}
+.coupon-card {
+    background-color: white;
+    background: linear-gradient(to bottom right, #eff6ff, #ecfeff);
+    border-radius: 30rpx;
+    padding: 30rpx;
+    margin-bottom: 30rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 4rpx 10rpx rgba(59, 130, 246, 0.1);
+    position: relative;
+    overflow: hidden;
+}
+.coupon-card.claimed {
+    background: linear-gradient(to bottom right, #f9fafb, #f3f4f6);
+    box-shadow: none;
+    opacity: 0.7;
+}
+.coupon-left {
+    display: flex;
+    align-items: center;
+}
+.amount {
+    margin-right: 30rpx;
+    color: #2563eb;
+}
+.coupon-card.claimed .amount {
+    color: #9ca3af;
+}
+.num {
+    font-size: 60rpx;
+    font-weight: bold;
+}
+.unit {
+    font-size: 24rpx;
+}
+.coupon-name {
+    font-weight: bold;
+    font-size: 30rpx;
+    color: #1f2937;
+}
+.coupon-desc {
+    font-size: 22rpx;
+    color: #6b7280;
+    margin-top: 6rpx;
+}
+.coupon-right {
+    background-color: white;
+    padding: 10rpx 30rpx;
+    border-radius: 30rpx;
+    font-size: 24rpx;
+    font-weight: bold;
+    color: #2563eb;
+    box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.05);
+}
+.coupon-card.claimed .coupon-right {
+    background-color: #e5e7eb;
+    color: #9ca3af;
+}