jzhw_uni/pages/ucenter/parter/recommend/recommend.vue

<template>
    <view>
        <image mode="widthFix" src="https://6a7a-jzmall-3gi3t6y452ddb0ff-1306484940.tcb.qcloud.la/referee/top-banner.png" class="top-banner"></image>
        <!-- 头像 -->
        <view class="avatar-block">
            <view class="avatar-wrapper">
                <image :src="avatarUrl" class="user-avatar" mode="aspectFill"></image>
            </view>
        </view>
        <view class="user-name">{{ userName }}</view>
        <view class="jz-slogan">邀您加入鲸致生活，一起放手精致</view>
        <button class="recommend-btn" v-if="rid != 0 && checked" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键成为引荐人</button>
        <button class="recommend-btn" v-if="rid != 0 && !checked" @tap="confirmJoin">一键成为引荐人</button>
        <view class="agree-terms">
            <van-checkbox :value="checked" shape="square" icon-size="16px" checked-color="#09afff" @change="onChange"></van-checkbox>
            <text class="user-agree">我已同意</text>
            <text class="user-terms" ontap="userProtocol">《用户条款》</text>
        </view>

        <view class="adv-block">
            <view class="adv-item">
                <text class="adv-word">省</text>
                <text class="adv-text">自用鲸致家政</text>
            </view>
            <view class="adv-item">
                <text class="adv-word">赚</text>
                <text class="adv-text">推荐亲友使用</text>
            </view>
            <view class="adv-item">
                <text class="adv-word">棒</text>
                <text class="adv-text">品牌好品质优</text>
            </view>
        </view>
        <van-dialog id="van-dialog" />
    </view>
</template>

<script>
import Dialog from '@vant/weapp/lib/dialog/dialog';
const util = require('../../../../utils/util.js');
const api = require('../../../../config/api.js');
const user = require('../../../../utils/user.js');
const app = getApp();
export default {
    data() {
        return {
            rId: 0,
            checked: false,
            userName: '',
            loginCode: '',
            avatarUrl: '',
            bCode: '',
            userName: '',
            avatarUrl: '',
            detail: '',
            rid: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        if (options.rId) {
            this.setData({
                rId: options.rId
            });
            app.globalData.rId = options.rId;
            this.getReferrerRidInfo();
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getLoginCode();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getReferrerRidInfo() {
            util.request(
                api.ReferrerRidInfo,
                {
                    rId: this.rId
                },
                'GET'
            ).then((res) => {
                console.info(res);
                if (res.errno == 0) {
                    this.setData({
                        userName: res.data.applyName,
                        avatarUrl: res.data.avatar,
                        userName: res.data.applyName,
                        avatarUrl: res.data.avatar,
                        bCode: res.data.bCode
                    });
                } else {
                    util.showErrorToast(res.errmsg);
                }
            });
        },

        getPhoneNumber(e) {
            console.info(e);
            this.setData({
                detail: e.detail
            });
            this.getDenPhone();
        },

        getDenPhone() {
            let that = this;
            util.request(
                api.GetDenPhone,
                {
                    code: that.loginCode,
                    encryptedData: that.detail.encryptedData,
                    errMsg: that.detail.errMsg,
                    iv: that.detail.iv
                },
                'POST'
            ).then((res) => {
                if (res.errno == 0) {
                    let isNew = res.data.isNew;
                    if (isNew) {
                        app.globalData.recommend.phone = res.data.phone;
                        app.globalData.recommend.unionId = res.data.unionId;
                        app.globalData.recommend.openId = res.data.openId;
                        app.globalData.recommend.sessionKey = res.data.sessionKey;
                        uni.navigateTo({
                            url: '../register/register'
                        });
                    } else {
                        // 不是新人，则跳转到首页
                        Dialog.alert({
                            title: '引荐失败',
                            message: '您已是鲸致商城用户，当前引荐人计划只面向新用户，敬请期待'
                        }).then(() => {
                            // on close
                            uni.switchTab({
                                url: '/pages/index/index'
                            });
                        });
                    }
                } else {
                    util.showErrorToast(res.errmsg);
                    this.getLoginCode();
                }
            });
        },

        getLoginCode() {
            let that = this;
            user.login().then((res) => {
                that.setData({
                    loginCode: res.code
                });
            });
        },

        onChange(e) {
            console.log(e);
            this.setData({
                checked: e.detail
            });
        },

        confirmJoin() {
            if (!this.checked) {
                Dialog.alert({
                    title: '提示',
                    message: '请阅读《用户条款》并勾选'
                }).then(() => {
                    // on close
                });
            } else {
                uni.navigateTo({
                    url: '../confirm/confirm'
                });
            }
        },

        userProtocol() {
            uni.navigateTo({
                url: '../protocol/protocol'
            });
        }
    }
};
</script>
<style>
.top-banner {
    width: 100%;
}
button::after {
    border: none;
}
.avatar-block {
    height: 156rpx;
    margin: -78rpx 0 58rpx;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
}
.recommend-btn {
    background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/btn.png') no-repeat center;
    background-size: 100%;
    width: 592rpx;
    height: 114rpx;
    margin: 0 auto;
    color: #fff;
    font-size: 36rpx;
    line-height: 114rpx;
    text-align: center;
    font-weight: bold;
}
.avatar-wrapper {
    padding: 6rpx;
    width: 156rpx;
    height: 156rpx;
    background: #fff;
    border-radius: 100%;
}
.user-avatar {
    width: 146rpx;
    height: 146rpx;
    border-radius: 100%;
}
.user-name {
    color: #2a2a2a;
    font-size: 40rpx;
    font-weight: bold;
    text-align: center;
}
.jz-slogan {
    color: #2a2a2a;
    font-size: 32rpx;
    margin: 30rpx 0 40rpx;
    text-align: center;
    height: 32rpx;
}
.agree-terms {
    margin: 30rpx 0 104rpx;
    height: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.user-agree {
    color: #85868a;
    font-size: 24rpx;
    margin-left: 8rpx;
}
.user-terms {
    color: #cc4226;
    font-size: 24rpx;
}
.adv-block {
    display: flex;
    padding: 40rpx 24rpx 80rpx;
    justify-content: space-between;
}

.adv-item {
    background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/tag-bg.png') no-repeat center;
    background-size: 100%;
    height: 126rpx;
    width: 212rpx;
    padding: 24rpx 0 14rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.adv-word {
    font-size: 34rpx;
    line-height: 34rpx;
    color: white;
}
.adv-text {
    font-size: 24rpx;
    color: #2a2a2a;
}
</style>