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

<template>
	<view class="coin_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__title">
					<view class="top__container__title__name">我的书币</view>
					<view class="top__container__title__icon">
						<image class="image" src="@/static/imgs/public/img_coin.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="top__container__coins">
					{{UserData().getData().coin}}
				</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__image-info">
						<view class="list__item__container__image-info__song">
							<image class="image" src="@/static/imgs/read/img_song_db.png" mode="aspectFit"></image>
							<text v-if="item.give_coin>0" class="list__item__container__image-info__song__name">
								送\n{{item.give_coin}}
							</text>
						</view>
						<view class="list__item__container__image-info__icon">
							<image class="image" src="@/static/imgs/read/img_coin.png" mode="aspectFit"></image>
						</view>
	    	    	</view> 
	    	    	<view class="list__item__container__coin" :style="{color:current_index==index?color_des:color_default}">
	    	    		{{item.name}}
	    	    	</view>
	    	    	<view class="list__item__container__rmb" :style="{color:current_index==index?color_rmb:color_default}">
	    	    		<text style="font-size: 13px;">¥</text> {{item.amount/100}}
	    	    	</view>
	    	    </view>
	    	</view>
	    </view>
	    <view class="bottom" @click="clickLjgm">
	    	<view class="bottom__button-ljgm">
	    		<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 color_default = '#000000'
	let color_des = '#EB3737'	
	let color_rmb = '#FF5E00'
		
	let data_list = ref([])
	let current_index = ref(-1)
		
    requestRechargeList()

	function requestRechargeList() {
		let url = config.url_confg.Static.get_recharge_list(3)
		http.StaticRequest(url,(err,data)=>{
			if(!err) {
				// console.log('书币-',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('充值成功')
										})
									}
								})
							}, 2000);
						}else{
							util.hideLoading()
							util.showErrorToast('充值失败')
						}
					},
				)
				
			} else {
				util.hideLoading()
			}
		})
	}
	
</script>

<style lang="scss">
	.coin_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: column;
				width: 90%;				
				// background-color: green;
				&__title{
					margin-top: 40rpx;
					margin-left: 60rpx;
					display: flex;
					flex-direction: row;
					
					&__name{
						font-size: 20px;
					}
					&__icon{
						margin-left: 10rpx;
						flex-shrink: 0;
						width: 52rpx;
						height: 52rpx;
						.image{
							width: 100%;
							height: 100%;
						}
					}
				}
				&__coins{
					margin-top: 20rpx;
					display: flex;
					justify-content: center;
					font-size: 29px;
				}
			}
		}
		
		.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: 20px 10px;
			&__item{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 50%;
				height: 140px;  //246rpx;
				position: relative;		
				// background-color: green;
				
				.image{
					flex-shrink: 0;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					// background-color: blue;
				}
				&__container{
					z-index: 9;
					display: flex;
					flex-direction: column;
					// justify-content: center;
					align-items: center;
					height: 100%;
					// background-color: red;
					
					&__image-info{
						margin-top: 20px;
						display: flex;
						align-items: center;
						height: 45px; //90rpx;
						position: relative;

						&__song{
							position: absolute;
							left: -95rpx;
							top: 3px;//10rpx;
							width: 45px; //80rpx;
							height: 40px; //70rpx;
							flex-shrink: 0;
							display: flex;
							align-items: center;
							justify-content: center;
							flex-shrink: 0;
							
							.image {
								width: 100%;
								height: 100%;
							}
							&__name{
								position: absolute;
								display: flex;
								justify-content: center;
								align-items: center;
								left: 15rpx;
								// background-color: green;
								font-size: 9px;
								word-break: break-all;
								white-space: pre-wrap;
							}
						}
						&__icon{
							flex-shrink: 0;
							width: 74rpx;
							height: 29px; //57rpx;
							.image{
								width: 100%;
								height: 100%;
							}
						}
					}
					&__coin{
						margin-top: 3px;
						height: 25px;
						font-size: 19px;
						color: #6D6D82;
					}
					&__rmb{
						margin-top: 10px;
						height: 25px;
						font-size: 17px;
					}
				}
			}
		}
	
	    .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>