图书分类，图书列表样式修改，答题器优化

闫增涛

2024-03-20 ecbc81c918a288dc752b1634b3f545f795d992aa

图书分类，图书列表样式修改，答题器优化

 custom-tab-bar/index.js

@@ -8,6 +8,7 @@
  methods: {
    onChange(event) {
      this.setData({ active: event.detail.value });
      console.log(this.data.active);
      wx.switchTab({
        url: this.data.list[event.detail.value].url.startsWith('/')
          ? this.data.list[event.detail.value].url

 custom-tab-bar/index.wxml

@@ -3,8 +3,9 @@
    <view class="custom-tab-bar-wrapper">
      <!-- <t-icon prefix="wr" name="{{item.icon}}" size="48rpx" />
      <view class="text">{{ item.text }}</view> -->
      <t-image wx:if="{{active !== index}}" class="tabImg" src="{{item.icon}}" mode="heightFix" width="22" height="22" />
      <t-image wx:else class="tabImg" src="{{item.activeIcon}}" mode="heightFix" width="22" height="22" />
      <!-- <t-image wx:if="{{active !== index}}" class="tabImg" src="{{item.icon}}" mode="heightFix" width="22" height="22" />
      <t-image wx:else class="tabImg" src="{{item.activeIcon}}" mode="heightFix" width="22" height="22" /> -->
      <t-image class="tabImg" src="{{active == index ? item.activeIcon : item.icon}}" width="22" height="22"></t-image>
      <view class="text">{{ item.text }}</view>
    </view>
  </t-tab-bar-item>

 packageBookService/pages/bookServices/detail/index.wxml

@@ -35,20 +35,20 @@
      <view class="detail-right">
        <view class="book-name">{{bookDetail.name}}</view>
        <view class="book-message">
          <view class="message-li">
          <view class="message-li" wx:if="{{bookDetail.seriesName}}">
            <view class="li-title">丛书名：</view>
            <view class="li-content">{{bookDetail.seriesName}}</view>
          </view>
          <view class="message-li">
            <view class="li-title">作者：</view>
            <view class="li-title" wx:if="{{bookDetail.author}}">作者：</view>
            <view class="li-content">{{bookDetail.author}}</view>
          </view>
          <view class="message-li">
          <view class="message-li" wx:if="{{bookDetail.isbn}}">
            <view class="li-title">ISBN：</view>
            <view class="li-content">{{bookDetail.isbn}}</view>
          </view>
          <view class="message-li">
            <view class="li-title">出版时间：</view>
            <view class="li-title" wx:if="{{bookDetail.publicationDate}}">出版时间：</view>
            <view class="li-content">{{bookDetail.publicationDate}}</view>
          </view>
          <view class="message-li" wx:if="{{bookDetail.class}}" style="height: 80rpx">
@@ -56,6 +56,7 @@
            <view class="class-name showTow">{{bookDetail.class}}</view>
          </view>
        </view>
        <t-image src="/static/images/bookService/detail/square.png" class="right-background"></t-image>
      </view>
    </view>
    <!-- 销售信息 -->
@@ -136,8 +137,8 @@
      </view>
      <view class="btn-text">纸质样书申请</view>
    </view>
    <view class="shopCar" bind:tap="addBookShopcCar">加入购物车</view>
    <view class="buy" bind:tap="buyBtn">立即购买</view>
    <view class="shopCar {{tabValue == 'jsek_teachingResources' ? 'disabledColor' : 'shopCarColor' }}" bind:tap="addBookShopcCar">加入购物车</view>
    <view class="buy  {{tabValue == 'jsek_teachingResources' ? 'disabledColor' : 'buyColor' }}" bind:tap="buyBtn">立即购买</view>
  </view>
</scroll-view>
<!-- 我要建议弹窗 -->

 packageBookService/pages/bookServices/detail/index.wxss

@@ -32,6 +32,19 @@
  margin-right: 36rpx;
}

.detail-right {
  position: relative;
}

.right-background {
  position: absolute;
  top: 80rpx;
  right: -80rpx;
  z-index: 0;
  width: 160rpx;
  height: 160rpx;
}

.detail-right .book-name {
  width: 420rpx;
  font-weight: bold;
@@ -76,7 +89,7 @@
}

.class-name {
  height: 2.5em;
  height: 2.8em;
  width: 280rpx;
  font-size: 28rpx;
}
@@ -249,21 +262,22 @@
  color: #fff;
}

.shopCar {
.shopCarColor {
  background-color: #F1AC37;
}

.buy {
.buyColor {
  background-color: #F14B3B;
}

.disabledColor {
  background-color: #d9d9d9;
}

.tab-box {
  min-height: 550rpx;
}

.note-list {
  /* margin-bottom: 80rpx; */
}

.tab-class {
  --td-loading-color: #ff6c00

 packageBookService/pages/bookServices/examination/examination.js

@@ -282,13 +282,15 @@
      } else {
        return false
      }
    } else {
    } else if (typeof data == 'object') {
      const answer = data.find((item) => item.length > 0)
      if (answer) {
        return true
      } else {
        return false
      }
    } else {
      return false
    }
  },
  // 提交逻辑
@@ -712,7 +714,7 @@
      loading: false,
    })
  },
  // 批改题目 （练习，我的错题，我的收藏）
  // 批改题目 （练习，我的错题，我的收藏,，组卷）
  handleQuestion(num) {
    const questionList = this.data.questionDataList
    const index = num - 1 >= 0 ? num - 1 : 0
@@ -1332,7 +1334,6 @@
  },
  // 获取组卷题目列表
  async getMockDataList(questionList, oldList) {
    console.log(questionList, oldList);
    const questionDataList = this.data.questionDataList
    questionList.forEach(async (pathitem, pathindex) => {
      let itemIds = []
@@ -1451,7 +1452,6 @@
          })
          let questionList = []
          const cardUpdatedList = this.data.cardList
          // if (flag == this.data.idPathList.length) {
          cardUpdatedList.forEach(aitem => {
            aitem.infoList.forEach((bitem, bindex) => {
              questionList.push(bitem)
@@ -1462,6 +1462,7 @@
            questionDataList: questionList,
            cardList: cardUpdatedList
          })
          console.log('组卷题目列表', this.data.questionDataList);
        })
      })
    })

 packageBookService/pages/bookServices/examination/examination.wxml

