uniProject/pages/chanpinXuanze/banben.vue

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

		<view class="xbb-list-box">
			<view class="xbb-item-box" v-for="item in data.banbenList" :key="item.id">
				<!-- 封面 -->
				<image class="item-img-box" :src="item.cover" mode=""></image>
				<view class="item-content-box">
					<!-- 名称+等级 -->
					<view class="item-name">{{item.chanpinName}} {{item.dengjiName}}</view>
					<!-- 版本名称 -->
					<view class="item-bb">{{item.name}}</view>
				</view>
				<view class="item-play-btn" @click="handleSelect(item)"></view>
			</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>