uni-app开发微信小程序个人中心页面适用头条/百度/支付宝小程序

最新推荐文章于 2025-06-14 11:59:36 发布

中国python

最新推荐文章于 2025-06-14 11:59:36 发布

阅读量8.4k

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/qq_16800845/article/details/104611362

该博客介绍了如何使用uni-app框架开发适用于微信、头条、百度和支付宝小程序的个人中心页面。内容包括用户信息展示、VIP会员卡、订单管理和浏览历史等模块的设计与实现，同时涉及页面滚动和过渡效果的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

       <view class="user-section">
           <image class="bg" src="/static/user-bg.jpg"></image>
           <view class="user-info-box">
               <view class="portrait-box">
                   <image :src='userInfo.headPhoto' mode='aspectFill' class="portrait" v-if="userInfo.headPhoto"></image>
                   <view v-else>
                       <image :src='userInfo.photo[userInfo.photo.length - 1].image || "/static/missing-face.png"' mode='aspectFill' class="portrait"></image>
                   </view>
               </view>
               <view class="info-box">
                   <text class="username">{{userInfo.username || '游客'}}</text>
               </view>
           </view>
           <view class="vip-card-box">
               <image class="card-bg" src="/static/vip-card-bg.png" mode=""></image>
               <view class="b-btn">
                   立即开通
               </view>
               <view class="tit">
                   <text class="yticon icon-iLinkapp-"></text>
                   DCloud会员
               </view>
               <text class="e-m">DCloud Union</text>
               <text class="e-b">开通会员开发无bug 一测就上线</text>
           </view>
       </view>

   </view>
</template>
<script>
   import listCell from '@/components/mix-list-cell';
   import {
       mapState,
       mapGetters
   } from 'vuex';
   let startY = 0,
       moveY = 0,
       pageAtTop = true;
   export default {
       components: {
           listCell
       },
       data() {
           return {
               // token: '',
               coverTransform: 'translateY(0px)',
               coverTransition: '0s',
               moving: false,
               photo: '',
           }
       },
       // 初始化只执行一次
       onLoad() {

       },
       // 监听页面显示,切回页面时重新执行
       onShow() {
           // console.log(this.token)
           // console.log(this.hasLogin)
           // console.log(this.userInfo)
       },
       // #ifndef MP
       onNavigationBarButtonTap(e) {
           const index = e.index;
           if (index === 0) {
               this.navTo('/pages/set/set');
           } else if (index === 1) {
               // #ifdef APP-PLUS
               const pages = getCurrentPages();
               const page = pages[pages.length - 1];
               const currentWebview = page.$getAppWebview();
               currentWebview.hideTitleNViewButtonRedDot({
                   index
               });
               // #endif
               uni.navigateTo({
                   url: '/pages/notice/notice'
               })
           }
       },
       // #endif
       computed: {
           ...mapState(['hasLogin', 'userInfo','token']),
       },
       methods: {

           /**
           * 统一跳转接口,拦截未登录路由
           * navigator标签现在默认没有转场动画，所以用view
           */
           navTo(url) {
               // 必需用！
               if (!this.token) {
                   url = '/pages/public/login';
               }
               uni.navigateTo({
                   url
               })
           },

           /**
           * 会员卡下拉和回弹
           * 1.关闭bounce避免ios端下拉冲突
           * 2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
           * transition设置0.1秒延迟，让css来过渡这段空窗期
           * 3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
           */
           coverTouchstart(e) {
               if (pageAtTop === false) {
                   return;
               }
               this.coverTransition = 'transform .1s linear';
               startY = e.touches[0].clientY;
           },
           coverTouchmove(e) {
               moveY = e.touches[0].clientY;
               let moveDistance = moveY - startY;
               if (moveDistance < 0) {
                   this.moving = false;
                   return;
               }
               this.moving = true;
               if (moveDistance >= 80 && moveDistance < 100) {
                   moveDistance = 80;
               }

               if (moveDistance > 0 && moveDistance <= 80) {
                   this.coverTransform = `translateY(${moveDistance}px)`;
               }
           },
           coverTouchend() {
               if (this.moving === false) {
                   return;
               }
               this.moving = false;
               this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
               this.coverTransform = 'translateY(0px)';
           }
       }
   }