@@ -43,7 +43,7 @@
    bind:onChangeInput="onChangeInput"
    bind:changeSwiper="changeSwiper"
  ></question-list>
  <view class="lodaing-box">
  <view class="lodaing-box" wx:if="{{loading}}">
    <t-loading
      theme="circular"
      size="80rpx"

 packageBookService/pages/bookServices/examination/questionList/index.wxml

@@ -39,8 +39,8 @@
        <!-- 单选题 -->
        <t-radio-group wx:if="{{item.questionType == 'singleChoice' || item.questionType == 'judge'}}" defaultValue="{{item.userAnswer}}" disabled="{{item.isComplete}}" bind:change="onChangeRadio" class="radio-group" data-value="{{item.option}}" data-id="{{item.id}}">
          <view wx:for="{{item.option}}" wx:for-item="contentItem" wx:for-index="contentIndex" wx:key="contentIndex">
            <t-radio value="{{contentItem.value}}" icon="none" placement="right" borderless style="color: {{isNight ? '#fff' : '#000'}}; background-color:{{isNight ? '#000' : '#fff'}}">
              <view class="radio-item {{item.answer == contentItem.value && item.answer == item.userAnswer  ? 'radio-correct' : item.userAnswer == contentItem.value && item.userAnswer != item.answer ?'radio-error' :''}}" style="color: {{isNight ? '#fff' : '#000'}}; background-color:{{isNight ? '#000' : '#fff'}}">
            <t-radio value="{{contentItem.value}}" icon="none" placement="right" borderless>
              <view class="radio-item {{item.answer == contentItem.value && item.answer == item.userAnswer  ? 'radio-correct' : item.userAnswer == contentItem.value && item.userAnswer != item.answer ?'radio-error' :''}}">
                <!-- 仅文字 -->
                <text wx:if="{{item.optionStyle == 'Txt'}}">{{contentItem.value}}、{{contentItem.txt}}</text>
                <!-- 仅图片 -->
