You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
273 lines
9.0 KiB
273 lines
9.0 KiB
<template> |
|
<view class="user-background" :style="{ |
|
backgroundImage:'url('+staticImage.bodyBackground+')' |
|
}"> |
|
|
|
</view> |
|
<view class="user-shadow" :style="{ |
|
backgroundImage:'url('+staticImage.bodyShadow+')' |
|
}"> |
|
|
|
</view> |
|
<view class="app-wallpaper" :style="{ |
|
backgroundImage:'url('+staticImage.wallpaperBgImage+')' |
|
}"> |
|
<view class="user-detail row"> |
|
<view class="user-detail-avatar-container" @click="userDetail"> |
|
<image :src="user.avatar" mode="aspectFill" class="img"/> |
|
<view class="user-detail-avatar-border"></view> |
|
</view> |
|
<view class="user-detail-info"> |
|
<view class="user-detail-title-container row"> |
|
<image mode="widthFix" class="user-detail-img" :src="staticImage.hiImage"/> |
|
<view class="user-detail-title"> |
|
{{user.nickname}} |
|
</view> |
|
<view class="user-detail-coupons" :style="{ |
|
backgroundImage:'url('+staticImage.couponsImage+')' |
|
}" @click="userCouponsPage()"> |
|
{{user.coupons}} |
|
</view> |
|
<view class="user-detail-id col-12">会员编号：{{user.id}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="user-information .user-button-group-container"> |
|
<view class="user-button-content"> |
|
<image class="img gun1" :src="staticImage.gun1" mode="heightFix"/> |
|
<view class="user-title-img"> |
|
<image class="img" :src="staticImage.informationTitle" mode="heightFix"/> |
|
</view> |
|
<view class="user-button-group row"> |
|
<view class="user-button col-4" @click="navTo('/pages/Pet/index')"> |
|
<image class="img" :src="staticImage.information.pet" mode="aspectFit"/> |
|
<view class="user-title">宝贝档案</view> |
|
<view class="user-desc">2个萌宠</view> |
|
</view> |
|
<view class="user-button col-4" @click="navTo('/pages/Addr/index')"> |
|
<image class="img" :src="staticImage.information.info" mode="aspectFit"/> |
|
<view class="user-title">信息档案</view> |
|
<view class="user-desc">2个地址</view> |
|
</view> |
|
<view class="user-button col-4"> |
|
<image class="img" :src="staticImage.information.feed" mode="aspectFit"/> |
|
<view class="user-title">喂养档案</view> |
|
<view class="user-desc">2个档案</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="user-button-group-background"> |
|
<view class="user-button-group-container-background-color"></view> |
|
<view class="user-button-group-container-background-border"></view> |
|
</view> |
|
|
|
</view> |
|
<view class="user-baby-log .user-button-group-container"> |
|
<view class="user-button-content"> |
|
<image class="img gun2" :src="staticImage.gun2" mode="heightFix"/> |
|
<view class="user-title-img row"> |
|
<image class="img" :src="staticImage.babyTitle" mode="heightFix"/> |
|
<view class="shop-car-container"> |
|
<image class="img shop-car" :src="staticImage.baby.shopCar" mode="heightFix"/> |
|
<view class="shop-car-number">2</view> |
|
</view> |
|
</view> |
|
<view class="user-button-group row"> |
|
<view class="user-button col-6" @click="orderPage()"> |
|
<image class="img" :src="staticImage.baby.wait" mode="aspectFit"/> |
|
<view class="user-title">待服务</view> |
|
</view> |
|
<view class="user-button col-6" @click="orderPage()"> |
|
<image class="img" :src="staticImage.baby.end" mode="aspectFit"/> |
|
<view class="user-title">已完成</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="user-button-group-background"> |
|
<view class="user-button-group-container-background-color"></view> |
|
<view class="user-button-group-container-background-border"></view> |
|
</view> |
|
</view> |
|
<view class="user-big-service .user-button-group-container"> |
|
<view class="user-button-content"> |
|
<image class="img gun2" :src="staticImage.gun2" mode="heightFix"/> |
|
<view class="user-title-img"> |
|
<image class="img" :src="staticImage.bigTitle" mode="heightFix"/> |
|
</view> |
|
<view class="user-button-group row"> |
|
<view class="user-button col-6" @click="orderPage()"> |
|
<image class="img" :src="staticImage.big.wait" mode="aspectFit"/> |
|
<view class="user-title">待服务</view> |
|
</view> |
|
<view class="user-button col-6" @click="orderPage()"> |
|
<image class="img" :src="staticImage.big.end" mode="aspectFit"/> |
|
<view class="user-title">已完成</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="user-button-group-background"> |
|
<view class="user-button-group-container-background-color"></view> |
|
<view class="user-button-group-container-background-border"></view> |
|
</view> |
|
</view> |
|
<view class="user-more .user-button-group-container"> |
|
<view class="user-button-content"> |
|
<image class="img gun2" :src="staticImage.gun2" mode="heightFix"/> |
|
<view class="user-title-img"> |
|
<image class="img" :src="staticImage.moreTitle" mode="heightFix"/> |
|
</view> |
|
<view class="user-button-group row"> |
|
<view class="user-button col-3"> |
|
<image class="img" :src="staticImage.more.online" mode="aspectFit"/> |
|
<view class="user-title">在线沟通</view> |
|
</view> |
|
<view class="user-button col-3"> |
|
<image class="img" :src="staticImage.more.privacy" mode="aspectFit"/> |
|
<view class="user-title">隐私协议</view> |
|
</view> |
|
<view class="user-button col-3"> |
|
<image class="img" :src="staticImage.more.feedback" mode="aspectFit"/> |
|
<view class="user-title">意见反馈</view> |
|
</view> |
|
<view class="user-button col-3"> |
|
<image class="img" :src="staticImage.more.about" mode="aspectFit"/> |
|
<view class="user-title">关于我们</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="user-button-group-background"> |
|
<view class="user-button-group-container-background-color"></view> |
|
<view class="user-button-group-container-background-border"></view> |
|
</view> |
|
</view> |
|
</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:{ |
|
hiImage:imghost+'/static/image/index-user-title-hi.png', |
|
couponsImage:imghost+'/static/image/user-coupons.png', |
|
bodyBackground:imghost+'/static/image/user-background.png', |
|
bodyShadow:imghost+'/static/image/user-detail-background.png', |
|
informationTitle:imghost+'/static/image/user-information-title.png', |
|
babyTitle:imghost+'/static/image/user-baby-title.png', |
|
bigTitle:imghost+'/static/image/user-big-title.png', |
|
moreTitle:imghost+'/static/image/user-more-title.png', |
|
gun1:imghost+'/static/image/user-gun-1.png', |
|
gun2:imghost+'/static/image/user-gun-2.png', |
|
information:{ |
|
pet:imghost+'/static/image/user-information-pet.png', |
|
info:imghost+'/static/image/user-information-info.png', |
|
feed:imghost+'/static/image/user-information-feed.png', |
|
}, |
|
baby:{ |
|
wait:imghost+'/static/image/user-baby-wait.png', |
|
end:imghost+'/static/image/user-baby-end.png', |
|
shopCar:imghost+'/static/image/user-shop-car.png', |
|
}, |
|
big:{ |
|
wait:imghost+'/static/image/user-big-wait.png', |
|
end:imghost+'/static/image/user-big-end.png', |
|
}, |
|
more:{ |
|
online:imghost+'/static/image/user-more-online.png', |
|
privacy:imghost+'/static/image/user-more-privacy.png', |
|
feedback:imghost+'/static/image/user-more-feedback.png', |
|
about:imghost+'/static/image/user-more-about.png', |
|
} |
|
}, |
|
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> |