products/uni-shop/pages/user/user.vue

<template>
  <v-header backgroundColor="#f8f9fb" immersion mode="" scroll headerBackgroundColor="transparent" title=" ">
    <image src="/static/images/user-background.png" class="user-background" slot="header-background"></image>
    <view class="overflow user-screen">
      <view class="user-header" :style="{height:height+'px','padding-top':paddingTop+'px'}">

        <view v-if="isLogin" class="screen_all center">
          <view class="flex user-header-container relative" @click="routerTarget('personal-user')">
            <v-image class="user-header-avatar overflow" :src="user.avatar"></v-image>
            <view class="absolute user-header-edit center">
              <image src="/static/images/edit.png" class="user-header-edit-icon"></image>
            </view>
          </view>
          <view class="user-header-title">{{user.nickname}}</view>
        </view>
        <view v-else class="screen_all center">
          <view @click="routerLogin" class="user-login-button center">授权登录</view>
        </view>

      </view>
      <view class="center">
        <view class="user-integral relative">
          <image src="/static/images/user-integral.png" class="screen_all"></image>
          <view class="absolute user-integral-container row aCenter">
            <image src="/static/images/gold.png" class="user-integral-gold"></image>
            <view class="flex-all-1">积分返现</view>
            <view @click.stop="routerTarget('integral')" class="user-integral-button center">去查看</view>
          </view>
        </view>
      </view>
      <!--   账户余额   -->
      <view class="user-wallet flex">
        <view class="user-wallet-header row aCenter">
          <view class="flex-all-1">我的钱包</view>
          <view @click="routerTarget('consumption-record')" class="row aCenter user-order-more">
            <view>余额记录</view>
            <text class=".user-order-more-icon iconfont iconfont-more"></text>
          </view>
        </view>
        <view class="flex-all-1 row aCenter">
          <view class="row aCenter">账户余额:</view>
          <text class="user-wallet-price"><text>{{user.money || '0.00'}}</text><text class="user-wallet-em">(元)</text></text>
          <view class="flex-all-1"></view>
          <view @click="routerTarget('recharge')" class="user-wallet-button center">立即充值</view>
        </view>
      </view>

      <!--   订单   -->
      <view class="user-order flex">
        <view class="user-wallet-header user-order-header row aCenter">
          <view class="flex-all-1">我的订单</view>
          <view @click="routerTarget('my-order')" class="row aCenter user-order-more">
            <view>全部订单</view>
            <text class=".user-order-more-icon iconfont iconfont-more"></text>
          </view>
        </view>
        <view class="flex-all-1 row">
          <view
            v-for="(item,index) in orderData"
            :key="index"
            class="flex-all-1 center relative"
            @click="trigger(item)"
          >
            <dot class="user-order-dot absolute" :value="user[item.key]"></dot>
            <image mode="heightFix" :src="'/static/images/order/'+(index+1)+'.png'" class="user-order-icon"></image>
            <view class="user-order-title line-1">{{item.label}}</view>
          </view>
        </view>
      </view>

      <!--   功能   -->
      <view class="user-control">
        <view class="user-control-item row aCenter"
          v-for="(item,index) in controlData"
          :key="index"
              @click="trigger(item,true)"
        >
          <view class="user-control-icon-container jCenter">
            <image :src="'/static/images/control/'+item.icon+'.png'" :style="{width:item.width+'px'}" mode="widthFix" class="user-control-icon"></image>
          </view>
          <view class="flex-all-1">{{item.key && user[item.key] ? item.labelSuccess+'('+user[item.key]+')' :item.label}}</view>
          <text class=".user-order-more-icon iconfont iconfont-more"></text>
        </view>
      </view>
    </view>
    <fill-code v-model="codeModal"></fill-code>
  </v-header>
</template>  
<script>
import vHeader from '@/components/v-header/main.vue';
import dot from '@/components/dot/main.vue';
import vImage from '@/components/v-image/main.vue';
import mixins from './mixins';
import fillCode from '@/components/fill-code/fill-code';
export default {
  components: {
    vHeader,
    dot,
    vImage,
    fillCode
  },
  mixins
}
</script>
<style scoped lang="scss" src="./style.scss"></style>