feat(pay/index): 充值页面添加快捷充值按钮

components/QuickRechargePanel.vue

@@ -0,0 +1,153 @@
+<template>
+  <view class="quick-recharge-panel">
+    <view class="panel-title">请选择充值金额</view>
+    <view class="amount-grid">
+      <view
+        v-for="(amount, index) in amounts"
+        :key="index"
+        class="amount-item"
+        :class="{ selected: selectedIndex === index }"
+        @click="selectAmount(amount, index)"
+      >
+        <view class="amount-value">
+          <text class="amount-number">{{ formatAmount(amount) }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'QuickRechargePanel',
+  props: {
+    // 预设金额数组
+    amounts: {
+      type: Array,
+      default: () => [100, 200, 500, 1000, 2000, 5000],
+    },
+    // 货币符号
+    currencySymbol: {
+      type: String,
+      default: '',
+    },
+    // 默认选中的索引
+    defaultSelected: {
+      type: Number,
+      default: -1,
+    },
+  },
+  data() {
+    return {
+      selectedIndex: this.defaultSelected,
+    }
+  },
+  methods: {
+    selectAmount(amount, index) {
+      this.selectedIndex = index
+      this.$emit('amount-selected', {
+        amount,
+        index,
+      })
+    },
+    // 清空选中状态
+    clear() {
+      this.selectedIndex = -1
+    },
+    // 格式化金额显示千分位
+    formatAmount(amount) {
+      return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.quick-recharge-panel {
+  margin-top: 20rpx;
+  padding: 20rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  box-shadow: 0px 2px 20rpx 0px rgba(204, 204, 204, 0.3);
+}
+
+.panel-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #333333;
+  margin-bottom: 30rpx;
+  text-align: center;
+}
+
+.amount-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20rpx;
+}
+
+.amount-item {
+  position: relative;
+  padding: 24rpx 10rpx;
+  background: #f8f9fa;
+  border-radius: 16rpx;
+  text-align: center;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border: 2rpx solid transparent;
+
+  &:hover {
+    transform: translateY(-2rpx);
+    box-shadow: 0px 4px 20rpx 0px rgba(0, 91, 172, 0.15);
+  }
+
+  &.selected {
+    background: linear-gradient(135deg, #005bac 0%, #0070d4 100%);
+    color: #fff;
+    border-color: #005bac;
+    box-shadow: 0px 4px 20rpx 0px rgba(0, 91, 172, 0.3);
+
+    .amount-value {
+      color: #fff;
+    }
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.amount-value {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  color: #333333;
+}
+
+.currency-symbol {
+  font-size: 24rpx;
+  margin-right: 4rpx;
+  opacity: 0.8;
+}
+
+.amount-number {
+  font-size: 52rpx;
+  font-weight: 700;
+  letter-spacing: 2rpx;
+}
+
+// 响应式设计
+@media (max-width: 375px) {
+  .amount-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .amount-item {
+    padding: 25rpx 15rpx;
+  }
+
+  .amount-number {
+    font-size: 40rpx;
+  }
+}
+</style>

config/request.js

@@ -19,7 +19,7 @@ module.exports = vm => {
 
     //#ifdef DEV_SERVER
     console.log('DEV_SERVER')
-    config.baseURL = 'http://t-app.beida666.com/prod-api'
+    config.baseURL = 'http://192.168.0.86:8080'
     //#endif
 
     //#ifdef QA_SERVER

pages/pay/index.vue

@@ -1,11 +1,21 @@
 <template>
   <view class="content">
-    <view class="index_header"> </view>
     <view class="contxt">
       <!-- 充值 -->
       <template v-if="isRecharge">
-        <div class="tit4">{{ '充值金额' }}</div>
+        <div class="tit4">充值金额</div>
-        <u-input class="czinputbox" v-model="rechargeAmount"></u-input>
+        <QuickRechargePanel
+          ref="quickRechargePanel"
+          :amounts="quickAmounts"
+          @amount-selected="onAmountSelected"
+          style="margin-bottom: 20rpx"
+        />
+        <u-input
+          class="recharge-input"
+          fontSize="34"
+          v-model="rechargeAmount"
+          placeholder="或输入自定义金额"
+        ></u-input>
       </template>
       <template v-else>
         <view class="tit">{{ '待支付金额' }}</view>
@@ -184,8 +194,8 @@
               </view>
               <u-radio-group v-model="whatPay">
                 <u-radio
-                  activeColor="red"
+                  activeColor="#005BAC"
-                  size="14"
+                  size="18"
                   label=""
                   :name="PAY_TYPE.BAO_FU_WECHAT"
                 >
@@ -202,8 +212,8 @@
               </view>
               <u-radio-group v-model="whatPay">
                 <u-radio
-                  activeColor="red"
+                  activeColor="#005BAC"
-                  size="14"
+                  size="18"
                   label=""
                   :name="PAY_TYPE.BAO_FU_WECHAT_SCAN"
                 >
@@ -220,8 +230,8 @@
               </view>
               <u-radio-group v-model="whatPay">
                 <u-radio
-                  activeColor="red"
+                  activeColor="#005BAC"
-                  size="14"
+                  size="18"
                   label=""
                   :name="PAY_TYPE.HUI_FU_WECHAT"
                 >
@@ -239,8 +249,8 @@
               </view>
               <u-radio-group v-model="whatPay">
                 <u-radio
-                  activeColor="red"
+                  activeColor="#005BAC"
-                  size="14"
+                  size="18"
                   label=""
                   :name="PAY_TYPE.WECHAT_PAY"
                 >
@@ -255,8 +265,8 @@
               </view>
               <u-radio-group v-model="whatPay">
                 <u-radio
-                  activeColor="red"
+                  activeColor="#005BAC"
-                  size="14"
+                  size="18"
                   label=""
                   :name="PAY_TYPE.ALI_PAY"
                 >
@@ -285,8 +295,8 @@
 
                   <u-radio-group v-model="whatPay">
                     <u-radio
-                      activeColor="red"
+                      activeColor="#005BAC"
-                      size="14"
+                      size="18"
                       label=""
                       :name="PAY_TYPE.HUI_FU_BANK_CARD + index"
                     >
@@ -309,8 +319,8 @@
               </view>
               <u-radio-group v-model="whatPay">
                 <u-radio
-                  activeColor="red"
+                  activeColor="#005BAC"
-                  size="14"
+                  size="18"
                   label=""
                   :name="PAY_TYPE.TONG_LIAN_WECHAT"
                 >
@@ -337,8 +347,8 @@
                   </view>
                   <u-radio-group v-model="whatPay">
                     <u-radio
-                      activeColor="red"
+                      activeColor="#005BAC"
-                      size="14"
+                      size="18"
                       label=""
                       :name="PAY_TYPE.JING_DONG_BANK_CARD + index"
                     >
@@ -361,8 +371,8 @@
               </view>
               <u-radio-group v-model="whatPay">
                 <u-radio
-                  activeColor="red"
+                  activeColor="#005BAC"
-                  size="14"
+                  size="18"
                   label=""
                   :name="PAY_TYPE.JING_DONG_H5"
                 >
@@ -389,8 +399,8 @@
                   </view>
                   <u-radio-group v-model="whatPay">
                     <u-radio
-                      activeColor="red"
+                      activeColor="#005BAC"
-                      size="14"
+                      size="18"
                       label=""
                       :name="PAY_TYPE.TONG_LIAN_BANK_CARD + index"
                     >
@@ -779,6 +789,7 @@
 import * as api from '@/config/pay.js'
 import QRCode from 'qrcodejs2'
 import successDialog from '@/components/successDialog.vue'
+import QuickRechargePanel from '@/components/QuickRechargePanel.vue'
 import * as act from '@/config/activity.js'
 import {
   PAY_REDIRECT_URL,
@@ -790,6 +801,7 @@ var payStatus
 export default {
   components: {
     successDialog,
+    QuickRechargePanel,
   },
   data() {
     return {
@@ -832,6 +844,8 @@ export default {
       qrcodeimg: '',
       onlinePay: true,
       unBindCode: '',
+      quickAmounts: [330, 990, 4950, 10000, 30000, 50000], // 快速充值金额选项
+      isQuickSelected: false, // 标记是否是快速选择触发的金额变化
     }
   },
   computed: {
@@ -842,6 +856,16 @@ export default {
       return false
     },
   },
+  watch: {
+    rechargeAmount(newVal, oldVal) {
+      // 当充值金额变化时，如果不是快速选择触发的，则清空快速选择状态
+      if (!this.isQuickSelected && newVal && this.$refs.quickRechargePanel) {
+        this.$refs.quickRechargePanel.clear()
+      }
+      // 重置标志位
+      this.isQuickSelected = false
+    },
+  },
   async onLoad(options) {
     this.paramsPost = JSON.parse(options.paramsPost || '{}')
     await this.getPayConfig()
@@ -917,6 +941,11 @@ export default {
     stringToBoolean(str) {
       return str === 'true' ? true : false
     },
+    // 处理快速充值金额选择
+    onAmountSelected(data) {
+      this.isQuickSelected = true // 标记这是快速选择触发的
+      this.rechargeAmount = data.amount.toString()
+    },
     //查询充值抽奖次数
     getLuckdrawDetail() {
       // 抽奖支付处理（查询订单支付信息以及显示等）
@@ -1503,8 +1532,8 @@ export default {
 }
 
 .contxt {
-  margin-top: -220rpx;
+  // margin-top: -220rpx;
-  padding: 0 26rpx;
+  padding: 40rpx 26rpx 0;
   padding-bottom: 300rpx;
 }
 
@@ -1560,7 +1589,7 @@ export default {
 .pf {
   display: flex;
   align-items: center;
-  font-size: 12px;
+  font-size: 28rpx;
   font-family:
     PingFang SC-Semibold,
     PingFang SC;
@@ -1600,7 +1629,7 @@ export default {
 .flex_ac_i {
   display: flex;
   align-items: center;
-  font-size: 12px;
+  font-size: 28rpx;
   font-family:
     PingFang SC-Regular,
     PingFang SC;
@@ -1768,4 +1797,9 @@ export default {
   justify-content: space-between;
   padding-bottom: 15px;
 }
+.recharge-input {
+  ::v-deep .uni-input-placeholder {
+    font-size: 48rpx;
+  }
+}
 </style>