邃芒智像(Uniapp : WX、TT、H5)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
 

131 行
2.6 KiB

  1. <template>
  2. <view class="page">
  3. <text class="tips">金币可以用来生成写真和制作视频</text>
  4. <view
  5. v-for="item in coinList"
  6. class="orderListItem"
  7. :class="active == item.id ? 'border' : ''"
  8. @click="select(item)"
  9. >
  10. <image src="../../assets/icon/coin.png" mode="scaleToFill" />
  11. <text class="num">{{ item.title }}</text>
  12. <text class="price">¥{{ item.sellPriceRmb / 100 }}</text>
  13. </view>
  14. <view class="buyBtn">
  15. <view class="btn" @click="createProductOrder">立刻购买</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. import { getCoinList, createOrder, createPay } from "../../api/coin.js";
  24. //#endregion --------------
  25. //#region 列表数据
  26. const active = ref("");
  27. const coinList = ref([]);
  28. function select(item) {
  29. active.value = item.id;
  30. }
  31. const goPro = () => {
  32. uni.navigateTo({
  33. url: "/pages/protocol/coin",
  34. });
  35. };
  36. const getList = async () => {
  37. try {
  38. const res = await getCoinList(5, 1);
  39. coinList.value = res.data.list;
  40. console.log(coinList.value, "coinList.value");
  41. } catch (error) {
  42. console.log(error, "error");
  43. }
  44. };
  45. const createProductOrder = async () => {
  46. try {
  47. const res = await createOrder(1);
  48. console.log(res, "res");
  49. // createProductPay()
  50. } catch (error) {
  51. console.log(error, "error");
  52. }
  53. };
  54. const createProductPay = async () => {
  55. try {
  56. const res = await createPay(1);
  57. console.log(res, "res");
  58. } catch (error) {
  59. console.log(error, "error");
  60. }
  61. };
  62. getList();
  63. </script>
  64. <style lang="scss">
  65. .tips {
  66. font-size: 33rpx;
  67. margin-top: 70rpx;
  68. margin-bottom: 70rpx;
  69. }
  70. .orderListItem {
  71. position: relative;
  72. margin-bottom: 40rpx;
  73. padding: 0 70rpx 0 30rpx;
  74. width: 690rpx;
  75. display: flex;
  76. justify-content: space-between;
  77. align-items: center;
  78. height: 140rpx;
  79. line-height: 120rpx;
  80. font-size: 40rpx;
  81. background-color: #484848;
  82. border-radius: 36rpx;
  83. font-size: 30rpx;
  84. font-weight: 900;
  85. border: 6px solid #484848;
  86. transform: scale(1);
  87. transition: all 0.3s;
  88. image {
  89. width: 53rpx;
  90. height: 53rpx;
  91. margin-right: 25rpx;
  92. }
  93. .num {
  94. font-size: 36rpx;
  95. flex: 1;
  96. }
  97. }
  98. .border {
  99. transform: scale(1.03);
  100. border: 6px solid #ff4f00;
  101. }
  102. .buyBtn {
  103. position: absolute;
  104. bottom: 80rpx;
  105. .btn {
  106. width: 520rpx;
  107. height: 100rpx;
  108. background: #ff4f00;
  109. border-radius: 50rpx;
  110. text-align: center;
  111. line-height: 100rpx;
  112. font-size: 30rpx;
  113. font-weight: bold;
  114. margin-bottom: 40rpx;
  115. }
  116. .pro {
  117. text-align: center;
  118. color: #ff4f00;
  119. }
  120. }
  121. </style>