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
2 years ago
|
<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>
|