Merge branch 'master' of coding.yundingshuyuan.com:yunshen/beyond-clouds-frontM

dev-schedule__xb.md

@@ -6,4 +6,4 @@
 + 空卡片(1)✅
 + 错误页面 layouts/error.vue (2)✅
 + 首页 pages/index(2)✅
-+ 搜索页 pages/search(3)
++ 搜索页 pages/search(3)✅

pages/blog/index.vue

 <template>
-  <yun-slider>
+  <yun-slider
+    @touchstart.native="touchStart($event)"
+    @touchmove.native="touchMove($event)"
+    @touchend.native="touchend($event)"
+    class="load-moudle"
+  >
     <yun-div
       slot="card"
     >
@@ -14,6 +19,15 @@
       <project-card></project-card>
       <project-card></project-card>
       <project-card></project-card>
+      <yun-div
+        :width-v="750"
+        :height-v="104"
+        :show-ske="false"
+        :font-style="[24,104,500,'#999','center']"
+        v-if="isLoading"
+      >
+        加载中
+      </yun-div>
     </yun-div>
   </yun-slider>
 </template>
@@ -21,6 +35,7 @@
 <script>
 import Nav from "../../components/moblie/nav";
 import ProjectCard from "../../components/moblie/projectCard";
+
 export default {
   components: {ProjectCard, Nav},
   data() {
@@ -67,7 +82,19 @@ export default {
           label: 'python',
           id: '18'
         }
-      ]
+      ],
+      top: 0,
+      pullUpState: 0, // 1:上拉加载更多, 2:加载中……, 3:我是有底线的
+      isLoading: false, // 是否正在加载
+      pullUpInfo: {
+        moreText: '上拉加载更多',
+        loadingText: '数据加载中...',
+        noMoreText: '我是有底线的'
+      },
+      startX: 0,
+      startY: 0,
+      endX: 0,
+      endY: 0
     }
   },
   created() {
@@ -80,6 +107,140 @@ export default {
         type: 'all'
       }
     })
+  },
+  methods: {
+    /**
+     * 触摸开始，手指点击屏幕时
+     * @param {object} e Touch 对象包含的属性
+     */
+    touchStart(e) {
+      this.startX = e.touches[0].pageX
+      this.startY = e.touches[0].pageY
+    },
+
+    /**
+     * 接触点改变，滑动时
+     * @param {object} e Touch 对象包含的属性
+     */
+    touchMove(e) {
+      this.endX = e.changedTouches[0].pageX
+      this.endY = e.changedTouches[0].pageY
+      let direction = this.getSlideDirection(this.startX, this.startY, this.endX, this.endY)
+      switch (direction) {
+        case 0:
+          console.log('没滑动')
+          break
+        case 1:
+          console.log('向上')
+          this.scrollToTheEnd()
+          break
+        case 2:
+          console.log('向下')
+          break
+        case 3:
+          console.log('向左')
+          break
+        case 4:
+          console.log('向右')
+          break
+        default:
+      }
+    },
+
+    /**
+     * 触摸结束，手指离开屏幕时
+     * @param {object} e Touch 对象包含的属性
+     */
+    touchend(e) {
+      this.isLoading = false
+    },
+
+    /**
+     * 判断滚动条是否到底
+     */
+    scrollToTheEnd() {
+      let innerHeight = document.querySelector('.load-moudle').clientHeight
+
+      // 变量scrollTop是滚动条滚动时，距离顶部的距离
+      let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
+
+      // 变量scrollHeight是滚动条的总高度
+      let scrollHeight = document.documentElement.clientHeight || document.body.scrollHeight
+
+      // 滚动条到底部的条件
+      if (scrollTop + scrollHeight >= innerHeight) {
+        if (this.pullUpState !== 3 && !this.isLoading) {
+          this.infiniteLoad()
+        }
+        // console.log('距顶部' + scrollTop + '滚动条总高度' + scrollHeight + '内容高度' + innerHeight)
+      }
+    },
+
+    /**
+     * 上拉加载数据
+     */
+    infiniteLoad() {
+      if (this.pullUpState !== 3) {
+        this.pullUpState = 2
+        this.isLoading = true
+        this.onInfiniteLoad()
+      }
+    },
+
+    /**
+     * 加载数据
+     */
+    onInfiniteLoad() {
+      console.log(222);
+    },
+
+
+    /**
+     * 加载数据完成
+     */
+    infiniteLoadDone() {
+      this.pullUpState = 1
+    },
+
+    /**
+     * 返回角度
+     */
+    getSlideAngle(dx, dy) {
+      return Math.atan2(dy, dx) * 180 / Math.PI
+    },
+
+    /**
+     * 根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
+     * @param {number} startX X轴开始位置
+     * @param {number} startY X轴结束位置
+     * @param {number} endX Y轴开始位置
+     * @param {number} endY Y轴结束位置
+     */
+    getSlideDirection(startX, startY, endX, endY) {
+      let dy = startY - endY
+      let dx = endX - startX
+      let result = 0
+      // 如果滑动距离太短
+      if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
+        return result
+      }
+      let angle = this.getSlideAngle(dx, dy)
+      if (angle >= -45 && angle < 45) {
+        result = 4
+      } else if (angle >= 45 && angle < 135) {
+        result = 1
+      } else if (angle >= -135 && angle < -45) {
+        result = 2
+      } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
+        result = 3
+      }
+      return result
+    }
+  },
+  watch: {
+    parentPullUpState(curVal, oldVal) {
+      this.pullUpState = curVal
+    }
   }
 }
 </script>

