xs/xs-app/pagesA/recharge/rechargeVIP.vue

<template>
	<view class="vip_content">
		<view class="top">
			<view class="top__bg">
				<image class="image" src="@/static/imgs/public/img_top_bg_2.png" mode="aspectFit"></image>
			</view>
			<view class="top__container">
				<view class="top__container__kaitong" v-if="user_data.is_vip">已开通</view>
				<view class="top__container__avatar">
				    <image class="image" :src="UserData().getData().avatar_url" mode=""></image>
				</view>
				<view class="top__container__info">
					<view class="top__container__info__name">
						{{user_data.user_name}}
					</view>
					<view class="top__container__info__date" v-if="user_data.is_vip">
						有效期至:{{util.timeFormat(user_data.vip_effective_time_time)}}
					</view>
				</view>
			</view>
		</view>
	    <view class="title-id">
			<view class="title-id__name">购买会员</view>
			<view class="title-id__des"> 畅 \ 享 \ 全 \ 场 \ 免 \ 费</view>
			<view class="title-id__line"></view>
		</view>
	    <view class="list">
	    	<view class="list__item"  v-for="(item,index) in data_list" :key="index" @click="clickItem(index)">
				<image v-if="current_index==index" class="image" src="@/static/imgs/read/img_buy_onselect_bi_status.png"></image>
	    		<image v-else class="image" src="@/static/imgs/read/img_buy_unselect_bi_status.png"></image>
	    	    <view class="list__item__container">
					<view class="list__item__container__prompt" :style="{color:current_index==index?color_prompt_s:color_prompt_n}">
						{{item.prompt1}}
					</view>
					<view class="list__item__container__rmb" :style="{color:current_index==index?color_rmb:color_black}">
						<text style="font-size: 13px;">¥</text> {{(item.amount/100).toFixed(1)}}
					</view>
					<view class="list__item__container__des" :style="{color:current_index==index?color_des:color_black}">
						{{item.base_angle}}
					</view>
	    	    </view>
	    	</view>
	    </view>
	    <view class="bottom">
	    	<view class="bottom__button-ljgm" @click="clickLjgm">
	    		<image class="image" src="@/static/imgs/public/img_ljgm.png" mode=""></image>
	    	</view>
	    </view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
    import { config } from '../../config/config';
	import { http } from '../../framework/http';
	import { log } from '../../framework/log';
    import { UserData } from '../../stores/userDataManager';
    import { util } from '../../framework/util';
    import { tools } from '../../framework/tools';
    import { sdkUtil } from '../../framework/sdkUtil';
		
	let user_data = UserData().getData()
	let data_list = ref([])
	let current_index = ref(-1)
	
	let color_prompt_s = '#824B2C'
	let color_prompt_n = '#6D6D82'
	let color_black = '#000000'
	let color_rmb = '#FF5E00'
	let color_des = '#EB3737'
		
    requestRechargeList()

	function requestRechargeList() {
		let url = config.url_confg.Static.get_recharge_list(2)
		http.StaticRequest(url,(err,data)=>{
			if(!err) {
				// console.log('vip-',data)
				if(data.code==config.url_confg.StatesCode.SUCCESS){
					data_list.value = data.content
				}
			} else {
				log.Error(err)
			}
		})
	}
	
	function clickItem(index:number){
		if(current_index.value==index) {
			return
		}
		current_index.value = index
	}
	
	function clickLjgm() {
		if(current_index.value<0) {
			util.showInfoToast('请选择购买会员金额')
			return
		}
		let data = data_list.value[current_index.value]
		util.showLoading('',true)
		tools.requestRechargeOrderBuy(tools.getCurBuyType(),data.goods_id,(order_id:string,data:any)=>{
			if(order_id.length>0) {
				
				sdkUtil.showPayment({
					timeStamp:data.time_stamp,
					nonceStr:data.nonce_str,
					package:`prepay_id=${data.prepay_id}`,
					paySign:data.pay_sign,
					signType:data.sign_type},(err:any,pay_res:any)=>{
						if(err==null){
							setTimeout(function() {
								tools.requestRechargeOrderInfo(order_id,(status:number)=>{
									util.hideLoading()
									if(status==2) {
										UserData().update_user_info(()=>{
											util.showSuccessToast('VIP成功')
										})
									}
								})
							}, 2000);
						}else{
							util.hideLoading()
							util.showErrorToast('充值失败')
						}
					},
				)
				// setTimeout(function() {
				// 	tools.requestRechargeOrderInfo(order_id,(status:number)=>{
				// 		util.hideLoading()
				// 		if(status==2) {
				// 			UserData().update_user_info(()=>{
				// 				util.showSuccessToast('VIP成功')
				// 			})
				// 		}
				// 	})
				// }, 2000);
			} else {
				util.hideLoading()
			}
		})
	}
	
