✨✨使用vue3打造一个el-form表单及高德地图的关联组件实例✨

置顶 已于 2024-06-24 08:47:46 修改
阅读量880 收藏 6
点赞数 23
分类专栏： # elemen-plus 文章标签： 前端 vue elementui 地图
于 2024-05-11 09:44:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35940731/article/details/138696634
版权

✨1. 实现功能

  1. 🌟表单内显示省市县以及详细地址
    • 点击省市县输入框时，打开对应地图弹窗，进行位置选择
    • 选择位置回显入对应输入框
    • 表单内的省市县以及地址输入框同外嵌表单走相同的校验方式
    • 触发校验后点击reset实现清除校验与清空数据
  2. 🌟地图内展示地址搜索框以及地图坐标图
    • 搜索框展示当前经纬度地址
    • 搜索框可输入自定义地址，下拉菜单展示范围兴趣点和道路信息，点击可进行搜索
  3. 🌟 单独封装每个组件，使form-item和dialog以及amap三个组件可单独使用

✨2. 示例图

  1. 💖示例图1：💖
    在这里插入图片描述

  2. 💖💖示例图2：💖
    在这里插入图片描述

  3. 💖💖💖示例图3：💖
    在这里插入图片描述

  4. 💖💖💖💖示例图4：💖
    在这里插入图片描述

  5. 💖💖💖💖💖示例图5：💖
    在这里插入图片描述

✨3. 组件代码

🌹1. 组件目录结构

在这里插入图片描述

2. 🍗 🍖地图组件AmapContainer.vue
<template>
  <div v-loading="loading">
    <input type="text" class="address" v-model="iMap.address" id="inputAddress" />
    <div id="container"></div>
  </div>
</template>

<script setup lang="ts" name="AmapContainer">
import { ref, reactive, computed, watch, onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { AMAP_MAP_KEY, AMAP_SECRET_KEY } from "@/config";
import { getBrowserLang } from "@/utils";
import { useGlobalStore } from "@/stores/modules/global";
import { IMap } from "../interface/index";

const globalStore = useGlobalStore();
const language = computed(() => {
  if (globalStore.language == "zh") return "zh_cn";
  if (globalStore.language == "en") return "en";
  return getBrowserLang() == "zh" ? "zh_cn" : "en";
});

const loading = ref(true);

interface ExtendsWindow extends Window {
  _AMapSecurityConfig?: {
    securityJsCode: string;
  };
}
let _window: ExtendsWindow = window;

// 定义map实例
let map: any = null;

const iMap = reactive<IMap>({
  province: "",
  city: "",
  district: "",
  address: "",
  lnglat: [114.525918, 38.032612],
  canSubmit: true
});

watch(
  () => iMap.address,
  () => {
    iMap.canSubmit = !iMap.address;
  }
);

onMounted(() => {
  initMap();
});

onUnmounted(() => {
  map?.destroy();
});

// 初始化地图
const initMap = async () => {
  _window._AMapSecurityConfig = {
    securityJsCode: AMAP_SECRET_KEY // ❓高德秘钥👇👇下方会有👇👇
  };
  AMapLoader.load({
    key: AMAP_MAP_KEY, // ❓申请好的Web端开发者Key，首次调用 load 时必填👇👇下方会有👇👇
    version: "2.0", // ❓指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.Marker", "AMap.Geocoder", "AMap.AutoComplete"] //需要使用的的插件列表
  })
    .then(AMap => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "2D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: iMap.lnglat // 初始化地图中心点位置
      });
      //创建工具条插件实例
      const toolbar = new AMap.ToolBar({
        position: {
          top: "110px",
          right: "40px"
        }
      });
      map.addControl(toolbar);

      //创建比例尺插件实例
      const Scale = new AMap.Scale();
      map.addControl(Scale);

      //创建标记插件实例
      const Marker = new AMap.Marker({
        position: iMap.lnglat
      });
      map.addControl(Marker);

      //创建地理编码插件实例
      const Geocoder: any = new AMap.Geocoder({
        radius: 1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
        extensions: "base", //返回地址描述以及附近兴趣点和道路信息，默认“base | all”
        lang: language.value
      });

      //返回地理编码结果
      Geocoder.getAddress(iMap.lnglat, (status, result) => {
        if (status === "complete" && result.info === "OK") {
          iMap.province = result.regeocode.addressComponent.province;
          iMap.city = result.regeocode.addressComponent.city;
          iMap.district = result.regeocode.addressComponent.district;
          iMap.address = result.regeocode.formattedAddress;
          AutoComplete.setCity(iMap.address);
          loading.value = false;
        }
      });
      // 根据输入关键字提示匹配信息
      const AutoComplete = new AMap.AutoComplete({
        input: "inputAddress",
        city: iMap.address,
        datatype: "all",
        lang: language.value
      });

      AutoComplete.on("select", result => {
        iMap.lnglat = [result.poi.location.lng, result.poi.location.lat];
        setPointOrAddress();
      });

      //点击地图事件
      map.on("click", e => {
        iMap.lnglat = [e.lnglat.lng, e.lnglat.lat];
        setPointOrAddress();
      });

      // 设置地图点坐标与位置交互
      const setPointOrAddress = () => {
        Marker.setPosition(iMap.lnglat);
        map.setCenter(iMap.lnglat);
        map.setZoom(12);
        Geocoder.getAddress(iMap.lnglat, (status, result) => {
          if (status === "complete" && result.info === "OK") {
            iMap.province = result.regeocode.addressComponent.province;
            iMap.city = result.regeocode.addressComponent.city;
            iMap.district = result.regeocode.addressComponent.district;
            iMap.address = result.regeocode.formattedAddress;
          }
        });
      };
    })
    .catch(e => {
      console.log(e);
    });
};

