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

 

<template>
    <view class="container">

        <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 class="cover-container" :style="[{
                transform: coverTransform,
                transition: coverTransition
            }]"
         @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">
            <image class="arc" src="/static/arc.png"></image>

            <view class="tj-sction">
                <view class="tj-item">
                    <text class="num">128.8</text>
                    <text>余额</text>
                </view>
                <view class="tj-item">
                    <text class="num">0</text>
                    <text>优惠券</text>
                </view>
                <view class="tj-item">
                    <text class="num">20</text>
                    <text>积分</text>
                </view>
            </view>
            <!-- 订单 -->
            <view class="order-section">
                <view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover" :hover-stay-time="50">
                    <text class="yticon icon-shouye"></text>
                    <text>全部订单</text>
                </view>
                <view class="order-item" @click="navTo('/pages/order/