12 changed files with 335 additions and 237 deletions
@ -1,174 +1,178 @@
|
||||
<template> |
||||
<view class="app-wallpaper" :style="{ |
||||
<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.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="{ |
||||
<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> |
||||
<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"; |
||||
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:{}, |
||||
}, |
||||
onLoad() { |
||||
import { |
||||
imghost |
||||
} from '@/config/host.js' |
||||
import api from '@/utils/functions.js'; |
||||
import log from "@/utils/log"; |
||||
import {userExtends} from "@/api/user"; |
||||
|
||||
}, |
||||
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.userInfo.coupon_count |
||||
} |
||||
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: '', |
||||
} |
||||
}, |
||||
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; |
||||
log(this.userInfo); |
||||
log(this.$store.state); |
||||
], |
||||
user: { |
||||
avatar: imghost + '/static/image/banner.png', |
||||
nickname: '清晨的风', |
||||
coupon_count: 221, |
||||
id: 88685 |
||||
}, |
||||
updated() { |
||||
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(); |
||||
} |
||||
}, |
||||
watch:{ |
||||
"$store.state.userInfo": { |
||||
handler(newVal, oldVal) { |
||||
this.userInfo = newVal; |
||||
this.updateUserInfo(); |
||||
} |
||||
}, |
||||
"$store.state.userExtends": { |
||||
handler(newVal, oldVal) { |
||||
this.userExtends = newVal; |
||||
this.updateUserInfo(); |
||||
} |
||||
"$store.state.userExtends": { |
||||
handler(newVal, oldVal) { |
||||
this.userExtends = newVal; |
||||
this.updateUserInfo(); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
@import './components/index.scss'; |
||||
@import './components/index.scss'; |
||||
</style> |
||||
Loading…
Reference in new issue