@@ -96,15 +96,15 @@
      <!-- 解析 -->
      <view class="analysis" wx:if="{{item.isComplete}}">
        <view class="analysis-answer">
          <view class="answer-correct">
          <view class="answer-correct answer-center">
            <text class="analysis-title-box">正确答案：</text>
            <rich-text nodes="{{item.answer}}" style="font-size: 40rpx"></rich-text>
          </view>
          <view class="answer-error">
          <view class="answer-center marginL {{item.isRight ? 'answer-correct' : 'answer-error'}}" wx:if="{{item.questionType !== 'shortAnswer'}}">
            <text class="analysis-title-box">您的答案：</text><text class="answer-text">{{item.userAnswer}}</text>
          </view>
        </view>
        <view class="analysis-text" wx:if="{{item.analysisCon}}">
        <view class="analysis-text" wx:if="{{item.analysisCon}}" style="color: {{isNight ? '#fff' : '#000'}};">
          答案解析：<rich-text nodes="{{item.analysisCon}}" class="analysis-content"></rich-text>
        </view>
      </view>

 packageBookService/pages/bookServices/examination/questionList/index.wxss

@@ -1,7 +1,7 @@
/* pages/bookServices/examination/questionList/index.wxss */
.question-list {
  width: 100%;
  height: 90%;
  width: 95%;
  height: 86%;
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
@@ -113,7 +113,7 @@

.analysis-answer {
  display: flex;
  justify-content: space-between;
  /* justify-content: space-between; */
}

.answer-correct {
@@ -124,6 +124,15 @@
  color: #EE1818;
}

.marginL {
  margin-left: 140rpx;
}

.answer-center {
  display: flex;
  align-items: center;
}

.answer-text {
  font-size: 40rpx;
}

 packageBookService/pages/bookServices/examination/questionOptions/index.js

@@ -48,6 +48,10 @@
    mockSumTime: {
      type: Number,
      value: 0,
    },
    isNight: {
      type: Boolean,
      value: false
    }
  },

@@ -60,7 +64,7 @@
    questionCardState: false,
    setUpPopup: false,
    testReportState: false,
    sliderValue: 0,
    sliderValue: 10,
    useTime: '',
    radioItem: 'daytime'
  },

 packageBookService/pages/bookServices/examination/questionOptions/index.wxml

@@ -1,19 +1,19 @@
<!--pages/bookServices/examination/questionOptions/index.wxml-->
<view class="page-bottom">
  <view class="li-option" bind:tap="setCollect">
<view class="page-bottom" style="color: {{isNight ? '#fff' : '#000'}}; background-color:{{isNight ? '#000' : '#fff'}}">
  <view class="li-option" bind:tap="setCollect" style="color: {{isNight ? '#fff' : '#000'}};">
    <t-image src="{{ questionDataList[currentIndex].isCollect ? '/static/images/bookService/detail/collecting.png' : '/static/images/bookService/examination/collect.png'}}">
    </t-image>
    收藏
  </view>
  <view class="li-option" bind:tap="handlePopup">
  <view class="li-option" bind:tap="handlePopup" style="color: {{isNight ? '#fff' : '#000'}};">
    <t-image src="/static/images/bookService/examination/questionCard.png"></t-image>
    答题卡
  </view>
  <view class="li-option" bind:tap="setUpBtn">
  <view class="li-option" bind:tap="setUpBtn" style="color: {{isNight ? '#fff' : '#000'}};">
    <t-image src="/static/images/bookService/examination/setting.png"></t-image>
    设置
  </view>
  <view class="li-option" bind:tap="resterBtn" wx:if="{{answerType == 'option' || answerType == 'mock'}}">
  <view class="li-option" bind:tap="resterBtn" wx:if="{{answerType == 'option' || (answerType == 'mock' && !submitStatus)}}" style="color: {{isNight ? '#fff' : '#000'}};">
    <t-image src="/static/images/bookService/examination/reset.png"></t-image>
    重做
  </view>
