当前位置：首页 > 文章列表 > 文章 > 前端 > 动态价格计算及显示方法

动态价格计算及显示方法

2025-02-26 19:45:07 0浏览收藏

本文介绍如何根据选择的授权平台和期限动态计算并显示价格。通过遍历后端返回的树形数据（例如包含哔哩哔哩、微博、快手等平台的授权信息），前端页面使用 Vue.js 或原生 JavaScript 实现授权平台和期限的选择。用户选择不同的授权平台和期限后，系统会根据 `price_list` 数据动态更新显示对应价格。文章详细讲解了数据结构、代码实现和动态更新价格的逻辑，帮助开发者快速构建类似功能。

遍历树形数据，动态展示授权平台和期限

需求

根据后端返回的树形数据，展示授权平台和授权期限
用户选择不同的授权平台时，展示对应平台下的授权期限
最终显示所选授权平台和期限对应的价格

后台返回的数据

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元"
            }
        ]
    },
    {
    title: "快手",
        children: [
            {
                id: 16,
                platform: 2,
                platform_title: "快手",
                years: 0,
                price: 0.01,
                address: 0,
                address_title: "不限",
                show_title: "¥0.5元"
            }
        ]
    }
]

vue 实现

<template>
  <div>
    <p class="price">￥0.01</p>
    <div class="au_plat">
      <p class="type">授权平台：</p>
      <div class="select">
        <el-select v-model="platform" @change="updatePrice">
          <el-option
            v-for="item in platforms"
            :key="item.platform"
            :label="item.title"
            :value="item.platform"
          />
        </el-select>
      </div>
    </div>
    <div class="au_per">
      <p class="type">授权期限：</p>
      <div class="select">
        <el-select v-model="address" @change="updatePrice">
          <el-option
            v-for="item in addressList"
            :key="item.address"
            :label="item.address_title"
            :value="item.address"
          />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const priceList = reactive([
      {
        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元"
          }
        ]
      },
      {
        title: "快手",
        children: [
          {
            id: 16,
            platform: 2,
            platform_title: "快手",
            years: 0,
            price: 0.01,
            address: 0,
            address_title: "不限",
            show_title: "¥0.5元"
          }
        ]
      }
    ]);

    const state = reactive({
      chosenPlatform: null,
      chosenAddress: null,
      platform: null,
      address: null,
      platforms: [],
      addressList: [],
    });

    // 初始化
    const init = () => {
      state.platform = priceList[0].children[0].platform;
      state.address = priceList[0].children[0].address;
      state.platforms = priceList.map((item) => {
        return {
          platform: item.children[0].platform,
          title: item.title,
        };
      });
    };

    // 更新平台
    const updatePlatform = (val) => {
      const platformData = priceList.find((item) => item.children[0].platform === val);
      state.addressList = platformData.children.map((item) => {
        return {
          address: item.address,
          address_title: item.address_title,
        };
      });
      state.address = platformData.children[0].address;
    };

    // 更新价格
    const updatePrice = () => {
      const chosenPlatformData = priceList.find(
        (item) => item.children[0].platform === state.platform
      );
      const chosenAddressData = chosenPlatformData.children.find(
        (item) => item.address === state.address
      );
      state.chosenPlatform = chosenPlatformData.title;
      state.chosenAddress = chosenAddressData.address_title;
    };

    // 监听平台和地址变化
    watchEffect(() => {
      updatePlatform(state.platform);
      updatePrice();
    });

    init();

    return {
      platform: state.platform,
      address: state.address,
      platforms: state.platforms,
      addressList: state.addressList,
      chosenPlatform: state.chosenPlatform,
      chosenAddress: state.chosenAddress,
      updatePrice,
    };
  },
};
</script>

原生 JavaScript 实现

const priceList = [
    {
        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元"
            },
            {

以上就是《动态价格计算及显示方法》的详细内容，更多关于的资料请关注golang学习网公众号！