vue实现话费充值功能

实现话费充值功能，可以通过以下步骤：

1. 创建一个充值页面，包含充值金额、充值手机号等输入框。

2. 在页面中加入一个提交按钮，点击按钮后触发充值操作。

3. 在充值函数中，使用Vue Resource或Axios库向后端发送请求，传递充值金额和手机号等参数。

4. 后端接收请求后，通过调用第三方支付平台提供的API，完成充值操作。

5. 充值成功后，在前端页面中显示充值成功提示信息。

以下是一个简单的实现代码示例：

<template>
  <div>
    <input v-model="phone" placeholder="请输入手机号">
    <input v-model="amount" placeholder="请输入充值金额">
    <button @click="recharge">提交</button>
    <div v-if="success">充值成功</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        phone: '',
        amount: '',
        success: false
      }
    },
    methods: {
      recharge() {
        this.$http.post('/recharge', {
          phone: this.phone,
          amount: this.amount
        }).then(response => {
          this.success = true
        })
      }
    }
  }
</script>

注意：上述示例中的`$http`是Vue Resource中的一个HTTP客户端，如果你使用的是Axios库，需要将其替换为`axios`。此外，`/recharge`是后端接口的地址，需要根据实际情况进行修改。