pages/search.vue

@@ -2,9 +2,9 @@
   <yun-div
     bg-color-v="white"
   >
-  <yun-div
-    :padding-v="[34,0,40]"
-  >
+    <yun-div
+      :padding-v="[20,0,20]"
+    >
       <yun-input
         :width-v="704"
         :height-v="72"
@@ -12,11 +12,26 @@
         bg-color-v="#F4F8FA"
         :border-v="[1,'solid',this.commonReturnPrimaryColor(0.2)]"
         style="margin: 0 auto;"
+        v-model="question"
+        placeholder="请输入您要搜索的内容"
+        @input="changeInput"
+        @focus="focus"
       >
       </yun-input>
-    <yun-div
+      <yun-div
+      v-if="this.bottom1"
+      :ske-w="50"
+      :extend-style="{
+        position:'absolute',right:commonReturnFlexedLength(40),top:commonReturnFlexedLength(44)
+      }"
+      :font-style="[24,30,400,'#999999','left']"
+    >取消</yun-div>
+      <yun-div
+      v-if="this.bottom2"
      :flex-v="['row','flex-start','center']"
-     style="position: absolute;right:23px;top: 34px;"
+      :extend-style="{
+        position:'absolute',right:commonReturnFlexedLength(23),top:commonReturnFlexedLength(20)
+      }"
     >
       <yun-div
         :width-v="36"
@@ -36,11 +51,43 @@
         :size="[116,74]"
       >搜索
       </yun-button>
+      </yun-div>
+     </yun-div>
+
+    <yun-div
+      width-v="100%"
+      :height-v="15"
+      bg-color-v="#EDF5F8"
+    ></yun-div>
+
+    <!--搜索记录-->
+    <yun-div
+      :width-v="704"
+      :margin-v="[35,27,0,26]"
+      :flex-v="['row','flex-start','center']"
+      v-for="(item, index) in topicList" :key="item"
+    >
+      <yun-div
+        :height-v="56"
+        :width-v="56"
+        :border-r="[28]"
+        :ske-h="56"
+        :ske-w="56"
+        :no-flex-shrink="true"
+        :show-ske="false"
+        :font-style="[28,56,500,'#00AAE6','center']"
+      >
+        <yun-icon name="search"  :size="28" color="#00AAE6"></yun-icon>
+      </yun-div>
+      <yun-div
+        :font-style="[32,38,400,'black','center']"
+        :margin-v="[0,0,0,20]"
+      >{{item}}</yun-div>
     </yun-div>
 
-  </yun-div>
 
   <yun-div
+    v-if="this.bottom1"
     :width-v="704"
     :padding-v="[34,0,40]"
     :margin-v="[0,'auto']"
@@ -67,49 +114,8 @@
           :ske-w="250"
           :margin-v="[0,0,40,0]"
           :font-style="[26,30,400,'black','left']"
-        >1.云深项目组</yun-div>
-        <yun-div
-          :width-v="352"
-          :ske-w="250"
-          :margin-v="[0,0,40,0]"
-          :font-style="[26,30,400,'black','left']"
-        >1.云深项目组</yun-div>
-        <yun-div
-          :width-v="352"
-          :ske-w="250"
-          :margin-v="[0,0,40,0]"
-          :font-style="[26,30,400,'black','left']"
-        >1.云深项目组</yun-div>
-        <yun-div
-          :width-v="352"
-          :ske-w="250"
-          :margin-v="[0,0,40,0]"
-          :font-style="[26,30,400,'black','left']"
-        >1.云深项目组</yun-div>
-        <yun-div
-          :width-v="352"
-          :ske-w="250"
-          :margin-v="[0,0,40,0]"
-          :font-style="[26,30,400,'black','left']"
-        >1.云深项目组</yun-div>
-        <yun-div
-          :width-v="352"
-          :ske-w="250"
-          :margin-v="[0,0,40,0]"
-          :font-style="[26,30,400,'black','left']"
-        >1.云深项目组</yun-div>
-        <yun-div
-          :width-v="352"
-          :ske-w="250"
-          :margin-v="[0,0,40,0]"
-          :font-style="[26,30,400,'black','left']"
-        >1.云深项目组</yun-div>
-        <yun-div
-          :width-v="352"
-          :ske-w="250"
-          :margin-v="[0,0,40,0]"
-          :font-style="[26,30,400,'black','left']"
-        >1.云深项目组</yun-div>
+          v-for="(item, index) in topicList" :key="item"
+        >{{item}}</yun-div>
       </yun-div>
     </yun-div>
     <yun-div