@@ -66,7 +66,7 @@
    <view class="brightness">
      <text>A-</text>
      <view class="brightness-slider">
        <t-slider defaultValue="{{30}}" theme="capsule" />
        <t-slider value="{{sliderValue}}" theme="capsule" step="{{10}}" bind:change="onChangeSlider" />
      </view>

      <text>A+</text>
@@ -77,7 +77,7 @@
        <view class="card {{radioItem == 'daytime' ? 'card--active' : ''}}">
          <t-radio value="daytime" icon="none" borderless>
            <view class="radio-content" slot="content">
              <t-image src="{{ radioItem == 'daytime' ? '/static/images/bookService/detail/practice-icon.png' : '/static/images/bookService/detail/notest.png'}}"></t-image>
              <t-image src="{{ radioItem == 'daytime' ? '/static/images/bookService/examination/rijian.png' : '/static/images/bookService/detail/notest.png'}}"></t-image>
              <text style="color: {{radioItem == 'daytime' ? '#fff':''}};">日间模式</text>
            </view>
          </t-radio>
@@ -85,7 +85,7 @@
        <view class="card {{radioItem == 'night' ? 'card--active' : ''}}">
          <t-radio value="night" icon="none" borderless>
            <view class="radio-content" slot="content">
              <t-image src="{{ radioItem == 'night' ? '/static/images/bookService/detail/practice-icon.png' : '/static/images/bookService/detail/notest.png'}}"></t-image>
              <t-image src="{{ radioItem == 'night' ? '/static/images/bookService/detail/practice-icon.png' : '/static/images/bookService/examination/yejian.png'}}"></t-image>
              <text style="color: {{radioItem == 'night' ? '#fff':''}};">夜间模式</text>
            </view>
          </t-radio>

 packageBookService/pages/bookServices/examination/questionOptions/index.wxss

@@ -195,6 +195,7 @@

.brightness-slider {
  width: 80%;
  --td-slider-active-color: #ff6c00;
}

.test-radio {
@@ -208,6 +209,7 @@
.test-radio image {
  width: 34rpx;
  height: 34rpx;
  margin-right: 18rpx;
}

.card {

 packageBookService/pages/bookServices/examination/questionSchedule/index.js

@@ -25,9 +25,9 @@
      type: String,
      value: ''
    },
    isNight:{
      type:Boolean,
      value:false
    isNight: {
      type: Boolean,
      value: false
    }
  },
  created(
@@ -90,13 +90,15 @@
        } else {
          return false
        }
      } else {
      } else if (typeof data == 'object') {
        const answer = data.find((item) => item.length > 0)
        if (answer) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    // // 格式化时间

 packageBookService/pages/bookServices/list/index.js

@@ -47,6 +47,8 @@
    loadingProps: {
      size: '50rpx',
    },
    loading: false,
    noData: false
  },
  /**
   * 生命周期函数--监听页面加载
@@ -138,7 +140,6 @@
   * 页面上拉触底事件的处理函数
   */
  onReachBottom(e) {
    console.log('底部');
    const flag = this.data.bookList.length < this.data.pageCount.total
    if (flag) {
      this.setData({
@@ -275,6 +276,10 @@
  },
  // 获取图书列表
  getBookList(path) {
    this.setData({
      loading: true,
      noData: false
    })
    let sort;
    let pathObj = {};
    if (this.data.pathList.length) {
@@ -336,9 +341,15 @@
      this.setData({
        bookList: res.datas,
        enable: false,
        "pageCount.total": res.total
        "pageCount.total": res.total,
        loading: false
      });
      console.log('图书列表', res, this.data.pageCount);
      console.log('图书列表', res.datas);
      if (!res.datas.length) {
        this.setData({
          noData: true
        })
      }
    });
  },
  // 一级分类切换
@@ -371,7 +382,6 @@
      pathList: pathList,
      'secondList.value': e.detail.value,
    });

  },
  // 
  onConfirmSecond() {

 packageBookService/pages/bookServices/list/index.json

@@ -6,7 +6,8 @@
    "t-image": "tdesign-miniprogram/image/image",
    "t-search": "tdesign-miniprogram/search/search",
    "t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh",
    "t-loading": "tdesign-miniprogram/loading/loading"
    "t-loading": "tdesign-miniprogram/loading/loading",
    "t-empty": "tdesign-miniprogram/empty/empty"
  },
  "navigationStyle": "custom"
}

 packageBookService/pages/bookServices/list/index.wxml

