banben.vue 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <view>
  3. <view>
  4. <view @click="handleBack"><</view>
  5. <view>选择版本</view>
  6. </view>
  7. <view v-for="item in data.banbenList" :key="item.id">
  8. <!-- 封面 -->
  9. <image :src="item.cover" mode=""></image>
  10. <!-- 名称+等级 -->
  11. <view>{{item.chanpinName}} {{item.dengjiName}}</view>
  12. <!-- 版本名称 -->
  13. <view>{{item.name}}</view>
  14. <view>播放按钮</view>
  15. </view>
  16. </view>
  17. <footTabbarVue :currentTabNumber="0"></footTabbarVue>
  18. </template>
  19. <script setup>
  20. import {reactive} from "vue";
  21. import {onLoad} from "@dcloudio/uni-app"
  22. import * as shuxueHttp from "@/api/chanpinShuxue.js"
  23. import footTabbarVue from "./components/footTabbar.vue";
  24. const data = reactive({
  25. dengjiId: null,
  26. banbenList: []
  27. })
  28. function getBanbenList() {
  29. shuxueHttp.getShuxueChanpinBanbenList({dengjiId: data.dengjiId}).then(res => {
  30. data.banbenList = res.data;
  31. })
  32. }
  33. function handleBack() {
  34. uni.navigateBack()
  35. }
  36. onLoad((options) => {
  37. data.dengjiId = options.dengjiId;
  38. getBanbenList();
  39. })
  40. </script>
  41. <style>
  42. </style>