jzhw_uni/pages/member/card/receive/receiveCard.vue

<template>
    <view class="container receive-bg">
        <view class="recevie">
            <image class="arvator" :src="avatarUrl"></image>
            <view class="content">
                <text class="name">「{{ userName }}」赠送</text>
                <!-- <text class="gift">送你价值199元超级鲸会员年卡</text> -->

                <image style="width: 650rpx; height: 460rpx" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/member-benefit.png"></image>
                <button class="btn" open-type="getPhoneNumber" v-if="rId > 0 && rId != 12345" @getphonenumber="getPhoneNumber">立即领取</button>

                <!-- <view class="des">关注鲸致生活LifePlus公众号，更多精彩</view> -->
            </view>
        </view>

        <!-- <view style="margin-top: 30rpx;padding: 20rpx;" class="recevie">
    <view class="title">成为超级鲸会员</view>
    <view class="txt">享受超值购买鲸致生活商城家政产品</view>
    <view class="txt">专属管家1对1服务</view>
    <view class="txt">各项会员福利</view>
    <image style="height: 30rpx;width:450rpx" src="https://6a7a-jzmall-3gi3t6y452ddb0ff-1306484940.tcb.qcloud.la/member/salgon.png"></image>
  </view>
  <view class="bottom">
    <text>在线点 · 鲸致到家 | 好服务送好友</text>
  </view> -->
        <!-- <image style="height: 370rpx;width:706rpx" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/add-steward.png" mode="aspectFit"  show-menu-by-longpress="{{true}}"></image> -->
    </view>
</template>

<script>
var util = require('../../../../utils/util.js');
var api = require('../../../../config/api');
var user = require('../../../../utils/user.js');
var app = getApp();
export default {
    data() {
        return {
            rId: 0,
            userName: '',
            avatarUrl: '/static/images/member/get.png',
            loginCode: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        if (options.scene || options.rId) {
            var rid = 0;
            if (options.scene) {
                var referee = decodeURIComponent(options.scene);
                rid = referee.replace('rId=', '');
            } else {
                rid = options.rId;
            }
            this.setData({
                rId: rid
            });
            this.getReferee();
        } else {
            util.showErrorToast('无效分享');
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getLoginCode();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getPhoneNumber(e) {
            let that = this;
            util.request(
                api.RefereeMemberCardReceive,
                {
                    code: this.loginCode,
                    encryptedData: e.detail.encryptedData,
                    iv: e.detail.iv,
                    rId: that.rId
                },
                'POST'
            ).then((res) => {
                if (res.errno == 0) {
                    app.globalData.hasLogin = true;
                    app.globalData.userInfo = res.data.userInfo;
                    uni.setStorageSync('userInfo', res.data.userInfo);
                    uni.setStorageSync('token', res.data.token);
                    uni.navigateTo({
                        url: '/pages/member/card/received/receivedCard?rId=' + that.rId
                    });
                } else {
                    util.showErrorToast(res.errmsg);
                    that.getLoginCode();
                }
            });
        },

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

        getReferee() {
            util.request(
                api.ReferrerRidInfo,
                {
                    rId: this.rId
                },
                'GET'
            ).then((res) => {
                if (res.errno == 0) {
                    this.setData({
                        userName: res.data.applyName,
                        avatarUrl: res.data.avatar
                    });
                    app.globalData.recommend = {
                        userName: res.data.applyName,
                        avatarUrl: res.data.avatar
                    };
                } else {
                    util.showErrorToast(res.errmsg);
                }
            });
        }
    }
};
</script>
<style>
page {
    height: 100%;
    width: 100%;
    /* background: rgb(207, 63, 37); */
}

.container {
    text-align: center;
    /* margin: 20rpx; */
    padding: 0 0 52rpx;
}
.receive-bg {
    background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/member-give-bg.png') no-repeat center top;
    background-size: 100% 100%;
    min-height: 100vh;
    padding-top: 224rpx;
}

.arvator {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    margin-top: -70rpx;
}

.recevie {
    margin: 0 50rpx;
    /* margin-top: 120rpx; */
    width: 650rpx;
    height: 714rpx;
    background: linear-gradient(198deg, #f8e5ca 0%, #fed3a8 69%);
    box-shadow: 3rpx 9rpx 35rpx 0rpx rgba(30, 4, 4, 0.25);
    border-radius: 40rpx;
}

.content {
    display: flex;
    flex-direction: column;
}

.name {
    font-size: 34rpx;
    height: 50rpx;
    font-weight: bold;
    color: #2e2e2e;
    margin: 20rpx 0 6rpx;
}

.gift {
    height: 39px;
    font-size: 22px;
    font-weight: 400;
    color: #333;
    margin: 10rpx;
}

.content image {
    width: 360rpx;
    margin: 0 auto;
}

.btn {
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
    width: 478rpx;
    height: 90rpx;
    line-height: 90rpx;
    background: linear-gradient(178deg, #ed692f, #f7b361);
    box-shadow: 2rpx 6rpx 16rpx 0rpx rgba(71, 36, 16, 0.12);
    border-radius: 45rpx;
    margin-top: 56rpx;
}

.des {
    margin-bottom: 30rpx;
    color: rgba(171, 171, 171, 1);
}

.title {
    font-size: 30px;
    line-height: 39rpx;
    font-weight: 400;
    color: #b67556;
    margin: 20rpx 0rpx;
}
.txt {
    font-size: 15px;
    font-weight: 400;
    color: rgba(46, 46, 46, 1);
    margin: 30rpx;
}

.bottom {
    /* z-index: -1; */
    /* bottom: 0rpx; */
    width: 100%;
    height: 180rpx;
    /* background: #EECFB1; */
    text-align: center;
    padding-top: 20rpx;
}
.bottom text {
    height: 80rpx;
    line-height: 80rpx;
    color: rgba(182, 117, 86, 1);
}
</style>