动态生成授权平台和期限选择列表及价格显示

本文介绍如何根据后端返回的树形结构数据，动态生成授权平台和期限选择列表，并实时显示对应价格。我们将使用原生javascript实现，并提供vue.js实现的思路。

数据结构:

后端返回的数据结构如下，这是一个树形结构，包含授权平台和对应的期限选项以及价格信息：

[
  {
    "title": "哔哩哔哩",
    "children": [
      {
        "id": 1,
        "platform": 1,
        "platform_title": "哔哩哔哩",
        "years": 0,
        "price": 0.01,
        "address": 1,
        "address_title": "一年",
        "show_title": "¥0.4元"
      },
      {
        "id": 19,
        "platform": 1,
        "platform_title": "哔哩哔哩",
        "years": 1,
        "price": 0.01,
        "address": 0,
        "address_title": "不限",
        "show_title": "¥1元"
      }
    ]
  },
  // ...其他平台数据
]

原生JavaScript实现:

const priceList = [
  // ... 后端返回的JSON数据 ...
];

const platSelect = document.querySelector(".au_plat select"); // 假设已存在<select>元素
const perSelect = document.querySelector(".au_per select");   // 假设已存在<select>元素
const priceEle = document.querySelector(".price");

let activePlatform;
let activeItem = priceList[0].children[0]; // 默认选中第一个选项

const renderPlatforms = (data) => {
  data.forEach(item => {
    const option = document.createElement('option');
    option.value = item.title;
    option.text = item.title;
    platSelect.appendChild(option);
  });

  platSelect.addEventListener('change', (e) => {
    const selectedPlatform = priceList.find(item => item.title === e.target.value);
    activePlatform = selectedPlatform;
    renderPeriods(selectedPlatform.children);
  });
};


const renderPeriods = (data) => {
  perSelect.innerHTML = ''; // 清空之前的选项
  data.forEach(item => {
    const option = document.createElement('option');
    option.value = item.id;
    option.text = item.address_title;
    perSelect.appendChild(option);
  });

  perSelect.addEventListener('change', (e) => {
    activeItem = data.find(item => item.id === parseInt(e.target.value, 10));
    updatePrice();
  });
};

const updatePrice = () => {
  priceEle.textContent = activeItem.show_title;
};

renderPlatforms(priceList);
updatePrice(); // 初始化价格

HTML结构: 确保你的HTML中包含以下结构，以便JavaScript代码能够正确地操作DOM元素。

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

<p class="price">￥0.01</p>
<div class="au_plat">
  <p class="type">授权平台：</p>
  <select></select> </div>
<div class="au_per">
  <p class="type">授权期限：</p>
  <select></select> </div>

Vue.js实现思路:

使用Vue.js可以更简洁地实现，可以使用v-for指令遍历数据，v-model指令绑定选择的值，计算属性计算价格。

这个原生JS实现提供了一个基本的框架，你可以根据你的具体需求进行修改和扩展，例如添加错误处理、加载动画等。 记住将priceList替换成你的实际后端数据。 Vue.js实现则更适合大型项目，因为它提供了更强大的数据管理和组件化能力。