401 lines
12 KiB
Vue
401 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<view class="top-backgroup">
|
||
<image src="https://resource.tuniaokj.com/images/my/my-bg4.png" mode="widthFix" class="backgroud-image"></image>
|
||
</view>
|
||
<view class="p-30" style="margin-top: -450rpx; padding-bottom: 150rpx" :style="{ paddingTop: statusBarHeight }">
|
||
<view class="flex-ac header" @click="$utils.tn('/pages/me/setting', true)">
|
||
<image class="header_img" v-if="user.avatar_url" :src="user.avatar_url"></image>
|
||
<image class="header_img" v-else src="/static/mr.png"></image>
|
||
<view class="header_tit" v-if="user.nickname || user.username">
|
||
<view class="header_tit_nick">{{ user.nickname }}</view>
|
||
<view class="header_tit_acee">{{ user.username }}</view>
|
||
</view>
|
||
<view class="header_tit" v-else>
|
||
<view class="header_tit_nick" style="margin-bottom: 0rpx">点击登录</view>
|
||
</view>
|
||
<image class="header_you" src="/static/sett.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="member tn-shadow-blur">
|
||
<view class="member_left">
|
||
<view class="member_left_1">{{ device.cur_level.name }}</view>
|
||
<view class="member_left_2">
|
||
<u-line-progress
|
||
v-if="user.vip < 3 || user === null"
|
||
:percentage="(device.all_device_num / device.up_level.num) * 100"
|
||
:showText="false"
|
||
height="7"
|
||
:activeColor="'#f1c68e'"
|
||
:inactiveColor="'#fff'"
|
||
></u-line-progress>
|
||
<u-line-progress v-else :percentage="100" :showText="false" height="7" :activeColor="'#f1c68e'" :inactiveColor="'#fff'"></u-line-progress>
|
||
</view>
|
||
<view v-if="user.vip < 3 || user === null" class="member_left_3">
|
||
再购买{{ device.up_level.num - device.all_device_num }}台充电桩，可升级{{ device.up_level.name || '' }}
|
||
</view>
|
||
<view v-else class="member_left_3">已到最高级</view>
|
||
</view>
|
||
<!-- <button @click="$utils.tn('/pages/goods/detail?id=1')" class="member_right tn-shadow-blur">去下单</button> -->
|
||
</view>
|
||
<!-- <view class="p-t20 miney_g bgf br10 mt30 wallpaper-shadow">
|
||
<u-grid :border="false" align="center">
|
||
<u-grid-item bgColor="#fff" @click="$utils.tn('/pages/resourceBundle/resourceBundle', true)">
|
||
<view>￥{{ user.money || 0.0 }}</view>
|
||
<view class="fs28">余额</view>
|
||
</u-grid-item>
|
||
<u-grid-item bgColor="#fff" @click="$utils.tn('/pages/device/index', true)">
|
||
<view>{{ user.device_num || 0 }}</view>
|
||
<view class="fs28">充电桩</view>
|
||
</u-grid-item>
|
||
<u-grid-item bgColor="#fff" @click="$utils.tn('/pages/option/index', true)">
|
||
<view>{{ user.option || 0.0 }}</view>
|
||
<view class="fs28">期望值</view>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view> -->
|
||
|
||
<view style="display: flex; align-items: center; justify-content: space-between">
|
||
<view class="wallpaper-shadow b_yubiao" style="width: 330rpx" @click="$utils.tn('/pages/resourceBundle/resourceBundle', true)">
|
||
<image style="width: 70rpx; height: 70rpx" src="/static/b_ye.png"></image>
|
||
<view class="b_yubiao_right">
|
||
<view style="margin-bottom: 15rpx; font-weight: bold">余额</view>
|
||
<view>￥{{ user.money || 0.0 }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="wallpaper-shadow b_yubiao" style="width: 330rpx" @click="$utils.tn('/pages/device/index', true)">
|
||
<image src="/static/b_cd.png"></image>
|
||
<view class="b_yubiao_right">
|
||
<view style="margin-bottom: 15rpx; font-weight: bold">充电桩</view>
|
||
<view>{{ user.device_num || 0 }}个</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="wallpaper-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
|
||
<view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
|
||
<view class="tn-padding-sm tn-margin-xs tn-radius" @click="$utils.tn('/pages/order/index', true)">
|
||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||
<view class="t12_icon">
|
||
<image src="/static/order.png"></image>
|
||
</view>
|
||
<view class="tn-text-center">
|
||
<text class="tn-text-ellipsis">订单</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tn-padding-sm tn-margin-xs tn-radius" @click="$utils.tn('/pages/resourceBundle/resourceBundle', true)">
|
||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||
<view class="t12_icon">
|
||
<image src="/static/ye.png"></image>
|
||
</view>
|
||
<view class="tn-text-center">
|
||
<text class="tn-text-ellipsis">余额</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tn-padding-sm tn-margin-xs tn-radius" @click="$utils.tn('/pages/device/index', true)">
|
||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||
<view class="t12_icon">
|
||
<image src="/static/cdz.png"></image>
|
||
</view>
|
||
<view class="tn-text-center">
|
||
<text class="tn-text-ellipsis">充电桩</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tn-padding-sm tn-margin-xs tn-radius" @click="$utils.tn('/pages/wallet/list', true)">
|
||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||
<view class="t12_icon">
|
||
<image src="/static/zd.png"></image>
|
||
</view>
|
||
<view class="tn-text-center">
|
||
<text class="tn-text-ellipsis">账单</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
|
||
<view class="tn-padding-sm tn-margin-xs tn-radius" @click="$utils.tn('/pages/team/index', true)">
|
||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||
<view class="t12_icon">
|
||
<image src="/static/yqjl.png"></image>
|
||
</view>
|
||
<view class="tn-text-center">
|
||
<text class="tn-text-ellipsis">邀请记录</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tn-padding-sm tn-margin-xs tn-radius" @click="$utils.tn('/pages/share/index', true)">
|
||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||
<view class="t12_icon">
|
||
<image src="/static/fxhb.png"></image>
|
||
</view>
|
||
<view class="tn-text-center">
|
||
<text class="tn-text-ellipsis">分享海报</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- @click="$utils.call('4008005326')" -->
|
||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||
<button open-type="contact" style="all: unset">
|
||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||
<view class="t12_icon">
|
||
<image src="/static/lxkf.png"></image>
|
||
</view>
|
||
<view class="tn-text-center">
|
||
<text class="tn-text-ellipsis">联系客服</text>
|
||
</view>
|
||
</view>
|
||
</button>
|
||
</view>
|
||
<!-- @click="$utils.logOut()" -->
|
||
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||
<!-- <view class="t12_icon">
|
||
<image src="/static/tcdl.png"></image>
|
||
</view>
|
||
<view class="tn-text-center">
|
||
<text class="tn-text-ellipsis">退出登录</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="means-a mt30" @click="$utils.tn('/pages/admin/shop/index', true)">
|
||
<view class="means-a-list">
|
||
<view class="tit">投资人</view>
|
||
<view class="means-zhuomi">
|
||
<view class="means-zhuomi-tit" v-if="userInfo.mobile">{{ userInfo.mobile }}</view>
|
||
<image src="/static/icon/youdao.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="means-a-list" style="border: 0;" @click="$utils.tn('/pages/admin/order/index', true)">
|
||
<view class="tit">订单</view>
|
||
<view class="means-zhuomi">
|
||
<view class="means-zhuomi-tit" v-if="userInfo.mobile">{{ userInfo.mobile }}</view>
|
||
<image src="/static/icon/youdao.png"></image>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<view v-if="user.vip > 0" style="background-color: #f6faff; padding: 30rpx; border-radius: 10rpx; margin-top: 30rpx">
|
||
<view style="font-size: 30rpx; color: #999999; text-align: center;margin-bottom: 20rpx;">
|
||
邀请码：{{ user.invite_code }}
|
||
<text style="text-decoration:underline;margin-left: 30rpx;" @click="$utils.copy(user.invite_code)">复制</text>
|
||
</view>
|
||
<view class="u-flex u-flex-xy-center">
|
||
<u--image :src="user.appcode" radius="20rpx" width="440rpx" height="440rpx"></u--image>
|
||
</view>
|
||
<view style="height: 10rpx"></view>
|
||
<view style="font-size: 30rpx; color: #999999; text-align: center">长按保存或者转发</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getUser, setUser } from '@/com/storage/auth.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusBarHeight: 20,
|
||
user: null,
|
||
device: {
|
||
all_device_num: 0,
|
||
team_device_num: 0,
|
||
cur_level: {
|
||
name: '普通用户',
|
||
level: 0
|
||
},
|
||
up_level: {
|
||
name: '',
|
||
level: 0,
|
||
num: 0
|
||
}
|
||
},
|
||
pshop: null
|
||
};
|
||
},
|
||
watch: {
|
||
'$store.state.auth.user'(newVal, oldVal) {
|
||
console.log(newVal);
|
||
console.log('watch');
|
||
|
||
if (!newVal.id) return (this.user = null);
|
||
this.user = newVal;
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 44 + 'px';
|
||
console.log(this.statusBarHeight);
|
||
},
|
||
async onShow() {
|
||
this.user = uni.getStorageSync('user') || null;
|
||
if (!this.user.id) return (this.user = null);
|
||
if (await this.$utils.token()) return true;
|
||
this.getuser();
|
||
},
|
||
methods: {
|
||
getuser() {
|
||
this.$http.get('/shop/v10/user/info').then(({ data, success }) => {
|
||
if (success) {
|
||
this.device = data.device;
|
||
this.pshop = data.pshop;
|
||
this.$store.commit('auth/setUser', data.info);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.header {
|
||
&_img {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
margin-right: 30rpx;
|
||
border-radius: 50%;
|
||
}
|
||
&_tit {
|
||
flex: 1;
|
||
&_nick {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
&_acee {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
&_you {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.member {
|
||
margin-top: 50rpx;
|
||
border-radius: 15rpx;
|
||
padding: 20rpx 40rpx;
|
||
position: relative;
|
||
background: linear-gradient(-120deg, #3e445a, #31374a, #2b3042, #262b3c);
|
||
display: flex;
|
||
align-items: center;
|
||
&_left {
|
||
flex: 1;
|
||
margin-right: 20rpx;
|
||
&_1 {
|
||
color: #fff;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
}
|
||
&_2 {
|
||
margin: 20rpx 0;
|
||
}
|
||
&_3 {
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
&_right {
|
||
all: unset;
|
||
background-color: #f1c68e;
|
||
color: #634738;
|
||
width: 160rpx;
|
||
border-radius: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 10rpx 0;
|
||
overflow: visible;
|
||
}
|
||
}
|
||
|
||
.tn-flex {
|
||
display: flex;
|
||
}
|
||
|
||
.tn-padding-sm {
|
||
width: 25%;
|
||
}
|
||
.tn-padding-sm {
|
||
margin: 10rpx;
|
||
}
|
||
|
||
.t12_icon {
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.tn-flex-direction-column {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.tn-text-ellipsis {
|
||
font-size: 26rpx;
|
||
}
|
||
.means-a {
|
||
width: 100%;
|
||
background: #ffffff;
|
||
border-radius: 15rpx;
|
||
padding: 0 25rpx;
|
||
|
||
.means-a-list {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
min-height: 100rpx;
|
||
background-color: #ffffff;
|
||
padding: 0;
|
||
border: 0;
|
||
border-bottom: 1rpx solid #f6f6f6;
|
||
|
||
.tit {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.header {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.nickname {
|
||
font-size: 30rpx;
|
||
color: #222222;
|
||
}
|
||
|
||
.means-zhuomi {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 11rpx;
|
||
height: 21rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.b_yubiao {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 30rpx 20rpx;
|
||
image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
&_right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
}
|
||
}
|
||
</style>
|