From 1536e0903417cdadbded30826f333200835b0cc9 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Wed, 6 Mar 2024 17:23:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                    |   4 +-
 src/App.vue                   |   6 +-
 src/pages/home/Attention.vue  | 386 ++++++++++++++++++++++++++--------
 src/pages/home/Publish.vue    |  67 +++---
 src/pages/me/Me.less          |   4 +-
 src/pages/me/Me.vue           |   2 +-
 src/pages/message/Message.vue |  30 ++-
 src/router/routes.js          |   3 +-
 8 files changed, 364 insertions(+), 138 deletions(-)
diff --git a/index.html b/index.html
index 626fd63..596bad8 100644
--- a/index.html
+++ b/index.html
@@ -42,8 +42,8 @@
   <script crossorigin="anonymous"
           integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
           src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
-<!--  <script src="//cdn.jsdelivr.net/npm/eruda"></script>-->
-<!--  <script>eruda.init();</script>-->
+  <script src="https://cdn.bootcdn.net/ajax/libs/eruda/3.0.1/eruda.min.js"></script>
+  <script>eruda.init();</script>
 </head>
 <body>
 <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index c620624..cd35370 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -50,9 +50,9 @@ export default {
     },
   },
   mounted() {
-    window.onresize = () => {
-      location.reload()
-    }
+    // window.onresize = () => {
+    //   location.reload()
+    // }
     // this.$store.dispatch('getFriends')
     try {
       navigator.control.gesture(false);
diff --git a/src/pages/home/Attention.vue b/src/pages/home/Attention.vue
index 977153b..f73f845 100644
--- a/src/pages/home/Attention.vue
+++ b/src/pages/home/Attention.vue
@@ -1,113 +1,315 @@
 <template>
-  <div id="friend">
-    <header ref="header">
-      <div class="new">
-        <img src="@/assets/img/icon/add-light.png" alt="">
+  <div id="Shop">
+    <div class="bg">
+      <div class="top"></div>
+      <div class="bottom"></div>
+    </div>
+    <div class="search">
+      <div class="search-input">
+        <img src="@/assets/img/icon/search-gray.png" alt="">
+        <div class="placeholder">50元话费充值</div>
+        <img src="@/assets/img/icon/scan-gray.png" alt="">
+        <div class="search-notice">搜索</div>
       </div>
-      <img class="center" src="@/assets/img/icon/add-light.png" alt="">
-      <img class='right' src="@/assets/img/icon/search-light.png" alt="" @click="nav('/home/search')">
-    </header>
-    <SlideList
-        style="background:#000;"
-        :active="true"
-        :api="api.videos.recommended"
-    />
+      <div class="more">
+        <img src="@/assets/img/icon/category-gray.png" alt="">
+        <span>更多</span>
+      </div>
+    </div>
+    <Scroll class="Scroll"
+            fixedHeight="100"
+            @fixed="e=>state.fixed = e"
+            @pulldown="loadData">
+      <div class="options">
+        <div class="option">
+          <img src="@/assets/img/icon/scan-gray.png" alt="">
+          <span>我的订单 快捷查单</span>
+        </div>
+        <div class="option">
+          <img src="@/assets/img/icon/scan-gray.png" alt="">
+          <span>购物车 空空如也</span>
+        </div>
+      </div>
+      <div class="navs">
+        <div class="wrapper">
+          <div class="nav" v-for="i in 20">推荐</div>
+        </div>
+      </div>
+      <div v-masonry class="goods-list"
+           :class="{fixed:state.fixed}"
+           transition-duration="0s"
+           item-selector=".goods">
+        <div v-masonry-tile class="goods"
+             @click="nav('/shop/detail')"
+             v-for="(item, index) in  state.list">
+          <div class="card">
+            <img class="poster" :src="Utils.$imgPreview(item.cover)"/>
+            <div class="bottom">
+              <div class="desc">
+                {{ item.name }}
+              </div>
+              <div class="discounts" v-if="item.discount">{{ item.discount }}</div>
+              <div class="info">
+                <div class="price">
+                  ￥
+                  <div class="big">{{ item.price }}</div>
+                </div>
+                <div class="num">已售{{ item.sold }}件</div>
+              </div>
+              <div class="low" v-if="item.isLowPrice">
+                近30天低价
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Scroll>
     <Footer v-bind:init-tab="2" style="position: fixed;"/>
+
   </div>
 </template>
 
 <script setup lang="jsx">
 
-import {reactive} from "vue";
+import {onMounted, reactive} from "vue";
 import {useNav} from "@/utils/hooks/useNav";
 import api from "@/api";
 import SlideList from "@/pages/home/slide/SlideList.vue";
+import Utils from "@/utils";
+import Scroll from "@/components/Scroll.vue";
+import goods from "@/assets/data/goods";
 
 const nav = useNav()
-
 const state = reactive({
-  baseIndex: 0,
-  navIndex: 4,
-  itemIndex: 0,
-  test: '',
-  recommendVideos: [
-    // {
-    //   type: 'img',
-    //   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
-    // },
-    {
-      type: 'imgs',
-      src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
-    },
-    {
-      type: 'user',
-      src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
-    },
-  ],
-
-  isSharing: false,
-  canMove: true,
-  loading: false,
-  isUp: false,
-
-  shareType: -1,
-
-  showPlayFeedback: false,
-  showShareDuoshan: false,
-  showShareDialog: false,
-  showShare2WeChatZone: false,
-  showDouyinCode: false,
-  showFollowSetting: false,
-  showFollowSetting2: false,
-  showBlockDialog: false,
-  showChangeNote: false,
-  shareToFriend: false,
-
-  commentVisible: false,
-  fullScreen: false,
-  subType: -1,
-  //用于改变zindex的层级到上层，反正比slide高就行。不然摸不到subType.
-  subTypeIsTop: false,
-  totalSize: 0,
-  pageSize: 10,
-  pageNo: 0,
+  list: goods.list,
+  listEl: null,
+  fixed: false
 })
 
-</script>
-
-<style scoped lang="less">
-@import "../../assets/less/index";
-
-#friend {
-  //抖音原色，感觉很暗
-  @douyin-bg: #2e3244;
-  background: @douyin-bg;
-  color: #b8b9c1;
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  //overflow: auto;
-
-  header {
-    height: @header-height;
-    padding: 20rem;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: absolute;
-    width: 100%;
-
-    img {
-      width: 25rem;
+function loadData() {
+  console.log('loadData')
+  for (let i = 1; i < 12; i++) {
+    let temp = {
+      src: new URL(`../../../assets/img/poster/${i}.jpg`, import.meta.url).href,
+      author: new URL(`../../../assets/img/avatar.png`, import.meta.url).href,
     }
-  }
-
-  #VInfinite {
-    height: calc(100% - @header-height);
+    // state.list.push(temp)
   }
 }
 
+onMounted(() => {
+  for (let i = 1; i < 12; i++) {
+    let temp = {
+      src: new URL(`../../../assets/img/poster/${i}.jpg`, import.meta.url).href,
+      author: new URL(`../../../assets/img/avatar.png`, import.meta.url).href,
+    }
+    // state.list.push(temp)
+  }
+})
+</script>
+
+<style scoped lang="less">
+@import "@/assets/less/index";
+
+@fColor: #f1f1f1;
+
+#Shop {
+  font-size: 14rem;
+  color: white;
+  padding-top: @header-height;
+  position: relative;
+  background: @fColor;
+
+  .bg {
+    top: 0;
+    position: absolute;
+    width: 100vw;
+    height: 30vh;
+    //background: red;
+
+    @th: 70%;
+    @eColor: rgb(32, 28, 58);
+
+    .top {
+      height: @th;
+      background: linear-gradient(to bottom, rgb(56, 30, 77), @eColor);
+    }
+
+    .bottom {
+      height: 100% - @th;
+      background: red;
+      background: linear-gradient(to bottom, @eColor, @fColor);
+    }
+  }
+
+  .search {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    height: @header-height;
+    padding: 9rem 20rem;
+    box-sizing: border-box;
+
+    img {
+      width: 20rem;
+    }
+
+    .search-input {
+      border: 3rem solid rgb(140, 48, 74);
+      border-radius: 8rem;
+      height: 100%;
+      padding: 0 10rem;
+      flex: 1;
+      display: flex;
+      align-items: center;
+
+      .placeholder {
+        flex: 1;
+      }
+
+      img {
+        margin-right: 10rem;
+      }
+
+      .search-notice {
+        color: rgb(242, 62, 92);
+      }
+    }
+
+    .more {
+      margin-left: 20rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 12rem;
+    }
+  }
+
+  .options {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20rem;
+    height: 40rem;
+    padding: 4rem 20rem;
+    box-sizing: border-box;
+
+    img {
+      width: 20rem;
+      margin-right: 10rem;
+    }
+
+    .option {
+      font-size: 13rem;
+      flex: 1;
+      display: flex;
+      background: rgb(63, 58, 78);
+      padding: 6rem 8rem;
+      border-radius: 6rem;
+    }
+  }
+
+  .navs {
+    overflow: auto;
+    padding: 0 10rem;
+
+    .wrapper {
+      display: flex;
+      //flex-wrap: wrap;
+    }
+
+    .nav {
+      margin: 10rem;
+      word-break: keep-all;
+      //border-bottom: 2rem solid white;
+    }
+  }
+
+  .Scroll {
+    position: relative;
+    z-index: 2;
+    //height: calc(100vh - @header-height) !important;
+    height: calc(100vh - @header-height * 2 - @footer-height) !important;
+  }
+
+  .fixed {
+    background: @fColor;
+  }
+
+  @p: 5rem;
+
+  .goods-list {
+    padding: @p;
+  }
+
+  .goods {
+    width: calc(50% - @p);
+    box-sizing: border-box;
+    padding: 5rem;
+
+    .card {
+      border-radius: 8rem;
+      overflow: hidden;
+      background: white;
+
+      img {
+        width: 100%;
+      }
+
+      .bottom {
+        padding: 10rem;
+
+        .desc {
+          color: black;
+          font-size: 16rem;
+          margin-bottom: 8rem;
+          @lh: 18rem;
+          line-height: @lh;
+          height: @lh * 2;
+          overflow: hidden;
+        }
+
+        .discounts {
+          display: inline-block;
+          @c: rgb(199, 89, 106);
+          border: 1rem solid @c;
+          padding: 0 4rem;
+          color: @c;
+          font-size: 12rem;
+          margin-bottom: 4rem;
+        }
+
+        .info {
+          display: flex;
+          align-items: flex-end;
+
+          .price {
+            color: rgb(248, 38, 74);
+            display: flex;
+            align-items: flex-end;
+            font-size: 14rem;
+            margin-right: 5rem;
+
+            .big {
+              font-size: 22rem;
+              font-weight: bold;
+              transform: translateY(2rem);
+            }
+          }
+
+          .num {
+            color: darkgray;
+            font-size: 12rem;
+          }
+        }
+
+        .low {
+          margin-top: 2rem;
+          color: rgb(230, 153, 92);
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/src/pages/home/Publish.vue b/src/pages/home/Publish.vue
index 38fbd58..29bf24f 100644
--- a/src/pages/home/Publish.vue
+++ b/src/pages/home/Publish.vue
@@ -22,31 +22,29 @@
       </SlideHorizontal>
     </div>
     <div class="float">
-      <img class="close" src="../../assets/img/icon/close-white.png" alt="" @click="$back">
+      <Icon class="close" icon="mingcute:close-line" @click="$back"/>
       <div class="choose-music">
-        <img src="../../assets/img/icon/close-white.png" alt="">
+        <Icon icon="vaadin:music"/>
         <span>选择音乐</span>
       </div>
       <div class="toolbar">
         <div class="tool" @click.stop="$emit('showComments')">
-          <img src="../../assets/img/icon/close-white.png" alt="">
-          <span>翻转</span>
+          <Icon icon="tabler:refresh"/>
         </div>
         <div class="tool" @click.stop="$emit('showComments')">
-          <img src="../../assets/img/icon/close-white.png" alt="">
-          <span>快慢速</span>
+          <Icon icon="pepicons-pop:electricity-off"/>
         </div>
         <div class="tool" @click.stop="$emit('showComments')">
-          <img src="../../assets/img/icon/close-white.png" alt="">
-          <span>滤镜</span>
+          <Icon icon="lets-icons:setting-fill"/>
         </div>
         <div class="tool" @click.stop="$emit('showComments')">
-          <img src="../../assets/img/icon/close-white.png" alt="">
-          <span>美化</span>
+          <Icon icon="bxs:alarm"/>
         </div>
         <div class="tool" @click.stop="$emit('showComments')">
-          <img src="../../assets/img/icon/close-white.png" alt="">
-          <span>倒计时</span>
+          <Icon icon="fluent:pen-sparkle-16-filled"/>
+        </div>
+        <div class="tool" @click.stop="$emit('showComments')">
+          <Icon icon="ri:color-filter-fill"/>
         </div>
       </div>
     </div>
@@ -55,6 +53,25 @@
 <script>
 import {mapState} from "vuex";
 
+
+//访问用户媒体设备的兼容方法
+function getUserMedia(constrains, success, error) {
+  if (navigator.mediaDevices.getUserMedia) {
+    //最新标准API
+    navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
+  } else if (navigator.webkitGetUserMedia) {
+    //webkit内核浏览器
+    navigator.webkitGetUserMedia(constrains).then(success).catch(error);
+  } else if (navigator.mozGetUserMedia) {
+    //Firefox浏览器
+    navagator.mozGetUserMedia(constrains).then(success).catch(error);
+  } else if (navigator.getUserMedia) {
+    //旧版API
+    navigator.getUserMedia(constrains).then(success).catch(error);
+  }
+}
+
+
 export default {
   name: "Publish",
   data() {
@@ -73,14 +90,15 @@ export default {
   },
   methods: {
     getMedia() {
-      let constraints = {video: {width: this.bodyWidth, height: this.bodyHeight - 60}, audio: false};
-      let promise = navigator.mediaDevices.getUserMedia(constraints);
-      promise.then((MediaStream) => {
+      // let constraints = {video: {width: this.bodyWidth, height: this.bodyHeight - 60}, audio: false};
+      // let constraints = {video:{width:480,height:320}, audio: false};
+      let constraints = {video: true, audio: false};
+      getUserMedia(constraints, (MediaStream) => {
         this.video.srcObject = MediaStream;
         this.video.play();
-      }).catch(function (PermissionDeniedError) {
+      }, function (PermissionDeniedError) {
         console.log(PermissionDeniedError);
-      })
+      });
     },
   },
 }
@@ -122,11 +140,10 @@ export default {
     height: calc(100% - 60px);
 
     .close {
+      font-size: 28rem;
       position: absolute;
       left: 20rem;
       top: 20rem;
-      width: 20rem;
-      height: 20rem;
     }
 
     .choose-music {
@@ -139,8 +156,10 @@ export default {
       padding: 5rem 15rem;
       display: flex;
       align-items: center;
+      font-size: 14rem;
 
-      img {
+      svg {
+        font-size: 30rem;
         margin-right: 5rem;
         width: 12rem;
         height: 12rem;
@@ -157,13 +176,7 @@ export default {
         flex-direction: column;
         align-items: center;
         margin-bottom: 20rem;
-        font-size: 10rem;
-
-        img {
-          width: 20rem;
-          height: 20rem;
-          margin-bottom: 5rem;
-        }
+        font-size: 26rem;
       }
     }
   }
diff --git a/src/pages/me/Me.less b/src/pages/me/Me.less
index c994c83..be3079e 100644
--- a/src/pages/me/Me.less
+++ b/src/pages/me/Me.less
@@ -342,13 +342,13 @@
         .heat {
           color: @second-text-color;
           display: flex;
-          gap: 30rem;
+          gap: 26rem;
           align-items: center;
           justify-content: space-between;
 
           .num {
             color: white;
-            font-size: 15rem;
+            font-size: 14rem;
             font-weight: bold;
           }
 
diff --git a/src/pages/me/Me.vue b/src/pages/me/Me.vue
index 657b2ba..c2bfd4a 100644
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@@ -26,7 +26,7 @@
             </div>
             <div class="item"
                  :style="floatFixed?'opacity: 0;':''"
-                 @click="$no">
+                 @click="$nav('/message/visitors')">
               <Icon icon="eva:people-outline"/>
             </div>
             <div class="item" @click="$no">
diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue
index c651cf6..fd45254 100644
--- a/src/pages/message/Message.vue
+++ b/src/pages/message/Message.vue
@@ -1,17 +1,13 @@
 <template>
   <div id="Message" ref="app" :class="createChatDialog?'disable-scroll':''">
     <div class="no-search" v-show="!searching">
-      <BaseHeader :isFixed="false">
-        <template v-slot:center>
-          <span class="f16">消息</span>
-        </template>
-        <template v-slot:right>
-          <span class="f14" @click="createChatDialog = true">创建群聊</span>
-        </template>
-      </BaseHeader>
+      <header>
+        <Icon @click="createChatDialog = true" icon="formkit:add"/>
+        <Icon icon="tabler:camera-selfie" />
+        <Icon  @click="searching = true" icon="tabler:search"/>
+      </header>
 
       <Scroll ref="mainScroll">
-        <Search class="ml2r mr2r mb2r" @click="searching = true"></Search>
         <div class="friends  pl1r ">
           <div class="friend pr1r pl1r"
                @click="$nav('/message/chat')"
@@ -512,6 +508,19 @@ export default {
   .no-search {
     height: 100vh;
 
+    > header {
+      padding: 0 20rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: @header-height;
+      box-sizing: border-box;
+      border-bottom: 1px solid #cccccc11;
+      position: relative;
+      font-size: 24rem;
+
+    }
+
     .create-chat-wrapper {
       min-height: 70vh;
       padding-bottom: 60rem;
@@ -756,6 +765,7 @@ export default {
 
     .scroll {
       height: calc(100% - @header-height - @footer-height);
+      padding-top: 10rem;
     }
 
     .friends {
@@ -837,7 +847,7 @@ export default {
           .head-image {
             margin-left: 20rem;
             margin-right: 15rem;
-            @width: 45rem;
+            @width: 55rem;
             width: @width;
             height: @width;
             border-radius: 50%;
diff --git a/src/router/routes.js b/src/router/routes.js
index 60725d2..c528590 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -67,7 +67,8 @@ import Uploader from "../pages/me/Uploader";
 import GoodsDetail from "@/pages/shop/GoodsDetail.vue";
 
 const routes = [
-  {path: '/', redirect: '/home'},
+  {path: '/', redirect: '/attention'},
+  // {path: '/', redirect: '/home'},
   {path: '/test', component: Test},
   {path: '/test4', component: Test4},
 
