ownphone/shop.html at main · Elara312/ownphone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>商店</title>
    <link rel="stylesheet" href="shop.css">
    <script src="viewport-fix.js"></script>
</head>
<body>
    <div class="shop-app">
        <!-- 顶部导航 -->
        <header class="shop-header">
            <button class="shop-back" onclick="window.location.href='index.html'">‹</button>
            <div class="shop-header-center">
                <select id="charSelect" class="char-picker" onchange="onCharChange()">
                    <option value="">选择CHAR</option>
                </select>
            </div>
            <div class="shop-wallet">
                <span class="wallet-icon">💰</span>
                <span class="wallet-amount" id="walletAmount">0</span>
            </div>
        </header>

        <!-- 搜索栏 -->
        <div class="shop-search-bar">
            <div class="search-input-wrap">
                <span class="search-icon">🔍</span>
                <input type="text" id="searchInput" placeholder="搜索好物..." onkeydown="if(event.key==='Enter')searchProducts()">
            </div>
            <button class="search-go-btn" onclick="searchProducts()">搜索</button>
        </div>

        <!-- Tab 导航 -->
        <nav class="shop-tabs">
            <button class="shop-tab active" data-tab="home" onclick="switchTab('home')">🏠 推荐</button>
            <button class="shop-tab" data-tab="search-results" onclick="switchTab('search-results')">🔎 搜索</button>
            <button class="shop-tab" data-tab="custom" onclick="switchTab('custom')">✨ 自定义</button>

        </nav>

        <!-- 内容区 -->
        <main class="shop-content">
            <!-- 推荐页 -->
            <section class="tab-panel active" id="panel-home">
                <div class="panel-toolbar">
                    <span class="toolbar-title">为你们推荐</span>
                    <button class="toolbar-btn" id="refreshRecommendBtn" onclick="refreshRecommend()">🔄 换一批</button>
                </div>
                <div class="product-grid" id="recommendGrid">
                    <div class="empty-state">
                        <div class="empty-icon">🎁</div>
                        <p>选择CHAR后点击「换一批」获取推荐</p>
                    </div>
                </div>
            </section>

            <!-- 搜索结果页 -->
            <section class="tab-panel" id="panel-search-results">
                <div class="panel-toolbar">
                    <span class="toolbar-title" id="searchResultTitle">搜索结果</span>
                    <button class="toolbar-btn" onclick="searchProducts()">🔄 换一批</button>
                </div>
                <div class="product-grid" id="searchGrid">
                    <div class="empty-state">
                        <div class="empty-icon">🔍</div>
                        <p>输入关键词搜索情侣好物</p>
                    </div>
                </div>
            </section>

            <!-- 自定义商品页 -->
            <section class="tab-panel" id="panel-custom">
                <div class="panel-toolbar">
                    <span class="toolbar-title">我的商品</span>
                    <button class="toolbar-btn" onclick="openAddProduct()">➕ 添加商品</button>
                </div>
                <div class="product-grid" id="customGrid">
                    <div class="empty-state">
                        <div class="empty-icon">✨</div>
                        <p>还没有自定义商品，点击添加</p>
                    </div>
                </div>
            </section>


        </main>
    </div>

    <!-- 购买确认弹窗 -->
    <div class="modal-overlay" id="buyModal" style="display:none">
        <div class="modal-card">
            <div class="modal-header">确认购买</div>
            <div class="modal-body" id="buyModalBody"></div>
            <div class="modal-actions">
                <button class="modal-btn cancel" onclick="closeBuyModal()">取消</button>
                <button class="modal-btn confirm" onclick="confirmBuy()">💳 确认支付</button>
            </div>
        </div>
    </div>

    <!-- 添加商品弹窗 -->
    <div class="modal-overlay" id="addProductModal" style="display:none">
        <div class="modal-card">
            <div class="modal-header">添加自定义商品</div>
            <div class="modal-body">
                <div class="form-row">
                    <label>商品名称</label>
                    <input type="text" id="addProdName" placeholder="如：一个拥抱券">
                </div>
                <div class="form-row">
                    <label>商品描述</label>
                    <textarea id="addProdDesc" rows="2" placeholder="描述一下这个商品..."></textarea>
                </div>
                <div class="form-row">
                    <label>价格（积分）</label>
                    <input type="number" id="addProdPrice" min="1" placeholder="50">
                </div>
            </div>
            <div class="modal-actions">
                <button class="modal-btn cancel" onclick="closeAddProduct()">取消</button>
                <button class="modal-btn confirm" onclick="saveCustomProduct()">✅ 添加</button>
            </div>
        </div>
    </div>

    <script src="shop.js"></script>
</body>
</html>