feat: finish payment page layout

web/src/views/Member.vue

@@ -1,39 +1,184 @@
 <template>
-  <div class="page-member" :style="{ height: winHeight + 'px' }">
-    <div class="inner">
-      <h1>会员充值中心</h1>
-      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
+  <div class="member custom-scroll">
+    <div class="title">
+      会员充值中心
     </div>
+    <div class="inner" :style="{height: listBoxHeight + 'px'}">
+
+      <div class="info">
+        <el-alert type="info" show-icon :closable="false" effect="dark">
+          <strong>说明:</strong> 成为本站会员后每月有500次对话额度，50次 AI 绘画额度，限制下月1号解除，若在期间超过次数后可单独购买点卡。
+          当月充值的点卡有效期可以延期到下个月底。
+        </el-alert>
+      </div>
+
+      <ItemList :items="list" v-if="list.length > 0" :gap="30" :width="250">
+        <template #default="scope">
+          <div class="product-item" :style="{width: scope.width+'px'}" @click="pay(scope.item)">
+            <div class="image-container">
+              <el-image :src="vipImg" fit="cover"/>
+            </div>
+            <div class="product-title">
+              <span class="name">{{ scope.item.name }}</span>
+            </div>
+            <div class="product-info">
+              <div class="info-line">
+                <span class="label">商品原价：</span>
+                <span class="price">￥{{ scope.item.price }}</span>
+              </div>
+              <div class="info-line">
+                <span class="label">促销立减：</span>
+                <span class="price">￥{{ scope.item.discount }}</span>
+              </div>
+              <div class="info-line">
+                <span class="label">有效期：</span>
+                <span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
+                <span class="expire" v-else>当月有效</span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </ItemList>
+    </div>
+
+    <login-dialog :show="showLoginDialog" @hide="showLoginDialog = false"/>
   </div>
 </template>
 
 <script setup>
-import {ref} from "vue"
+import {nextTick, onMounted, ref} from "vue"
+import {ElMessage} from "element-plus";
+import {httpGet, httpPost} from "@/utils/http";
+import ItemList from "@/components/ItemList.vue";
+import {Delete, Plus} from "@element-plus/icons-vue";
+import LoginDialog from "@/components/LoginDialog.vue";
+import {checkSession} from "@/action/session";
+import {arrayContains, removeArrayItem, substr} from "@/utils/libs";
+import router from "@/router";
+
+const listBoxHeight = window.innerHeight - 97
+const list = ref([])
+const showLoginDialog = ref(false)
+const elements = ref(null)
+const vipImg = ref("/images/vip.png")
+onMounted(() => {
+  httpGet("/api/product/list").then((res) => {
+    list.value = res.data
+  }).catch(e => {
+    ElMessage.error("获取产品套餐失败：" + e.message)
+  })
+})
+
+const pay = (row) => {
+  checkSession().then(user => {
+    console.log(row)
+  }).catch(() => {
+    showLoginDialog.value = true
+  })
+}
 
-const winHeight = ref(window.innerHeight)
 </script>
 
-<style lang="stylus" scoped>
-.page-member {
-  display: flex;
-  justify-content: center;
-  align-items center
+<style lang="stylus">
+@import "@/assets/css/custom-scroll.styl"
+.member {
   background-color: #282c34;
+  height 100vh
+
+  .title {
+    text-align center
+    background-color #25272d
+    font-size 24px
+    color #ffffff
+    padding 10px
+    border-bottom 1px solid #3c3c3c
+  }
 
   .inner {
-    text-align center
+    color #ffffff
+    padding 15px;
+    overflow-y visible
+    overflow-x hidden
 
-    h1 {
-      color: #202020;
-      font-size: 80px;
-      font-weight: bold;
-      letter-spacing: 0.1em;
-      text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
+    .info {
+      .el-alert__description {
+        font-size 14px !important
+        margin 0
+      }
+      padding 10px 20px
     }
 
-    h2 {
-      color #ffffff;
-      font-weight: bold;
+    .list-box {
+      .product-item {
+        border 1px solid #666666
+        border-radius 6px
+        overflow hidden
+        cursor pointer
+        transition: all 0.3s ease; /* 添加过渡效果 */
+
+        .image-container {
+          display flex
+          justify-content center
+
+          .el-image {
+            padding 6px
+
+            .el-image__inner {
+              border-radius 10px
+            }
+          }
+        }
+
+        .product-title {
+          display flex
+          padding 10px
+
+          .name {
+            width 100%
+            text-align center
+            font-size 16px
+            font-weight bold
+            color #47fff1
+          }
+        }
+
+        .product-info {
+          padding 10px 20px
+          font-size 14px
+          color #999999
+
+          .info-line {
+            display flex
+            width 100%
+            padding 5px 0
+
+            .label {
+              display flex
+              width 100%
+            }
+
+            .price, .expire {
+              display flex
+              width 80px
+              justify-content right
+            }
+
+            .price {
+              color #f56c6c
+            }
+
+            .expire {
+              color #409eff
+            }
+          }
+
+        }
+
+        &:hover {
+          box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
+          transform: translateY(-10px); /* 向上移动10像素 */
+        }
+      }
     }
   }