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 | 438 ++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 304 insertions(+), 134 deletions(-)
diff --git a/packageBookService/pages/bookServices/detail/index.wxml b/packageBookService/pages/bookServices/detail/index.wxml
index 630ae8b..86bf948 100644
--- a/packageBookService/pages/bookServices/detail/index.wxml
+++ b/packageBookService/pages/bookServices/detail/index.wxml
@@ -1,77 +1,117 @@
<!--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>
- <t-icon name="chevron-left" size="30" data-name="{{item}}" bind:click="goBack" />
+ <t-icon
+ name="chevron-left"
+ size="30"
+ data-name="{{item}}"
+ bind:click="goBack"
+ />
</view>
<view class="navbar-title">{{options.name}}</view>
</view>
<t-toast id="t-toast" />
- <scroll-view scroll-y="{{true}}" class="book" bindscrolltolower="onReachBottom">
+ <scroll-view
+ scroll-y="{{true}}"
+ class="book"
+ bindscrolltolower="onReachBottom"
+ >
<!-- 鍥句功璇︽儏 -->
<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" aria-label="{{bookDetail.name}}" />
+ <image
+ loading=""
+ src="{{bookDetail.icon ? bookDetail.icon : '/static/images/default-book-img.png'}}"
+ mode="aspectFit"
+ aria-label="{{bookDetail.name}}"
+ />
</view>
<view class="book-use">
<view class="collect" bind:tap="setCollect">
<view>
- <image loading="" src="/static/images/bookService/detail/collect.png" wx:if="{{!bookDetail.isFavourite}}" />
- <image loading="" src="/static/images/bookService/detail/collecting.png" wx:if="{{bookDetail.isFavourite}}" />
+ <image
+ loading=""
+ src="/static/images/bookService/detail/collect.png"
+ wx:if="{{!bookDetail.isFavourite}}"
+ />
+ <image
+ loading=""
+ src="/static/images/bookService/detail/collecting.png"
+ wx:if="{{bookDetail.isFavourite}}"
+ />
</view>
<view class="use-title">鏀惰棌</view>
</view>
<view class="suggest" bind:tap="suggestBtn">
<view>
- <image loading="" src="/static/images/bookService/detail/suggest.png" />
+ <image
+ loading=""
+ src="/static/images/bookService/detail/suggest.png"
+ />
</view>
<view class="use-title">鎴戣寤鸿</view>
</view>
</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}}" style="height: 80rpx">
+ <view
+ class="message-li"
+ 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 src="/static/images/bookService/detail/square.png" class="right-background" />
+ <image
+ src="/static/images/bookService/detail/square.png"
+ class="right-background"
+ />
</view>
</view>
<!-- 閿�鍞俊鎭� -->
<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" />
+ <image
+ src="/static/images/bookService/detail/electon-price.png"
+ />
</view>
<view class="price">
- <view class="price-text">{{bookDetail.price == '0.00' ? '鍏嶈垂' : '楼'+
- bookDetail.price}}</view>
- <view class="price-old" wx:if="{{bookDetail.oldPrice != '0.00'}}">楼{{bookDetail.oldPrice}}
+ <view class="price-text"
+ >{{bookDetail.price == '0.00' ? '鍏嶈垂' : '楼'+
+ bookDetail.price}}</view
+ >
+ <view class="price-old" wx:if="{{bookDetail.oldPrice != '0.00'}}"
+ >楼{{bookDetail.oldPrice}}
</view>
</view>
<view> </view>
@@ -81,153 +121,283 @@
<view>
<image src="/static/images/bookService/detail/paper-price.png" />
</view>
- <view class="price">{{bookDetail.paperPrice == '0.00' ? '鍏嶈垂' :
- '楼'+bookDetail.paperPrice}}</view>
+ <view class="price"
+ >{{bookDetail.paperPrice == '0.00' ? '鍏嶈垂' :
+ '楼'+bookDetail.paperPrice}}</view
+ >
</view>
</view>
<!-- 缃戝簵 -->
<view class="book-web">
- <image src="/static/images/bookService/detail/jd.png" wx:if="{{bookDetail.JDLink}}" bind:tap="goShop" data-link="{{bookDetail.JDLink}}" data-type="jd" />
- <image class="tmall-image" src="/static/images/bookService/detail/tmall.png" bind:tap="goShop" data-link="{{bookDetail.tmallLink}}" wx:if="{{bookDetail.tmallLink}}" />
- <image src="/static/images/bookService/detail/dangdang.png" bind:tap="goShop" data-link="{{bookDetail.dangdangLink}}" wx:if="{{bookDetail.dangdangLink}}" />
- <image src="/static/images/bookService/detail/weidian.png" bind:tap="goShop" data-link="{{bookDetail.weidianLink}}" wx:if="{{bookDetail.weidianLink}}" />
+ <image
+ src="/static/images/bookService/detail/jd.png"
+ wx:if="{{bookDetail.JDLink}}"
+ bind:tap="goShop"
+ data-link="{{bookDetail.JDLink}}"
+ data-type="jd"
+ />
+ <image
+ class="tmall-image"
+ src="/static/images/bookService/detail/tmall.png"
+ bind:tap="goShop"
+ data-link="{{bookDetail.tmallLink}}"
+ wx:if="{{bookDetail.tmallLink}}"
+ />
+ <image
+ src="/static/images/bookService/detail/dangdang.png"
+ bind:tap="goShop"
+ data-link="{{bookDetail.dangdangLink}}"
+ wx:if="{{bookDetail.dangdangLink}}"
+ />
+ <image
+ src="/static/images/bookService/detail/weidian.png"
+ bind:tap="goShop"
+ data-link="{{bookDetail.weidianLink}}"
+ wx:if="{{bookDetail.weidianLink}}"
+ />
</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="鍥句功绠�浠�"
- 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 && 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 && 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 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 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.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="浜戠瑪璁�"
- icon="{{tabValue == 'jsek_note' ? noteClickIcon: noteIcon}}"
- value="jsek_note"
- style="{{tabPanelstyle}}"
- >
- <note bookInfo="{{bookDetail}}" id="note" class="note-list"></note>
- </t-tab-panel>
- </t-tabs>
+ </movable-view>
+ </movable-area>
</view>
</scroll-view>
<!-- 鎴戣寤鸿寮圭獥 -->
- <suggest class="suggest-component" id="suggest-component" bookIcon="{{bookDetail.icon}}" bookName="{{bookDetail.name}}"></suggest>
+ <suggest
+ class="suggest-component"
+ id="suggest-component"
+ bookIcon="{{bookDetail.icon}}"
+ bookName="{{bookDetail.name}}"
+ ></suggest>
<!-- 鏁欏璧勬簮涓嬭浇鎻愮ず寮圭獥 -->
- <t-dialog class="teachDownloadDialog" visible="{{isShowTeachDownload}}" title="鎻愮ず" content="璇峰墠寰�PC绔笅杞�" 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>
+ <t-dialog
+ class="teachDownloadDialog"
+ visible="{{isShowTeachDownload}}"
+ title="鎻愮ず"
+ content="璇峰墠寰�PC绔笅杞�"
+ confirm-btn="{{ confirmBtn }}"
+ bind:confirm="closeTeachDownload"
+ />
<!-- 璐拱鎸夐挳 -->
<view class="box-bottom">
<view class="bottom-btn" bind:tap="appplyElectronicBook">
<view>
- <t-image loading="" src="/static/images/bookService/detail/ebook.png"></t-image>
+ <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>
+ <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 {{((tabValue == 'brief' && bookBuy) || tabValue == 'jsek_teachingResources' || tabValue == 'jsek_note') ? 'disabledColor' : 'shopCarColor' }}" bind:tap="addBookShopcCar">鍔犲叆璐墿杞�</view>
- <view class="buy {{((tabValue == 'brief' && bookBuy) ||tabValue == 'jsek_teachingResources' || tabValue == 'jsek_note') ? 'disabledColor' : 'buyColor' }}" bind:tap="buyBtn">绔嬪嵆璐拱</view>
- <view class="buy shopCarColor" bind:tap="goRead" wx:if="{{tabValue == 'brief' && bookBuy}}">绔嬪嵆鏌ョ湅</view>
- <view class="buy shopCarColor" bind:tap="goRead" wx:if="{{tabValue == 'brief' && !bookBuy}}">鍦ㄧ嚎璇曡</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>
\ No newline at end of file
+</view>
+
+<!-- <view class="loading" wx:if="{{pageLoading}}">
+ <t-loading loading="{{pageLoading}}" size="40"></t-loading>
+</view> -->
--
Gitblit v1.9.1