no message

pages.json

@@ -85,6 +85,13 @@
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
+    },
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
     }
   ],
   "globalStyle": {

pages/index/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <view class="index-box">
+    <index-nav @setTabNum="setTabNum"></index-nav>
+    <view class="list-box">
+      <view class="box-one" v-if="tabNum===0">
+        <attachment-list></attachment-list>
+      </view>
+      <view class="box-two" v-else-if="tabNum===1">
+        <attachment-list></attachment-list>
+      </view>
+      <view class="box-three" v-else>
+        <attachment-list></attachment-list>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import IndexNav from "@/pages/index/model/index-nav";
+import AttachmentList from "@/pages/index/model/attachment-list";
+export default {
+  components: {AttachmentList, IndexNav},
+  data() {
+    return {
+      tabNum:0
+    }
+  },
+  methods: {
+    setTabNum(tabNum){
+      this.tabNum=tabNum
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.index-box{
+
+}
+
+</style>

pages/index/model/attachment-list.vue

@@ -0,0 +1,111 @@
+<template>
+  <view class="attachment-box">
+    <view class="attachment-title sys-color-black">附近精选</view>
+    <view class="attachment-text sys-color-gray-9">每日推送附近优质用户来场高质量社交</view>
+    <view class="attachment-list">
+      <view class="attachment-item" :style="{'background-image':'url('+item.img+')'}" v-for="item in list">
+        <view class="attachment-data">
+          <view class="data-name sys-color-white sys-weight-600 sys-webkit-box sys-height-44">{{item.name}}</view>
+          <view class="data-text sys-height-44">
+            <text class="sys-height-44 sys-color-white text-item">{{item.age}}</text>
+            <text class="sys-height-44 sys-color-white text-item">/</text>
+            <text class="sys-height-44 sys-color-white text-item">{{item.sex}}</text>
+            <text class="sys-height-44 sys-color-white text-item">/</text>
+            <text class="sys-height-44 sys-color-white text-item">{{item.constellation}}</text>
+          </view>
+        </view>
+
+      </view>
+    </view>
+
+  </view>
+</template>
+
+<script>
+export default {
+  name: "attachment-list",
+  components: {},
+  props: {},
+  data() {
+    return {
+      list:[]
+    }
+  },
+  watch: {},
+  mounted() {
+    this.getAttachmentList()
+  },
+  methods: {
+    getAttachmentList(){
+      let list=[
+        {'name':'仰看辉煌仰看辉煌仰看辉煌仰看辉煌','age':18,'sex':'女','constellation':'处女座','img':'/static/img/temporary/1.png'},
+        {'name':'Maple','age':18,'sex':'女','constellation':'处女座','img':'/static/img/temporary/2.png'},
+        {'name':'仰看辉煌','age':18,'sex':'女','constellation':'处女座','img':'/static/img/temporary/3.png'},
+        {'name':'Maple','age':18,'sex':'女','constellation':'处女座','img':'/static/img/temporary/1.png'},
+        {'name':'仰看辉煌','age':18,'sex':'女','constellation':'处女座','img':'/static/img/temporary/2.png'},
+        {'name':'Maple','age':18,'sex':'女','constellation':'处女座','img':'/static/img/temporary/3.png'},
+      ];
+      this.list.push(...list)
+    }
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.attachment-box{
+  .attachment-title{
+    margin-top: 40rpx;
+    text-align: center;
+    font-size: 44rpx;
+    height: 44rpx;
+    line-height: 44rpx;
+  }
+  .attachment-text{
+    text-align: center;
+    margin-top: 16rpx;
+    font-size: 32rpx;
+    height: 44rpx;
+    line-height: 44rpx;
+  }
+  .attachment-list{
+    padding: 32rpx;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .attachment-item{
+    display: inline-block;
+    margin-right:18rpx;
+    width: calc((100vw - 82rpx)/2);
+    height: 504rpx;
+    background-repeat: no-repeat;//不平铺
+    background-position: center center;//居中
+    background-size: cover;//随容器大小
+    position: relative;
+    .attachment-data{
+      position: absolute;
+      left: 24rpx;
+      bottom: 24rpx;
+      width: calc((100vw - 82rpx)/2 - 48rpx);
+      .data-name{
+        font-size: 36rpx;
+
+      }
+      .data-text{
+        .text-item{
+          margin-right: 6rpx;
+          font-size: 24rpx;
+        }
+      }
+    }
+  }
+  .attachment-item:nth-of-type(2n+0){
+    margin-right:0;
+  }
+  .attachment-item:nth-of-type(n+3){
+    margin-top:18rpx;
+  }
+
+}
+
+</style>

pages/index/model/index-nav.vue

@@ -0,0 +1,181 @@
+<template>
+  <view class="">
+    <view class="header"  :style="style">
+      <view class="header-left">
+        <view class="left-text sys-color-black-0 sys-weight-600">筛选</view>
+        <view class="left-img">
+          <image class="down-img" src="/static/img/common/down.png" mode="aspectFill"></image>
+        </view>
+      </view>
+      <view class="header-center">
+        <view class="center-list">
+          <view class="center-item sys-weight-600" @click="setTabNum(0)" :class="{'sys-color-black':tabNum===0,'sys-color-gray-9':tabNum!==0,}">发现</view>
+          <view class="center-item sys-weight-600" @click="setTabNum(1)"  :class="{'sys-color-black':tabNum===1,'sys-color-gray-9':tabNum!==1,}">附近</view>
+          <view class="center-item sys-weight-600" @click="setTabNum(2)"  :class="{'sys-color-black':tabNum===2,'sys-color-gray-9':tabNum!==2,}">匹配</view>
+        </view>
+        <view class="center-bg" :style="{'left':(tabNum*122)+'rpx'}"></view>
+      </view>
+      <view class="header-right">
+        <image class="right-img" src="/static/img/index/pull-back.png" mode="aspectFill"></image>
+        <image class="right-img" src="/static/img/index/exposure.png" mode="aspectFill"></image>
+      </view>
+    </view>
+    <view class="box-title">
+      <view class="" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px'}]">
+      </view>
+    </view>
+  </view>
+
+
+</template>
+
+<script>
+
+
+  export default {
+    name: "index-nav",
+    data() {
+      return {
+        statusBarH: 0,
+        customBarH: 0,
+        left: 35,
+        isXcx:false,
+        tabNum:0
+      }
+    },
+    props: {
+
+    },
+    computed: {
+      style() {
+        let _style = `height: ${this.customBarH}px;`
+        return _style
+      }
+    },
+    watch: {
+
+    },
+    methods: {
+      setTabNum(tabNum){
+        if(this.tabNum!==tabNum){
+          this.tabNum=tabNum
+          this.$emit('setTabNum',tabNum)
+        }
+      }
+    },
+    created() {
+      uni.getSystemInfo({
+        success: (e) =>{
+          this.statusBarH = e.statusBarHeight + 10
+          let custom=0;
+          //#ifdef MP-WEIXIN
+          custom = wx.getMenuButtonBoundingClientRect()
+          this.customBarH = custom.height
+          //#endif
+          //#ifdef H5
+          this.customBarH = 30
+          this.left=0
+          //#endif
+          console.log('self.customBarH---------'+this.customBarH)
+          this.$emit('navHeight', this.customBarH+this.statusBarH)
+        }
+      })
+      //#ifdef MP-WEIXIN
+      this.isXcx=true
+      //#endif
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+@import url("/components/static/css/en-common.css") ;
+
+  .header {
+    width: 100vw;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    justify-content: space-between;
+    height: 88rpx;
+    padding: 12rpx 36rpx;
+    box-sizing: border-box;
+    .header-left{
+      padding: 10rpx 0;
+      height: 44rpx;
+      display: flex;
+      justify-content: flex-start;
+      .left-text{
+        height: 44rpx;
+        line-height: 44rpx;
+        font-size: 28rpx;
+      }
+      .left-img{
+        padding: 0 6rpx;
+        .down-img{
+          width: 24rpx;
+          height: 24rpx;
+        }
+      }
+    }
+    .header-center{
+      width: 366rpx;
+      height: 64rpx;
+      background: #EEEEEE;
+      border-radius: 200rpx;
+      position: relative;
+      .center-list{
+        z-index: 112;
+        display: flex;
+        justify-content: space-between;
+        height: 64rpx;
+        .center-item{
+          z-index: 113;
+          width: 122rpx;
+          height: 64rpx;
+          line-height: 64rpx;
+          text-align: center;
+          font-size: 32rpx;
+        }
+      }
+      .center-bg{
+        z-index: 111;
+        position: absolute;
+        margin: 4rpx 2rpx;
+        width: 120rpx;
+        background-color: #fff;
+        border-radius: 200rpx;
+        height: 56rpx;
+        left: 0;
+        top: 0;
+        transition: .5s ease;
+      }
+
+
+    }
+    .header-right{
+      height: 64rpx;
+      display: flex;
+      justify-content: flex-end;
+      .right-img{
+        padding: 6rpx 0;
+        width: 52rpx;
+        height: 52rpx;
+      }
+      .right-img:first-child{
+        margin-right: 40rpx;
+      }
+    }
+
+
+  }
+
+
+
+  .box-title {
+    width: 100vw;
+  }
+
+
+</style>

pages/perfect/cards.vue

@@ -11,8 +11,8 @@
           <text class="sys-color-green">真实照片</text>
           <text class="sys-color-gray-9">，否则部分功能可能会受限</text>
         </view>
-        <view class="card-img" @click="openPopup" :style="{'height':'calc(100vh - '+navHeight+'px  - 278rpx - 270rpx - env(safe-area-inset-bottom)'}">
-          <view class="add-box">
+        <view class="card-img" :class="{'open-img':imgBg}" @click="openPopup" :style="{'height':'calc(100vh - '+navHeight+'px  - 278rpx - 270rpx - env(safe-area-inset-bottom)','background-image':'url('+imgBg+')'}">
+          <view class="add-box" v-if="!imgBg">
             <image class="add-img" src="/static/img/common/add.png" mode="aspectFill"></image>
           </view>
 
@@ -22,7 +22,7 @@
         </view>
       </view>
       <view class="login-bottom">
-        <view class="login-but sys-color-white sys-background-black sys-selected-but" @click="setNextStep" :class="{'sys-unselected-but':!isOK}">下一步</view>
+        <view class="login-but sys-color-white sys-background-black sys-selected-but" @click="setNextStep" :class="{'sys-unselected-but':!isOK,'apply-shake':isShakeBut}">下一步</view>
       </view>
     </view>
     <en-popup ref="cardPopup">
@@ -56,7 +56,7 @@
             </view>
 
           </view>
-          <view class="popup-but sys-color-white sys-background-black sys-selected-but" >从相册中选择</view>
+          <view class="popup-but sys-color-white sys-background-black sys-selected-but" @click="openChooseImage">从相册中选择</view>
         </view>
       </template>
 
@@ -79,19 +79,37 @@ export default {
       isShakeBut:false,
       nickname:'',
       password:'',
+      imgList:[],
+      imgBg:''
     }
   },
   watch:{
 
   },
   methods: {
+    openChooseImage(){
+      uni.chooseImage({
+        count: 6, //默认9
+        sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
+        sourceType: ['album'], //从相册选择
+        success:  (res) =>{
+          if(res.tempFilePaths.length>0){
+            this.imgBg=res.tempFilePaths[0]
+            this.imgList=res.tempFilePaths
+            this.isOK=true
+          }
+          console.log(JSON.stringify(res.tempFilePaths));
+          this.$refs.cardPopup.close()
+        }
+      });
+    },
     openPopup(){
       this.$refs.cardPopup.open()
     },
     setNextStep(){
       if(this.isOK){
         uni.navigateTo({
-          'url':'/pages/perfect/cards'
+          'url':'/pages/index/index'
         })
       }else {
         tools.error('请完善信息')
@@ -132,6 +150,7 @@ export default {
           font-size: 28rpx;
         }
       }
+
       .card-img{
         width: calc(100vw - 160rpx);
         background: #F6F6F6;
@@ -148,7 +167,11 @@ export default {
             height: 84rpx;
           }
         }
-
+      }
+      .open-img{
+        background-repeat: no-repeat;//不平铺
+        background-position: center center;//居中
+        background-size: cover;//随容器大小
       }
       .card-agreement{
         margin-top: 32rpx;

pages/perfect/nickname.vue

@@ -24,7 +24,7 @@
         </view>
       </view>
       <view class="login-bottom">
-        <view class="login-but sys-color-white sys-background-black sys-selected-but" @click="setNextStep" :class="{'sys-unselected-but':!isOK}">下一步</view>
+        <view class="login-but sys-color-white sys-background-black sys-selected-but" @click="setNextStep" :class="{'sys-unselected-but':!isOK,'apply-shake':isShakeBut}">下一步</view>
       </view>
     </view>
   </view>

static/css/sys.css

@@ -55,3 +55,20 @@
   transition: .5s ease;
 }
 
+.sys-webkit-box{
+  display: -webkit-box;
+-webkit-line-clamp: 1;
+-webkit-box-orient: vertical;
+overflow: hidden;
+}
+.sys-webkit-box-2{
+  -webkit-line-clamp: 2;
+}
+.sys-webkit-box-3{
+  -webkit-line-clamp: 3;
+}
+.sys-height-44{
+  height: 44rpx;
+  line-height: 44rpx;
+}
+

yarn.lock

@@ -38,6 +38,11 @@ csstype@^3.1.0:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+jquery@^3.6.4:
+  version "3.6.4"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.4.tgz#ba065c188142100be4833699852bf7c24dc0252f"
+  integrity sha512-v28EW9DWDFpzcD9O5iyJXg3R3+q+mET5JhnjJzQUZMHOv67bpSIHq81GEYpPNZHG+XXHsfSme3nxp/hndKEcsQ==
+
 js-base64@^2.6.4:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"