如何实现根据选择不同的授权平台动态显示其对应的授权期限和价格？

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元"
      }
    ]
  },
  // ...更多平台数据
]

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();

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

<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>