defineExpose({
  iMap
});
</script>

<style scoped lang="scss">
@import "../index.scss";
</style>

<style lang="scss">
.amap-sug-result {
  z-index: 10000;
}
</style>
🍀3. 弹窗组件AmapDialog.vue 🍀
<template>
  <el-dialog :model-value="visible" title="请选择" width="800" :before-close="handleClose">
    <AmapContainer ref="amapContainer" />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :disabled="amapContainer?.iMap?.canSubmit" @click="handleConfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="AmapExplore">
/*🔻
  // 使用方式
  // ❤️amapFlag: 控制弹窗显隐
  // ❤️iMap必须ref定义, 接收选择地址数据
  // 示例：
  // 💥<AmapExplore v-model:visible="amapFlag" v-model:amap="iMap" />💥
*/ 🔺 
import { ref, withDefaults } from "vue";
import { IAddress } from "../interface/index";
import AmapContainer from "./AmapContainer.vue";

withDefaults(
  defineProps<{
    visible: boolean;
    amap: Partial<IAddress>;
  }>(),
  {
    visible: false
  }
);

const amapContainer = ref();

// 定义emits
const emits = defineEmits<{
  "update:amap": [value: IAddress];
  "update:visible": [value: boolean];
}>();

const handleConfirm = () => {
  // delete amapContainer.value?.iMap?.canSubmit;
  emits("update:amap", amapContainer.value?.iMap);
  handleClose();
};

const handleClose = () => {
  emits("update:visible", false);
};
</script>

<style scoped lang="scss"></style>
🌼4. 表单组件AmapExplore/index.vue 🌼
<template>
  <el-row :gutter="gutter" :style="gutterStyle">
    <el-col :span="8">
      <el-form-item prop="province">
        <el-input
          v-model="iMapForm.province"
          ref="provinceRef"
          placeholder="省"
          size="large"
          style="width: 100%"
          @click="handleAmapChange"
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item prop="city">
        <el-input
          v-model="iMapForm.city"
          ref="cityRef"
          placeholder="市"
          size="large"
          style="width: 100%"
          @click="handleAmapChange"
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item prop="district">
        <el-input
          v-model="iMapForm.district"
          ref="districtRef"
          placeholder="县"
          size="large"
          style="width: 100%"
          @click="handleAmapChange"
        ></el-input>
      </el-form-item>
    </el-col>
  </el-row>
  <el-col :span="24">
    <el-form-item prop="address">
      <el-input v-model="iMapForm.address" placeholder="请输入详细地址" size="large" style="width: 100%"></el-input>
    </el-form-item>
  </el-col>
  <AmapDialog v-model:visible="amapFlag" v-model:amap="iMapForm" />
</template>

<script setup lang="ts" name="AmapExplore">
import { ref, reactive, watch, inject, watchEffect } from "vue";
import type { FormRules } from "element-plus";
import { IAddress } from "./interface/index";
import AmapDialog from "./components/AmapDialog.vue";

// 栅格间隔与样式
const gutter = 20;
const gutterStyle = {
  width: `calc(100% + ${gutter}px)`,
  "margin-bottom": `${gutter}px`
};

