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

<template>
	<view class="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}">
						¥ {{(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';
		
	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(3,data.goods_id,(order_id:string)=>{
			if(order_id.length>0) {
				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">
	.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: 40rpx 20rpx;
			&__item{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 50%;
				height: 246rpx;	
				position: relative;
				// background-color: green;
				.image{
					width: 100%;
					height: 100%;
				}
				&__container{
					position: absolute;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					
					&__prompt{
						margin-top: 50rpx;
						font-size: 20px;
						color: #6D6D82;
					}
					&__rmb{
						margin-top: 10rpx;
						font-size: 20px;
						font-weight: 500;
					}
					&__des{
						position: absolute;
						bottom: -30%;
						font-size: 13px;
					}
					
				}
			}
		}
	
	    .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>