@@ -10,8 +10,8 @@
<view class="bookServices-list">
  <view class="list-header">
    <scroll-view scroll-x="{{true}}" class="header-scroll">
      <t-dropdown-menu>
        <t-dropdown-item options="{{stairList.options}}" value="{{stairList.value}}" bindchange="onChangeStair" />
      <t-dropdown-menu style="width: 800rpx;">
        <t-dropdown-item options="{{stairList.options}}" value="{{stairList.value}}" bindchange="onChangeStair" style="background-color: #F6F6F6;" />
        <t-dropdown-item label="二级" options="{{secondList.options}}" optionsColumns="2" multiple value="{{secondList.value}}" bind:confirm="onConfirmSecond" bind:change="onChangeSecond" />
        <t-dropdown-item label="重点项目" options="{{majorProjectList.options}}" optionsColumns="2" multiple defaultValue="{{majorProjectList.value}}" bind:confirm="changeMajorProject" bind:reset="resetMajorProject" />
        <t-dropdown-item label="新形态教材" options="{{newTextBook.options}}" optionsColumns="2" multiple defaultValue="{{newTextBook.value}}" bind:confirm="changeNewText" bind:reset="resetNewText" />
@@ -31,13 +31,22 @@
        <view class="title-box"></view>
        <view class="title-name">{{assortCheck.name}}</view>
      </view>
      <view class="book-list">
        <view class="book-box" wx:for="{{bookList}}" wx:key="id" bind:tap="goDetail" data-book="{{item}}">
          <view class="book-img">
            <t-image src="{{item.icon}}" width="105" height="145" aria-label="{item.name{}}" />
      <view class="page-content">
        <view class="book-list" wx:if="{{!loaidng}}">
          <view class="book-box" wx:for="{{bookList}}" wx:key="id" bind:tap="goDetail" data-book="{{item}}">
            <view class="book-img">
              <t-image src="{{item.icon ? item.icon : '/static/images/default-book-img.png'}}" width="105" height="145" aria-label="{item.name{}}" />
            </view>
            <view class="book-name book-color">{{ item.name}}</view>
            <view class="book-author book-color">{{item.author}}</view>
          </view>
          <view class="book-name book-color">{{ item.name}}</view>
          <view class="book-author book-color">{{item.author}}</view>
          <view wx:if="{{noData}}" class="noData">
            <t-empty icon="folder-open" description="暂无数据" />
          </view>
        </view>
        <!-- loading -->
        <view class="loading-box" wx:if="{{loaidng}}">
          <t-loading theme="circular" size="60rpx" class="wrapper" loading="{{loaidng}}" wx:if="{{loaidng}}" />
        </view>
      </view>
      <view class="bottom-box">

 packageBookService/pages/bookServices/list/index.wxss

@@ -123,4 +123,31 @@
  height: 80rpx;
  font-size: 28rpx;
  --td-loading-color: #ff6c00
}

.loading-box {
  width: 100%;
  height: calc(100vh - 500rpx);
  display: flex;
  align-items: center;
  justify-content: center;
  --td-loading-color: #ff6c00;
}

.noData {
  width: 100%;
  display: flex;
  justify-content: center;
}

.t-dropdown-menu {
  display: flex;
  align-items: center;
}

.t-dropdown-menu__item {
  background-color: #F6F6F6;
  border-radius: 80rpx;
  height: 70%;
  margin-left: 20rpx;
}

 pages/bookServices/assort/index.js

