uniProject/pages/chanpinXuanze/cp3/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">选择版本-L{{ data.dengjiId }}</view>
    </view>
	<view class="ezy-page-body">
		<view class="ezy-text-tab-box">
		  <ezyActiveVue class="text-item" @click="handleSelectShangce" :class="{active: data.isShangce}">上册</ezyActiveVue>
		  <ezyActiveVue class="text-item" @click="handleSelectXiace" :class="{active: !data.isShangce}">下册</ezyActiveVue>
		</view>
		<template v-if="data.isShangce" >
		  <template v-if="data.banbenList.length">
			  <view class="xbb-list-box" key="1">
				 <ezyActiveVue class="ezy-list-item-active xbb-item-box" v-for="item in data.banbenList" :key="item.id"
					 @aclick="handleSelect(item)">
					<text class="xbb-item-text">{{item.name}}</text>
					<icon class="arrow-icon"></icon>
				 </ezyActiveVue> 
				 <view class="ezy-no-more xbb-list-no-more">没有更多</view>
			  </view>
		  </template>
		  <template v-else>
			<view class="shiti-frame-box">
			  <view class="ezy-no-sj">
				<icon></icon>
				<text>暂无数据</text>
			  </view>
			</view>
		  </template>
		</template>

		<template v-else  >
		  <template v-if="data.banbenList2.length">
			<view class="xbb-list-box" key="2">
			  <ezyActiveVue class="ezy-list-item-active xbb-item-box" v-for="item in data.banbenList2" :key="item.id"
							@aclick="handleSelect(item)">
				<text class="xbb-item-text">{{item.name}}</text>
				<icon class="arrow-icon"></icon>
			  </ezyActiveVue>
			  <view class="ezy-no-more xbb-list-no-more">没有更多</view>
			</view>
			
		  </template>
		  <template v-else>
			<view class="shiti-frame-box">
			  <view class="ezy-no-sj">
				<icon></icon>
				<text>暂无数据</text>
			  </view>
			</view>
		  </template>
		</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 handleSelectShangce() {
  data.isShangce = true;
  uni.showLoading({
    title: '加载中',
    mask: true
  })
  setTimeout(function () {
    uni.hideLoading();
  }, 200);
}

function handleSelectXiace() {
  data.isShangce = false
  uni.showLoading({
    title: '加载中',
    mask: true
  })
  setTimeout(function () {
    uni.hideLoading();
  }, 200);
}

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>