</script>

<style lang="scss">
	.vip_content{
		display: flex;
		flex-direction: column;
		
		.top{
			margin-top: 40rpx;
			display: flex;
			justify-content: center;
			position: relative;
			&__bg{
				flex-shrink: 0;
				width: 90%; //704rpx;
				height: 245rpx;
				.image{
					width: 100%;
					height: 100%;
				}
			}
			&__container{
				position: absolute;
				display: flex;
				flex-direction: row;
				width: 90%;				
				// background-color: green;
				
				&__kaitong {
					position: absolute;
					top: 6rpx;
					right: 0;
					width: 128rpx;
					height: 60rpx;
					border-top-right-radius: 30rpx;
					border-bottom-left-radius: 30rpx;
					color: #ffffff;
					background-color: #9A71F1;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				&__avatar{
					margin-top: 70rpx;
					margin-left: 60rpx;
					flex-shrink: 0;
					width: 110rpx;
					height: 110rpx;
					.image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				&__info {
					margin-top: 60rpx;
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;
					// height: 150rpx;
					// background-color: red;
					&__name{
						margin-top: 30rpx;
						font-size: 25px;
						font-weight: 450;
					}
					&__date{
						margin-top: 10rpx;
						font-size: 17px;
					}
				}
			}
		}
		
		.title-id{
			display: flex;
			flex-direction: column;
			position: relative;
			margin-top: 40rpx;
			padding: 0 40rpx;
			&__name{
				margin-left: 10rpx;
				font-size: 30px;
				font-weight: 600;
				color: #EE5DB0;
			}
			&__des{
				font-size: 12px;
				color: #EE5DB0;
				
			}
			&__line{
				position: absolute;
				top: 50rpx;
				width: 250rpx;
				height: 20rpx;
				background-color: #EE5DB0;
				opacity: 0.4;
			}
		}
		
		.list{
			display: flex;
			flex-flow: row wrap; //横向排列、换行排列
			padding: 10px 10px;
			&__item{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 50%;
				height: 150px; //246rpx;	
				flex-shrink: 0;
				position: relative;
				// background-color: green;
				
				.image{
					position: absolute;
					flex-shrink: 0;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
				&__container{
					z-index: 9;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					// background-color: red;
					&__prompt{
						margin-top: 30px; //50rpx;						
						font-size: 20px;
						color: #6D6D82;
						height: 30px;
						// background-color: red;
					}
					&__rmb{
						margin-top: 8px;//10rpx;
						font-size: 22px;
						font-weight: 500;
						height: 25px;
						// background-color: red;
					}
					&__des{
						margin-top: 20px;
						font-size: 13px;
						height: 18px;
						// background-color: red;
					}
				}
			}
		}
	
	    .bottom {
			margin-top: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			&__button-ljgm{
				flex-shrink: 0;
				width: 80%;
				height: 100rpx;
				.image{
					width: 100%;
					height: 100%;
				}
			}
		}	
	}
</style>