banben.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <view class="ezy-xbb-page">
  3. <view class="icon-title-navBar-box">
  4. <view class="nav-bar-icon" @click="handleBack"></view>
  5. <view class="nav-bar-title">选择版本</view>
  6. </view>
  7. <view class="xbb-list-box">
  8. <view class="xbb-item-box" v-for="item in data.banbenList" :key="item.id">
  9. <!-- 封面 -->
  10. <image class="item-img-box" :src="item.cover" mode=""></image>
  11. <view class="item-content-box">
  12. <!-- 名称+等级 -->
  13. <view class="item-name">{{item.chanpinName}} {{item.dengjiName}}</view>
  14. <!-- 版本名称 -->
  15. <view class="item-bb">{{item.name}}</view>
  16. </view>
  17. <view class="item-play-btn" @click="handleSelect(item)"></view>
  18. </view>
  19. </view>
  20. <CustomTabBar :currentTabNumber="0"></CustomTabBar>
  21. </view>
  22. </template>
  23. <script setup>
  24. import {reactive} from "vue";
  25. import {onLoad} from "@dcloudio/uni-app"
  26. import * as shuxueHttp from "@/api/chanpinShuxue.js"
  27. import CustomTabBar from "@/components/custom-tabbar/custom-tabbar.vue";
  28. const data = reactive({
  29. dengjiId: null,
  30. banbenList: []
  31. })
  32. function getBanbenList() {
  33. shuxueHttp.getShuxueChanpinBanbenList({dengjiId: data.dengjiId}).then(res => {
  34. data.banbenList = res.data;
  35. })
  36. }
  37. function handleBack() {
  38. uni.redirectTo({
  39. url: `/pages/chanpinXuanze/index`
  40. })
  41. }
  42. function handleSelect(item) {
  43. uni.redirectTo({
  44. url: `/pages/chanpinneirong/index?banbenId=${item.id}&danyuanId=1&customType=3&chanpinId=${item.chanpinId}&dengjiId=${item.dengjiId}`
  45. })
  46. }
  47. onLoad((options) => {
  48. data.dengjiId = options.dengjiId;
  49. getBanbenList();
  50. })
  51. </script>
  52. <style>
  53. </style>