jzhw_uni/pages/member/memberConvert/memberConvert.vue

<template>
    <view class="member-convert-page">
        <view class="convert-top">
            <!-- <view class="jz-member">
			  <image src="/static/images/new/jz-logo-member.png" mode="aspectFill"></image>
				<text>鲸致生活·超级鲸会员</text>
			</view>
			<view class="jz-slogan">— 专注自营品质家庭服务 —</view> -->
            <view class="user-info">
                <image mode="aspectFill" class="user-avatar" :src="memberUserInfo.avatarUrl ? memberUserInfo.avatarUrl : '/static/images/new/icon-user.png'"></image>
                <view class="user-detail">
                    <view class="user-name">
                        <text>{{ memberUserInfo.nickName }}</text>
                    </view>
                    <view class="member-date">
                        <image
                            mode="aspectFill"
                            src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-vip.png"
                            style="width: 22rpx; height: 22rpx; margin-right: 4rpx"
                        ></image>
                        <text v-if="memberUserInfo.level == 0">您未开通会员</text>
                        <text v-if="memberUserInfo.level == 1">您已开通会员</text>
                        <text v-if="memberUserInfo.level == 2">您的会员已到期</text>
                    </view>
                </view>
            </view>
            <view class="code-wrapper">
                <input class="code-input" maxlength="8" placeholder="请输入兑换码" @input="codeInput" :value="code" />
            </view>
            <view class="confirm-convert" @tap="confirmConvert">确认兑换</view>
            <view class="jz-slogan">——— 鲸致生活·专注自营品质家庭服务 ———</view>
        </view>

        <!-- 活动规则 -->
        <view class="activity-rule-title">
            <!-- <view class="title-hardline">
		</view> -->
            <text>活动规则</text>
            <!-- <view class="title-hardline">
		</view> -->
        </view>

        <view class="activity-rule-content">
            <!-- <view>1.兑换后的超级鲸会员权益将绑定在您本次登录的账号上，一经兑换无法修改权益账号; </view>
	 <view>2.每个兑换码仅限使用一次; </view>
	 <view>3.如您是通过外部合作渠道（非鲸致生活平台内）获得超级鲸会员的兑换资格，此超级会员资格仅包含鲸致生活平台内的基本特权，不包含其他外部特权或专属福利，具体外部权益以对应渠道的公示为准; </view>
	 <view>4.兑换前可转赠亲友，一旦兑换后不支持转赠; </view> -->

            <view>1. 超级鲸会员权益将绑定在您本次登录的账号中，支付成功后 立即生效，不支持转增。</view>
            <view>2.每个兑换码仅限使用一次。</view>
            <view>3.通过外部合作渠道（非鲸致生活平台内）获得超级鲸会员资格的此超级会员资格仅包含鲸致生活平台内的基本特权，不包括其他外部联名或合作渠道的特权和专属福利。</view>
        </view>
    </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 {
            code: '',
            userInfo: null,
            hasLogin: false,
            memberUserInfo: {
                nickName: '用户',
                avatarUrl: '/static/images/new/icon-user.png',
                level: '0'
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        if (app.globalData.hasLogin) {
            let userInfo = uni.getStorageSync('userInfo');
            console.info(userInfo);
            this.setData({
                userInfo: userInfo,
                hasLogin: true,
                memberUserInfo: app.globalData.memberUserInfo
            });
        } else {
            uni.navigateTo({
                url: '/pages/auth/login/login'
            });
        }
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        codeInput(e) {
            this.setData({
                code: e.detail.value
            });
        },

        confirmConvert() {
            if (this.code == '') {
                uni.showToast({
                    title: '请输入兑换码',
                    icon: 'none',
                    duration: 2000
                });
            } else {
                this.exchangeMemberCoupon();
            }
        },

        exchangeMemberCoupon() {
            util.request(
                api.exchangeMemberCoupon,
                {
                    userId: app.globalData.userInfo.id,
                    memberCode: this.code
                },
                'GET'
            ).then((res) => {
                console.info(res);
                if (res.errno === 0) {
                    let endTime = res.data.endTime.substr(0, 10);
                    uni.navigateTo({
                        url: '/pages/member/becomeMember/becomeMember?endTime=' + endTime
                    });
                } else {
                    util.showErrorToast(res.errmsg);
                }
            });
        }
    }
};
</script>
<style>
.convert-top {
    background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/member-pay-bg.png') no-repeat center top;
    background-size: 100%;
    height: 560rpx;
    width: 750rpx;
    padding: 30rpx 0 0;
}
.jz-member {
    height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 30rpx 0;
}
.jz-member image {
    width: 52rpx;
    height: 44rpx;
    margin: 0 24rpx 0 0;
}
.jz-member text {
    line-height: 44rpx;
    font-size: 44rpx;
    font-weight: bold;
    background: linear-gradient(78deg, #f1e3c8 0%, #e6c162 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.activity-rule-title {
    /* height:112rpx; */
    padding: 36rpx 28rpx 20rpx;
    /* display: flex;
	align-items:center; */
    font-size: 34rpx;
    font-weight: bold;
}
.title-hardline {
    height: 2rpx;
    background: #85868a;
    flex: 1;
}
.activity-rule-title text {
    font-size: 33rpx;
    margin: 0 16rpx;
}
.activity-rule-content {
    padding: 0 40rpx 0 36rpx;
    font-size: 24rpx;
    color: #85868a;
    line-height: 44rpx;
    text-align: justify;
}
.jz-slogan {
    /* background: linear-gradient(78deg, #F1E3C8 0%, #E6C162 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
    font-size: 22rpx;
    text-align: center;
    margin-top: 38rpx;
    color: #bababa;
}
.code-wrapper {
    width: 530rpx;
    height: 100rpx;
    margin: 52rpx auto 30rpx;
    background: #fff;
    border-radius: 100rpx;
}
.code-input {
    height: 100rpx;
    text-align: center;
    font-size: 32rpx;
}
.confirm-convert {
    width: 530rpx;
    height: 100rpx;
    line-height: 100rpx;
    background: linear-gradient(0deg, #e4cfa8, #e4cfa8);
    box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(111, 111, 111, 0.06);
    border-radius: 100rpx;
    color: #663315;
    margin: 0 auto;
    text-align: center;
    font-size: 36rpx;
    text-shadow: 2rpx 6rpx 8rpx rgba(30, 4, 4, 0.18);
}
.user-info {
    height: 112rpx;
    margin: 0 0 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-left: 40rpx;
}
.user-avatar {
    width: 112rpx;
    height: 112rpx;
    background-color: #fff;
    border-radius: 112rpx;
    margin: 0 20rpx 0 0;
}
.user-detail {
    flex: 1;
    padding: 0 0 12rpx;
    color: #fff;
    font-size: 26rpx;
}
.user-name {
    height: 30rpx;
    display: flex;
    align-items: center;
    margin: 0 0 20rpx 0;
}
.user-name text {
    font-size: 32rpx;
}
.member-date {
    height: 30rpx;
    font-size: 22rpx;
    line-height: 30rpx;
    color: #828387;
    display: flex;
    align-items: center;
}
</style>