smartmeter-app/pages/my.vue
2024-04-27 17:20:50 +08:00

446 lines
10 KiB
Vue

<template>
<view class="page">
<u-navbar :is-back="false" title="我的" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36'
height='36'
id="navbar">
</u-navbar>
<view class="userpage" v-if="userType=='00'">
<view class="top_box">
</view>
<view class="bot_box">
<view class="userinfo">
<view class="userimg_box">
<image src="https://api.ccttiot.com/smartmeter/img/static/uGvS4RQvbw7OOfhzy6xf" mode=""></image>
</view>
<view class="nickname">
用户昵称
</view>
</view>
<view class="botcard" style="margin-top: 116rpx;" @click="topages(0)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uFzwAtuoU63FHMXE2P6I" mode=""></image>
<view class="txt">充值记录</view>
</view>
<view class="botcard" @click="topages(1)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uj4DT6WructS782RY0J7" mode=""></image>
<view class="txt">抄表记录</view>
</view>
<view class="botcard" @click="topages(2)">
<image src="https://api.ccttiot.com/smartmeter/img/static/u6qVTFXdkQKEqE1y0J4o" mode=""></image>
<view class="txt">常见问题</view>
</view>
<view class="botcard" @click="topages(3)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uGlrjkSOTDXMFuuRb03l" mode=""></image>
<view class="txt">意见反馈</view>
</view>
<view class="botcard" @click="topages(4)">
<image src="https://api.ccttiot.com/smartmeter/img/static/ubxoYVnbIK1rk0cfoL3j"></image>
<view class="txt">设置</view>
</view>
</view>
</view>
<view class="fdpage" style="padding-bottom: 200rpx;" v-if="userType=='01'">
<view class="top_box">
<view class="userinfo">
<view class="img">
<image src="https://api.ccttiot.com/smartmeter/img/static/uGvS4RQvbw7OOfhzy6xf" mode=""></image>
</view>
<view class="info">
<view class="username">
用户昵称
</view>
<view class="num">
{{userinfo.deviceCount}}台设备
</view>
</view>
</view>
<view class="tit">
我的钱包
</view>
<view class="cont_box">
<view class="cont" @click="topage(8)">
<view class="top" >
<view class="txt" style="font-size: 24rpx;">
</view>
{{userinfo.balance}}
</view>
<view class="bot">
钱包余额
</view>
</view>
<view class="cont" @click="topage(6)">
<view class="top" >
<image src="https://api.ccttiot.com/smartmeter/img/static/u9VRzUjhkZHj4ExkXC10" mode="" style="width: 61.83rpx;height: 46.35rpx;"></image>
</view>
<view class="bot">
收款账户
</view>
</view>
<view class="cont" @click="topage(7)">
<view class="top" >
<image src="https://api.ccttiot.com/smartmeter/img/static/utQedWhwW39J2qbeWvn8" mode="" style="width: 45rpx;height: 55rpx;"></image>
</view>
<view class="bot">
收支明细
</view>
</view>
</view>
</view>
<view class="bot_box">
<view class="botcard" @click="topage(0)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uFzwAtuoU63FHMXE2P6I" mode=""></image>
<view class="txt">提现记录</view>
</view>
<!-- <view class="botcard" @click="topage(1)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uj4DT6WructS782RY0J7" mode=""></image>
<view class="txt">抄表记录</view>
</view> -->
<view class="botcard" @click="topage(2)">
<image src="https://api.ccttiot.com/smartmeter/img/static/u6qVTFXdkQKEqE1y0J4o" mode=""></image>
<view class="txt">常见问题</view>
</view>
<view class="botcard" @click="topage(3)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uGlrjkSOTDXMFuuRb03l" mode=""></image>
<view class="txt">意见反馈</view>
</view>
<view class="botcard" @click="topage(4)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uGaAuulryhDmaDwWLuwo" mode=""></image>
<view class="txt">归零记录</view>
</view>
<view class="botcard" @click="topage(5)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uYWpW30vIQ6M4svb7Vnb"></image>
<view class="txt">设置</view>
</view>
</view>
</view>
<tab-bar :indexs='2' style=""></tab-bar>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: " #8883F0",
},
userType:'',
userinfo:''
}
},
onLoad() {
},
onShow() {
this.logins()
},
methods: {
topage(num){
if(num==0){
uni.navigateTo({
url:"/page_user/txrecord",
animationType: 'slide-in-top',
animationDuration: 200
})
}else if(num==1){
uni.navigateTo({
url:'/page_user/cbRecord'
})
}else if(num==2){
uni.navigateTo({
url:'/page_user/aske'
})
}else if(num==3){
uni.navigateTo({
url:'/page_user/Feedback'
})
}else if(num==4){
uni.navigateTo({
url:'/page_user/glRecord'
})
}else if(num==5){
uni.navigateTo({
url:'/page_user/userSet'
})
}else if(num==6){
uni.navigateTo({
url:'/page_user/skzh'
})
}else if(num==7){
uni.navigateTo({
url:'/page_user/shouzhi'
})
}else if(num==8){
uni.navigateTo({
url:'/page_user/yetx'
})
}
},
topages(num){
if(num==0){
uni.navigateTo({
url:'/page_user/usercz'
})
}else if(num==1){
uni.navigateTo({
url:'/page_user/cbRecord'
})
}else if(num==2){
uni.navigateTo({
url:'/page_user/aske'
})
}else if(num==3){
uni.navigateTo({
url:'/page_user/Feedback'
})
}else if(num==4){
uni.navigateTo({
url:'/page_user/userSet'
})
}
},
logins(){
if (uni.getStorageSync('userType')) {
this.userType = uni.getStorageSync('userType')
this.userType='01'
if (this.userType == '01') {
// this.getDeviceList()
} else if (this.userType == '00') {
// this.getdevice()
}
} else {
}
this.getuserinfo()
},
getuserinfo() {
this.$u.get("/app/user/userInfo").then((res) => {
// this.$forceUpdate()
if (res.code == 200) {
this.userinfo=res.data
uni.setStorageSync('userType', res.data.userType)
this.userType = res.data.userType
if (this.userType == '01') {
} else if (this.userType == '00') {
}
}
});
},
}
}
</script>
<style lang="scss" >
page{
background-color: #F7FAFE;
}
.page{
// position: relative;
width: 750rpx;
height: 100vh;
.userpage{
.top_box{
padding-top: 40rpx;
width: 750rpx;
height: 352rpx;
background-color: #8883F0;
}
.bot_box{
position: relative;
padding: 40rpx 50rpx ;
margin-top: -50rpx;
width: 750rpx;
// min-height: 500rpx;
background: #F7FAFE;
border-radius: 50rpx 50rpx 0 0;
.userinfo{
display: flex;
justify-content: center;
position: absolute;
top: -100rpx;
width: 650rpx;
height: 184rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(53,140,255,0.1);
border-radius: 32rpx 32rpx 32rpx 32rpx;
.userimg_box{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -36rpx;
width: 140rpx;
height: 140rpx;
background: #FFFFFF;
border-radius: 50%;
image{
width: 120rpx;
height: 120rpx;
border-radius: 50%;
}
}
.nickname{
width: 100%;
text-align: center;
margin-top: 110rpx;
font-weight: 400;
font-size: 36rpx;
color: #262B37;
}
}
.botcard{
margin-bottom: 32rpx;
display: flex;
align-items: center;
padding-left: 38rpx;
width: 650rpx;
height: 118rpx;
background: #FFFFFF;
border-radius: 30rpx;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
image{
width: 52rpx;
height: 52rpx;
margin-right: 32rpx
;
}
.txt{
font-size: 30rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #383838;
}
}
}
}
.fdpage{
.top_box{
padding-top: 40rpx;
width: 750rpx;
height: 458rpx;
background-color: #8883F0;
.userinfo{
margin-left: 56rpx;
display: flex;
flex-wrap: nowrap;
align-content: flex-start;
.img{
width: 100rpx;
height: 100rpx;
image{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
}
.info{
margin-left: 28rpx;
.username{
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #FFFFFF;
}
.num{
margin-top: 20rpx;
font-size: 22rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #ABA8F4;
}
}
}
.tit{
margin-top: 32rpx;
margin-left: 56rpx;
width: 100%;
font-size: 28rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #FFFFFF;
}
.cont_box{
margin-top: 28rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
.cont{
width: 116rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
.top{
display: flex;
flex-wrap: nowrap;
align-items: baseline;
font-size: 36rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #FFFFFF;
}
.bot{
margin-top: 20rpx;
font-size: 22rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #FFFFFF;
}
}
}
}
.bot_box{
padding: 40rpx 50rpx ;
margin-top: -50rpx;
width: 750rpx;
// min-height: 500rpx;
background: #F7FAFE;
border-radius: 50rpx 50rpx 0 0;
.botcard{
margin-bottom: 32rpx;
display: flex;
align-items: center;
padding-left: 38rpx;
width: 650rpx;
height: 118rpx;
background: #FFFFFF;
border-radius: 30rpx;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
image{
width: 52rpx;
height: 52rpx;
margin-right: 32rpx
;
}
.txt{
font-size: 30rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #383838;
}
}
}
}
}
</style>