242 lines
6.2 KiB
Vue
242 lines
6.2 KiB
Vue
<template>
|
||
<view class="mine-distribution-index" v-if="detail.id">
|
||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" :color="color"
|
||
:backgroundColor="color == '#ffffff' ?``:primaryColor" title="分销中心" leftIcon="icon-left">
|
||
</uni-nav-bar>
|
||
<view mode="aspectFill" lazy-load class="mine-index-bg abs"></view>
|
||
<view class="user-info abs pt-md pl-lg pr-lg pb-lg flex-center">
|
||
<image mode="aspectFill" lazy-load class="user-img radius" :src="detail.avatarUrl">
|
||
</image>
|
||
<view class="flex-1 ml-md c-base">
|
||
<view class="f-lg-title text-bold max-550 ellipsis">
|
||
Hi，{{ detail.nickName }}
|
||
</view>
|
||
<view @tap.top="$util.goUrl({url:detail.fx_code,openType:'copy'})" class="flex-y-center f-caption">邀请码:
|
||
{{detail.fx_code}}
|
||
<view class="copy-code-btn flex-center f-icontext ml-sm">复制</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="space-user-info rel"></view>
|
||
<!-- fx_cash 可提现；wallet_price 已提现 -->
|
||
<view @tap.stop="$util.goUrl({url:`/mine/pages/cash-out?type=distribution`})"
|
||
class="stored-item pd-lg ml-md mr-md fill-base box-shadow radius-20">
|
||
<view class="flex-center">
|
||
<view class="flex-center flex-column c-title">
|
||
<view class="f-lg-title text-bold">{{detail.fx_cash}}</view>
|
||
<view class="f-caption c-caption">总佣金</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="flex-center flex-column c-title">
|
||
<view class="f-lg-title text-bold">{{detail.notreceived_cash}}</view>
|
||
<view class="f-caption c-caption">待结算</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-center pt-lg pb-sm">
|
||
<view class="common-btn flex-center f-paragraph c-base radius" style="min-width: 176rpx;height: 60rpx;"
|
||
:style="{background:primaryColor}">立即提现
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="mine-list mt-md ml-md mr-md fill-base box-shadow radius-20">
|
||
<view class="common-nav-title flex-y-center f-title c-title text-bold">我的收益</view>
|
||
<view class="flex-warp pb-md">
|
||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('toolList', index)"
|
||
v-for="(item, index) in toolList" :key="index" class="item-child">
|
||
<view class="flex-center flex-column f-caption c-title">
|
||
<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
|
||
<view>{{ item.text }}</view>
|
||
</view>
|
||
</auth>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mine-list mt-md ml-md mr-md fill-base box-shadow radius-20">
|
||
<view class="common-nav-title flex-y-center f-title c-title text-bold">其他功能</view>
|
||
<view class="flex-warp pb-md">
|
||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toJump('otherList', index)"
|
||
v-for="(item, index) in otherList" :key="index" class="item-child">
|
||
<view class="flex-center flex-column f-caption c-title">
|
||
<image mode="aspectFill" lazy-load class="item-img" :src="item.img"></image>
|
||
<view>{{ item.text }}</view>
|
||
</view>
|
||
</auth>
|
||
</view>
|
||
</view>
|
||
<view class="space-footer"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapActions,
|
||
} from "vuex"
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
options: {},
|
||
color: '#ffffff',
|
||
// 我的收益
|
||
toolList: [{
|
||
img: '/static/image/mine/land-order.png',
|
||
text: '土地租赁',
|
||
url: '/mine/pages/distribution/profit?type=2'
|
||
}, {
|
||
img: '/static/image/mine/claim-order.png',
|
||
text: '认养订单',
|
||
url: '/mine/pages/distribution/profit?type=3'
|
||
}, {
|
||
img: '/static/image/mine/shop.png',
|
||
text: '商城订单',
|
||
url: '/mine/pages/distribution/profit?type=1'
|
||
}, {
|
||
img: '/static/image/mine/code.png',
|
||
text: '推广码',
|
||
url: '/mine/pages/distribution/poster'
|
||
}],
|
||
// 其他功能
|
||
otherList: [{
|
||
img: '/static/image/mine/team.png',
|
||
text: '我的团队',
|
||
url: '/mine/pages/distribution/team'
|
||
}, {
|
||
img: '/static/image/mine/collage.png',
|
||
text: '提现记录',
|
||
url: '/mine/pages/distribution/record'
|
||
}],
|
||
detail: {},
|
||
}
|
||
},
|
||
computed: mapState({
|
||
primaryColor: state => state.config.configInfo.primaryColor,
|
||
subColor: state => state.config.configInfo.subColor,
|
||
configInfo: state => state.config.configInfo,
|
||
userInfo: state => state.user.userInfo,
|
||
mineInfo: state => state.user.mineInfo,
|
||
}),
|
||
onLoad() {
|
||
this.$util.showLoading()
|
||
this.initIndex()
|
||
},
|
||
onPullDownRefresh() {
|
||
// #ifndef APP-PLUS
|
||
uni.showNavigationBarLoading()
|
||
// #endif
|
||
this.initRefresh()
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
onPageScroll(e) {
|
||
let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
|
||
if (this.color == color) return
|
||
this.color = color
|
||
this.$util.setNavigationBarColor({
|
||
color,
|
||
bg: 'none'
|
||
});
|
||
},
|
||
methods: {
|
||
...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'getAuthUserProfile']),
|
||
async initIndex() {
|
||
this.detail = await this.$api.mine.resellerInfo()
|
||
this.$util.hideAll()
|
||
},
|
||
initRefresh() {
|
||
this.initIndex()
|
||
},
|
||
async toJump(key, index) {
|
||
let {
|
||
url,
|
||
text
|
||
} = this[key][index]
|
||
this.$util.log(url)
|
||
this.$util.goUrl({
|
||
url
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.mine-distribution-index {
|
||
|
||
.user-info {
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 416rpx;
|
||
padding-top: 198rpx;
|
||
|
||
.user-img {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
line-height: 1rpx;
|
||
overflow: hidden;
|
||
border: 4rpx solid #EFF3FD;
|
||
transform: rotateZ(360deg);
|
||
}
|
||
|
||
.copy-code-btn {
|
||
width: 65rpx;
|
||
height: 34rpx;
|
||
border-radius: 2rpx;
|
||
border: 1rpx solid #FFFFFF;
|
||
transform: rotateZ(360deg);
|
||
}
|
||
}
|
||
|
||
.space-user-info {
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 379rpx;
|
||
z-index: -1;
|
||
}
|
||
|
||
.mine-index-bg {
|
||
background: rgb(57, 181, 74);
|
||
height: 14.625rem;
|
||
width: 140%;
|
||
left: -20%;
|
||
top: 0;
|
||
z-index: -1;
|
||
}
|
||
|
||
.stored-item {
|
||
|
||
.flex-column {
|
||
width: 50%;
|
||
}
|
||
|
||
.line {
|
||
width: 1rpx;
|
||
height: 42rpx;
|
||
background: #99D3B9;
|
||
}
|
||
}
|
||
|
||
.mine-list {
|
||
.common-nav-title {
|
||
padding-top: 20rpx;
|
||
padding-left: 54rpx;
|
||
}
|
||
|
||
.item-child {
|
||
width: 25%;
|
||
margin: 10rpx 0;
|
||
|
||
.item-img {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|