xs/xs-app/components/read/rechargeItem.vue

<template>
	<!-- :class="{ SelectStatus: isSelectStatus() ,UnSelectStatus: isSelectStatus()==false }" -->
	<view @click="onItemClick" style="position: relative;">
		<view v-if="isVipRecharge()==true" >
			<image :src="selectBgColor" style="width: 50vw;height: 250rpx;"></image>
			<view style="position: absolute;bottom: 13%;left: 10%;">
				<view>
					<view style="display: flex; justify-content: center; align-items: center;  height: 50rpx;">
						<view style="font-size: 60rpx;color: #6D6D82;">{{recharge_item_data.day}}</view>
						<view style="font-size: 35rpx; color: #6D6D82;margin-left: 4px;">天全场免费</view> <!-- 添加了一些间距 -->
					</view>
					<view style="display: flex; justify-content: center; align-items: center; width: 35vw; height: 50rpx;">
						<image :src="selectCoinIcon"  style="height: 40rpx;width: 40rpx;"></image>
						<view style="font-size: 1em;" :style="{color:isSelect?'#FF5E00':'#404040'}">{{recharge_item_data.amount}}</view>
					</view>
					<view style="font-size: 30rpx; margin-top: 10rpx;display: flex; justify-content: center; align-items: center; width: 35vw; height: 50rpx;color: #6D6D82;">仅需{{}}元/天</view>
					<!-- {{recharge_item_data.name}}--VIP{{recharge_item_data.day}}天 -->
				</view>
			</view>
		</view>
		
		<view v-if="isVipRecharge()==false">
			<image :src="selectBgColorBookCoin" style="width: 50vw;height: 250rpx;"></image>
			<view style="position: absolute;bottom: 13%;left: 10%;">
				<view style="display: flex; justify-content: center; align-items: center;  height: 50rpx;margin-bottom: 20rpx;">
					<image src="../../static/imgs/read/img_coin.png" style="width: 102rpx;height: 80rpx;" :style="{marginLeft: recharge_item_data.give_coin>0? '80rpx': '0rpx'}"></image>
				</view>
				<view style="display: flex; justify-content: center; align-items: center; width: 35vw; height: 50rpx;color: #6D6D82;">{{recharge_item_data.coin}}书币</view>
				
				<view style="display: flex; justify-content: center; align-items: center;  height: 50rpx;">
					<image :src="selectCoinIcon"  style="height: 40rpx;width: 40rpx;"></image>
					<view :style="{color:isSelect?'#FF5E00':'#404040'}">{{recharge_item_data.amount}}</view>
				</view>
			</view>
			<view v-if="recharge_item_data.give_coin>0" style="position: absolute;bottom: 45%;left: 10%;">
				<image src="../../static/imgs/read/img_song_db.png" style="width: 108rpx;height: 94rpx;"></image>
			</view>
			<view v-if="recharge_item_data.give_coin>0" style="position: absolute;bottom: 65%;left: 18%;font-size: 30rpx;color: #FBFBFD;">
				送
			</view>
			<view v-if="recharge_item_data.give_coin>0" style="position: absolute;bottom: 50%;left: 12%;font-size: 35rpx;color: #FBFBFD;">
				{{recharge_item_data.give_coin}}
			</view>
		</view>
	
		
	</view>

</template>

<script lang="ts" setup>
	import { onMounted, ref, watch } from 'vue';
	import { recharge_list_data } from '../../data/data';
	const {recharge_item_data} =  defineProps({recharge_item_data:{type:recharge_list_data,required:true,default:null}})
	const emits = defineEmits(['itemClick'])
	function isVipRecharge():boolean{
		return recharge_item_data.is_vip==1
	}
	let isSelect = ref(false)
	function isSelectStatus(){
		return isSelect
	}
	
	onMounted(()=>{
		if(recharge_item_data.is_default==1&&isSelect.value==false){
			emits('itemClick',recharge_item_data.goods_id,recharge_item_data.is_vip==1,true)
		}
	})
	
	function onItemClick(){
		emits('itemClick',recharge_item_data.goods_id,recharge_item_data.is_vip==1)
	}
	
	let selectBgColor = ref('../../static/imgs/read/img_buy_unselect_status.png')
	
	let selectBgColorBookCoin = ref('../../static/imgs/read/img_buy_unselect_bi_status.png')
	
	let selectCoinIcon = ref('../../static/imgs/read/img_money_0.png')
	
	watch(()=>isSelect.value,()=>{
		if(isSelect.value==true){
			selectBgColor.value = '../../static/imgs/read/img_buy_onselect_status.png'
			selectBgColorBookCoin.value = '../../static/imgs/read/img_buy_onselect_bi_status.png'
			selectCoinIcon.value = '../../static/imgs/read/img_money_1.png'
		}else{
			selectBgColor.value = '../../static/imgs/read/img_buy_unselect_status.png'
			selectBgColorBookCoin.value = '../../static/imgs/read/img_buy_unselect_bi_status.png'
			selectCoinIcon.value = '../../static/imgs/read/img_money_0.png'
		}
	})
	
	function updateSelectStatus(goods_id:number){
		isSelect.value = (goods_id==recharge_item_data.goods_id)
	}
	
	defineExpose({updateSelectStatus})
</script>

<style scoped lang="scss">
	.container0 {
		background: url(../../static/imgs/read/img_buy_onselect_status.png);
		background-color: #fff;
		background-size: 100% 100%;
	}
	.container1 {
		background-color: #000;
	}
</style>