Browse Source

1.移除全局字体大小
2.list 组件 测试版
3.移除部分无用代码

bzkf3 2 years ago
parent
commit
f7c69141ef

+ 2 - 0
.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+src/*.d.ts

+ 1 - 5
index.html

@@ -13,10 +13,6 @@
   <div id="app"></div>
   <script src="/config.js"></script>
   <script type="module" src="/src/main.js"></script>
-  <script> document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px'
-    window.onresize = function () {
-      document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px'
-    }</script>
 </body>
 
-</html>
+</html>

+ 34 - 5
src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useDark, useToggle, useFullscreen } from '@vueuse/core';
+import { useDark, useToggle, useFullscreen, useWindowSize } from '@vueuse/core';
 
 const { toggle } = useFullscreen()
 
@@ -8,32 +8,61 @@ const toggleDark = useToggle(isDark)
 
 const theme = computed(() => isDark.value ? 'dark' : 'light')
 const themeVars = {
-
+  'nav-bar-background': '#0021C9',
+  'nav-bar-icon-color': '#F5F5F5',
+  'nav-bar-text-color': '#F5F5F5',
+  'nav-bar-title-text-color': '#F5F5F5',
 }
+
+const { width } = useWindowSize();
+watch(width, () => {
+  if (width.value <= 768) {
+    document.documentElement.style.fontSize = '16px';
+  }
+  if (width.value > 768) {
+    document.documentElement.style.fontSize = '20px';
+  }
+}, {
+  immediate: true
+});
 </script>
 
 <template>
   <van-config-provider :theme="theme" :theme-vars="themeVars"
     class="w-screen h-screen bg-light-300 text-dark-900 flex flex-col " :class="isDark && 'bg-dark-800 text-light-900'">
     <!-- dark/light mode -->
-    <van-nav-bar title="标题">
+    <!-- <van-nav-bar title="标题">
       <template #right>
         <div @click="toggleDark()" class="text-18px">
           <i-carbon-moon v-show="isDark" class="text-light-900" />
           <i-carbon-sun v-show="!isDark" class="text-dark-900" />
         </div>
       </template>
-    </van-nav-bar>
+    </van-nav-bar> -->
 
     <!-- fullscreen -->
     <!-- <van-nav-bar title="标题" right-text="全屏" @click-right="toggle">
     </van-nav-bar> -->
 
-    <div class="overflow-y-auto">
+    <div class="overflow-y-auto w-full">
       <router-view></router-view>
     </div>
   </van-config-provider>
 </template>
 
 
+<style>
+body {
+  --van-font-size-xs: 0.625rem;
+  --van-font-size-sm: 0.75rem;
+  --van-font-size-md: 0.875rem;
+  --van-font-size-lg: 1rem;
+
+  --van-line-height-xs: 0.875rem;
+  --van-line-height-sm: 1.125rem;
+  --van-line-height-md: 1.25rem;
+  --van-line-height-lg: 1.375rem;
+}
+</style>
+
 

+ 80 - 0
src/components/RemoteList/index.vue

@@ -0,0 +1,80 @@
+<script setup>
+const props = defineProps({
+  url: {
+    type: String,
+    required: true,
+  },
+  d: {
+    type: Object,
+    required: false,
+  },
+})
+
+let page = 1
+
+let loading = $ref(false)
+let error = $ref(false)
+let finished = $ref(false)
+let refreshing = $ref(false)
+
+let list = $ref([])
+
+request({
+  url: props.url,
+  data: {
+    page,
+    ...props.d
+  },
+})
+
+
+function onLoad() {
+  console.log('onLoad');
+  loading = true
+  request({
+    url: props.url,
+    data: {
+      page,
+      ...props.d
+    },
+  }).then(res => {
+    if (res.code === '0') {
+      if (refreshing) {
+        list = [];
+        refreshing = false;
+      }
+      list = list.concat(res.data.page_data)
+      loading = false
+      page++
+      if (res.data.page_now === res.data.total_page) {
+        finished = true
+      }
+    } else {
+      error = true
+    }
+
+  }).catch(err => {
+    console.log(err)
+  })
+
+}
+
+function onRefresh() {
+  console.log('onRefresh');
+  finished = false
+  page = 1
+  onLoad()
+}
+</script>
+
+<template>
+  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+    <van-list v-model:loading="loading" v-model:error="error" error-text="请求失败,点击重新加载" :finished="finished"
+      finished-text="没有更多了" @load="onLoad" @click.stop>
+      <template v-for="item in list">
+        <slot :="item"></slot>
+      </template>
+    </van-list>
+  </van-pull-refresh>
+
+</template>

+ 15 - 5
src/pages/_home/index.vue

@@ -5,9 +5,10 @@ const images = [
 ];
 
 const gridList = [
-  { icon: 'photo-o', text: '求真在线', to: '' },
+  { icon: 'photo-o', text: '求真在线', to: '/qzzx' },
   { icon: 'photo-o', text: '线上课堂', to: '' },
   { icon: 'photo-o', text: '社团选课', to: '/stxk' },
+  { icon: 'photo-o', text: '社团选课js', to: '/stxkjsd' },
   { icon: 'photo-o', text: '教师成长', to: '' },
   { icon: 'photo-o', text: '云尚活动', to: '' },
   { icon: 'photo-o', text: '校长信箱', to: '' },
@@ -16,13 +17,12 @@ const gridList = [
 </script>
 
 <template>
-  <div class="flex flex-col justify-center items-center p-4">
+  <div class="flex flex-col justify-center p-4">
     <van-swipe :autoplay="3000" lazy-render class="rounded-md shadow-md">
       <van-swipe-item v-for="image in images" :key="image">
-        <img :src="image" />
+        <img :src="image" class="w-full" />
       </van-swipe-item>
     </van-swipe>
-
     <van-grid :gutter="10" class="mt-4">
       <van-grid-item v-for="item in gridList" :key="item.text" v-bind="item" />
     </van-grid>
@@ -34,9 +34,19 @@ const gridList = [
     </van-tab>
   </van-tabs>
 
-  <van-tabbar route>
+  <van-tabbar route placeholder>
     <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
     <van-tabbar-item icon="chat-o" to="/chat">消息</van-tabbar-item>
     <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
   </van-tabbar>
 </template>
+
+<style>
+.my-swipe .van-swipe-item {
+  color: #fff;
+  font-size: 20px;
+  line-height: 150px;
+  text-align: center;
+  background-color: #39a9ed;
+}
+</style>

+ 2 - 2
src/pages/stxk/jz/index.vue

@@ -10,7 +10,7 @@ function handleNavRightClick() {
   router.push('/stxk/jz/wd')
 }
 
-let list = $ref(Array.from({ length: 8 }).map((_, i) => ({ id: i, title: '15天学习英语基础词汇基础词汇基础词汇', desc: '讲师:张春丽', price: '18.00', thumb: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', num: 10, enddate: '2022-8-20' })))
+let list = $ref(Array.from({ length: 8 }).map((_, i) => ({ id: i, title: '15天学习英语基础词汇基础词汇基础词汇', desc: '讲师:张春丽', price: '18.00', thumb: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', num: 10, enddate: '2022-8-23' })))
 let loading = $ref(false)
 let finished = $ref(false)
 
@@ -19,7 +19,7 @@ function onLoad() {
   // finished = false
   setTimeout(() => {
     for (let i = 0; i < 4; i++) {
-      list.push({ title: '15天学习英语基础词汇基础词汇基础词汇', desc: '讲师:张春丽', price: '18.00', thumb: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', num: 10, enddate: '2022-8-20 01:00:00' });
+      list.push({ title: '15天学习英语基础词汇基础词汇基础词汇', desc: '讲师:张春丽', price: '18.00', thumb: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', num: 10, enddate: '2022-8-23 01:00:00' });
     }
 
     // 加载状态结束

+ 14 - 4
src/pages/stxk/jz/kcxq.vue

@@ -2,7 +2,7 @@
 const props = defineProps({
   id: {
     type: String,
-    default: undefined,
+    required: true,
   },
 })
 
@@ -12,8 +12,18 @@ function handleNavLeftClick() {
 }
 
 
-function handleSubmitbarClick(){
+function handleSubmitbarClick() {
   console.log('handleSubmitbarClick');
+  request({
+    url: '/khfw/jfgl/gotopay',
+    data: {
+      client: 'h5',
+      khfw_jfgl: {
+        kkbm_s_user_id: '1',
+        kk_id: '1'
+      }
+    }
+  })
 }
 </script>
 
@@ -25,7 +35,7 @@ function handleSubmitbarClick(){
   </van-sticky>
 
   <div class="p-2 w-full">
-    <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"></van-image>
+    <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" class="w-full"></van-image>
 
     <div class="text-sm">
       <div class="flex text-lg py-1">
@@ -74,7 +84,7 @@ function handleSubmitbarClick(){
       </div>
     </div>
 
-    <van-submit-bar :price="3050" button-text="立即报名" @submit="handleSubmitbarClick" placeholder  />
+    <van-submit-bar :price="3050" button-text="立即报名" @submit="handleSubmitbarClick" placeholder />
   </div>
 
 

+ 1 - 1
src/pages/stxk/jz/wd/kcxq.vue

@@ -39,7 +39,7 @@ function handleDetailBtnClick(item) {
   </van-sticky>
 
   <div class="p-2 w-full">
-    <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"></van-image>
+    <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" class="w-full" ></van-image>
 
     <div class="text-sm mb-4">
       <div class="flex text-lg py-1">