yihuo/pages/pull_new_user/index.vue

<template>
    <page :nav="false" title="邀新得万元现金" ref="pageRef" light bgColor="">
        <view
            class="pagae-nav"
            :style="{
                paddingTop: statusBarHeight + 'px',
                background: headerBg,
                color: headerColor
            }"
        >
            <view class="flex-align-center relative" style="height: 80rpx">
                <text class="cuIcon-back back" @click.stop="back"></text>
                <view class="title line-ellipsis">邀新得万元现金</view>
            </view>
        </view>
        <view
            class="top"
            :style="
                'background-image:url(' + ossurl.mine.pulluser.top + ')'
            "
        >
            <view class="btnBox flex">
                <view class="marginR12 relative" style="width: 331rpx; height: 88rpx">
                    <button open-type="share" class="shareBtn btn-clear">分享邀请链接</button>
                </view>
                <view class="inline" style="width: 331rpx; height: 88rpx">
                    <view class="shareBtn" @click="share()">面对面邀请</view>
                </view>
            </view>
            <view class="rule" @click.stop="rule()">
                <image :src="ossurl.mine.pulluser.rule" />
            </view>
        </view>

        <view
            class="bottom relative"
            :style="
                'background-image:url(' + ossurl.mine.pulluser.bottom + ')'
            "
        >
            <view class="getMoney" @click="getMoney()">
                <view class="label">可提现金额</view>
                <view class="numBox">
                    ¥
                    <view class="num">{{ userData.currentCommissionAmount }}</view>
                </view>
            </view>
            <view class="myBox">
                <view class="title">
                    <image :src="ossurl.mine.pulluser.title" />
                </view>
                <view class="dataBox">
                    <view class="item" @click="introMessage()">
                        <view class="title">邀请人数</view>
                        {{ userData.promotionNum }}
                        <text class="bottom-right">人</text>
                    </view>
                    <view class="item">
                        <view class="title">邀请奖励</view>
                        {{ userData.totalCommissionAmount }}
                        <text class="bottom-right">元</text>
                    </view>
                </view>
            </view>
        </view>

        <rule-dialog ref="ruleRef" />
        <poster
            ref="posterRef"
            :tip="tip"
            :imgs="[{ cover: ossurl.common.userShare }]"
            page="pages/award/index"
            :userId="user.username"
        />
        <people-record ref="peopleRecordRef" />
    </page>
</template>

<script>
    import resource from '@/utils/resource'
    import ossurl from '@/utils/ossurl'
    import ruleDialog from './rule_dialog.vue'
    import store from '@/store'
    import poster from '../weal_detail/poster.vue'
    import peopleRecord from './people_record.vue'

    export default {
        components: { ruleDialog, poster, peopleRecord },
        data() {
            return {
                resource,
                ossurl,
                userData: {},
                tip: '',
                scrollTop: 0
            }
        },
        onLoad() {
            this.$service.wallet.getPullNewUserDetails().then((res) => {
                this.userData = res
            })
        },
        onShareAppMessage(res) {
            if (this.$common.isLogin()) {
                const user = store.getters.user
                return {
                    title: `燚火漫域，新人优惠不停！`,
                    path: '/pages/award/index?pid=' + user.username,
                    imageUrl: ossurl.common.userShare
                }
            }
            return {
                title: `燚火漫域，新人优惠不停！`,
                path: '/pages/award/index'
            }
        },
        computed: {
            user() {
                return this.$store.state.userInfo
            },
            headerColor() {
                return this.scrollTop > 0 ? '#000' : '#fff'
            },
            headerBg() {
                return this.scrollTop > 0 ? '#fff' : '#000'
            },
            statusBarHeight() {
                if (this.$store.state.systemInfo) {
                    return this.$store.state.systemInfo.statusBarHeight
                }
                return 20
            }
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop
        },
        methods: {
            getMoney() {
                this.$router.push('withdraw')
            },
            share() {
                this.tip = `快来和${this.user.nickname}一起免费领手办吧~`
                this.$refs.posterRef.share()
            },
            rule() {
                this.$refs.ruleRef.show()
            },
            introMessage() {
                this.$refs.peopleRecordRef.show()
            },
			back(){
				uni.navigateBack({
					delta:1
				})
			}
        }
    }
</script>

<style>
    page {
        background: #1d1cba;
    }
</style>

<style lang="scss" scoped>
    .pagae-nav {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 100;
        align-items: center;
        .title {
            font-size: 30rpx;
            font-weight: bold;
            text-align: center;
            line-height: 72rpx;
            width: 500rpx;
        }
        .back {
            z-index: 1800;
            font-size: 32rpx;
            line-height: 32rpx;
            position: absolute;
            left: 20rpx;
            top: 24rpx;
        }
    }
    .top {
        height: 1120rpx;
        background-size: 100% 100%;
        position: relative;
        .btnBox {
            height: 64rpx;
            margin: 0 auto 80rpx;

            position: absolute;
            bottom: 0rpx;
            left: 30rpx;
            .shareBtn {
                font-size: 32rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: bold;
                color: #000000;
                line-height: 64rpx;
                width: 318rpx;
                height: 64rpx;
                background: #fec433;
                border-radius: 178rpx 178rpx 178rpx 178rpx;
                text-align: center;
            }
        }
    }
    .middle {
        width: 688rpx;
        height: 354rpx;
        margin: 40rpx auto;
    }

    .bottom {
        height: 586rpx;
        margin: 0 auto;
        background-size: 100% 100%;
        padding: 70rpx;
        .getMoney {
            width: 623rpx;
            height: 74rpx;
            background: rgba(182, 182, 182, 0.31);
            border-radius: 74rpx;
            padding: 8rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .label {
                width: 214rpx;
                height: 58rpx;
                background: #000000;
                border-radius: 58rpx;
                color: #fff;
                line-height: 58rpx;
                text-align: center;
            }
            .numBox {
                font-size: 28rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
                color: #000000;
                display: flex;
                align-items: center;
                padding-right: 50rpx;
                .num {
                    font-size: 32rpx;
                    font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
                    font-weight: bold;
                    color: #000000;
                    margin-left: 20rpx;
                }
            }
        }
    }
    .rule {
        position: absolute;
        top: 420rpx;
        right: 60rpx;
        image {
            width: 84rpx;
            height: 62rpx;
        }
    }
    .myBox {
        height: 358rpx;
        background: rgba(182, 182, 182, 0.31);
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 14rpx;
        margin-top: 14rpx;
        .title {
            text-align: center;
            padding: 10rpx 0;
            image {
                width: 262rpx;
                height: 64rpx;
            }
        }
        .dataBox {
            background: #f5f1e6;
            border-radius: 16rpx 16rpx 16rpx 16rpx;
            display: flex;
            padding: 32rpx;
            text-align: center;
            margin-top: 30rpx;
            .item {
                flex: 1;
                font-size: 48rpx;
                font-weight: bold;

                color: #9e9e9e;
                .bottom-right {
                    font-size: 24rpx;
                }
            }
            .title {
                padding-bottom: 30rpx;
                font-size: 24rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 350;
                color: #000000;
                line-height: 34rpx;
            }
        }
    }
</style>