动态显示授权平台期限和价格

本文介绍如何根据选择的授权平台动态显示其对应的授权期限和价格。我们将使用javascript实现这一功能，并提供vue.js的示例代码。

数据结构:

我们假设后端返回的数据结构如下：

price_list: [
  {
    "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元"
      }
    ]
  },
  {
    "title": "微博",
    "children": [
      {
        "id": 17,
        "platform": 3,
        "platform_title": "微博",
        "years": 0,
        "price": 0.01,
        "address": 0,
        "address_title": "一年",
        "show_title": "¥0.2元"
      },
      {
        "id": 13,
        "platform": 3,
        "platform_title": "微博",
        "years": 0,
        "price": 0.01,
        "address": 0,
        "address_title": "五年",
        "show_title": "¥1元"
      }
    ]
  },
  // ...更多平台数据
]

JavaScript实现:

const priceList = [ /* ... 上述JSON数据 ... */ ];

const selectPlatform = document.getElementById("platformSelect");
const selectPeriod = document.getElementById("periodSelect");
const priceDisplay = document.getElementById("priceDisplay");

function updateOptions() {
  const selectedPlatform = selectPlatform.value;
  const platformData = priceList.find(p => p.platform === parseInt(selectedPlatform));

  selectPeriod.innerHTML = ''; // 清空之前的选项
  if (platformData) {
    platformData.children.forEach(period => {
      const option = document.createElement('option');
      option.value = period.address;
      option.text = period.address_title;
      selectPeriod.appendChild(option);
    });
    updatePrice();
  } else {
    priceDisplay.textContent = "请选择平台";
  }
}

function updatePrice() {
  const selectedPlatform = selectPlatform.value;
  const selectedPeriod = selectPeriod.value;
  const platformData = priceList.find(p => p.platform === parseInt(selectedPlatform));
  const periodData = platformData.children.find(p => p.address === parseInt(selectedPeriod));
  priceDisplay.textContent = periodData ? periodData.show_title : "请选择期限";
}


// 初始化平台选择框
priceList.forEach(platform => {
  const option = document.createElement('option');
  option.value = platform.platform;
  option.text = platform.title;
  selectPlatform.appendChild(option);
});

selectPlatform.addEventListener('change', updateOptions);
selectPeriod.addEventListener('change', updatePrice);

// 初始显示
updateOptions();

HTML结构 (示例):

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

<select id="platformSelect"></select>
<select id="periodSelect"></select>
<p>价格: <span id="priceDisplay"></span></p>

Vue.js实现 (简化版):

<template>
  <div>
    <select v-model="selectedPlatform" @change="updateOptions">
      <option v-for="platform in priceList" :key="platform.platform" :value="platform.platform">{{ platform.title }}</option>
    </select>
    <select v-model="selectedPeriod" @change="updatePrice">
      <option v-for="period in periodOptions" :key="period.address" :value="period.address">{{ period.address_title }}</option>
    </select>
    <p>价格: {{ price }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      priceList: [ /* ... 上述JSON数据 ... */ ],
      selectedPlatform: null,
      selectedPeriod: null,
      price: '',
      periodOptions: []
    };
  },
  computed: {
    platformData() {
      return this.priceList.find(p => p.platform === this.selectedPlatform);
    }
  },
  methods: {
    updateOptions() {
      this.periodOptions = this.platformData ? this.platformData.children : [];
      this.updatePrice();
    },
    updatePrice() {
      const periodData = this.periodOptions.find(p => p.address === this.selectedPeriod);
      this.price = periodData ? periodData.show_title : '';
    }
  },
  mounted() {
    if (this.priceList.length > 0) {
      this.selectedPlatform = this.priceList[0].platform;
      this.updateOptions();
    }
  }
};
</script>

记住替换/* ... 上述JSON数据 ... */为你的实际数据。 这两个示例都实现了根据平台选择动态更新期限选项和价格的功能。 Vue.js版本更简洁，并利用了数据绑定和响应式特性。 选择哪个版本取决于你的项目需求和技术栈。