耀实惠小程序
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.
 
 
 

243 lines
5.3 KiB

<template>
<view class="">
<view class="nav_box">
<!-- <u-navbar :title="null" bgColor="transparent" @rightClick="rightClick" :autoBack="true" ></u-navbar> -->
<view class="barHeight" :style="'height:'+sumHeight+'px'">
<view class="left_back" @click="toback" >
<u-icon name="arrow-left" color="#fff" size="45"></u-icon>
</view>
</view>
<view class="head_portrait">
<view class="img_box">
<image :src="userInfo.headUrl || ''" mode=""></image>
</view>
<view class="name_title">
<text class="name">{{userInfo.nickName || ''}}</text>
<text class="id">ID: {{userInfo.invitationCode || ''}}</text>
</view>
</view>
</view>
<view class="card">
<view class="item" v-for="(item,index) in card_list" :key="index" @click="handleClick(item.key)">
<text class="num">{{item.num}}</text>
<text class="title">{{item.title}}</text>
</view>
</view>
<view class="grid_box">
<view class="item" v-for="(item,index) in config.grid_list" :key="index" @click="todetale(item.url)">
<text class="item_text">{{item.name}}</text>
<image :src="item.src_url" mode="widthFix"></image>
</view>
</view>
</view>
</template>
<script>
import config from "./config.js"
export default {
data() {
return {
sumHeight: null,
config: config,
card_list:[],
userInfo: {}
}
},
onLoad() {
this.getChannelDealer();
// 状态栏高度
const barHeight = uni.getSystemInfoSync().statusBarHeight;
// #ifdef MP-WEIXIN
// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
const custom = wx.getMenuButtonBoundingClientRect()
// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
const navigationBarHeight = custom.height + (custom.top - barHeight) * 2;
// 总体高度 = 状态栏高度 + 导航栏高度
this.sumHeight = navigationBarHeight + barHeight;
// #endif
this.userInfo = uni.getStorageSync("__user_info");
console.log(custom, navigationBarHeight, this.sumHeight)
},
methods: {
handleClick (key) {
console.log("进入=="+key)
if (key === 'stationmaster') return
//let url = key === 'money' ? '/pagesA/my_other_list/webmaster/wallet/index?type=2' : '/pagesA/my_other_list/webmaster/reward_centers/index?type=2'
let url = key === 'money' ? '/pagesA/my_other_list/webmaster/reward_centers/index2?type=2' : '/pagesA/my_other_list/webmaster/reward_centers/index3?type=1'
console.log("进入=="+url)
uni.navigateTo({
url
})
},
getChannelDealer() {
uni.showLoading();
this.$api('getChannelDealer').then(res => {
let { code, result, message} = res;
uni.hideLoading();
if(code == 200) {
this.card_list = [
{
key: 'money',
num: result.money,
title: '佣金余额与明细'
},
{
key: 'team',
num: result.moneySum,
title: '业绩总额与明细'
},
{
key: 'stationmaster',
num: result.stationmaster_num,
title: '站长总数'
},
]
console.log(result);
}else{
this.$Toast(message);
if(message == '您不是渠道商,无权限访问'){
setTimeout(()=> {
uni.switchTab({
url: '/pages/my/my'
})
},1000);
}
}
}).catch(err => {
uni.hideLoading();
this.$Toast(err.message)
})
},
// 返回
toback() {
uni.navigateBack({
delta: 1
})
},
todetale(url) {
console.log(url)
this.$tools.navigateTo({
url
})
}
}
}
</script>
<style lang="scss">
page {
position: relative;
}
.nav_box {
height: 423rpx;
background: -webkit-linear-gradient(-90deg, #01aeea, #f1fbff);
.barHeight{
display: flex;
align-items: flex-end;
.left_back {
width: 120rpx;
height: 60rpx;
padding-left: 32rpx;
padding-bottom: 10rpx;
box-sizing: border-box;
}
}
}
.head_portrait {
display: flex;
padding-top: 68rpx;
padding-left: 40rpx;
.img_box{
width: 160rpx;
height: 160rpx;
overflow: hidden;
border-radius: 50%;
margin-right: 20rpx;
}
image {
width: 160rpx;
height: 160rpx;
}
.name_title {
display: flex;
flex-direction: column;
color: #fff;
.name {
padding-top: 18rpx;
padding-bottom: 10rpx;
font-size: 38rpx;
font-weight: bold;
}
.id {
font-size: 32rpx;
}
}
}
.card {
position: absolute;
top: 424rpx;
left: 20rpx;
width: 711rpx;
height: 192rpx;
margin: 0 auto;
border-radius: 20rpx;
// 背景图
background-color: #01aeea;
display: flex;
justify-content: space-around;
align-items: center;
view {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
.num {
font-size: 35rpx;
font-weight: bold;
padding-bottom: 34rpx;
}
.title {
font-size: 30rpx;
}
}
}
.grid_box {
margin-top: 220rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.item {
width: 326rpx;
height: 176rpx;
margin-top: 20rpx;
margin-left: 30rpx;
border-radius: 19rpx;
box-shadow: 0 3rpx 6rpx 0 rgba(0, 0, 0, 0.16);
display: flex;
align-items: center;
justify-content: space-around;
.item_text{
font-size: 35rpx;
font-weight: bold;
}
image {
width: 100rpx;
}
}
}
</style>