// 接收传入的formData和formRules
const { ruleForm, rules } = inject<{ ruleForm: Object; rules: any }>("aMap", { ruleForm: reactive({}), rules: reactive({}) });

const iMapForm = ref<IAddress>({
  province: "",
  city: "",
  district: "",
  address: "",
  lnglat: []
});

// 若地址有值，则赋予formData
watch(
  () => iMapForm,
  n => {
    // 为防止重复赋值
    if (n.value.province || n.value.city || n.value.district || n.value.address) {
      Object.assign(ruleForm, { ...iMapForm.value });
    }
  },
  {
    deep: true
  }
);

// 另处理经纬度lnglat
watch([() => iMapForm.value.province, () => iMapForm.value.city, () => iMapForm.value.district], n => {
  if (n.some(item => !item)) {
    iMapForm.value.lnglat = [];
  }
});

watch(
  () => iMapForm.value.lnglat,
  n => {
    if (!n.length) {
      Object.assign(ruleForm, iMapForm.value);
    }
  }
);

// 将formData赋值给iMapForm-主要作用为清空重置
watchEffect(() => {
  Object.assign(iMapForm.value, { ...ruleForm });
});

// form校验;
const iMapRules = reactive<FormRules<IAddress>>({
  province: [{ required: true, message: "请选择省", trigger: ["blur", "change"] }],
  city: [{ required: true, message: "请选择市", trigger: ["blur", "change"] }],
  district: [{ required: true, message: "请选择区、县", trigger: ["blur", "change"] }],
  address: [{ required: true, message: "请输入详细地址", trigger: ["blur", "change"] }]
});

// 合并校验数据;
watch(rules, () => Object.assign(rules, { ...iMapRules }), {
  immediate: true,
  deep: true
});

// 地图弹窗
const amapFlag = ref<boolean>(false);
const provinceRef = ref();
const cityRef = ref();
const districtRef = ref();
const handleAmapChange = () => {
  amapFlag.value = true;
  provinceRef.value.blur();
  cityRef.value.blur();
  districtRef.value.blur();
};
</script>

<style scoped lang="scss"></style>
5. 🌿scss文件 🌿
// AmapContainer
.address {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  padding: 0 12px;
  margin-bottom: 10px;
  line-height: 30px;
  border: 1px solid #ececec;
  border-radius: 4px;
}
#container {
  width: 100%;
  height: 400px;
  padding: 0;
  margin: 0;
}
🌴6. 类型定义interface/index.ts 🌴
export interface IAddress {
  province: string;
  city: string;
  district: string;
  address: string;
  lnglat: number[];
}
export interface IMap extends IAddress {
  canSubmit: boolean;
}
❕ ❕7. 地图组件内使用的高德AMAP_MAP_KEY和秘钥AMAP_SECRET_KEY可以自行设置

// 高德地图 key
export const AMAP_MAP_KEY: string = "****";
// 高德地图 安全密钥
export const AMAP_SECRET_KEY: string = "*****";

✨4. 父组件使用😎

  1. ☝️ 使用组件

<!-- 1. 使用组件 -->
<AmapExplore />
  1. ✌️使用provide向后代传入表单数据（formData）和校验规则（formRules）

// 2. 传入formData和formRules
provide("aMap", { ruleForm, rules });
  1. 👋完整代码示例：
<template>
  <div class="card amap-example">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules label-width="auto" style="max-width: 600px">
      <el-form-item label="Activity name" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="地址" required>
        <!-- 1. 使用组件 -->
        <AmapExplore />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="ruleForm.remark" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"> Create </el-button>
        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="amapExample">
import { reactive, ref, provide } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import AmapExplore from "@/components/AmapExplore/index.vue";

interface RuleForm {
  name: string;
  remark: string;
}
const ruleFormRef = ref<FormInstance>();
let ruleForm = reactive<RuleForm>({
  name: "",
  remark: ""
});

let rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  remark: [{ required: true, message: "请输入备注", trigger: "blur" }]
});

// 2. 传入formData和formRules
provide("aMap", { ruleForm, rules });

