rechargeItem.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <template>
  2. <!-- :class="{ SelectStatus: isSelectStatus() ,UnSelectStatus: isSelectStatus()==false }" -->
  3. <view @click="onItemClick" style="position: relative;">
  4. <view v-if="isVipRecharge()==true" >
  5. <image :src="selectBgColor" style="width: 50vw;height: 250rpx;"></image>
  6. <view style="position: absolute;bottom: 13%;left: 10%;">
  7. <view>
  8. <view style="display: flex; justify-content: center; align-items: center; height: 50rpx;">
  9. <view style="font-size: 60rpx;color: #6D6D82;">{{recharge_item_data.day}}</view>
  10. <view style="font-size: 35rpx; color: #6D6D82;margin-left: 4px;">天全场免费</view> <!-- 添加了一些间距 -->
  11. </view>
  12. <view style="display: flex; justify-content: center; align-items: center; width: 35vw; height: 50rpx;">
  13. <image :src="selectCoinIcon" style="height: 40rpx;width: 40rpx;"></image>
  14. <view style="font-size: 1em;" :style="{color:isSelect?'#FF5E00':'#404040'}">{{recharge_item_data.amount}}</view>
  15. </view>
  16. <view style="font-size: 30rpx; margin-top: 10rpx;display: flex; justify-content: center; align-items: center; width: 35vw; height: 50rpx;color: #6D6D82;">仅需{{}}元/天</view>
  17. <!-- {{recharge_item_data.name}}--VIP{{recharge_item_data.day}}天 -->
  18. </view>
  19. </view>
  20. </view>
  21. <view v-if="isVipRecharge()==false">
  22. <image :src="selectBgColorBookCoin" style="width: 50vw;height: 250rpx;"></image>
  23. <view style="position: absolute;bottom: 13%;left: 10%;">
  24. <view style="display: flex; justify-content: center; align-items: center; height: 50rpx;margin-bottom: 20rpx;">
  25. <image src="../../static/imgs/read/img_coin.png" style="width: 102rpx;height: 80rpx;" :style="{marginLeft: recharge_item_data.give_coin>0? '80rpx': '0rpx'}"></image>
  26. </view>
  27. <view style="display: flex; justify-content: center; align-items: center; width: 35vw; height: 50rpx;color: #6D6D82;">{{recharge_item_data.coin}}书币</view>
  28. <view style="display: flex; justify-content: center; align-items: center; height: 50rpx;">
  29. <image :src="selectCoinIcon" style="height: 40rpx;width: 40rpx;"></image>
  30. <view :style="{color:isSelect?'#FF5E00':'#404040'}">{{recharge_item_data.amount}}</view>
  31. </view>
  32. </view>
  33. <view v-if="recharge_item_data.give_coin>0" style="position: absolute;bottom: 45%;left: 10%;">
  34. <image src="../../static/imgs/read/img_song_db.png" style="width: 108rpx;height: 94rpx;"></image>
  35. </view>
  36. <view v-if="recharge_item_data.give_coin>0" style="position: absolute;bottom: 65%;left: 18%;font-size: 30rpx;color: #FBFBFD;">
  37. </view>
  38. <view v-if="recharge_item_data.give_coin>0" style="position: absolute;bottom: 50%;left: 12%;font-size: 35rpx;color: #FBFBFD;">
  39. {{recharge_item_data.give_coin}}
  40. </view>
  41. </view>
  42. </view>
  43. </template>
  44. <script lang="ts" setup>
  45. import { onMounted, ref, watch } from 'vue';
  46. import { recharge_list_data } from '../../data/data';
  47. const {recharge_item_data} = defineProps({recharge_item_data:{type:recharge_list_data,required:true,default:null}})
  48. const emits = defineEmits(['itemClick'])
  49. function isVipRecharge():boolean{
  50. return recharge_item_data.is_vip==1
  51. }
  52. let isSelect = ref(false)
  53. function isSelectStatus(){
  54. return isSelect
  55. }
  56. onMounted(()=>{
  57. if(recharge_item_data.is_default==1&&isSelect.value==false){
  58. emits('itemClick',recharge_item_data.goods_id,recharge_item_data.is_vip==1,true)
  59. }
  60. })
  61. function onItemClick(){
  62. emits('itemClick',recharge_item_data.goods_id,recharge_item_data.is_vip==1)
  63. }
  64. let selectBgColor = ref('../../static/imgs/read/img_buy_unselect_status.png')
  65. let selectBgColorBookCoin = ref('../../static/imgs/read/img_buy_unselect_bi_status.png')
  66. let selectCoinIcon = ref('../../static/imgs/read/img_money_0.png')
  67. watch(()=>isSelect.value,()=>{
  68. if(isSelect.value==true){
  69. selectBgColor.value = '../../static/imgs/read/img_buy_onselect_status.png'
  70. selectBgColorBookCoin.value = '../../static/imgs/read/img_buy_onselect_bi_status.png'
  71. selectCoinIcon.value = '../../static/imgs/read/img_money_1.png'
  72. }else{
  73. selectBgColor.value = '../../static/imgs/read/img_buy_unselect_status.png'
  74. selectBgColorBookCoin.value = '../../static/imgs/read/img_buy_unselect_bi_status.png'
  75. selectCoinIcon.value = '../../static/imgs/read/img_money_0.png'
  76. }
  77. })
  78. function updateSelectStatus(goods_id:number){
  79. isSelect.value = (goods_id==recharge_item_data.goods_id)
  80. }
  81. defineExpose({updateSelectStatus})
  82. </script>
  83. <style scoped lang="scss">
  84. .container0 {
  85. background: url(../../static/imgs/read/img_buy_onselect_status.png);
  86. background-color: #fff;
  87. background-size: 100% 100%;
  88. }
  89. .container1 {
  90. background-color: #000;
  91. }
  92. </style>