<template>
<view class="">
<view class="top-wrap">
<view class="user-calling">
<view class="calling">
<image class="avatar" :src="userInfo.avatar" mode="" v-if="userInfo.avatar"></image>
<image class="avatar" src="../../static/error/missing-face.png" mode="" v-else></image>
<view class="u-name">
{{userInfo.phone}}
</view>
<image class="user-shop-icon" v-if="pUser.zero_level" :src="pUser.zero_level.icon" mode=""></image>
</view>
</view>
</view>
<view class="flex banne">
<image src="../../static/img/jfc.png" mode="" @click="navto('/pages/zero/award?type=9')"></image>
<image src="../../static/img/scjf.png" mode="" @click="navto('/pages/zero/award?type=10')"></image>
</view>
<view class="gg-wrap flex">
<image src="../../static/icon/jiang.png" mode=""></image>
<view class="gg-tit">
<view class="tit">
观看视频赚阅读积分
</view>
<view class="">
观看可获得阅读积分
</view>
</view>
<view class="gg-btn" @click="navto('/pages/zero/ren')">
去观看
</view>
</view>
<view class="bottom-list" v-for="key in navList">
<view class="flex list-item">
<view class="logo-wrap" :style="{'background-color': key.bgc}">
<image :src="key.img" mode="" class="logo"></image>
</view>
<view class="much">
<view class="">
{{key.name}}
</view>
<view class="val">
余额:{{pUser[key.val]*1 || '0'}}
</view>
</view>
<view class="btn" v-if="key.hz" @click="navto('/pages/zero/jfhz?type=3')">
兑换余额宝
</view>
<!-- <view class="btn" v-if="key.gs" @click="navto('/pages/zero/gs')">
挂售
</view> -->
<view class="btn" v-if="key.dy" @click="navto('/pages/zero/jfhz?type=0')">
兑换阅读积分
</view>
<view class="btn" v-if="key.agent" @click="navto('/pages/zero/jfhz?type=1')">
兑换复投积分
</view>
<!-- <view class="btn" v-if="key.ygs" @click="navto('/pages/zero/gs?type=1')"> -->
<view class="btn" v-if="key.ygs" @click="openT">
挂售/买入
</view>
<view class="btn" v-if="key.ye" @click="navto('/pages/zero/jfhz?type=2')">
兑换阅读积分
</view>
<view class="more" @click="navto('/pages/user/sz?type=' + key.type)">
明细
</view>
<image src="../../static/icon/back.png" mode="" class="black"></image>
</view>
</view>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex';
import {
passUser
} from '@/api/zero.js'
import {
getUserInfo,
getLevelList
} from '@/api/user.js';
export default {
data() {
return {
pUser: {},
listList: [],
navList: [{
name: '阅读积分',
val: 'points',
type: 8,
hz: true,
gs: true,
dy: false,
agent: false,
img: '../../static/icon/task1.png',
bgc: '#fef2f2'
},
{
name: '通证',
val: 'pass',
type: 9,
gs: false,
hz: false,
dy: true,
agent: false,
img: '../../static/icon/task2.png',
bgc: '#fcf7e3'
},
{
name: '商场积分',
val: 'integral',
type: 10,
hz: false,
dy: false,
agent: true,
img: '../../static/icon/task3.png',
bgc: '#f7ecfc'
},
{
name: '余额宝',
val: 'freeze_points',
type: 11,
hz: false,
dy: false,
agent: false,
ye: true,
ygs: true,
img: '../../static/icon/yeb.png',
bgc: '#fcf5eb'
},
]
}
},
computed: {
...mapState('user', ['userInfo', 'hasLogin'])
},
onShow() {
this.getLevelList()
this.passUser()
},
methods: {
openT() {
uni.showActionSheet({
itemList:['挂售','买入'],
success(e) {
console.log(e.tapIndex)
if(e.tapIndex == 0) {
uni.navigateTo({
url:'/pages/zero/gs?type=1'
})
}else {
uni.navigateTo({
url:'/pages/zero/gs?type=3'
})
}
}
})
},
passUser() {
passUser().then(res => {
// console.log(res);
this.pUser = res.data
})
},
getLevelList() {
getLevelList().then(res => {
this.listList = res.data.list
})
},
showLevel(val) {
let data = this.listList.find(item => item.grade == val)
console.log(data);
if (data) {
return data.icon
} else {
return ''
}
},
navto(url) {
uni.navigateTo({
url,
fail() {
uni.switchTab({
url
})
}
})
},
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #fff;
min-height: 100%;
}
.top-wrap {
// height: 260rpx;
padding-top: 220rpx;
background-color: #282623;
}
.user-calling {
height: 115rpx;
border-radius: 50rpx 50rpx 0 0;
background-color: #fff;
position: relative;
}
.calling {
width: 720rpx;
height: 190rpx;
position: absolute;
left: 0;
right: 0;
top: -110rpx;
background-image: url('../../static/img/calling.png');
background-size: contain;
margin: auto;
.avatar {
width: 106rpx;
height: 106rpx;
border-radius: 50%;
position: absolute;
top: 40rpx;
left: 48rpx;
}
.u-name {
position: absolute;
top: 57rpx;
left: 193rpx;
font-size: 36rpx;
font-weight: bold;
color: #773B00;
}
.user-shop-icon {
position: absolute;
top: 110rpx;
left: 193rpx;
width: 120rpx;
height: 40rpx;
}
}
.banne {
justify-content: center;
padding: 20rpx 0;
background-color: #fff;
image {
width: 340rpx;
height: 204rpx;
margin: 0 8rpx;
}
}
.bottom-list {
.list-item {
width: 670rpx;
height: 131rpx;
// background-color: red;
border-bottom: 1px solid #E8E8E8;
margin: auto;
.logo-wrap {
width: 81rpx;
height: 81rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.logo {
width: 40rpx;
height: 40rpx;
}
}
.much {
padding-left: 14rpx;
flex-grow: 1;
font-size: 30rpx;
font-weight: bold;
color: #333333;
.val {
padding-top: 15rpx;
font-size: 22rpx;
font-weight: 500;
color: #999999;
}
}
.btn {
// width: 127rpx;
height: 52rpx;
padding: 0 10px;
border: 2px solid #ff5050;
border-radius: 26rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
font-weight: 500;
color: #ff5050;
margin-right: 10rpx;
}
.more {
font-size: 24rpx;
font-weight: 500;
color: #999999;
padding-right: 14rpx;
}
.black {
width: 16rpx;
height: 27rpx;
}
}
}
.gg-wrap {
width: 702rpx;
height: 140rpx;
background: #FEFEFE;
box-shadow: 0rpx 0rpx 29rpx 0rpx rgba(231, 71, 68, 0.09);
border-radius: 4rpx;
margin: 20rpx auto;
padding: 30rpx 40rpx 40rpx 90rpx;
position: relative;
image {
position: absolute;
top: 0;
left: 26rpx;
width: 45rpx;
height: 60rpx;
}
.gg-tit {
font-size: 24rpx;
font-weight: 500;
color: #999999;
.tit {
padding-bottom: 20rpx;
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
}
.gg-btn {
width: 125rpx;
height: 46rpx;
background: linear-gradient(60deg, #FF8F3B, #FF3106);
border-radius: 23rpx;
font-size: 24rpx;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 45rpx;
}
}
</style>