market-app-ui/pages/wallet/topdown/edit.vue

<template>
  <view class="withdrawal-container">
    <view class="balance-info">
      <text class="balance-label">可用服务点数：</text>
      <text class="balance-amount">{{ user.wallet }}</text>
    </view>

    <view class="input-section">
      <text class="input-label">兑现数量（1个兑现1元人民币）：</text>
      <input 
        v-model.number="total_fee" 
        type="number" 
        class="amount-input"
        placeholder="请输入兑现数量"
      />
    </view>

    <button 
      class="submit-btn" 
      :class="{ 'submit-btn-disabled': !isValidAmount }"
      :disabled="!isValidAmount" 
      @click="createOrder('wxpay')"
    >
      发起兑现
    </button>

    <text v-if="errorMessage" class="error-message">{{ errorMessage }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      total_fee: null,
      errorMessage: ''
    }
  },
  computed: {
    isValidAmount() {
      return this.total_fee && this.total_fee > 0 && this.total_fee <= this.user.wallet
    }
  },
  onLoad() {
    this.user = this.getUser()
  },
  methods: {
    createOrder(provider) {
		uni.showModal({
			content: '功能正在开发中...',
			showCancel: false
		});
		return;
      if (!this.isValidAmount) {
        this.errorMessage = '请输入有效的兑现数量'
        return
      }

      this.errorMessage = ''
      uni.showLoading({ title: '处理中...' })

      this.http.request({
        url: '/level-one-server/app/WalletManage/topdownSave',
        data: {
          amount: this.total_fee * 100, // Convert to cents
          goodsName: '服务点兑现'
        },
        success: res => {
          uni.hideLoading()
          this.user.wallet -= this.total_fee
          uni.setStorageSync('info', this.user)
          uni.showToast({
            title: '兑现成功！',
            icon: 'success'
          })
          setTimeout(() => {
            uni.navigateBack({ delta: 1 })
          }, 1500)
        },
        fail: err => {
          uni.hideLoading()
          this.errorMessage = '兑现失败，请稍后重试'
          console.error('Withdrawal failed:', err)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.withdrawal-container {
  padding: 30px;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.balance-info {
  background-color: #007AFF;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.balance-label {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}

.balance-amount {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.input-section {
  background-color: #fff;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.input-label {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.amount-input {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
}

.submit-btn {
  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  color: #fff;
  padding: 15px;
  border-radius: 25px;
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  border: none;
  margin-top: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  &:disabled {
    background: #ccc;
    box-shadow: none;
  }
}

.submit-btn-disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.error-message {
  color: #ff4d4f;
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
}
</style>