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 | 326 ++++++++++++++++++++++++++++-------------------------
1 files changed, 172 insertions(+), 154 deletions(-)
diff --git a/packageBookService/pages/bookServices/detail/index.wxml b/packageBookService/pages/bookServices/detail/index.wxml
index f88a1ce..86bf948 100644
--- a/packageBookService/pages/bookServices/detail/index.wxml
+++ b/packageBookService/pages/bookServices/detail/index.wxml
@@ -1,4 +1,7 @@
<!--pages/bookServices/detail/index.wxml-->
+<import src="index.skeleton.wxml" />
+<template is="skeleton" wx:if="{{pageLoading}}" />
+<!-- pageLoading -->
<!--瀵艰埅鍖哄煙 -->
<view class="page-bookService" wx:if="{{!pageLoading}}">
<view style="width: 100%; height: {{barHeight}}px; "></view>
@@ -27,7 +30,7 @@
<image
loading=""
src="{{bookDetail.icon ? bookDetail.icon : '/static/images/default-book-img.png'}}"
- mode="aspectFill"
+ mode="aspectFit"
aria-label="{{bookDetail.name}}"
/>
</view>
@@ -65,27 +68,25 @@
<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
@@ -157,148 +158,176 @@
</view>
</view>
</view>
+
<view class="book-resource">
- <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}}"
+ <movable-area class="movable-area">
+ <t-tabs
+ value="{{tabValue}}"
+ bind:change="onTabsChange"
+ t-class="custom-tabs"
+ t-class-content="custom-panel"
+ class="tab-class"
>
- <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-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}}"
>
</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}}"
+ <t-tab-panel
+ label="鏁欏璧勬簮"
+ icon="{{tabValue == 'jsek_teachingResources' ? teachResourcesClickIcon : teachResourcesIcon}}"
+ value="jsek_teachingResources"
+ class="{{loading ? 'loading': ''}}"
>
- <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="{{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>
+ <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}}"
+ <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}}">
- <test-resource
- id="test-resource"
- list="{{test}}"
- bookInfo="{{bookDetail}}"
- mockData="{{mockData}}"
- bind:buyMock="buyMock"
- ></test-resource>
+ <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-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>
+ </movable-area>
</view>
</scroll-view>
<!-- 鎴戣寤鸿寮圭獥 -->
@@ -317,17 +346,6 @@
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>
- </view>
<!-- 璐拱鎸夐挳 -->
<view class="box-bottom">
<view class="bottom-btn" bind:tap="appplyElectronicBook">
@@ -361,25 +379,25 @@
<view
class="shopCar shopCarColor"
bind:tap="addBookShopcCar"
- wx:if="{{!bookBuy && bookDetail.price !== '0.00' && bookDetail.isSell}}"
+ 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}}"
+ 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}}"
+ 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}}">
+<!-- <view class="loading" wx:if="{{pageLoading}}">
<t-loading loading="{{pageLoading}}" size="40"></t-loading>
-</view>
+</view> -->
--
Gitblit v1.9.1