From 672575a32ecd7f8e0bcd76152040657e9e57328a Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期五, 12 四月 2024 16:36:41 +0800
Subject: [PATCH] 骨架屏样式优化
---
packageBookService/pages/bookServices/detail/index.wxml | 405 ++++++++++++++++++++++++++++++++-------------------------
1 files changed, 228 insertions(+), 177 deletions(-)
diff --git a/packageBookService/pages/bookServices/detail/index.wxml b/packageBookService/pages/bookServices/detail/index.wxml
index 323c78d..86bf948 100644
--- a/packageBookService/pages/bookServices/detail/index.wxml
+++ b/packageBookService/pages/bookServices/detail/index.wxml
@@ -1,6 +1,9 @@
<!--pages/bookServices/detail/index.wxml-->
+<import src="index.skeleton.wxml" />
+<template is="skeleton" wx:if="{{pageLoading}}" />
+<!-- pageLoading -->
<!--瀵艰埅鍖哄煙 -->
-<view class="page-bookService">
+<view class="page-bookService" wx:if="{{!pageLoading}}">
<view style="width: 100%; height: {{barHeight}}px; "></view>
<view class="nacigationBar" style="width: 70%; height: {{navBarHeight}}px;">
<view>
@@ -21,13 +24,13 @@
>
<!-- 鍥句功璇︽儏 -->
<view class="book-box">
- <view class="book-detail">
+ <view class="book-detail" id="book-detail">
<view class="detail-left">
<view class="book-img">
<image
loading=""
src="{{bookDetail.icon ? bookDetail.icon : '/static/images/default-book-img.png'}}"
- mode="aspectFill"
+ mode="aspectFit"
aria-label="{{bookDetail.name}}"
/>
</view>
@@ -59,33 +62,31 @@
</view>
</view>
<view class="detail-right">
- <view class="book-name">{{bookDetail.name}}</view>
+ <view class="book-name showTow">{{bookDetail.name}}</view>
<view class="book-message">
<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" wx:if="{{bookDetail.author}}">浣滆�咃細</view>
+ <view class="message-li" wx:if="{{bookDetail.author}}">
+ <view class="li-title">浣滆�咃細</view>
<view class="li-content">{{bookDetail.author}}</view>
</view>
<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" wx:if="{{bookDetail.publicationDate}}"
- >鍑虹増鏃堕棿锛�</view
- >
+ <view class="message-li" wx:if="{{bookDetail.publicationDate}}">
+ <view class="li-title">鍑虹増鏃堕棿锛�</view>
<view class="li-content">{{bookDetail.publicationDate}}</view>
</view>
<view
class="message-li"
- wx:if="{{bookDetail.class}}"
+ wx:if="{{bookClass.length}}"
style="height: 80rpx"
>
<view class="li-title">鍥句功鍒嗙被锛�</view>
- <view class="class-name showTow">{{bookDetail.class}}</view>
+ <view class="class-name showTow">{{bookClass}}</view>
</view>
</view>
<image
@@ -98,7 +99,7 @@
<view class="book-sale">
<view class="book-price">
<!-- 鐢靛瓙涔﹀敭浠� -->
- <view class="electron-price">
+ <view class="electron-price" wx:if="{{bookDetail.price}}">
<view>
<image
src="/static/images/bookService/detail/electon-price.png"
@@ -157,169 +158,176 @@
</view>
</view>
</view>
+
<view class="book-resource">
- <t-tabs
- defaultValue="{{tabValue}}"
- bind:change="onTabsChange"
- t-class="custom-tabs"
- t-class-content="custom-panel"
- class="tab-class"
- >
- <t-tab-panel label="鍥句功绠�浠�" value="brief" style="{{tabPanelstyle}}">
- <book-brief
- content="{{bookDetail.content}}"
- authorIntroduction="{{bookDetail.authorIntroduction}}"
- wx:if="{{bookDetail.content || bookDetail.authorIntroduction}}"
- ></book-brief>
- <view
- wx:if="{{!bookDetail.content && !bookDetail.authorIntroduction}}"
- class="noData"
+ <movable-area class="movable-area">
+ <t-tabs
+ value="{{tabValue}}"
+ bind:change="onTabsChange"
+ t-class="custom-tabs"
+ t-class-content="custom-panel"
+ class="tab-class"
+ >
+ <t-tab-panel
+ label="鍥句功绠�浠�"
+ icon="{{ tabValue == 'brief' ? briefIconClick : briefIcon}}"
+ value="brief"
+ style="{{tabPanelstyle}}"
>
- <t-empty icon="folder-open" description="鏆傛棤鏁版嵁" />
- </view>
- </t-tab-panel>
- <t-tab-panel
+ <book-brief
+ content="{{bookDetail.content}}"
+ authorIntroduction="{{bookDetail.authorIntroduction}}"
+ wx:if="{{bookDetail.content || bookDetail.authorIntroduction}}"
+ ></book-brief>
+ <view
+ wx:if="{{!bookDetail.content && !bookDetail.authorIntroduction}}"
+ class="noData"
+ >
+ <t-empty icon="folder-open" description="鏆傛棤鏁版嵁" />
+ </view>
+ </t-tab-panel>
+ <!-- <t-tab-panel
label="鐢靛瓙涔�"
+ icon="{{tabValue == 'jsek_eBook' ? eBookClickIcon : eBookIcon}}"
value="jsek_eBook"
style="{{tabPanelstyle}}"
>
- <epub-view
- fileInfo="{{fileInfo}}"
- id="eBook"
- class="webView"
- ></epub-view>
- </t-tab-panel>
- <t-tab-panel
- label="鏁欏璧勬簮"
- value="jsek_teachingResources"
- class="{{loading ? 'loading': ''}}"
+ </t-tab-panel> -->
+ <t-tab-panel
+ label="鏁欏璧勬簮"
+ icon="{{tabValue == 'jsek_teachingResources' ? teachResourcesClickIcon : teachResourcesIcon}}"
+ value="jsek_teachingResources"
+ class="{{loading ? 'loading': ''}}"
+ >
+ <view
+ wx:if="{{!loading && teach.length && !noResources && applyState}}"
+ >
+ <teach-resource
+ applyState="{{applyState}}"
+ rejectCause="{{rejectCause}}"
+ deadline="{{deadline}}"
+ bind:applyResource="applyResource"
+ applyResourceLoading="{{applyResourceLoading}}"
+ ></teach-resource>
+ <tree
+ id="teach-tree"
+ openIds="{{openTeachids}}"
+ bookInfo="{{bookDetail}}"
+ treeList="{{teach}}"
+ tab="{{tabValue}}"
+ applyState="{{applyState}}"
+ bind:downloadTeach="downloadTeach"
+ bind:handleTree="handleTree"
+ openTeachids="{{openTeachids}}"
+ wx:if="{{teach.length}}"
+ ></tree>
+ </view>
+ <!-- <t-loading
+ theme="circular"
+ size="60rpx"
+ class="loading"
+ loading="{{loading }}"
+ /> -->
+ <view wx:if="{{loading}}" style="width: 100%; height: min-content">
+ <t-skeleton
+ row-col="{{rowCol}}"
+ theme="paragraph"
+ animation="gradient"
+ loading="{{loading}}"
+ ></t-skeleton>
+ </view>
+ <view wx:if="{{noResources}}" class="noData">
+ <t-empty icon="folder-open" description="鏆傛棤鏁版嵁" />
+ </view>
+ </t-tab-panel>
+ <t-tab-panel
+ label="浜戝涔�"
+ icon="{{tabValue == 'jsek_cloudLearning' ? learnResourceClickIcon : learnResourceIcon}}"
+ value="jsek_cloudLearning"
+ style="{{tabPanelstyle}}"
+ >
+ <view wx:if="{{!loading && learn.length}}">
+ <learn-resource
+ bind:getFreeResource="getFreeResource"
+ bind:allAddShoppiingCar="allAddShoppiingCar"
+ id="learn-resource"
+ buyResourceData="{{buyResourceData}}"
+ bookId="{{bookDetail.id}}"
+ isshowDrawBtn="{{isshowDrawBtn}}"
+ ></learn-resource>
+
+ <tree
+ id="tree"
+ openIds="{{openLearnids}}"
+ bookInfo="{{bookDetail}}"
+ tab="{{tabValue}}"
+ treeList="{{learn}}"
+ buyIds="{{buyIdList}}"
+ openLearnids="{{openLearnids}}"
+ bind:updateShoppingCartHidden="updateShoppingCartHidden"
+ bind:updateCloudLearning="updateCloudLearning"
+ ></tree>
+ </view>
+ <view wx:if="{{noResources}}" class="noData">
+ <t-empty icon="folder-open" description="鏆傛棤鏁版嵁" />
+ </view>
+ </t-tab-panel>
+ <t-tab-panel
+ label="浜戞祴璇�"
+ icon="{{tabValue == 'questionBank' ? testResourceClickIocn : testResourceIocn}}"
+ value="questionBank"
+ style="{{tabPanelstyle}}"
+ >
+ <view wx:if="{{!loading}}">
+ <test-resource
+ id="test-resource"
+ list="{{test}}"
+ bookInfo="{{bookDetail}}"
+ mockData="{{mockData}}"
+ bind:buyMock="buyMock"
+ ></test-resource>
+ </view>
+ </t-tab-panel>
+ <t-tab-panel
+ label="浜戠瑪璁�"
+ icon="{{tabValue == 'jsek_note' ? noteClickIcon: noteIcon}}"
+ value="jsek_note"
+ style="{{tabPanelstyle}}"
+ >
+ <note bookInfo="{{bookDetail}}" id="note" class="note-list"></note>
+ </t-tab-panel>
+ <t-tab-panel
+ label="鐩稿叧鍥句功"
+ icon="{{tabValue == 'related_books' ? linkClickIcon: linkIcon}}"
+ value="related_books"
+ style="{{tabPanelstyle}}"
+ >
+ <related-books
+ relatedBookData="{{relatedBookData}}"
+ relatedBookLoading="{{relatedBookLoading}}"
+ noRelatedBookData="{{noRelatedBookData}}"
+ bind:goBookDetails="goBookDetails"
+ ></related-books>
+ </t-tab-panel>
+ </t-tabs>
+ <movable-view
+ class="movable-view"
+ :x="{{x}}"
+ :y="{{y}}"
+ direction="all"
>
- <view wx:if="{{!loading && teach.length && !noResources}}">
- <teach-resource
- applyState="{{applyState}}"
- rejectCause="{{rejectCause}}"
- deadline="{{deadline}}"
- bind:applyResource="applyResource"
- applyResourceLoading="{{applyResourceLoading}}"
- ></teach-resource>
- <tree
- openIds="{{openTeachids}}"
- bookInfo="{{bookDetail}}"
- treeList="{{teach}}"
- tab="{{tabValue}}"
- applyState="{{applyState}}"
- bind:downloadTeach="downloadTeach"
- openTeachids="{{openTeachids}}"
- wx:if="{{teach.length}}"
- ></tree>
+ <view class="applyBox" bindtap="goApply">
+ <view class="box">
+ <t-image
+ src="/static/images/home/yangshuForm1.png"
+ mode="heightFix"
+ class="img"
+ />
+ <view class="num" wx:if="{{num > 0}}">{{num}}</view>
+ </view>
</view>
- <t-loading
- theme="circular"
- size="60rpx"
- class="loading"
- loading="{{loading }}"
- />
- <view wx:if="{{noResources}}" class="noData">
- <t-empty icon="folder-open" description="鏆傛棤鏁版嵁" />
- </view>
- </t-tab-panel>
- <t-tab-panel
- label="浜戝涔�"
- value="jsek_cloudLearning"
- style="{{tabPanelstyle}}"
- >
- <view wx:if="{{!loading && learn.length}}">
- <learn-resource
- bind:getFreeResource="getFreeResource"
- bind:allAddShoppiingCar="allAddShoppiingCar"
- id="learn-resource"
- buyResourceData="{{buyResourceData}}"
- bookId="{{bookDetail.id}}"
- ></learn-resource>
- <tree
- id="tree"
- openIds="{{openLearnids}}"
- bookInfo="{{bookDetail}}"
- tab="{{tabValue}}"
- treeList="{{learn}}"
- buyIds="{{buyIdList}}"
- openLearnids="{{openLearnids}}"
- ></tree>
- </view>
- <view wx:if="{{noResources}}" class="noData">
- <t-empty icon="folder-open" description="鏆傛棤鏁版嵁" />
- </view>
- </t-tab-panel>
- <t-tab-panel
- label="浜戞祴璇�"
- value="questionBank"
- style="{{tabPanelstyle}}"
- >
- <view wx:if="{{!loading && test.length}}">
- <test-resource
- list="{{test}}"
- bookInfo="{{bookDetail}}"
- mockData="{{mockData}}"
- ></test-resource>
- </view>
- <view wx:if="{{noResources}}" class="noData">
- <t-empty icon="folder-open" description="鏆傛棤鏁版嵁" />
- </view>
- </t-tab-panel>
- <t-tab-panel label="浜戠瑪璁�" value="jsek_note" style="{{tabPanelstyle}}">
- <note bookInfo="{{bookDetail}}" id="note" class="note-list"></note>
- </t-tab-panel>
- </t-tabs>
- </view>
- <!-- 璐拱鎸夐挳 -->
- <view class="box-bottom">
- <view class="bottom-btn" bind:tap="appplyElectronicBook">
- <view>
- <t-image
- loading=""
- src="/static/images/bookService/detail/ebook.png"
- ></t-image>
- </view>
- <view class="btn-text">鐢靛瓙鏍蜂功鐢宠</view>
- </view>
- <view class="bottom-btn" bind:tap="appplyPaperBook">
- <view>
- <t-image
- src="/static/images/bookService/detail/paper-book.png"
- ></t-image>
- </view>
- <view class="btn-text">绾歌川鏍蜂功鐢宠</view>
- </view>
- <view
- class="shopCar {{(tabValue == 'jsek_teachingResources' || tabValue == 'jsek_note') ? 'disabledColor' : 'shopCarColor' }}"
- bind:tap="addBookShopcCar"
- wx:if="{{tabValue != 'jsek_eBook'}}"
- >鍔犲叆璐墿杞�</view
- >
- <view
- class="buy {{(tabValue == 'jsek_teachingResources' || tabValue == 'jsek_note') ? 'disabledColor' : 'buyColor' }}"
- bind:tap="buyBtn"
- wx:if="{{tabValue != 'jsek_eBook'}}"
- >绔嬪嵆璐拱</view
- >
- <view
- class="shopCar shopCarColor"
- bind:tap="addBookShopcCar"
- wx:if="{{tabValue == 'jsek_eBook' && !bookBuy}}"
- >鍔犲叆璐墿杞�</view
- >
- <view
- class="buy buyColor"
- bind:tap="buyBtn"
- wx:if="{{tabValue == 'jsek_eBook' && !bookBuy}}"
- >绔嬪嵆璐拱</view
- >
- <view
- class="read buyColor"
- bind:tap="goRead"
- wx:if="{{tabValue == 'jsek_eBook' && bookBuy}}"
- >绔嬪嵆鏌ョ湅</view
- >
+ </movable-view>
+ </movable-area>
</view>
</scroll-view>
<!-- 鎴戣寤鸿寮圭獥 -->
@@ -338,15 +346,58 @@
confirm-btn="{{ confirmBtn }}"
bind:confirm="closeTeachDownload"
/>
-
- <view class="applyBox" bindtap="goApply">
- <view class="box">
- <t-image
- src="/static/images/home/yangshuForm1.png"
- mode="heightFix"
- class="img"
- />
- <view class="num" wx:if="{{num > 0}}">{{num}}</view>
+ <!-- 璐拱鎸夐挳 -->
+ <view class="box-bottom">
+ <view class="bottom-btn" bind:tap="appplyElectronicBook">
+ <view>
+ <t-image
+ loading=""
+ src="/static/images/bookService/detail/ebook.png"
+ ></t-image>
+ </view>
+ <view class="btn-text">鐢靛瓙鏍蜂功鐢宠</view>
</view>
+ <view class="bottom-btn" bind:tap="appplyPaperBook">
+ <view>
+ <t-image
+ src="/static/images/bookService/detail/paper-book.png"
+ ></t-image>
+ </view>
+ <view class="btn-text">绾歌川鏍蜂功鐢宠</view>
+ </view>
+ <view
+ class="{{!bookBuy && bookDetail.isSell ? 'bottom-btn tryRead' : 'bottom-btn try'}}"
+ bind:tap="goRead"
+ wx:if="{{!bookBuy}}"
+ >
+ <view>
+ <t-image src="/static/images/bookService/detail/shidu.png"></t-image>
+ </view>
+ <view class="btn-text">璇曡</view>
+ </view>
+
+ <view
+ class="shopCar shopCarColor"
+ bind:tap="addBookShopcCar"
+ wx:if="{{!bookBuy && bookDetail.price !== '0.00' && bookDetail.isSell == '1'}}"
+ >鍔犲叆璐墿杞�</view
+ >
+ <view
+ class="buy buyColor"
+ bind:tap="buyBtn"
+ wx:if="{{!bookBuy && bookDetail.price !== '0.00' && bookDetail.isSell == '1'}}"
+ >绔嬪嵆璐拱</view
+ >
+ <view
+ class="buy receiveColor"
+ bind:tap="buyBtn"
+ wx:if="{{!bookBuy && bookDetail.price == '0.00' && bookDetail.isSell == '1'}}"
+ >鍏嶈垂棰嗗彇</view
+ >
+ <view class="buy read" bind:tap="goRead" wx:if="{{bookBuy}}">绔嬪嵆鏌ョ湅</view>
</view>
</view>
+
+<!-- <view class="loading" wx:if="{{pageLoading}}">
+ <t-loading loading="{{pageLoading}}" size="40"></t-loading>
+</view> -->
--
Gitblit v1.9.1