@@ -6,14 +6,20 @@
   * 页面的初始数据
   */
  data: {
    placeholderstyle: 'font-size:28rpx',
    assortList: [],
    assortCheck: {
      name: '',
      code: '',
    },
    startList: [],
    startCheck: '',

    startCheck: {
      id: '',
      code: ''
    },
    bookList: [],
    loading: false,
    listLoding: false,
  },

@@ -21,8 +27,7 @@
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // this.getAssortList()
    console.log(options);
    this.getAssortList();
  },

  /**
@@ -34,7 +39,6 @@
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.getAssortList();
  },

  /**
@@ -64,6 +68,9 @@

  // 获取侧边栏列表
  getAssortList() {
    this.setData({
      loading: true
    })
    const query = {
      path: '*',
      filterList: [
@@ -83,6 +90,7 @@
      const list = res.datas.filter((item) => item.refCode != 'jsek_homepageBookService');
      this.setData({
        assortList: list,
        loading: false
      });
      this.setData({
        assortCheck: {
@@ -94,14 +102,14 @@
    });
  },
  // 侧边栏切换
  changeAssort(data) {
  changeAssort(e) {
    this.setData({
      assortCheck: {
        name: data.detail.label,
        code: data.detail.value,
        name: e.detail.label,
        code: e.detail.value,
      },
    });
    this.getStairList(data.detail.value);
    this.getStairList(e.detail.value);
  },
  // 获取一级分类
  getStairList(path) {
@@ -110,7 +118,12 @@
    });
    const query = {
      path,
      filterList: [],
      filterList: [
        {
          value: 'Normal',
          field: 'state'
        }
      ],
      queryType: '\\',
      searchList: [],
      size: '30',
@@ -119,23 +132,20 @@
      sort: { type: 'Asc', field: 'LinkOrder' },
    };
    app.MG.store.getStoreChannelList(query).then(async (res) => {
      // 一级分类选中
      // this.setData({
      //   startCheck: res.datas[0].refCode,
      // });
      // 获取二级分类
      for (let index = 0; index < res.datas.length; index++) {
        const item = res.datas[index];
        item.icon ? item.icon = getPublicImage(item.icon, 58, 72) : item.icon = item.icon
        item.children = await this.getSecondList(item);
      }
      console.log(res.datas);
      // 一级分类赋值
      this.setData({
        startList: res.datas,
        listLoding: false,
        'startCheck.id': res.datas[0].id,
        'startCheck..code': ''
      });
    });
    this.setData({
      listLoding: false,
    });
  },

@@ -145,7 +155,12 @@
    let datas;
    const query = {
      path,
      filterList: [],
      filterList: [
        {
          value: 'Normal',
          field: 'state'
        }
      ],
      queryType: '\\',
      searchList: [],
      size: '30',
@@ -167,7 +182,8 @@
  tabClick(e) {
    const data = e.currentTarget.dataset.tabdata;
    this.setData({
      startCheck: data.refCode,
      'startCheck.id': data.id,
      'startCheck.code': data.refCode,
    });
    console.log(data);
  },
@@ -176,12 +192,13 @@
    const tab = e.currentTarget.dataset.tabdata
    const stair = e.currentTarget.dataset.stair
    this.setData({
      startCheck: tab.refCode
      'startCheck.id': tab.id,
      'startCheck.code': tab.refCode
    })
    if (stair) {
      const secondCode = `${stair.pathLinks[0].linkPath}\\${stair.id}`;
      wx.navigateTo({
        url: `/packageBookService/pages/bookServices/list/index?assorName=${this.data.assortCheck.name}&assortCode=${this.data.assortCheck.code}&stairCode=${this.data.startCheck}&secondCode=${secondCode}`,
        url: `/packageBookService/pages/bookServices/list/index?assorName=${this.data.assortCheck.name}&assortCode=${this.data.assortCheck.code}&stairCode=${this.data.startCheck.code}&secondCode=${secondCode}`,
      });
    } else {
      wx.navigateTo({
@@ -192,7 +209,7 @@
  },
  navToSearchPage(e) {
    wx.navigateTo({
      url: `/packageBookService/pages/bookServices/list/index?assorName=${this.data.assortCheck.name}&assortCode=${this.data.assortCheck.code}&stairCode=${this.data.startCheck}&searchValue=${e.detail.value}`,
      url: `/packageBookService/pages/bookServices/list/index?assorName=${this.data.assortCheck.name}&assortCode=${this.data.assortCheck.code}&stairCode=${this.data.startCheck.code}&searchValue=${e.detail.value}`,
    });
  },
});

 pages/bookServices/assort/index.wxml

@@ -2,45 +2,62 @@
<view class="page-header">
  <!-- 搜索框 -->
  <view class="search">
    <t-search t-class-input="t-search__input" t-class-input-container="t-search__input-container" placeholder="请输入关键词/书名/ISBN/作者" leftIcon="" bind:submit="navToSearchPage" placeholder-class="placeholder" placeholder-style="font-size:28rpx;">
    <t-search t-class-input="t-search__input" t-class-input-container="t-search__input-container" placeholder="请输入关键词/书名/ISBN/作者" leftIcon="" bind:submit="navToSearchPage" placeholder-style="{{placeholderstyle}}">
      <t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" />
    </t-search>
  </view>
</view>

<view class="page-container">
  <view class="side-bar-wrapper">
  <view class="side-bar-wrapper" wx:if="{{!loading}}">
    <view class="tab-left">
      <t-side-bar value="{{assortCheck.code}}" bind:change="changeAssort">
        <t-side-bar-item wx:for="{{assortList}}" wx:key="id" value="{{item.refCode}}" label="{{item.name}}" badge-props="{{item.badgeProps}}" />
      </t-side-bar>
    </view>
    <view class="side-bar-content">
      <!-- 一级分类 -->
      <view class="tab-top">
        <scroll-view scroll-x="{{true}}" class="myScroll">
          <view wx:for="{{startList}}" wx:key="id" class="row {{startCheck == item.refCode ? 'tab-active' : ''}}" bind:tap="tabClick" data-tabData="{{item}}">{{item.name}}</view>
        </scroll-view>
      </view>
      <!-- 内容 -->
      <scroll-view scroll-y="{{true}}" class="class-list" scroll-into-view="{{startCheck}}">
        <view wx:if="{{listLoading}}">
          <t-loading theme="spinner" size="400rpx" loading="{{listLoading}}"></t-loading>
    <view class="page-right">
      <!-- 右侧 -->
      <view class="side-bar-content" wx:if="{{!listLoding}}">
        <!-- 一级分类 -->
        <view class="tab-top">
          <scroll-view scroll-x="{{true}}" class="myScroll" show-scrollbar="{{false}}">
            <view wx:for="{{startList}}" wx:key="id" class="row {{startCheck.id == item.id ? 'tab-active' : ''}}" bind:tap="tabClick" data-tabData="{{item}}">{{item.name}}</view>
          </scroll-view>
        </view>
        <view wx:for="{{startList}}" wx:for-item="item" wx:key="item.refCode" id="{{item.refCode}}" class="class-box" wx:if="{{!listLoading}}">
          <view class="class-name">{{item.name}}</view>
          <view class="class-content">
            <view wx:for="{{item.children}}" wx:for-item="citem" wx:key="id" class="book-box" bind:tap="goPageList" data-stair="{{citem}}" data-tabData="{{item}}" wx:if="{{item.children.length}}">
              <image src="{{citem.icon ? citem.icon : '/static/images/bookService/assort/book-img.png'}}" mode="heightFix" />
              <view class="classify">{{citem.name}}</view>
            </view>
            <view wx:if="{{!item.children.length}}" class="book-box" bind:tap="goPageList" data-tabData="{{item}}">
              <image src="{{item.icon ? item.icon : '/static/images/bookService/assort/book-img.png'}}" mode="heightFix"></image>
              <text class="classify">全部</text>
        <!-- 内容 -->
        <scroll-view scroll-y="{{true}}" class="class-list" scroll-into-view="{{ 'list' + startCheck.id}}">
          <view wx:if="{{listLoading}}">
            <t-loading theme="spinner" size="400rpx" loading="{{listLoading}}"></t-loading>
          </view>
          <view wx:for="{{startList}}" wx:for-item="item" wx:key="item.id" id="{{ 'list' + item.id}}" class="class-box" wx:if="{{!listLoading}}">
            <view class="class-name">{{item.name}}</view>
            <view class="class-content">
              <view wx:for="{{item.children}}" wx:for-item="citem" wx:key="id" class="book-box" bind:tap="goPageList" data-stair="{{citem}}" data-tabData="{{item}}" wx:if="{{item.children.length}}">
                <view class="assort-img">
                  <image src="{{citem.icon ? citem.icon : '/static/images/bookService/assort/book-img.png'}}" mode="heightFix" />
                </view>
                <view class="classify">{{citem.name}}</view>
              </view>
              <view wx:if="{{!item.children.length}}" class="book-box" bind:tap="goPageList" data-tabData="{{item}}">
                <view class="assort-img">
                  <image src="{{item.icon ? item.icon : '/static/images/bookService/assort/book-img.png'}}" mode="heightFix"></image>
                </view>
                <text class="classify">全部</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
          <view class="bottom-box">
          </view>
        </scroll-view>
      </view>
      <!-- loading -->
      <view class="loading-box" wx:if="{{listLoding}}">
        <t-loading theme="circular" size="60rpx" class="wrapper" loading="{{listLoding}}" wx:if="{{listLoding}}" />
      </view>
    </view>

  </view>
  <view class="loading-box" wx:if="{{loading}}">
    <t-loading theme="circular" size="60rpx" class="wrapper" loading="{{loading}}" wx:if="{{loading}}" />
  </view>
</view>

 pages/bookServices/assort/index.wxss

@@ -13,14 +13,12 @@
  left: 0;
  width: 100%;
  z-index: 99;
  font-size: 28rpx;
  --td-search-font-size: 28rpx;
}

.placeholder {
  font-size: 28rpx;
}

.page-header .t-search__input-container {
.page-header .search .t-search__input-container {
  font-size: 28rpx !important;
  border-radius: 15rpx !important;
  margin: 0 24rpx;
  height: 64rpx !important;
@@ -29,15 +27,17 @@
.page-container {
  padding: 120rpx 0 20rpx 0;
  width: 100%;
  height: 90%;
}

.side-bar-wrapper {
  height: 100%;
  background-color: #f2f3f8;
  display: flex;
}

.side-bar-content {
  width: 70%;
  width: 100%;
  padding: 0 20rpx;
}

@@ -88,19 +88,20 @@

.class-list {
  /* overflow-y: auto; */
  height: 72.5vh;
  width: 262px;
  height: calc(100vh - 326rpx);
  width: calc(100vw - 210rpx);
}

.class-box {
  background-color: #fff;
  margin-bottom: 10rpx;
  margin-bottom: 20rpx;
  padding: 10rpx 12rpx;
  border-radius: 12rpx;
  /* height: 60rpx; */
}


.class-name {
  padding: 20rpx 0 0 20rpx;
  font-size: 32rpx;
  font-weight: 700;
}
@@ -113,8 +114,11 @@
}

.book-box {
  width: 48%;
  margin: 0 10rpx 20rpx 0
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  margin-bottom: 26rpx;
}

.book-box:nth-child(2n) {
@@ -123,13 +127,39 @@

.book-box image {
  height: 142rpx;
  object-fit: contain;
  object-fit: contain !important;
}

.classify {
  max-width: 90%;
  white-space: nowrap;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

.assort-img {
  width: 116rpx;
  height: 142rpx;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
  margin-bottom: 20rpx;
}

.page-right {
  width: 100%;
}

.loading-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  --td-loading-color: #ff6c00;
}

.bottom-box {
  height: 40rpx;
}

 static/images/bookService/detail/square.png