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">
			<template v-if="data.banbenList.length">
				<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>
			</template>
			<template v-else>
				<view class="shiti-frame-box">
					<view class="ezy-no-sj">
						<icon></icon>
						<text>暂无数据</text>
					</view>
				</view>
			</template>
		</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.redirectTo({
		  url: `/pages/chanpinXuanze/index`
		})
	}

  function handleSelect(item) {
	  if (cacheManager.get('xuexi-shuxue')) {
	  	cacheManager.remove("xuexi-shuxue")
	  }
    uni.redirectTo({
      url: `/pages/chanpinneirong/index?banbenId=${item.id}&danyuanId=1&customType=3&chanpinId=${item.chanpinId}&dengjiId=${item.dengjiId}`
    })
  }

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


</script>

<style>

</style>