<template>
    <view class="buy-member-page">
        <!-- 会员选择 -->
        <view class="member-top">
            <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="member-type">
                <view
                    :class="'type-item ' + (buyType == item.type ? 'type-active' : '')"
                    :data-type="item.type"
                    :data-price="item.price"
                    @tap="switchType"
                    v-for="(item, index) in typeList"
                    :key="index"
                >
                    <image mode="aspectFill" class="member-type-img" :src="item.url"></image>

                    <!-- <image mode="aspectFill" class="member-icon"
				src="{{buyType==item.type?'https://jzmall.lifejingzhi.com/file/jzmall/weixin/member/icon-jzhy-active.png':'https://jzmall.lifejingzhi.com/file/jzmall/weixin/member/icon-jzhy.png'}}">
			</image>
			<view class="member-title">超级鲸会员</view>
			<block wx:if="{{index<=1}}">
				<view class="type-name">{{item.name}}</view>
				<view class="type-price">
					¥<text>{{item.price}}</text>/{{item.typeName}}
				</view>
			</block>
			<block wx:if="{{index==2}}">
				<view class="type-convert">VIP兑换</view>
				<view class="vip-tips">已有兑换码</view>
			</block> -->
                </view>
            </view>

            <!-- 提示 -->
            <view class="member-tip">
                <image mode="aspectFill" class="member-tip-img" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/icon-remark.png"></image>
                <view>实体会员卡、合作渠道联名卡请选择VIP兑换</view>
            </view>
        </view>
        <!-- 卡内权益 -->
        <!-- <view class="card-benefit">
		<view class="benefit-title">
			卡内权益
			<text wx:if="{{buyType=='2'}}">（年卡）</text>
			<text wx:if="{{buyType=='1'}}">（月卡）</text>
		</view>
		<view class="benefit-block">
			<view class="benefit-item">
				<image class="benefit-img" mode="aspectFill"
					src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/new/member-category-01.png">
				</image>
				<view class="item-title">居家保洁</view>
				<view class="item-tip">9折起</view>
			</view>
			<view class="benefit-item">
				<image class="benefit-img" mode="aspectFill"
					src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/new/member-category-02.png">
				</image>
				<view class="item-title">深度清洁</view>
				<view class="item-tip">8.5折起</view>
			</view>
			<view class="benefit-item">
				<image class="benefit-img" mode="aspectFill"
					src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/new/member-category-03.png">
				</image>
				<view class="item-title">家电蒸洗</view>
				<view class="item-tip">8.5折起</view>
			</view>
			<view class="benefit-item">
				<image class="benefit-img" mode="aspectFill"
					src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/new/member-category-04.png">
				</image>
				<view class="item-title">保姆/钟点工</view>
				<view class="item-tip">中介费9折</view>
			</view>
			<view class="benefit-item">
				<image class="benefit-img" mode="aspectFill"
					src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/new/member-category-05.png">
				</image>
				<view class="item-title">鲸品家政师</view>
				<view class="item-tip">额外权益</view>
			</view>
		</view>
	</view> -->

        <!-- <view class="card-benefit" style="height: 360rpx;">
		<view class="row">
			<view class="desc">超级补贴（360元/年）</view>
	
		</view>

		<view class="row">
			<view class="desc">居家保洁         5元/月</view>
		</view>

		<view class="row">
			<view class="desc">家电蒸洗 5元/月</view>
			<view class="price"></view>
		</view>

		<view class="row">
			<view class="desc">鲸品家政师 20元/月</view>
			<view class="price"></view>
		</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>
        <!-- 市场价 -->
        <!-- <view class="price-block" wx:if="{{buyType!='3'}}">
	   <view class="price-line">
		 <text>市场价</text>
		 <view class="invalid-price">¥{{oldPrice}}</view>
		 </view>
		 <view class="price-line">
			<text>限时优惠价</text>
		 <text>¥{{actualPrice}}</text>
		 </view>
	   
	 </view> -->
        <!-- 立即购买 -->

        <view class="buy-btn" v-if="buyType != '3'" @tap="payNow">
            <text class="now-pay">立即支付</text>
            ¥
            <text class="actual-price">{{ actualPrice }}</text>
            /
            <text v-if="buyType == '2'">年</text>
            <text v-if="buyType == '1'">月</text>
        </view>
        <view class="buy-btn" v-if="buyType == '3'" @tap="goConvert">
            <text class="now-pay">立即兑换</text>
        </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 {
            buyType: '2',
            //1月卡 2年卡
            oldPrice: '199',
            actualPrice: '199',
            typeList: [
                {
                    url: 'https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/member-type-1.png',
                    type: '2',
                    name: '年卡',
                    price: '199',
                    typeName: '年',
                    oldPrice: '199'
                },
                {
                    url: 'https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/member-type-2.png',
                    type: '1',
                    name: '月卡',
                    price: '19',
                    typeName: '月',
                    oldPrice: '19'
                },
                {
                    url: 'https://jzmall.lifejingzhi.com/file/jzmall/weixin/memberCard-1229/member-type-3.png',
                    type: '3',
                    name: '年卡'
                }
            ],
            memberUserInfo: {
                nickName: '用户',
                avatarUrl: '/static/images/new/icon-user.png',
                level: '0'
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.setData({
            memberUserInfo: app.globalData.memberUserInfo
        });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        switchType(e) {
            let type = e.currentTarget.dataset.type;
            let actualPrice = e.currentTarget.dataset.price;
            this.setData({
                buyType: type,
                actualPrice: actualPrice,
                oldPrice: type == '2' ? '199' : '19'
            });
        },

        payNow() {
            let that = this;
            uni.showModal({
                title: '会员开卡确认',
                content: '会员权益卡，购买后无法退换，确定购买？',
                showCancel: true,
                cancelText: '取消',
                cancelColor: '#000',
                confirmText: '购买',
                confirmColor: '#0f0',
                success: function (res) {
                    if (res.confirm) {
                        that.memberSubmit();
                    }
                }
            });
        },

        memberSubmit() {
            let orderInfo = {
                userId: app.globalData.userInfo.id,
                memberType: this.buyType
            };
            util.request(api.memberSubmit, orderInfo, 'POST').then((res) => {
                if (res.errno === 0) {
                    let orderId = res.data.memberOrderNo;
                    this.prepayMember(orderId);
                } else {
                    util.showErrorToast(res.errmsg);
                }
            });
        },

        prepayMember(orderId) {
            util.request(
                api.prepayMember,
                {
                    memberOrderNo: orderId
                },
                'POST'
            ).then((res) => {
                if (res.errno === 0) {
                    let payParam = res.data;
                    console.log('支付过程开始');
                    uni.requestPayment({
                        timeStamp: payParam.timeStamp,
                        nonceStr: payParam.nonceStr,
                        package: payParam.packageValue,
                        signType: payParam.signType,
                        paySign: payParam.paySign,
                        success: (res) => {
                            console.log('支付过程成功');
                            uni.redirectTo({
                                url: '/pages/member/becomeMember/becomeMember'
                            });
                        },
                        fail: (res) => {
                            console.log('支付过程失败');
                            util.showErrorToast('支付失败');
                        },
                        complete: function (res) {
                            console.log('支付过程结束');
                        }
                    });
                } else {
                    util.showErrorToast(res.errmsg);
                }
            });
        },

        goConvert() {
            uni.navigateTo({
                url: '/pages/member/memberConvert/memberConvert'
            });
        }
    }
};
</script>
<style>
.buy-member-page {
    /* height: 100vh; */
    /* padding:34rpx 30rpx; */
}
.member-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 36rpx 0;
}
.member-type {
    display: flex;
    justify-content: space-between;
}
.type-item {
    height: 262rpx;
    width: 212rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #2e3235;
    /* border: 2rpx solid #E6C162; */
    border-radius: 12rpx;
    /* padding:20rpx 0 0; */
    overflow: hidden;
}
.member-type-img {
    height: 262rpx;
    width: 212rpx;
    border-radius: 10rpx;
}
.type-item.type-active {
    /* background: url("https://jzmall.lifejingzhi.com/file/jzmall/weixin/member/member-type.png") no-repeat center top;
	background-size: 100% 100%; */
    border: 2rpx solid #fff;
}
.member-icon {
    width: 84rpx;
    height: 84rpx;
}
.member-title {
    margin: 16rpx 0 0;
}
.member-title,
.type-name {
    color: #5d3a11;
    font-style: 24rpx;
    line-height: 28rpx;
    background: linear-gradient(180deg, #f1e3c8 0%, #e6c162 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.type-price {
    font-size: 26rpx;
    color: #e6c162;
    height: 60rpx;
    line-height: 60rpx;
    margin: 10rpx 0 4rpx;
}
.type-price text {
    font-size: 68rpx;
    font-weight: bold;
}
.type-item.type-active .member-title,
.type-item.type-active .type-name {
    color: #5d3a11;
    background: #5d3a11;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.type-item.type-active .type-price {
    color: #5d3a11;
    background: #5d3a11;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.old-price {
    text-decoration: line-through;
    color: #85868a;
    font-size: 20rpx;
    line-height: 20rpx;
    margin: 6rpx 0 0;
}
.type-convert {
    color: #5d3a11;
    background: linear-gradient(180deg, #f1e3c8 0%, #e6c162 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 40rpx;
    line-height: 44rpx;
    font-weight: bold;
    margin: 36rpx 0 24rpx;
}
.vip-tips {
    color: #85868a;
    font-size: 20rpx;
    line-height: 20rpx;
}
.type-item.type-active .type-convert {
    color: #5d3a11;
    background: #5d3a11;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.type-item.type-active .vip-tips {
    color: #5d3a11;
}
/* 卡内权益 */
.card-benefit {
    width: 690rpx;
    height: 238rpx;
    background: #3d4144;
    border-radius: 10rpx;
    padding: 22rpx 14rpx;
    margin: 32rpx 0;
}
.benefit-title {
    font-size: 24rpx;
    line-height: 24rpx;
    margin: 0 0 28rpx 0;
    color: #5d3a11;
    background: linear-gradient(173deg, #f1e3c8 0%, #e6c162 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.benefit-block {
    display: flex;
    justify-content: space-between;
}
.benefit-item {
    flex: 1;
    text-align: center;
}
.benefit-img {
    width: 70rpx;
    height: 70rpx;
    margin: 0 0 6rpx 0;
}
.item-title {
    height: 24rpx;
    font-size: 24rpx;
    line-height: 24rpx;
    background: linear-gradient(181deg, #f1e3c8 0%, #e6c162 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.item-tip {
    color: #85868a;
    font-size: 20rpx;
    margin: 4rpx 0 0;
}
.price-block {
    width: 690rpx;
    height: 144rpx;
    background: #3d4144;
    border-radius: 10rpx;
    padding: 20rpx 20rpx;
}

.price-line {
    height: 52rpx;
    display: flex;
    font-size: 24rpx;
    justify-content: space-between;
    align-items: center;
    color: #2a2a2a;
}
.price-line text {
    background: linear-gradient(173deg, #f1e3c8 0%, #e6c162 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.invalid-price {
    text-decoration: line-through;
    color: #e6c162;
}

.buy-btn {
    /* position: fixed;
	left:30rpx;
	right:30rpx;
	bottom: 80rpx; */
    width: 530rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    color: #663315;
    font-size: 24rpx;
    background: linear-gradient(0deg, #e4cfa8, #e4cfa8);
    box-shadow: 0rpx 9rpx 18rpx 0rpx rgba(50, 50, 50, 0.06);
    border-radius: 100rpx;
    margin: 92rpx auto 0;
}
.now-pay {
    font-size: 32rpx;
    font-weight: bold;
}
.actual-price {
    font-size: 38rpx;
    font-weight: bold;
}

.row {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
}

.title {
    color: #e6c162;
    flex: 1;
}
.desc {
    /* color: #09afff; */
    color: #e6c162;
    flex: 2;
}

.price {
    color: #e6c162;
    flex: 1;
    text-align: right;
}
.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;
}
.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;
}
.member-tip {
    height: 22rpx;
    display: flex;
    align-items: center;
    margin-top: 36rpx;
    color: #bababa;
    font-size: 22rpx;
    justify-content: center;
}
.member-tip-img {
    width: 22rpx;
    height: 22rpx;
    margin-right: 8rpx;
}
</style>
