12 changed files with 335 additions and 237 deletions
@ -1,174 +1,178 @@ |
|||||||
<template> |
<template> |
||||||
<view class="app-wallpaper" :style="{ |
<view class="app-wallpaper" :style="{ |
||||||
backgroundImage:'url('+staticImage.wallpaperBgImage+')' |
backgroundImage:'url('+staticImage.wallpaperBgImage+')' |
||||||
}"> |
}"> |
||||||
<view class="index-banner"> |
<view class="index-banner"> |
||||||
<view class="index-banner-container"> |
<view class="index-banner-container"> |
||||||
<image class="img" v-for="item in indexBanner" mode="widthFix" :src="item.image" alt="" /> |
<image class="img" v-for="item in indexBanner" mode="widthFix" :src="item.image" alt=""/> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
<view class="index-user-detail"> |
<view class="index-user-detail"> |
||||||
<view class="user-detail-container row"> |
<view class="user-detail-container row"> |
||||||
<view class="user-avatar"> |
<view class="user-avatar"> |
||||||
<img mode="widthFix" class="img" :src="user.avatar" alt=""> |
<img mode="widthFix" class="img" :src="user.avatar" alt=""> |
||||||
</view> |
</view> |
||||||
<view class="user-content"> |
<view class="user-content"> |
||||||
<view class="user-title-top"> |
<view class="user-title-top row"> |
||||||
<image class="img" mode="widthFix" |
<image class="img" mode="widthFix" |
||||||
:src="staticImage.hiImage" alt="" /> |
:src="staticImage.hiImage" alt=""/> |
||||||
<text class="user-title-text">{{user.nickname}}</text> |
<view class="user-title-text"> |
||||||
</view> |
<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 class="user-title-bottom"> |
</view> |
||||||
<image class="img" mode="aspectFit" |
</view> |
||||||
:src="staticImage.dogImage" alt="" /> |
<view class="user-title-bottom"> |
||||||
<text class="user-title-idcard"> |
<image class="img" mode="aspectFit" |
||||||
会员编号：{{user.id}} |
:src="staticImage.dogImage" alt=""/> |
||||||
</text> |
<text class="user-title-idcard"> |
||||||
</view> |
会员编号：{{ user.id }} |
||||||
</view> |
</text> |
||||||
<view class="user-coupons" :style="{backgroundImage:'url('+staticImage.couponsImage+')'}"> |
</view> |
||||||
<view class="user-coupons-number" @click="userCouponsPage()"> |
</view> |
||||||
<view class="user-coupons-number-container"> |
<view class="user-coupons" :style="{backgroundImage:'url('+staticImage.couponsImage+')'}"> |
||||||
{{user.coupon_count}} |
<view class="user-coupons-number" @click="userCouponsPage()"> |
||||||
</view> |
<view class="user-coupons-number-container"> |
||||||
</view> |
{{ userExtends.coupon_count }} |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
<view class="index-button-group row"> |
</view> |
||||||
<view class="index-button-detail col-6" v-for="(item) in staticImage.indexButtonGroup"> |
</view> |
||||||
<view class="index-button-detail-container row" :style="{ |
<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+')' |
backgroundImage:'url('+item.backgroundImage+')' |
||||||
}" @click="navTo(item.url)"> |
}" @click="navTo(item.url)"> |
||||||
<view class="col-12"> |
<view class="col-12"> |
||||||
<image mode="widthFix" class="img" |
<image mode="widthFix" class="img" |
||||||
:src="item.serviceImage"/> |
:src="item.serviceImage"/> |
||||||
</view> |
</view> |
||||||
<view class="col-12"> |
<view class="col-12"> |
||||||
<image mode="widthFix" class="img" |
<image mode="widthFix" class="img" |
||||||
:src="item.buttonImage"/> |
:src="item.buttonImage"/> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import { |
import { |
||||||
imghost |
imghost |
||||||
} from '@/config/host.js' |
} from '@/config/host.js' |
||||||
import api from '@/utils/functions.js'; |
import api from '@/utils/functions.js'; |
||||||
import log from "@/utils/log"; |
import log from "@/utils/log"; |
||||||
export default { |
import {userExtends} from "@/api/user"; |
||||||
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() { |
|
||||||
|
|
||||||
}, |
export default { |
||||||
methods: { |
data: { |
||||||
userCouponsPage(){ |
title: 'Hello', |
||||||
uni.navigateTo({ |
loading: true, |
||||||
url:'/pages/UserCoupons/index' |
staticImage: { |
||||||
}) |
hiImage: imghost + '/static/image/index-user-title-hi.png', |
||||||
}, |
dogImage: imghost + '/static/image/index-user-title-dog.png', |
||||||
navTo(url){ |
couponsImage: imghost + '/static/image/index-user-coupons-background.png', |
||||||
uni.navigateTo({ |
indexButtonGroup: [ |
||||||
url:url |
{ |
||||||
}) |
backgroundImage: imghost + '/static/image/index-button-one.png', |
||||||
}, |
serviceImage: imghost + '/static/image/index-button-bg-one.png', |
||||||
updateUserInfo(){ |
buttonImage: imghost + '/static/image/index-button-bg-btn-one.png', |
||||||
if(this.userInfo){ |
url: '/pages/OrderPage/index' |
||||||
this.user.id = this.userInfo.id |
}, { |
||||||
this.user.nickname = this.userInfo.name |
backgroundImage: imghost + '/static/image/index-button-two.png', |
||||||
this.user.avatar = this.userInfo.avatar |
serviceImage: imghost + '/static/image/index-button-bg-two.png', |
||||||
this.user.coupon_count = this.userInfo.coupon_count |
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) { |
user: { |
||||||
if(res.scrollTop <= 20){ |
avatar: imghost + '/static/image/banner.png', |
||||||
uni.$emit('isTop', true); |
nickname: '清晨的风', |
||||||
}else{ |
coupon_count: 221, |
||||||
uni.$emit('isTop', false); |
id: 88685 |
||||||
} |
|
||||||
|
|
||||||
}, |
|
||||||
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); |
|
||||||
}, |
}, |
||||||
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.userExtends": { |
||||||
"$store.state.userInfo": { |
handler(newVal, oldVal) { |
||||||
handler(newVal, oldVal) { |
this.userExtends = newVal; |
||||||
this.userInfo = newVal; |
this.updateUserInfo(); |
||||||
this.updateUserInfo(); |
|
||||||
} |
|
||||||
}, |
|
||||||
"$store.state.userExtends": { |
|
||||||
handler(newVal, oldVal) { |
|
||||||
this.userExtends = newVal; |
|
||||||
this.updateUserInfo(); |
|
||||||
} |
|
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="scss"> |
<style lang="scss"> |
||||||
@import './components/index.scss'; |
@import './components/index.scss'; |
||||||
</style> |
</style> |
||||||
Loading…
Reference in new issue