jzhw_uni/pages/member/memberCenter/memberCenter.vue

<template>
    <view>
        <!-- 展示蒙层 显示推广画报 -->
        <view class="poster" v-if="myqr_show">
            <view class="title">兑换规则</view>
            <view class="ads">1. 兑换后的超级鲸会员权益将绑定在您本次登录的账号上，一经兑换无法修改权益账号；</view>
            <view class="ads">2. 每个兑换码仅限使用一次；</view>
            <view class="ads">
                3.
                如您是通过外部合作渠道（非鲸致生活平台内）获得超级鲸会员的兑换资格，此超级会员资格仅包含鲸致生活平台内的基本特权，不包含其他外部特权或专属福利，具体外部权益以对应渠道的公示为准；
            </view>
            <view class="ads">4. 兑换前可转赠亲友，一旦兑换后不支持转赠</view>
            <view class="ads">5. 最终解释权归上海宅洁仕网络科技有限公司</view>
            <view class="tool">
                <view style="text-align: center">
                    <view @tap="hidePoster" class="share-btn">知晓关闭</view>
                </view>
            </view>
        </view>

        <view class="member-center-page" :style="'filter:brightness(' + myqr_blur + '%)'">
            <!-- 不是会员或者失效 -->
            <!-- !userInfo.level||userInfo.level==0||userInfo.level==2 -->
            <view v-if="!userInfo.level || userInfo.level == 0 || userInfo.level == 2" class="member-invalid-wrapper">
                <!-- 会员信息 -->
                <view class="member-invalid-top">
                    <view class="user-info">
                        <image mode="aspectFill" class="user-avatar" :src="userInfo.avatarUrl ? userInfo.avatarUrl : '/static/images/new/icon-user.png'"></image>
                        <view class="user-detail">
                            <view class="user-name">
                                <text>{{ userInfo.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="userInfo.level == 0">您未开通会员</text>
                                <text v-if="userInfo.level == 1">{{ date }}到期</text>
                                <text v-if="userInfo.level == 2">{{ date }}已到期</text>
                            </view>
                        </view>
                        <view class="buy-record" v-if="userInfo.level == 2" @tap="goBuyList">
                            <text>购买记录</text>
                            <van-icon name="arrow" color="#fff" />
                        </view>
                    </view>
                </view>
                <view class="member-invalid-card">
                    <view class="invalid-card-left">
                        <view class="card-title">超级鲸会员</view>
                        <view>每月尊享30元无门槛红包</view>
                    </view>
                    <view class="invalid-card-right">
                        <view>低至19元/月</view>
                        <view class="btn" @tap="goBuyMember">
                            <text v-if="!userInfo.level || userInfo.level == 0">立即开通</text>
                            <text v-else>立即续费</text>
                        </view>
                    </view>
                </view>
                <!-- 会员权益 -->
                <view class="benefit-title">会员权益</view>
                <view class="benefit-banner-item">
                    <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/member-benefit-01.png"></image>
                </view>
                <view class="benefit-banner-item">
                    <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/member-benefit-02.png"></image>
                </view>
                <view class="benefit-banner-item">
                    <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/member-benefit-03.png"></image>
                </view>
                <view class="benefit-icon-block">
                    <view class="benefit-icon-item">
                        <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-benefit-01.png"></image>
                        <view class="benefit-icon-title">日常保洁</view>
                        <view class="benfit-icon-remark">9折起</view>
                    </view>
                    <view class="benefit-icon-item">
                        <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-benefit-02.png"></image>
                        <view class="benefit-icon-title">家电蒸洗</view>
                        <view class="benfit-icon-remark">9折起</view>
                    </view>
                    <view class="benefit-icon-item">
                        <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-benefit-03.png"></image>
                        <view class="benefit-icon-title">深度清洁</view>
                        <view class="benfit-icon-remark">85折起</view>
                    </view>
                    <view class="benefit-icon-item">
                        <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-benefit-04.png"></image>
                        <view class="benefit-icon-title">月度优惠券</view>
                        <view class="benfit-icon-remark">30元起</view>
                    </view>
                </view>
            </view>
            <!-- 是会员 -->
            <view v-if="userInfo.level == 1" class="member-valid-wrapper">
                <view class="member-valid-top">
                    <view class="user-info">
                        <image mode="aspectFill" class="user-avatar" :src="userInfo.avatarUrl ? userInfo.avatarUrl : '/static/images/new/icon-user.png'"></image>
                        <view class="user-detail">
                            <view class="user-name">
                                <text>{{ userInfo.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="userInfo.level == 1">{{ date }}到期</text>
                                <view @tap="goBuyMember" class="renew">立即续费</view>
                            </view>
                        </view>
                        <view class="buy-record" @tap="goBuyList">
                            <text>购买记录</text>
                            <van-icon name="arrow" color="#fff" />
                        </view>
                    </view>
                    <!-- 会员权益 -->

                    <view class="member-valid-benefit">
                        <view class="valid-benefit-title">
                            <view class="line"></view>
                            <view class="text">会员权益</view>
                            <view class="line"></view>
                        </view>
                        <view class="valid-benefit-block">
                            <view class="valid-benefit-line">
                                <view class="valid-benefit-item">
                                    <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-benefit-11.png"></image>
                                    <view>日常保洁</view>
                                    <view>9折起</view>
                                </view>
                                <view class="valid-benefit-item">
                                    <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-benefit-12.png"></image>
                                    <view>家电蒸洗</view>
                                    <view>9折起</view>
                                </view>
                                <view class="valid-benefit-item">
                                    <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-benefit-11.png"></image>
                                    <view>深度清洁</view>
                                    <view>85折起</view>
                                </view>
                                <view class="valid-benefit-item">
                                    <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-benefit-11.png"></image>
                                    <view>月度优惠券</view>
                                    <view>30元起</view>
                                </view>
                            </view>
                            <view class="valid-benefit-line">
                                <view class="valid-benefit-item">
                                    <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-benefit-15.png"></image>
                                    <view>预约特权</view>
                                    <view>优先约</view>
                                </view>
                                <view class="valid-benefit-item">
                                    <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-benefit-16.png"></image>
                                    <view>专属管家</view>
                                    <view>退改无忧</view>
                                </view>
                                <view class="valid-benefit-item">
                                    <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-benefit-17.png"></image>
                                    <view>更多权益</view>
                                    <view>更新中</view>
                                </view>
                                <view class="valid-benefit-item"></view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="first-buy-title" style="margin-bottom: 24rpx">
                    <view>会员特惠</view>
                    <view class="remark">领券后可再减</view>
                </view>
                <view class="good-list">
                    <view class="good-item" v-for="(item, index) in imgList1" :key="index">
                        <navigator :url="item.link">
                            <image class="good-img" :src="item.url" background-size="cover"></image>
                        </navigator>
                    </view>
                </view>
                <view class="first-buy-title" style="margin: 0rpx 0 36rpx">
                    <view>会员活动</view>
                </view>
                <view class="banner-item" v-for="(item, index) in imgList2" :key="index">
                    <navigator :url="item.link">
                        <image class="banner-img" :src="item.url" background-size="cover"></image>
                    </navigator>
                </view>

                <image
                    style="height: 370rpx; width: 706rpx; margin: 0 auto"
                    src="https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/member/add_qw.png"
                    mode="aspectFit"
                    :show-menu-by-longpress="true"
                ></image>
            </view>

            <view class="pay-btn" @tap="goBuyMember" v-if="userInfo.level != 1">
                <text v-if="!userInfo.level || userInfo.level == 0">立即开通</text>
                <text v-else>立即续费</text>
            </view>

            <!-- <view class="center-top">

		<view class="user-info">
			<image mode="aspectFill" class="user-avatar"
				src="{{userInfo.avatarUrl?userInfo.avatarUrl:'/static/images/new/icon-user.png'}}"></image>
			<view class="user-detail">
				<view class="user-name">
					<text>{{userInfo.nickName}}</text>
					<view class="member-bage" wx:if="{{userInfo.level==1||userInfo.level==2}}">J</view>
				</view>
				<view class="member-date">
					<text wx:if="{{userInfo.level==1}}">{{date}}到期</text>
					<text wx:if="{{userInfo.level==2}}">已到期</text>
				</view>
			</view>
			<view class="buy-record" wx:if="{{userInfo.level==1}}" bindtap="goBuyList">
				<text>购买记录</text>
				<van-icon name="arrow" color="#5D3A11" />
			</view>
		</view>
		<view class="amount-info">
			<view>
				<view class="save-text">累计已省</view>
				<view class="save-cost">{{saveMoneyYuan}}.<text>{{saveMoneyPoint}}</text></view>
			</view>
			<view class="renew-btn" bindtap="goBuyMember">
				<text wx:if="{{!userInfo.level||userInfo.level==0}}">立即开通</text>
				<text wx:else>立即续费</text>
			</view>
		</view>
	</view> -->

            <!-- <view class="center-content">
			<view class="h1-title">鲸致生活·超级鲸会员</view>
			<view class="h2-title">— 专注自营品质家庭服务 —</view>
			<view class="category-block">
				<view class="category-item">
					<image class="category-img" mode="aspectFill"
						src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/new/member-category-01.png"></image>
					<view class="category-name">居家保洁</view>
					<view class="category-discount">9折起</view>
				</view>
				<view class="category-item">
					<image class="category-img" mode="aspectFill"
						src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/new/member-category-02.png"></image>
					<view class="category-name">深度清洁</view>
					<view class="category-discount">8.5折起</view>
				</view>
				<view class="category-item">
					<image class="category-img" mode="aspectFill"
						src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/new/member-category-03.png"></image>
					<view class="category-name">家电蒸洗</view>
					<view class="category-discount">8.5折起</view>
				</view>

			</view>
			<view class="category-block" style="padding:0 82rpx;">
				<view class="category-item">
					<image class="category-img" mode="aspectFill"
						src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/new/member-category-04.png"></image>
					<view class="category-name">保姆/钟点工</view>
					<view class="category-discount">中介费9折起</view>
				</view>
				<view class="category-item">
					<image class="category-img" mode="aspectFill"
						src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/new/member-category-05.png"></image>
					<view class="category-name">自营家政师</view>
					<view class="category-discount">专属管家服务</view>
				</view>

			</view>
			<view class="rule" bindtap="showRule">-兑换规则-</view>
		</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 {
            userInfo: {
                nickName: '期待加入',
                avatarUrl: '/static/images/new/icon-user.png',
                level: ''
            },
            saveMoney: '0',
            date: '',
            saveMoneyYuan: '0',
            saveMoneyPoint: '0',
            myqr_show: false,
            //我的分享二维码
            myqr_blur: 100,
            //背景模糊值
            imgList1: [],
            imgList2: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        //	let userInfo = wx.getStorageSync('userInfo');
        //console.info(userInfo);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getMemberInfo();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        showRule() {
            this.setData({
                myqr_show: true,
                myqr_blur: 25
            });
        },

        hidePoster() {
            this.setData({
                myqr_show: false,
                myqr_blur: 100
            });
        },

        getMemberInfo: function () {
            let that = this;
            util.request(
                api.getMemberInfo,
                {
                    userId: app.globalData.userInfo.id
                },
                'GET'
            ).then((res) => {
                console.info(res);
                if (res.errno === 0) {
                    let date = null;
                    if (res.data.userInfo.memberExpiration) {
                        date = res.data.userInfo.memberExpiration.substr(0, 10);
                    }
                    let saveMoney = Number(res.data.saveMoney).toFixed(2);
                    that.setData({
                        userInfo: res.data.userInfo,
                        date: date,
                        saveMoneyYuan: saveMoney.split('.')[0],
                        saveMoneyPoint: saveMoney.split('.')[1]
                    });
                    app.globalData.memberUserInfo = res.data.userInfo;
                    if (that.userInfo.level == 1) {
                        that.getMemberAd();
                    }
                } else {
                    util.showErrorToast(res.errmsg);
                    console.info(that.userInfo);
                }
            });
        },

        goBuyList() {
            uni.navigateTo({
                url: '/pages/member/buyList/buyList'
            });
        },

        goBuyMember() {
            if (!app.globalData.hasLogin) {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
                return;
            }
            uni.navigateTo({
                url: '/pages/member/buyMember/buyMember'
            });
        },

        getMemberAd() {
            util.request(api.GetMemberAd, {}, 'GET').then((res) => {
                if (res.errno === 0) {
                    this.setData({
                        imgList1: res.data.firstPurchase,
                        imgList2: res.data.memberActivity
                    });
                }
            });
        }
    }
};
</script>
<style>
.member-center-page {
    /* background: #2E3235; */
    padding-bottom: 140rpx;
    /* padding:16rpx 70rpx 80rpx; */
}
.center-top {
    width: 610rpx;
    height: 286rpx;
    background: linear-gradient(162deg, #f1e3c8 0%, #e6c162 100%);
    border-radius: 10rpx;
    margin: 0 0 26rpx;
    padding: 32rpx 32rpx 20rpx;
}
.user-info {
    height: 112rpx;
    margin: 0 0 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.user-avatar {
    width: 112rpx;
    height: 112rpx;
    background-color: #fff;
    border-radius: 112rpx;
    margin: 0 40rpx 0 0;
}
.user-detail {
    flex: 1;
    padding: 0 0 12rpx;
    color: #5d3a11;
    font-size: 26rpx;
}
.user-name {
    height: 30rpx;
    display: flex;
    align-items: center;
    margin: 0 0 20rpx 0;
}
.user-name text {
    font-size: 30rpx;
}
.member-date {
    height: 36rpx;
    line-height: 36rpx;
}
.member-bage {
    width: 28rpx;
    height: 28rpx;
    line-height: 24rpx;
    background: #2e3235;
    border-radius: 50%;
    margin: 0 0 0 10rpx;
    text-align: center;
    font-size: 20rpx;
    color: #e6c162;
}
.member-bage text {
    font-weight: bold;
    color: #5d3a11;
    font-size: 20rpx;
    line-height: 24rpx;
    background: linear-gradient(78deg, #f1e3c8 0%, #e6c162 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.amount-info {
    height: 90rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.save-text {
    color: #5d3a11;
    font-size: 24rpx;
    height: 24rpx;
    line-height: 22rpx;
    margin: 0 0 6rpx 0;
}
.save-cost {
    font-size: 60rpx;
    height: 64rpx;
    line-height: 64rpx;
    font-weight: bold;
    color: #5d3a11;
}
.save-cost text {
    font-size: 32rpx;
    font-weight: bold;
}
.buy-record {
    /* padding: 0 0 12rpx; */
    display: flex;
    align-items: center;
    color: #5d3a11;
    font-weight: 26rpx;
}
.buy-record text {
    padding-left: 10rpx;
}
.renew-btn {
    width: 130rpx;
    height: 36rpx;
    line-height: 34rpx;
    background: #2e3235;
    border-radius: 18rpx;
    text-align: center;
}
.renew-btn text {
    font-size: 24rpx;
    color: #5d3a11;
    background: linear-gradient(78deg, #f1e3c8 0%, #e6c162 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.center-content {
    height: 602rpx;
    width: 610rpx;
    border-radius: 10rpx;
    background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/new/member-center-bg.png') no-repeat center top;
    background-size: 100%;
    padding: 48rpx 24rpx 20rpx;
}
.h1-title {
    text-align: center;
    height: 44rpx;
    line-height: 44rpx;
    font-size: 44rpx;
    color: #ffffff;
    font-weight: bold;
    background: linear-gradient(78deg, #f1e3c8 0%, #e6c162 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.h2-title {
    text-align: center;
    height: 24rpx;
    line-height: 24rpx;
    font-size: 24rpx;
    color: #ffffff;
    background: linear-gradient(78deg, #f1e3c8 0%, #e6c162 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 24rpx 0 66rpx;
}
.category-block {
    display: flex;
    justify-content: space-between;
    margin: 0 0 20rpx;
}
.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 160rpx;
    flex: 1;
}
.category-img {
    width: 88rpx;
    height: 88rpx;
}
.category-name {
    height: 28rpx;
    line-height: 28rpx;
    font-size: 28rpx;
    color: #ffffff;
    background: linear-gradient(181deg, #f1e3c8 0%, #e6c162 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.category-discount {
    height: 24rpx;
    font-size: 24rpx;
    color: #85868a;
}

.rule {
    text-align: center;
    padding-bottom: 20rpx;
    color: #e6c162;
    margin: 0 0 20rpx;
}

/* 海报的样式 */
.poster {
    padding: 50rpx;
    background: linear-gradient(162deg, #f1e3c8 0%, #e6c162 100%);
    text-align: left;
    /* height: 650rpx; */
    top: 20%;
    margin: 50rpx;
    position: absolute;
    z-index: 99;
    text-align: left;
    left: 0;
    right: 0;
    border-radius: 20rpx;
}

.title {
    color: #333;
    margin: 20rpx 0;
    font-size: 36rpx;
    text-align: center;
}
.ads {
    margin: 10rpx 0rpx;
    color: #333;
}
.tool {
    display: flex;
    text-align: center;
    justify-content: baseline;
    width: 100%;
    margin-top: 20rpx;
}
.tool view {
    flex: 1;
}

.img {
    width: 107rpx;
    height: 128rpx;
}

.closeImg {
    width: 57rpx;
    height: 57rpx;
}

.share-btn {
    background: #2e3235;
    width: 260rpx;
    height: 76rpx;
    line-height: 76rpx;
    margin: 0 auto;
    color: #fff;
    border-radius: 38rpx;
}

.share-btn::after {
    border: none;
}
.pay-btn {
    margin: 80rpx auto 0;
    width: 530rpx;
    height: 100rpx;
    background: linear-gradient(0deg, #e4cfa8, #e4cfa8);
    box-shadow: 0rpx 9rpx 18rpx 0rpx rgba(50, 50, 50, 0.06);
    border-radius: 100rpx;
    font-weight: bold;
    color: #663315;
    text-shadow: 2rpx 6rpx 8rpx rgba(30, 4, 4, 0.18);
    font-size: 36rpx;
    text-align: center;
    line-height: 100rpx;
}
.benefit-title {
    font-weight: bold;
    color: #000000;
    font-size: 34rpx;
    margin: 48rpx 0 28rpx 34rpx;
    height: 34rpx;
}
.benefit-banner-item {
    width: 700rpx;
    height: 182rpx;
    margin: 0 25rpx 12rpx;
}
.benefit-banner-item image {
    width: 700rpx;
    height: 182rpx;
}
.benefit-icon-block {
    margin: 26rpx 0 0;
    padding: 0 66rpx 0;
    display: flex;
    justify-content: space-between;
}
.benefit-icon-item {
    width: 124rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.benefit-icon-item image {
    width: 112rpx;
    height: 112rpx;
}
.benefit-icon-title {
    color: #515151;
    font-size: 24rpx;
    height: 32rpx;
    line-height: 32rpx;
}
.benfit-icon-remark {
    color: #9d9d9d;
    font-size: 20rpx;
}
.first-buy-title {
    height: 34px;
    line-height: 34rpx;
    padding: 0 34rpx;
    display: flex;
    align-items: flex-end;
    font-size: 34rpx;
    font-weight: bold;
}
.first-buy-title .remark {
    margin-left: 16rpx;
    font-size: 20rpx;
    font-weight: normal;
}
.good-list {
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.good-item {
    margin-bottom: 10rpx;
}
.good-img {
    width: 350rpx;
    height: 224rpx;
}
.banner-item {
    margin: 0 auto 10rpx;
    width: 712rpx;
}
.banner-img {
    width: 712rpx;
    height: 190rpx;
    margin: 0 auto;
}
.member-valid-wrapper {
    text-align: center;
}
.user-info {
    height: 112rpx;
    margin: 0 0 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 80rpx 0 40rpx;
}
.user-avatar {
    width: 112rpx;
    height: 112rpx;
    background-color: #fff;
    border-radius: 112rpx;
    margin: 0 20rpx 0 0;
}
.user-detail {
    flex: 1;
    padding: 8rpx 0 0rpx;
    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;
}
.member-invalid-top {
    background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/member-center-bg.png') no-repeat center top;
    background-size: 100%;
    height: 342rpx;
    width: 750rpx;
    padding: 30rpx 0 0;
}
.member-invalid-wrapper .buy-record,
.member-valid-wrapper .buy-record {
    display: flex;
    align-items: center;
    color: #ffffff;
    font-size: 22rpx;
    font-weight: 26rpx;
    width: 136rpx;
    justify-content: center;
    height: 42rpx;
    line-height: 42rpx;
    border-radius: 5rpx;
    background-color: #45474c;
}
.member-invalid-card {
    width: 608rpx;
    height: 180rpx;
    background: linear-gradient(180deg, #ffe3af, #febf4f);
    box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(197, 148, 60, 0.16);
    border-radius: 15rpx;
    margin: -156rpx auto 0;
    padding: 50rpx 54rpx 44rpx 40rpx;
    display: flex;
    justify-content: space-between;
}
.invalid-card-left {
    color: #a26428;
    text-shadow: 2rpx 6rpx 8rpx rgba(30, 4, 4, 0.18);
    font-size: 24rpx;
}
.invalid-card-left .card-title {
    font-weight: bold;
    color: #663315;
    text-shadow: 2rpx 6rpx 8rpx rgba(30, 4, 4, 0.18);
    font-size: 32rpx;
    height: 44rpx;
    line-height: 44rpx;
    margin-bottom: 8rpx;
}
.invalid-card-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    color: #a26428;
    opacity: 0.8;
    text-shadow: 2rpx 6rpx 8rpx rgba(30, 4, 4, 0.18);
    font-size: 20rpx;
    width: 144rpx;
}
.invalid-card-right .btn {
    width: 144rpx;
    height: 42rpx;
    line-height: 42rpx;
    background: #ffffff;
    border-radius: 42rpx;
    color: #663315;
    font-size: 24rpx;
    opacity: 1;
    text-align: center;
    margin-top: 8rpx;
}
.member-valid-top {
    padding: 30rpx 0 32rpx;
    background: #1f232d;
    background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/member-valid-bg.png') no-repeat center;
    background-size: 100%;
    height: 700rpx;
    width: 750rpx;
    color: #fff;
}
.member-valid-benefit {
    height: 526rpx;
    width: 750rpx;
}
.valid-benefit-item image {
    width: 100rpx;
    height: 100rpx;
}
.valid-benefit-title {
    display: flex;
    justify-content: center;
    font-size: 28rpx;
    font-weight: bold;
    align-items: center;
}
.valid-benefit-title .line {
    width: 50rpx;
    height: 3rpx;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 0rpx 3rpx 3rpx 0rpx;
}
.valid-benefit-title .text {
    margin: 0 14rpx;
}
.valid-benefit-block {
    padding: 0 30rpx 0 26rpx;
}
.valid-benefit-line {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 30rpx;
}
.valid-benefit-item {
    flex: 1;
    font-size: 24rpx;
}
.valid-benefit-item .remark {
    color: #9d9d9d;
    font-size: 21rpx;
}
.member-date .renew {
    color: #e6c78b;
    font-size: 24rpx;
    margin-left: 14rpx;
}
</style>