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">
						<image class="img" mode="widthFix"
							:src="staticImage.hiImage" alt="" />
						<text class="user-title-text">{{user.nickname}}</text>
					</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">
							{{user.coupons}}
						</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';
	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/Order/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:'清晨的风',
					coupons:221,
					id:88685
				},
				isTop:false,
				pagePadding:100,
        userInfo:{},
        userExtends:{},
		},
		onLoad() {

		},
		methods: {
			userCouponsPage(){
				wx.navigateTo({
					url:'/pages/UserCoupons/index'
				})
			},
			navTo(url){
				wx.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
        }
        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))
		},
    mounted() {

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