const submitForm = async (formEl: FormInstance | undefined) => {
  console.log(ruleForm, "s");
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

❗️ 5. 封装实例缺点💦

  1. 当选择地址之后，再次打开地图弹窗，更改地图标记点，地址会实时变更，
  2. 不论点击取消还是确认按钮，都会改变表单内部值
  3. 💢初始不会出现此问题💢
  4. 💪后续会改进😁😁😁😁
新茶十九
关注
  • 23
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
高德地图
海上漂泊的妞
12-15 278
1.Google地图的使用   通过以下步骤我们可以免费获取 API key 。 访问 https://code.google.com/apis/console/, 使用你的Google账号登陆。   登陆后会出现如下界面：   点击 "Create Project" 按钮。 在服务列表中找到 Google Maps API v3, 然后点击 "off"（关闭） 让其开启该服务器
Vue组件之高德地图地址选择功能的实例代码
01-21
注：本文基于上一篇文章【Vue-Cli 3.0 中配置高德地图 】 ，采用直接引入高德 SDK 的方式来使用高德地图api 一、效果图 二、组件要实现的功能 1. 如果有传入坐标点，则定位到坐标点 2. 如果没有传入坐标点，则定位到当前所在位置 3. 定位成功要在右侧显示经纬度和地址 4. 可以通过拖动 标记 来调整定位点 5. 标记 拖动后，右侧要显示拖动后的经纬度和地址 6. 点击确定按钮，返回最后的坐标点和地名给父组件 三、 组件实现具体代码 <template> <div class=map-box :style={ width: width, height: height
推荐使用Vue3谷歌地图组件：vue3-google-map
最新发布
gitblog_00099的博客
05-31 728
推荐使用Vue3谷歌地图组件：vue3-google-map 项目地址:https://gitcode.com/inocan-group/vue3-google-map Vue3的开发世界中，地图集成从未如此简单！欢迎尝试我们的开源项目——vue3-google-map，一个专为Vue 3设计的一组可组合组件，让您轻松使用谷歌地图服务。 项目介绍 vue3-google-map 是一款强大的工具，...
vue3 实现 Map 地图区域组件封装
weixin_50450473的博客
07-17 1977
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~其中通过后台返回的数据结构，name 名称必须与下载的 json 文件的name名相等，否则会导致 单击的 data数据为空或显示不出来。坑：地图echarts版本必须在5.0.0以下，否则不能显示，此处指定安装 echarts@4.9.0 即可。将下载的 json 放至assets下的 img文件夹 中。
【快速上手】Vue如何通过百度地图插件——vue-baidu-map插件实现地图轨迹与路线等功能
热门推荐
weixin_43746402的博客
06-28 1万+
现在挺多博主都做的挺完整的地图文档使用介绍等等，但有时候我们接触去选择自己做的效果时候还是会遇到很多不同的问题。这里我把我自己个人在各个检索下的文章，做出自己想要的效果地图，基础地图功能＋路线+运动轨迹的过程介绍一下对应组件使用与注意事项。
Vue3 Echarts散点图+高德地图+卫星地图（二）——Echarts配置散点图高德卫星地图版
zmsup.com
08-31 7584
Vue3 Echarts散点图+高德地图+卫星地图（二）——Echarts配置散点图高德卫星地图版
这可能是 Vue 接入百度地图的最佳组件了！
纯洁的微笑
04-28 3096
点击蓝字 关注我们将前端实验室设为星标精品文章第一时间阅读大家好,我是前端实验室的大师兄!最近负责的一个Vue项目中需要调用百度地图API做定位、检索等需求。按照百度地图官方 API 的接入文档，很多功能需要需要改造、封装，实在太繁琐了。经过查阅对比，最后发现了Vue Baidu Map这个好用的组件。Vue Baidu Map简介Vue Baidu Map 是一个基于 ...
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在子组件的模板中，我们使用`el-dialog`组件来创建一个对话框，对话框包含一个`el-form`。通过`:model`和`:rules`属性，我们关联了表单数据和验证规则。每个表单字段都由`el-form-item`组成，它们绑定到`form`对象的...
vue3-json-schema-form:基于jsonschema的vue3表单生成器
05-23
vue3-json-schema-form a form generator based on jsonschema for vue3 Project setup npm install npm run serve npm run build npm run test:unit npm run lint API 设计 value={value} xss=removed locale={...
使用form-create动态生成vue自定义组件和嵌套表单组件
10-17
`form-create`是一个专为Vue设计的工具，用于动态生成表单及自定义组件，使得构建复杂的表单场景变得简单。在本文中，我们将深入探讨如何使用`form-create`来动态生成vue自定义组件和嵌套表单组件。 首先，`form-...
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
Vue-Sku-Form 是一个专为电商领域设计的前端组件，它基于 Vue.js 框架和 ElementUI 组件库，旨在提供一个高度可配置的 SKU（Stock Keeping Unit，库存单位）表单生成器。在电商网站中，SKU 通常用于唯一标识商品的...
vue3项目中使用百度地图和高德地图，添加控件，搜索api, 热力图
weixin_59832677的博客
09-02 5317
map.addControl(new BMap.CityListControl({ showPanel: true })) // 添加城市列表控件。var pp = local.getResults().getPoi(0).point //获取第一个智能搜索的结果。map.addControl(new BMap.MapTypeControl()) //地图的显示类型：包括地图和卫星。map.addControl(new BMap.NavigationControl()) // 添加缩放控件。
基于vue+elementUI的网页中使用地图组件vue-amap高德地图
steveqobs
09-16 1万+
基于vue+elementUI的网页中使用地图组件vue-amap高德地图vue-amap高德地图一、注册高德地图开发者账号1.注册账号2.创建新应用二、安装和引入vue-amap三、在相应的vue页面中添加代码 vue-amap高德地图 一、注册高德地图开发者账号 1.注册账号 网址：https://lbs.amap.com/?ref=https://console.amap.com/dev/index 注册就不介绍了，根据自己的情况选择个人开发者或者企业账号注册成功之后，登录，右上角点击控制台进入 2
基于vue+elementUI的网页中使用地图组件vue-amap天地图
weixin_66961876的博客
11-29 2563
基于vue+elementUI的网页中使用地图组件vue-amap天地图
vue3/vite百度地图组件（点聚合，路书，热力图，自定义覆盖物等，api2，api3，webgl，离线都支持）
m0_60142433的博客
09-02 3329
vue3/vite百度地图组件（点聚合，路书，热力图，自定义覆盖物等，api2，api3，webgl，离线都支持）。组件使用灵活，可在地图ready事件中定制百度地图原生api功能。此外还封装了一些常用组件：比例尺，缩放，3D，卫星地图，定位，测距，自定义点，信息窗体，工交检索
Vue3集成高德地图：快速上手，实现你的业务需求
爱媳妇儿爱编程
10-16 7239
vue3集成高德地图细节优化总结
vue3项目使用高德地图AMap详细步骤
浅浅记录一下前端开发常见问题和解决方案
08-02 4817
高德地图、amap、vue3
在 vue3 中使用高德地图
weixin_64684095的博客
04-23 4513
自定义 Marker 内容可以是字符串拼接的 DOM 元素。可以根据 class 名去定义样式。//点标记显示内容`;如果不想使用 JS API 的结果面板，panel 可以缺省或者赋值 false，然后在 search()的回调中处理自己的逻辑，自定义搜索教程前往 输入提示与 POI 搜索。//在回调函数中使用插件功能placeSearch.search("北京大学", function (status, result) {//查询成功时，result 即对应匹配的 POI 信息})
vue3使用百度地图(详)
jyl919221lc的博客
03-29 1万+
百度地图学习，vue3学习地图，vue地图学习，AK密钥申请，vue-baidu-map-3x，自定义地图样式，vue-baidu-map-3x控件学习
vue3el-dialog里面的el-form里面的表单校验下次进来清除上次的校验结果
06-12
你好，针对你的问题，我理解的是你想在vue3的el-dialog中的el-form表单中进行校验，在下次打开对话框时，清除上次校验结果。如果我的理解有误，请指出。 针对你的问题，我提供以下思路： 1. 在el-dialog中，绑定visible属性，通过visible的变化来清除校验结果。 ``` <el-dialog :visible.sync="dialogVisible" @close="handleClose"> <el-form :model="form" :rules="rules" ref="form"> <!-- 表单内容 --> </el-form> </el-dialog> ``` 在data中定义dialogVisible变量，每次关闭对话框时，手动清空表单校验结果。 ``` data() { return { dialogVisible: false, form: { // 表单数据 }, rules: { // 表单校验规则 } }; }, methods: { handleClose() { this.dialogVisible = false; this.$nextTick(() => { this.$refs.form.clearValidate(); }); } } ``` 2. 在el-form中加入ref属性，通过ref获取el-form组件实例，然后手动清空表单校验结果。 ``` <el-dialog :visible.sync="dialogVisible"> <el-form :model="form" :rules="rules" ref="form"> <!-- 表单内容 --> </el-form> </el-dialog> ``` 在methods中定义clearValidate方法，在打开对话框前，先调用该方法手动清空表单校验结果。 ``` methods: { clearValidate() { this.$refs.form.clearValidate(); }, openDialog() { // 打开对话框前，先手动清空表单校验结果 this.clearValidate(); this.dialogVisible = true; } } ``` 希望以上思路可以帮助到你。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值