warm_man/pages/Index/components/UserPage/index.vue

<template>
  <view class="body-background">
    <image class="img" mode="widthFix" :src="staticImage.bodyBackground"/>
  </view>

  <view class="app-wallpaper">
    <u-row :custom-style="{padding:'26rpx'}">
      <u-col :span="12">
        <view class="user-container row">
          <view class="user-avatar">
            <u-avatar src="1" size="160" :custom-style="{border:'4rpx solid #020B18'}"></u-avatar>
          </view>
          <view class="user-content col">
            <view class="user-nickname-group row">
              <view class="user-nickname">
                是麻瓜呀
              </view>
              <view class="user-edit" @click="navTo('/pages/User/edit')">
                编辑资料
              </view>
            </view>
            <view class="user-icon-group row">
              <u-image :src="staticImage.userFxx" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
              <view class="user-icon-title">
                丰行侠
              </view>
              <u-rate
                  readonly
                  :count="starCount"
                  v-model="starValue"
                  size="30"
                  activeColor="#FF9545"
              ></u-rate>
            </view>
            <view class="user-id row">
              <view class="user-id-content">
                专属ID：NH56KUH01
              </view>
              <u-text prefix-icon="file-text"
                      text="复制"
                      href="NH56KUH01"
                      size="28"
                      icon-style="font-size:28rpx"
                      color="#AA4900"></u-text>
            </view>
          </view>

        </view>
      </u-col>
    </u-row>
    <view class="user-card border-box" :style="{backgroundImage:'url('+staticImage.userCard+')'}">
      <view class="user-card-content-container border-box">
        <view class="card-container">
          <view class="card-title">我的暖新币</view>
          <view class="card-desc">暖新币余额</view>
          <view class="card-price">7,586,923</view>
          <view class="card-ext">累计 236,471,986 &nbsp;&nbsp;|&nbsp;&nbsp; 已兑换 236,471,986</view>
          <view class="card-hr"></view>
          <view class="card-btn-group row">
            <view class="card-btn col" @click="navTo('/pages/Cron/detail')">暖新币明细</view>
            <view class="card-hhr"></view>
            <view class="card-btn col" @click="navTo('/pages/Cron/rule')">兑换制度</view>
          </view>
        </view>
      </view>
    </view>
    <u-cell-group :border="false" :custom-style="{marginBottom:'100rpx'}">
      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="我的兑换订单"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userOrder" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="我的活动报名"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userActivity" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="我的留言"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userMessage" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="我的线索"
          @click="navTo('/pages/Line/user')"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userLine" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="地址管理"
          @click="navTo('/pages/Address/index')"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userAddr" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="我的关注"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userFollow" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

    </u-cell-group>
    <u-cell-group :border="false">
      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="党员报到码"
          @click="navTo('/pages/Report/qrcode')"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userQrcode" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="意见箱/意见栏"
          @click="navTo('/pages/Feed/index')"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userFeed" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>
      <u-cell
          :border="false"
          :rightIconStyle="{fontSize:'28rpx'}"
          :isLink="true"
          title="街道联系方式"
          @click="navTo('/pages/Street/index')"
      >
        <template #icon>
          <view class="cell-icon" :style="{marginRight:'56rpx'}">
            <u-image :src="staticImage.userPhone" :lazy-load="true" width="48" height="48" mode="widthFix"></u-image>
          </view>
        </template>
      </u-cell>

    </u-cell-group>
  </view>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import HeaderNav from '@/components/HeaderNav/Index.vue';
import FooterNav from '@/components/FooterNav/Index.vue';
import RightNav from '@/components/RightNav/Index.vue';
import api from '@/utils/functions.js';

export default {
  components: {
    HeaderNav,
    FooterNav,
    RightNav
  },
  data() {
    return {
      title: 'Hello',
      loading: true,
      staticImage: {
        userOrder: imghost + '/static/image/user-order.png',
        userActivity: imghost + '/static/image/user-activity.png',
        userMessage: imghost + '/static/image/user-message.png',
        userLine: imghost + '/static/image/user-line.png',
        userAddr: imghost + '/static/image/user-addr.png',
        userFollow: imghost + '/static/image/user-follow.png',
        userQrcode: imghost + '/static/image/user-qrcode.png',
        userFeed: imghost + '/static/image/user-feed.png',
        userPhone: imghost + '/static/image/user-phone.png',
        bodyBackground:imghost+'/static/image/user-bg.png',
        userFxx:imghost+'/static/image/user-fxx.png',
        userCard:imghost+'/static/image/user-card.png',
      },
      starCount:10,
      starValue:10,
      user: {
        avatar: imghost + '/static/image/banner.png',
        nickname: '清晨的风',
        coupons: 221,
        id: 88685
      },
      isTop: false,
      pagePadding: 100,
      userInfo: {},
      userExtends: {},
    }
  },
  onLoad() {

  },
  methods: {
    navTo(url) {
      wx.navigateTo({
        url: url
      })
    },
    userDetail() {
      wx.navigateTo({
        url: '/pages/UserDetail/index'
      })
    },
    orderPage() {
      this.$store.commit('footCheck', 'order');
      this.$store.commit('title', '订单');
    },
    userCouponsPage() {
      wx.navigateTo({
        url: '/pages/UserCoupons/index'
      })
    },
    updateUserInfo() {
      if (this.userInfo) {
        this.user.id = this.userInfo.id
        this.user.nickname = this.userInfo.name
        this.user.avatar = this.userInfo.avatar
      }
      if (this.userExtends) {
        this.user.coupons = this.userExtends.coupon_count
      }
    }
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }

  },
  created() {
    this.pagePadding = (api.navHeight().navPaddingTop +
        api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.userInfo = newVal;
        this.updateUserInfo();
      }
    },
    "$store.state.userExtends": {
      handler(newVal, oldVal) {
        this.userExtends = newVal;
        this.updateUserInfo();
      }
    }
  }
}
</script>

<style lang="scss">
@import './components/index.scss';
</style>