uniProject/pages/chanpinXuanze/cp4/banben.vue

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

    <view>
      <view @click="data.isShangce = true">上册</view>
      <view @click="data.isShangce = false">下册</view>
    </view>

    <view v-if="data.isShangce" class="ezy-page-body">
      <template v-if="data.banbenList.length">
		  <view class="xbb-list-box">
			 <ezyActiveVue class="ezy-list-item-active xbb-item-box" v-for="item in data.banbenList" :key="item.id"
			     @aclick="handleSelect(item)">
			 	<text class="book-text">{{item.name}}</text>
			 	<icon class="arrow-icon"></icon>
			 </ezyActiveVue> 
		  </view>
		<view class="ezy-no-more">没有更多</view>
      </template>
      <template v-else>
        <view class="shiti-frame-box">
          <view class="ezy-no-sj">
            <icon></icon>
            <text>暂无数据</text>
          </view>
        </view>
      </template>
    </view>

    <view v-else class="ezy-page-body">
      <template v-if="data.banbenList2.length">
        <view class="xbb-list-box">
          <ezyActiveVue class="ezy-list-item-active xbb-item-box" v-for="item in data.banbenList" :key="item.id"
                        @aclick="handleSelect(item)">
            <text class="book-text">{{item.name}}</text>
            <icon class="arrow-icon"></icon>
          </ezyActiveVue>
        </view>
        <view class="ezy-no-more">没有更多</view>
      </template>
      <template v-else>
        <view class="shiti-frame-box">
          <view class="ezy-no-sj">
            <icon></icon>
            <text>暂无数据</text>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup>
import {reactive} from "vue";
import {onLoad} from "@dcloudio/uni-app"
import * as danciHttp from "@/api/chaojidanci.js"
import cacheManager from "@/utils/cacheManager.js";
import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";

const data = reactive({
  dengjiId: null,
  banbenList: [],
  banbenList2: [],
  isShangce: true,
})

function getBanbenList() {
  danciHttp.getDanciChanpinBanbenList({dengjiId: data.dengjiId}).then(res => {
    data.banbenList = res.data.banbenList1;
    data.banbenList2 = res.data.banbenList2;
  })
}

function handleBack() {
  uni.switchTab({
    url: `/pages/chanpinXuanze/index`
  })
}

function handleSelect(item) {
  const opt = {
    banbenId: item.id,
  }
  danciHttp.getDanciChanpinBanbenSave(opt).then(res => {
    if (!res.data) { return;}
    cacheManager.get('contentInfo') && cacheManager.remove('contentInfo');
    // 跳转
    uni.switchTab({
      url: "/pages/chanpinneirong/index"
    })
  })
}

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


</script>

<style>

</style>