Merge pull request #18 from Time-Machine-Lab/ximena

Ximena
Time-Machine-Lab · Dec 21, 2024 · 898ef84 · 898ef84
2 parents 7d048d8 + 624decc
commit 898ef84
Show file tree

Hide file tree

Showing 18 changed files with 155 additions and 85 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
   </head>
   <body>
   <script src="//at.alicdn.com/t/c/font_4773260_zpj4jsw12uc.js"></script>
+  <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>
   <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/public/img/pay/0.png b/public/img/pay/0.png
diff --git a/public/img/pay/128.png b/public/img/pay/128.png
diff --git a/public/img/pay/38.png b/public/img/pay/38.png
diff --git a/public/img/pay/68.png b/public/img/pay/68.png
diff --git a/src/api/login/type.ts b/src/api/login/type.ts
@@ -8,7 +8,8 @@ export interface UserVO{
     avatar: string;
     email: string;
     nickname: string;
-    point: number;
+    id: string,
+    phoneNum: string
 }
 export interface LoginForm{
     email: string;

diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue
diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue
diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue
diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue
diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue
diff --git a/src/components/market/MarketCard.vue b/src/components/market/MarketCard.vue
@@ -45,7 +45,7 @@ const clickProject = function (){
 
 .market-card {
   width: 100%;
-  height: 100%;
+  height: 500px;
   background-color: rgba(255, 255, 255, 0.5);
   border-radius: 15px;
   overflow: hidden;

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -9,6 +9,7 @@ import ErrorView from '../views/error/index.vue'
 import PublicComponent from '../views/profile/components/public.vue'
 import IntroView from '../views/intro/index.vue'
 import VipView from '../views/vip/index.vue'
+import PayView from '../views/pay/index.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -32,7 +33,9 @@ const router = createRouter({
         { path: 'error', name: 'error', component: ErrorView },
       ]
     },
-    { path: '/login', name: 'login', component: LoginView }
+    { path: '/login', name: 'login', component: LoginView },
+    { path: '/pay', redirect: { name: 'pay', params: { itemName: '0' } }},
+    { path: '/pay/:itemName', name: 'pay', component: PayView },
   ],
 })
 

diff --git a/src/views/market/list.vue b/src/views/market/list.vue
@@ -5,7 +5,7 @@ import project from "./project.vue";
 // import {tr} from "vuetify/locale";
 import {searchProject} from '@/api/market/api.ts'
 import MarketCard from "@/components/market/MarketCard.vue";
