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.
282 lines
9.6 KiB
282 lines
9.6 KiB
<template> |
|
<view class="user-background" :style="{ |
|
backgroundImage:'url('+(userInfo.background_image ? userInfo.background_image : 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.coupon_count}} |
|
</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">{{ userExtends.pet_count }}个萌宠</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">{{ userExtends.address_count }}个地址</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">{{ userExtends.feed_count }}个档案</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">{{ userExtends.order_count }}</view> |
|
</view> |
|
</view> |
|
<view class="user-button-group row"> |
|
<view class="user-button col-6" @click="orderPage(0, 1)"> |
|
<image class="img" :src="staticImage.baby.wait" mode="aspectFit"/> |
|
<view class="user-title">待服务</view> |
|
</view> |
|
<view class="user-button col-6" @click="orderPage(2, 1)"> |
|
<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(0, 2)"> |
|
<image class="img" :src="staticImage.big.wait" mode="aspectFit"/> |
|
<view class="user-title">待服务</view> |
|
</view> |
|
<view class="user-button col-6" @click="orderPage(2, 2)"> |
|
<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" @click="navTo('/pages/PrivacyPolicy/PrivacyPolicy')" > |
|
<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" @click="navTo('/pages/AboutUs/AboutUs')"> |
|
<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'; |
|
import {userDetail, userExtends} from "@/api/user"; |
|
import log from "@/utils/log"; |
|
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:'', |
|
nickname:'', |
|
coupon_count:0, |
|
id:0, |
|
feed_count:0 |
|
}, |
|
isTop:false, |
|
pagePadding:100, |
|
userInfo:{}, |
|
userExtends:{}, |
|
} |
|
}, |
|
methods: { |
|
navTo(url){ |
|
uni.navigateTo({ |
|
url:url |
|
}) |
|
}, |
|
userDetail(){ |
|
uni.navigateTo({ |
|
url:'/pages/UserDetail/index' |
|
}) |
|
}, |
|
orderPage(type, is_buy){ |
|
uni.navigateTo({ |
|
url:`/pages/UserOrderPage/index?type=${type}&is_bay=${is_buy}` |
|
}) |
|
}, |
|
showNumber(){ |
|
userExtends().then(data => { |
|
log(data); |
|
this.userExtends = data.data; |
|
uni.setStorageSync('userExtends',data.data); |
|
this.$store.commit('userExtends',data.data); |
|
}); |
|
}, |
|
userCouponsPage(){ |
|
uni.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 |
|
this.user.coupon_count = this.userExtends.coupon_count |
|
} |
|
}, |
|
showUserInfo(){ |
|
userDetail().then(res => { |
|
uni.setStorageSync('user',res.data); |
|
this.$store.commit('userInfo',res.data); |
|
}) |
|
} |
|
}, |
|
mounted() { |
|
this.showUserInfo(); |
|
this.showNumber(); |
|
}, |
|
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> |