</script>
<style lang='scss'>
   %flex-center {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
   }

   %section {
       display: flex;
       justify-content: space-around;
       align-content: center;
       background: #fff;
       border-radius: 10upx;
   }

   .user-section {
       height: 520upx;
       padding: 100upx 30upx 0;
       position: relative;

       .bg {
           position: absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           filter: blur(1px);
           opacity: .7;
       }
   }

   .user-info-box {
       height: 180upx;
       display: flex;
       align-items: center;
       position: relative;
       z-index: 1;

       .portrait {
           width: 130upx;
           height: 130upx;
           border: 5upx solid #fff;
           border-radius: 50%;
       }

       .username {
           font-size: $font-lg + 6upx;
           color: $font-color-dark;
           margin-left: 20upx;
       }
   }

   .vip-card-box {
       display: flex;
       flex-direction: column;
       color: #f7d680;
       height: 240upx;
       background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
       border-radius: 16upx 16upx 0 0;
       overflow: hidden;
       position: relative;
       padding: 20upx 24upx;

       .card-bg {
           position: absolute;
           top: 20upx;
           right: 0;
           width: 380upx;
           height: 260upx;
       }

       .b-btn {
           position: absolute;
           right: 20upx;
           top: 16upx;
           width: 132upx;
           height: 40upx;
           text-align: center;
           line-height: 40upx;
           font-size: 22upx;
           color: #36343c;
           border-radius: 20px;
           background: linear-gradient(left, #f9e6af, #ffd465);
           z-index: 1;
       }

       .tit {
           font-size: $font-base+2upx;
           color: #f7d680;
           margin-bottom: 28upx;

           .yticon {
               color: #f6e5a3;
               margin-right: 16upx;
           }
       }

       .e-b {
           font-size: $font-sm;
           color: #d8cba9;
           margin-top: 10upx;
       }
   }

   .cover-container {
       background: $page-color-base;
       margin-top: -150upx;
       padding: 0 30upx;
       position: relative;
       background: #f5f5f5;
       padding-bottom: 20upx;

       .arc {
           position: absolute;
           left: 0;
           top: -34upx;
           width: 100%;
           height: 36upx;
       }
   }

.tj-sction {
@extend %section;

       .tj-item {
           @extend %flex-center;
           flex-direction: column;
           height: 140upx;
           font-size: $font-sm;
           color: #75787d;
       }

       .num {
           font-size: $font-lg;
           color: $font-color-dark;
           margin-bottom: 8upx;
       }
   }

   .order-section {
       @extend %section;
       padding: 28upx 0;
       margin-top: 20upx;

       .order-item {
           @extend %flex-center;
           width: 120upx;
           height: 120upx;
           border-radius: 10upx;
           font-size: $font-sm;
           color: $font-color-dark;
       }

       .yticon {
           font-size: 48upx;
           margin-bottom: 18upx;
           color: #fa436a;
       }

       .icon-shouhoutuikuan {
           font-size: 44upx;
       }
   }

   .history-section {
       padding: 30upx 0 0;
       margin-top: 20upx;
       background: #fff;
       border-radius: 10upx;

       .sec-header {
           display: flex;
           align-items: center;
           font-size: $font-base;
           color: $font-color-dark;
           line-height: 40upx;
           margin-left: 30upx;

           .yticon {
               font-size: 44upx;
               color: #5eba8f;
               margin-right: 16upx;
               line-height: 40upx;
           }
       }

       .h-list {
           white-space: nowrap;
           padding: 30upx 30upx 0;

           image {
               display: inline-block;
               width: 160upx;
               height: 160upx;
               margin-right: 20upx;
               border-radius: 10upx;
           }
       }
   }
</style>