@@ -142,57 +148,21 @@
           :padding-v="[12,20,12,20]"
           bg-color-v="#EFEFEF"
           :font-style="[24,30,400,'black','left']"
+          v-for="(item, index) in topicList" :key="item"
         >
-          三个字
-        </yun-div>
-
-        <yun-div
-          :ske-w="100"
-          :margin-v="[0,20,30,0]"
-          :padding-v="[12,20,12,20]"
-          bg-color-v="#EFEFEF"
-          :font-style="[24,30,400,'black','left']"
-        >
-          三个字aaaa
-        </yun-div>
-        <yun-div
-        :ske-w="100"
-        :margin-v="[0,20,30,0]"
-        :padding-v="[12,20,12,20]"
-        bg-color-v="#EFEFEF"
-        :font-style="[24,30,400,'black','left']"
-      >
-        三个字aaaa
-      </yun-div>
-        <yun-div
-          :ske-w="100"
-          :margin-v="[0,20,30,0]"
-          :padding-v="[12,20,12,20]"
-          bg-color-v="#EFEFEF"
-          :font-style="[24,30,400,'black','left']"
-        >
-          三个字aaaa
-        </yun-div>
-        <yun-div
-          :ske-w="100"
-          :margin-v="[0,20,30,0]"
-          :padding-v="[12,20,12,20]"
-          bg-color-v="#EFEFEF"
-          :font-style="[24,30,400,'black','left']"
-        >
-          三个字aaaa
+          {{item}}
         </yun-div>
       </yun-div>
     </yun-div>
 
   </yun-div>
-    <!--搜索详情-->
-    <Nav></Nav>
+    <!--搜索结果-->
+    <Nav :path="path" :nav-list="navList"></Nav>
     <yun-div
     >
       <project-card  v-for="val in 1" key="val.projectId"></project-card>
-      <user-card-x v-for="val in 1" key="val.projectId"></user-card-x>
-      <answer-card v-for="val in 1" key="val.projectId"></answer-card>
+      <user-card-x v-for="val in 1" key="val.userId"></user-card-x>
+      <answer-card v-for="val in 1" key="val.answerId"></answer-card>
 
     </yun-div>
 
@@ -206,10 +176,75 @@
   import userCardX from '../components/moblie/userCardX'
   import projectCard from '../components/moblie/projectCard'
   export default {
-    mixins:[commonMixin],
-    layout:'blank',
-    components:{
-      Nav,answerCard,userCardX,projectCard
+    mixins: [commonMixin],
+    layout: 'blank',
+    components: {
+      Nav, answerCard, userCardX, projectCard
+    },
+    data() {
+      return {
+        question: '',
+        bottom1: true,
+        bottom2:false,
+        topicList:['云顶书院','云顶书院','云顶书院','云顶书院'],
+        path: '/search',
+        navList: [
+          {
+            label: '全部',
+            id: 'all'
+          },
+          {
+            label: '项目',
+            id: '10'
+          },
+          {
+            label: '博客',
+            id: '11'
+          },
+          {
+            label: '问答',
+            id: '12'
+          },
+          {
+            label: '话题',
+            id: '13'
+          },
+          {
+            label: '用户',
+            id: '14'
+          },
+
+        ]
+      }
+    },
+    created() {
+      if (this.$route.query.type) {
+        return
+      }
+      this.$router.replace({
+        path: '/search',
+        query: {
+          type: 'all'
+        }
+      })
+    },
+    watch: {
+
+    },
+    methods:{
+      changeInput(){
+        if (this.question !== '') {
+          this.bottom1=false;
+          this.bottom2 = true
+        }else{
+          this.bottom2=false;
+          this.bottom1=true
+        }
+      },
+      focus(){
+        console.log("sss")
+      }
     }
   }
 </script>
+

pages/users/register.vue

@@ -124,6 +124,28 @@
         </yun-div>
       </yun-div>
     </yun-div>
+    <yun-div
+      :width-v="704"
+      :height-v="520"
+      :padding-v="[72,60]"
+      :margin-v="[0,'auto']"
+      :extend-style="{boxSizing: 'border-box'}"
+      :border-r="[8]"
+      bg-color-v="#fff"
+      :flex-v="['column','flex-start','center']"
+      v-if="false"
+    >
+      <yun-icon name="success" :size="80" color="#75D098" :style="{lineHeight: commonReturnFlexedLength(40)}"></yun-icon>
+      <yun-div :font-style="[26,35,500,'#75D098','center']" :margin-v="[19,0,0]">注册成功</yun-div>
+      <yun-div :font-style="[28,37,500,'#333','center']" :margin-v="[55,0,64,0]">请查看邮箱收件箱验证账号</yun-div>
+      <yun-button
+        :border-r="[8]"
+        bg-color="#75D098"
+        :size="[584,86]"
+        :font-style="[26,35,500,'#fff','center']"
+      >
+        前往验证</yun-button>
+    </yun-div>
     <page-footer style="position: fixed;bottom:0;"></page-footer>
   </yun-div>
 </template>