-const searchParam = reactive<SearchProjectListParam>({
+let searchParam = reactive<SearchProjectListParam>({
   name: '', // 确保这里有一个默认值
   codeLanguage: '',
   max: 1000,
@@ -35,7 +35,15 @@ const nextPage = (page :number)=>{
   searchParam.page = page
   searchEvent()
 }
+// 虚拟滚动
+async function load ({ done }: any) {
+  searchParam.page += 1
+  const res = await searchProject(searchParam)
 
+  marketCards.push(...res.respList)
+
+  done('ok')
+}
 onMounted(()=>{
   searchEvent();
 })
@@ -117,7 +125,7 @@ const handleCardClose = function (){
 
 
 // 创建 15 条模拟数据
-const marketCards = reactive<ProjectData[]>([]);
+let marketCards = reactive<ProjectData[]>([]);
 </script>
 
 <template>
@@ -194,30 +202,34 @@ const marketCards = reactive<ProjectData[]>([]);
 
         </div>
       </div>
-      <div class="center-text">
-         <p style="font-size: 80px; font-weight: bolder">Market</p>
-        <p style="margin: 10px; font-size: 25px">Curated products selected for digital design professionals like you.</p>
-      </div>
+<!--      <div class="center-text">-->
+<!--         <p style="font-size: 80px; font-weight: bolder">Market</p>-->
+<!--        <p style="margin: 10px; font-size: 25px">Curated products selected for digital design professionals like you.</p>-->
+<!--      </div>-->
 
       <div class="card-list">
-        <div v-for="(marketCard, index) in marketCards">
-          <marketCard :key="index" :market-data="marketCard" @clickProject="handleCardEvent"></marketCard>
-        </div>
+        <v-infinite-scroll :items="marketCards" :onLoad="load">
+          <div class="grid-container">
+            <template v-for="(item, index) in marketCards" :key="item">
+              <MarketCard :market-data="item" @clickProject="handleCardEvent"></MarketCard>
+            </template>
+          </div>
+        </v-infinite-scroll>
       </div>
 
-    <v-pagination  style="margin-top: 20px" v-model="searchParam.page" :length="Math.ceil(total / 2)" @update="handlePageChange" @prev="prevPage" @next="nextPage"></v-pagination>
+<!--    <v-pagination  style="margin-top: 20px" v-model="searchParam.page" :length="Math.ceil(total / 2)" @update="handlePageChange" @prev="prevPage" @next="nextPage"></v-pagination>-->
   </div>
   <project v-if="projectPopDialog" @closePop="handleCardClose" :projectData="clickedProjectData"></project>
 </template>
 
 <style scoped>
 .market-view{
   overflow: hidden;
-  padding-bottom: 100px;
+  padding-bottom: 50px;
+  padding-top: 20px;
 }
 
 .top-search-bar{
-  position: relative;
   display: flex;
   align-items: center; /* 垂直居中（可选） */
   width: 80%;
@@ -263,13 +275,31 @@ const marketCards = reactive<ProjectData[]>([]);
 }
 
 .card-list {
+  position: sticky;
+  top:200px;
+}
+.grid-container {
   display: grid;
-  margin: 0 auto;
-  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-  max-width: calc(4 * 400px + 3 * 50px + 6vw); /* 控制最大宽度以限制列数 */
-  gap: 50px; /* 元素之间的间隔 */
-  padding: 0 3vw; /* 左右 padding 为 5vw */
-  grid-auto-rows: 650px;
+  grid-template-columns: 1fr 1fr 1fr; /* 两列布局 */
+  gap: 20px; /* 你可以根据需要调整网格项之间的间距 */
+  padding: 10px 5vw;
+}
+@media (max-width: 1200px) {
+  .grid-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr; /* 两列布局 */
+    gap: 20px; /* 你可以根据需要调整网格项之间的间距 */
+  }
+}
+@media (max-width: 700px) {
+  .grid-container {
+    display: grid;
+    grid-template-columns: 1fr; /* 两列布局 */
+    gap: 20px; /* 你可以根据需要调整网格项之间的间距 */
+  }
+  .grid-container::-webkit-scrollbar {
+    display: none;
+  }
 }
 .search-btn{
   width: 48px;

diff --git a/src/views/pay/index.vue b/src/views/pay/index.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import {onMounted, ref} from "vue";
+import {useRoute} from "vue-router";
+import Text from "@/components/normal/Text.vue";
+
+let price = ref('0')
+const ready = ['38','68','128']
+let picture = ref(`/img/pay/0.png`)
+const showPrice = () => {
+  if(!useRoute().params.itemName) return;
+  price.value = useRoute().params.itemName as string
+  if(ready.includes(price.value)) {
+    picture.value = `/img/pay/${price.value}.png`;
+  }
+}
+onMounted(()=>{
+  showPrice();
+})
+</script>
+
+<template>
+  <div class="pay">
+    <div class="left flex">
+      <h1>请支付{{price}}元</h1>
+      <img :src="picture" alt="微信收款码">
+
+    </div>
+    <div class="right flex">
+      <button><h3>我已支付完成</h3></button>
+      <h4>支付完成后请等待人工审核</h4>
+      <h4>（客服将在一个工作日内完成审核）</h4>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+.pay{
+  display: flex;
+  height:100vh;
+  width:100vw;
+  align-items: center;
+  justify-content: center;
+}
+.flex{
+  display: flex;
+  height:100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.left{
+  margin-right: 50px;
+}
+.right{
+  margin-left: 50px;
+}
+img {
+  margin-top: 20px;
+  height:60%;
+}
+button{
+  background-color: black;
+  padding:20px 50px;
+  color: white;
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/views/personal/index.vue b/src/views/personal/index.vue
@@ -7,9 +7,9 @@ import svg4 from "@/views/personal/icon/svg4.vue";
 
 const setList = [
   { name: '个人资料和目录',router: '/profile', desc: '编辑您的个人资料和目录信息', icon: svg1 },
-  { name: '我的工作台',router: '/workbench', desc: '查看您收藏的模板', icon: svg4 },
+  { name: '我的工作台',router: '/workbench', desc: '查看您制作的项目', icon: svg4 },
   { name: '收藏',router: '/error', desc: '查看您收藏的模板', icon: svg2 },
-  { name: '设置',router: '/error', desc: '查看您收藏的模板', icon: svg3 },
+  { name: '设置',router: '/error', desc: '编辑网站设置', icon: svg3 },
 ]
 </script>
 

diff --git a/src/views/profile/components/public.vue b/src/views/profile/components/public.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
+import { useAuthStore } from "@/stores/authStore.ts";
+const authStore = useAuthStore();
+const { userInfo } = authStore
 const publicList = [
-  { name: "用户名（*）", content:"" },
-  { name: "显示名称（*）", content:"" }
+  { name: "用户名（*）", content:userInfo?.nickname },
+  { name: "绑定邮箱（*）", content: userInfo?.email },
+  { name: "绑定号码", content: userInfo?.phoneNum },
 ]
-const pwdList = [
-  { name: "当前密码（*）", content:"" },
-  { name: "新密码（*）", content:"" },
-  { name: "确认密码（*）", content:"" }
-]
-const emailList = [
-  { name: "当前电子邮件（*）", content:"" },
-  { name: "新邮箱（*）", content:"" },
-  { name: "确认电子邮件（*）", content:"" }
+const privateList = [
+  { name: "uid（*）", content: userInfo?.id },
 ]
 </script>
 
@@ -22,6 +19,14 @@ const emailList = [
       <div style="font-weight: lighter">在此处添加有关您的信息。</div>
     </aside>
     <div class="publicList">
+      <div
+          v-for="(item,index) in privateList"
+          :key="index"
+          class="publicItem"
+      >
+        <label>{{item.name}}</label>
+        <input v-model="item.content" :disabled="true"/>
+      </div>
       <div
           v-for="(item,index) in publicList"
           :key="index"

diff --git a/src/views/vip/index.vue b/src/views/vip/index.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import router from "@/router";
+
 const vipList =[
-  {name: "Basic", price: "58", desc: ["提供 1 个项目模板","每月免费生成 2 个项目"]},
-  {name: "Professional", price: "118", desc: ["提供 1 个项目模板","每月免费生成 5 个项目"]},
-  {name: "Enterprise", price: "218", desc: ["提供 2 个项目模板","每月免费生成 10 个项目","项目市场产品 10% 折扣"]}
+  {name: "Basic", price: "38", desc: ["提供 1 个项目模板","每月免费生成 2 个项目"]},
+  {name: "Professional", price: "68", desc: ["提供 1 个项目模板","每月免费生成 5 个项目"]},
+  {name: "Enterprise", price: "128", desc: ["提供 2 个项目模板","每月免费生成 10 个项目","项目市场产品 10% 折扣"]}
 ]
 </script>
 
@@ -23,7 +25,7 @@ const vipList =[
           <span style="font-weight: bold;font-size:4rem">￥{{item.price}}</span>
           <span>/ month</span>
         </div>
-        <button>Select {{item.name}}</button>
+        <button @click="router.push({ name: 'pay', params: { itemName: item.price } })">Select {{item.name}}</button>
         <ul>
           <li v-for="(desc, descIndex) in item.desc" :key="descIndex">
             {{ desc }}
@@ -32,6 +34,9 @@ const vipList =[
       </div>
     </div>
   </div>
+  <footer>
+    <label>客服请联系WX: geniussse</label>
+  </footer>
 </template>
 
 <style scoped>
@@ -67,4 +72,8 @@ ul{
   padding-left:15px;
   margin-top: 60px;
 }
+footer{
+  height:100px;
+  padding: 10px 5vw;
+}
 </style>