pet_uni/pages/Index/components/HomePage/index.vue

<template>
  <view class="app-wallpaper" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}">
    <view class="index-banner">
      <view class="index-banner-container">
        <image class="img" v-for="item in indexBanner" mode="widthFix" :src="item.image" alt=""/>
      </view>
    </view>
    <view class="index-user-detail">
      <view class="user-detail-container row">
        <view class="user-avatar">
          <img mode="widthFix" class="img" :src="user.avatar" alt="">
        </view>
        <view class="user-content">
          <view class="user-title-top row">
            <image class="img" mode="widthFix"
                   :src="staticImage.hiImage" alt=""/>
            <view class="user-title-text">
              <u-text :text="user.nickname" color="#131313" size="30" custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden;max-width:200rpx;"></u-text>
            </view>
          </view>
          <view class="user-title-bottom">
            <image class="img" mode="aspectFit"
                   :src="staticImage.dogImage" alt=""/>
            <text class="user-title-idcard">
              会员编号：{{ user.id }}
            </text>
          </view>
        </view>
        <view class="user-coupons" :style="{backgroundImage:'url('+staticImage.couponsImage+')'}">
          <view class="user-coupons-number" @click="userCouponsPage()">
            <view class="user-coupons-number-container">
              {{ userExtends.coupon_count }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="index-button-group row">
      <view class="index-button-detail col-6" v-for="(item) in staticImage.indexButtonGroup">
        <view class="index-button-detail-container row" :style="{
					backgroundImage:'url('+item.backgroundImage+')'
				}" @click="navTo(item.url)">
          <view class="col-12">
            <image mode="widthFix" class="img"
                   :src="item.serviceImage"/>
          </view>
          <view class="col-12">
            <image mode="widthFix" class="img"
                   :src="item.buttonImage"/>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import api from '@/utils/functions.js';
import log from "@/utils/log";
import {userExtends} from "@/api/user";

export default {
  data: {
    title: 'Hello',
    loading: true,
    staticImage: {
      hiImage: imghost + '/static/image/index-user-title-hi.png',
      dogImage: imghost + '/static/image/index-user-title-dog.png',
      couponsImage: imghost + '/static/image/index-user-coupons-background.png',
      indexButtonGroup: [
        {
          backgroundImage: imghost + '/static/image/index-button-one.png',
          serviceImage: imghost + '/static/image/index-button-bg-one.png',
          buttonImage: imghost + '/static/image/index-button-bg-btn-one.png',
          url: '/pages/OrderPage/index'
        }, {
          backgroundImage: imghost + '/static/image/index-button-two.png',
          serviceImage: imghost + '/static/image/index-button-bg-two.png',
          buttonImage: imghost + '/static/image/index-button-bg-btn-two.png',
          url: '/pages/Card/index'
        }, {
          backgroundImage: imghost + '/static/image/index-button-three.png',
          serviceImage: imghost + '/static/image/index-button-bg-three.png',
          buttonImage: imghost + '/static/image/index-button-bg-btn-three.png',
          url: '/pages/UserCoupons/index'
        }, {
          backgroundImage: imghost + '/static/image/index-button-four.png',
          serviceImage: imghost + '/static/image/index-button-bg-four.png',
          buttonImage: imghost + '/static/image/index-button-bg-btn-four.png',
          url: '/pages/Draw/index'
        },
      ],
      wallpaperBgImage: imghost + '/static/image/background.png'
    },
    indexBanner: [
      {
        image: imghost + '/static/image/banner.png',
        url: '',
      }
    ],
    user: {
      avatar: imghost + '/static/image/banner.png',
      nickname: '清晨的风',
      coupon_count: 221,
      id: 88685
    },
    isTop: false,
    pagePadding: 100,
    userInfo: {},
    userExtends: {},
  },
  onLoad() {

  },
  methods: {
    userCouponsPage() {
      uni.navigateTo({
        url: '/pages/UserCoupons/index'
      })
    },
    navTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    updateUserInfo() {
      if (this.userInfo) {
        this.user.id = this.userInfo.id
        this.user.nickname = this.userInfo.name
        this.user.avatar = this.userInfo.avatar
        this.user.coupon_count = 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))
  },
  mounted() {
    this.userInfo = this.$store.state.userInfo;
    this.userExtends = this.$store.state.userExtends;
  },
  updated() {

  },
  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>