邃芒智像(Uniapp : WX、TT、H5)
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 

103 linhas
2.0 KiB

  1. <template>
  2. <view class="page">
  3. <text class="tips">金币可以用来生成写真和制作视频</text>
  4. <view
  5. v-for="item in orderList"
  6. class="orderListItem"
  7. :class="active == item.num ? 'border' : ''"
  8. @click="select(item)"
  9. >
  10. <image src="../../assets/icon/coin.png" mode="scaleToFill" />
  11. <text class="num">金币{{ item.num }}枚</text>
  12. <text class="price">¥{{ item.money }}</text>
  13. </view>
  14. <view class="buyBtn">
  15. <view class="btn">立刻购买</view>
  16. <view class="pro" @click="goPro">《慧拍金币充值协议》</view>
  17. </view>
  18. </view>
  19. </template>
  20. <script setup>
  21. //#region 导入
  22. import { ref, reactive } from "vue";
  23. //#endregion --------------
  24. //#region 列表数据
  25. const active = ref(5);
  26. const orderList = ref([
  27. { num: 5, money: 4.9 },
  28. { num: 20, money: 18.9 },
  29. { num: 30, money: 28.9 },
  30. ]);
  31. function select(item) {
  32. active.value = item.num;
  33. }
  34. const goPro = () => {
  35. uni.navigateTo({
  36. url: "/pages/protocol/coin",
  37. });
  38. };
  39. </script>
  40. <style lang="scss">
  41. .tips {
  42. font-size: 33rpx;
  43. margin-top: 70rpx;
  44. margin-bottom: 70rpx;
  45. }
  46. .orderListItem {
  47. position: relative;
  48. margin-bottom: 40rpx;
  49. padding: 0 70rpx 0 30rpx;
  50. width: 690rpx;
  51. display: flex;
  52. justify-content: space-between;
  53. align-items: center;
  54. height: 140rpx;
  55. line-height: 120rpx;
  56. font-size: 40rpx;
  57. background-color: #484848;
  58. border-radius: 36rpx;
  59. font-size: 30rpx;
  60. font-weight: 900;
  61. border: 6px solid #484848;
  62. transform: scale(1);
  63. transition: all 0.3s;
  64. image {
  65. width: 53rpx;
  66. height: 53rpx;
  67. margin-right: 25rpx;
  68. }
  69. .num {
  70. font-size: 36rpx;
  71. flex: 1;
  72. }
  73. }
  74. .border {
  75. transform: scale(1.03);
  76. border: 6px solid #ff4f00;
  77. }
  78. .buyBtn {
  79. position: absolute;
  80. bottom: 80rpx;
  81. .btn {
  82. width: 520rpx;
  83. height: 100rpx;
  84. background: #ff4f00;
  85. border-radius: 50rpx;
  86. text-align: center;
  87. line-height: 100rpx;
  88. font-size: 30rpx;
  89. font-weight: bold;
  90. margin-bottom: 40rpx;
  91. }
  92. .pro {
  93. text-align: center;
  94. color: #ff4f00;
  95. }
  96. }
  97. </style>