uniProject/pages/chanpinXuanze/banben.vue

<template>
	<view>
		<view class="icon-title-navBar-box">
			<view @click="handleBack"><</view>
			<view class="nav-bar-title">选择版本</view>
		</view>

		<view v-for="item in data.banbenList" :key="item.id">
			<!-- 封面 -->
			<image :src="item.cover" mode=""></image>
			<!-- 名称+等级 -->
			<view>{{item.chanpinName}} {{item.dengjiName}}</view>
			<!-- 版本名称 -->
			<view>{{item.name}}</view>

			<view @click="handleSelect(item)">播放按钮</view>
		</view>
		<CustomTabBar :currentTabNumber="0"></CustomTabBar>
	</view>
</template>

<script setup>
	import {reactive} from "vue";
	import {onLoad} from "@dcloudio/uni-app"
	import * as shuxueHttp from "@/api/chanpinShuxue.js"
  import CustomTabBar from "@/components/custom-tabbar/custom-tabbar.vue";

	const data = reactive({
		dengjiId: null,
		banbenList: []
	})
	function getBanbenList() {
		shuxueHttp.getShuxueChanpinBanbenList({dengjiId: data.dengjiId}).then(res => {
			data.banbenList = res.data;
		})
	}

	function handleBack() {
		uni.navigateBack()
	}

  function handleSelect(item) {
    uni.redirectTo({
      url: `/pages/chanpinXuanze/xuexi?banbenId=${item.id}`
    })
  }

	onLoad((options) => {
		data.dengjiId = options.dengjiId;
		getBanbenList();
	})


</script>

<style>

</style>