Commit 6bd287bb authored by jyx's avatar jyx

优化样式

parent cddd85b2
......@@ -30,7 +30,8 @@ export default class Book {
shortis,
articleChapterList,
freeNum,
carouselUrl
carouselUrl,
isChecked
} = param || {}
this.id = id;
this.title = title;
......@@ -63,6 +64,7 @@ export default class Book {
this.shortis = shortis;
this.freeNum = freeNum;
this.carouselUrl = carouselUrl;
this.isChecked = isChecked;
this.articleChapterList = articleChapterList;
}
}
\ No newline at end of file
<template>
<view class="banneritem">
<swiper :autoplay="true" :interval="2000" :duration="500">
<swiper-item @click="handleBanner(item)" v-for='(item, index) in bannerList' :key='index'>
<swiper-item @click="handleBanner(item)" v-for='(item, index) in bannerList' :key='index'
style="border-radius: 20rpx;">
<image class="banner-img" :src="item.carouselUrl" mode="scaleToFill"></image>
</swiper-item>
</swiper>
......@@ -51,10 +52,9 @@
<style lang="scss">
.banneritem {
margin: 30rpx 30rpx 0 30rpx;
height: 310rpx;
// height: 310rpx;
.banner-img {
border-radius: 20rpx;
height: 310rpx;
}
}
......
......@@ -124,6 +124,9 @@
font-size: 32rpx;
font-weight: 700;
color: #333;
overflow: hidden;
white-space: nowrap; //单行显示
text-overflow: ellipsis; //超出部分省略号显示
}
.close-button {
......@@ -162,12 +165,16 @@
.label-box {
flex-wrap: wrap;
flex-direction: row;
overflow: auto;
.label {
padding: 5rpx 10rpx;
font-size: 20rpx;
margin-right: 20rpx;
border-radius: 10rpx;
flex-shrink: 0;
display: inline-block;
}
.label-color-1 {
......
<template>
<view class="cover-box" @click="tapItem">
<image v-if="!last" class="cover" :src="item.avatar" mode="aspectFill"></image>
<image v-else class="cover" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_book_more.png"
mode="scaleToFill"></image>
<image v-if="!last" class="cover" :style="'height:'+ coverHeight + 'rpx;'" :src="item.avatar" mode="aspectFill">
</image>
<image v-else class="cover" :style="'height:'+ coverHeight + 'rpx;'"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_book_more.png" mode="scaleToFill"></image>
<view class="title" v-if="!last">
{{item.title}}
</view>
<view class="c-flex_row c-align_center label-box" v-if="!last">
<!-- <view class="c-flex_row c-align_center label-box" v-if="!last">
<slot name="footer">
<view class="label label-color-1" v-if='showCategory'>
{{item.categoryName}}
......@@ -16,7 +17,7 @@
{{label.name}}
</view>
</slot>
</view>
</view> -->
</view>
</template>
......@@ -32,6 +33,10 @@
last: {
type: Boolean,
default: false
},
coverHeight: {
type: Number,
default: 220
}
},
data: function() {
......@@ -80,21 +85,23 @@
font-size: 26rpx;
margin-top: 10rpx;
color: #383B3D;
overflow: hidden;
white-space: nowrap;
height: 70rpx;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; //元素几行显示
-webkit-box-orient: vertical;
}
.cover {
width: 100%;
height: 220rpx;
border-radius: 15rpx;
}
.label-box {
margin-top: 6rpx;
display: flex;
flex-direction: row;
// flex-wrap: wrap;
overflow: auto;
.label {
......@@ -103,7 +110,7 @@
margin-right: 20rpx;
border-radius: 10rpx;
flex-shrink: 0;
display:inline-block;
display: inline-block;
}
.label-color-1 {
......
<template>
<view class="book-list-item" @click="tapItem">
<view class="cover-box">
<image class="cover" :src="item.avatar" mode="aspectFill"></image>
</view>
<view class="c-flex_column">
<view class="c-flex_row row" style="justify-content: space-between;">
<view class="c-flex_column c-justify_center item">
<view class="title">
{{item.title?item.title:''}}
</view>
</view>
</view>
<view class="c-flex_row row">
<view class="c-flex_column c-justify_between c-flex_1 item">
<view class="desc row">
{{item.summary?item.summary:''}}
</view>
<view class="label-box row">
<slot name="footer">
<view class="label label-color-1" v-if='showCategory'>
{{item.categoryName}}
</view>
<view class="label label-color-2" v-for='(label, labelIndex) in item.tagList'
:key='labelIndex'>
{{label.name}}
</view>
</slot>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
item: {
type: Object,
default: function() {
return {}
}
}
},
data: function() {
return {
imageError: true
}
},
watch: {},
computed: {
showCategory: function() {
if (this.item && this.item.categoryName) {
return true
} else {
return false
}
},
showErrorImage: function() {
return this.imageError;
},
hideErrorImage: function() {
return !this.imageError
}
},
methods: {
tapItem() {
this.$emit("tapItem", {
detail: {
data: this.item
}
})
},
loadImage() {
this.imageError = false;
},
errorImage() {
this.imageError = true
}
}
}
</script>
<style lang="scss" scoped>
.book-list-item {
display: flex;
flex-direction: row;
// padding: 20rpx 20rpx;
.row {
margin-bottom: 20rpx;
}
.row:last-child {
margin-bottom: 0;
}
.item {
width: 140rpx;
}
.title {
width: 100%;
font-size: 26rpx;
margin-top: 10rpx;
color: #383B3D;
height: 70rpx;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; //元素几行显示
-webkit-box-orient: vertical;
}
.desc {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 26rpx;
color: #999
}
.label-box {
display: flex;
flex-direction: row;
overflow: auto;
.label {
padding: 5rpx 10rpx;
font-size: 20rpx;
margin-right: 20rpx;
border-radius: 10rpx;
flex-shrink: 0;
display: inline-block;
}
.label-color-1 {
background: #faefe6;
color: #cc6008;
}
.label-color-2 {
color: #F1413C;
background: #FEF3F3;
}
.label-color-3 {
background: #ff8787;
color: #ff3737;
}
}
}
.cover-box {
margin-right: 20rpx;
.cover {
width: 165rpx;
height: 260rpx;
border-radius: 15rpx;
}
}
</style>
\ No newline at end of file
......@@ -12,10 +12,6 @@
import RecommendList from "../recommend-list/recommend-list.vue";
import Banner from "../banner/banner.vue";
import SystemInfoMixin from "../../common/mixins/system-info-mixin.js"
import {
watchUserInfoChange,
removeUserInfoChangeWatch
} from "../../common/services/userServices.js";
export default {
mixins: [SystemInfoMixin],
components: {
......@@ -29,14 +25,7 @@
},
onReady() {
// this.initHeight();
// 监听用户变动
watchUserInfoChange((info) => {
if (info.userInfo) {
this.initData();
}
}, this)
// this.refreshList()
},
onShow() {},
onUnload() {
......
......@@ -23,11 +23,6 @@
import BookshelfBookItem from '../../../common/models/BookshelfBookItem.js';
import {
collectionBook,
noticeCollectionListChange
} from "../../../common/services/index.js"
export default {
mixins: [common],
props: {
......@@ -69,25 +64,6 @@
}
gotoBookContentPage(e.detail.data.id, e.detail.data.shortis)
},
tapClose(e, index) {
let item = e.detail.data;
uni.showModal({
title: "确认移除",
content: `是否确认从书架中移除《${item.title}》`,
success: (res) => {
if (res.confirm) {
collectionBook(false, item.id, (success, data) => {
if (success) {
this.dataList.splice(index, 1)
this.$forceUpdate()
noticeCollectionListChange(item.id, false)
}
})
}
}
})
}
}
}
......
<template>
<scroll-view scroll-y style="height: 100%;">
<BookshelfList ref='bookList'></BookshelfList>
<BookshelfList ref='bookList' v-on:showEditBarR="showEditBarR"></BookshelfList>
<RecommendList ref='recommendList' :listType="0"></RecommendList>
<view style="height: 20rpx;"></view>
</scroll-view>
......@@ -10,10 +10,6 @@
import BookshelfList from "./components/bookshelf-list.vue";
import RecommendList from "../recommend-list/recommend-list.vue";
import SystemInfoMixin from "../../common/mixins/system-info-mixin.js"
import {
watchUserInfoChange,
removeUserInfoChangeWatch
} from "../../common/services/userServices.js";
import {
removeCollectionChangeWatch,
watchCollectionChange
......@@ -30,13 +26,7 @@
};
},
onReady() {
// this.initHeight();
// 监听用户变动
watchUserInfoChange((info) => {
if (info.userInfo) {
this.initData();
}
}, this)
// 监听收藏变动
watchCollectionChange(() => {
this.refreshList();
......@@ -51,19 +41,6 @@
removeUserInfoChangeWatch(this);
removeCollectionChangeWatch(this);
},
onReady() {
// this.initHeight();
// 监听用户变动
watchUserInfoChange((info) => {
if (info.userInfo) {
this.initData();
}
}, this)
// 监听收藏变动
watchCollectionChange(() => {
this.refreshList();
}, this);
},
methods: {
show() {
......@@ -95,6 +72,18 @@
this.listHeight = this.windowHeight - result;
})
},
showEditBarR(b) {
this.$emit("showEditBarH", b);
},
fullChoice() {
this.$refs.bookList.fullChoice()
},
noChoice() {
this.$refs.bookList.noChoice()
},
deleteCollect() {
this.$refs.bookList.deleteCollect()
},
}
}
</script>
......
<template>
<view class="bookshelf">
<view class="topitem">
<read-time-count-row id='count' ref='timeCount'></read-time-count-row>
<view @click="showEditBar = !showEditBar">
<image v-if="showEditBar" mode="widthFix" src="@/static/images/close.png">
</image>
<image v-else mode="widthFix" src="@/static/images/edit.png">
</image>
</view>
</view>
<view class="bookitem" v-if="dataList.length>0">
<book-list-item2 class="item" v-for='(item, index) in dataList' :key='index' :item='item'
:last="index>=dataList.length-1" @tapItem='tapItem($event, index)' @close='tapClose($event, index)'>
</book-list-item2>
<shelf-list-item class="item" v-for='(item, index) in dataList' :key='index' :item='item'
:last="index>=dataList.length-1" @tapItem='tapItem($event, index)' @cbClick='cbClick(index)'
:showChecked="showEditBar" v-on:showEditBarR="showEditBarR">
</shelf-list-item>
</view>
<c-shelf-empty v-else></c-shelf-empty>
</view>
</template>
<script>
import common from '@/mixins/common';
import SystemInfoMixin from "../../../common/mixins/system-info-mixin.js"
import ShelfListItem from "./shelf-list-item.vue";
import {
getCollects
} from "../../../common/services/index.js"
import {
gotoBookContentPage
} from '../../../common/services/page-route';
......@@ -29,19 +38,31 @@
} from "../../../common/services/index.js"
export default {
mixins: [common],
mixins: [SystemInfoMixin],
props: {
height: {
type: Number,
default: 0
},
},
components: {
ShelfListItem
},
data: function() {
return {
dataList: [],
bookMore: 'https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_book_more.png'
bookMore: 'https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_book_more.png',
isEditStyle: false,
showEditBar: false
}
},
watch: {
showEditBar: {
handler(newValue, oldValue) {
this.$emit("showEditBarR", newValue)
}
},
},
methods: {
refreshList() {
getCollects((success, data) => {
......@@ -74,25 +95,52 @@
gotoBookContentPage(e.detail.data.id, e.detail.data.shortis)
},
tapClose(e, index) {
let item = e.detail.data;
uni.showModal({
title: "确认移除",
content: `是否确认从书架中移除《${item.title}》`,
success: (res) => {
if (res.confirm) {
collectionBook(false, item.id, (success, data) => {
if (success) {
this.dataList.splice(index, 1)
this.$forceUpdate()
noticeCollectionListChange(item.id, false)
showEditBarR(e) {
this.showEditBar = e
},
changeEditStyle(e) {
this.isEditStyle = e
if (!this.isEditStyle) {
this.noChoice()
}
},
cbClick(index) {
let newData = this.dataList[index]
newData.isChecked = !newData.isChecked
this.$set(this.dataList, index, newData)
},
longClick(index) {
this.isEditStyle = true
this.dataList[index].isChecked = true
},
fullChoice() {
for (let i = 0; i < this.dataList.length; i++) {
this.dataList[i].isChecked = true
}
},
noChoice() {
for (let i = 0; i < this.dataList.length; i++) {
this.dataList[i].isChecked = false
}
},
deleteCollect() {
let str = ''
for (let i = 0; i < this.dataList.length; i++) {
if (this.dataList[i].isChecked) {
str += (this.dataList[i].id + ',')
}
})
}
console.log('AAAA' + str)
collectionBook(false, str, (success, data) => {
if (success) {
this.showEditBar = false
this.refreshList()
// noticeCollectionListChange('', false)
}
})
}
},
}
}
</script>
......@@ -106,6 +154,19 @@
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
margin: 30rpx;
.topitem {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 30rpx;
image {
width: 50rpx;
height: 50rpx;
}
}
.bookitem {
display: flex;
flex-direction: row;
......@@ -113,7 +174,7 @@
padding-left: 20rpx;
.item {
width: 22%;
width: 30%;
margin-bottom: 20rpx;
margin-right: 20rpx;
}
......
<template>
<view class="cover-box" @click.stop="tapItem" @longpress.stop="longClick">
<!-- <image v-show="imageError" class="cover" src="/static/images/image_error.png" mode="aspectFill"></image> -->
<image v-if="!last" class="cover" :src="item.avatar" mode="aspectFill">
</image>
<image v-else class="cover" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_book_more.png"
mode="scaleToFill"></image>
<view class="title" v-if="!last">
{{item.title}}
</view>
<view class="c-flex_row c-align_center label-box" v-if="!last">
<slot name="footer">
<view class="label label-color-1" v-if='showCategory'>
{{item.categoryName}}
</view>
<view class="label label-color-2" v-for='(label, labelIndex) in item.tagList' :key='labelIndex'>
{{label.name}}
</view>
</slot>
</view>
<view v-if="isEditStyle && !last" @click.stop="cbClick" style="position: absolute;background: #000000; opacity: 0.6;width: 92%;height: 96%;top: 0;border-radius:20rpx;
padding-left: 20rpx;padding-top: 20rpx;">
<image v-if="item.isChecked" src="@/static/images/ic_selected.png" style="width: 50rpx;height: 50rpx;" />
<image v-else src="@/static/images/ic_unselected.png" style="width: 50rpx;height: 50rpx;" />
</view>
</view>
</template>
<script>
export default {
props: {
item: {
type: Object,
default: function() {
return {}
}
},
last: {
type: Boolean,
default: false
},
showChecked: {
type: Boolean,
default: false
}
},
computed: {
showCategory: function() {
return this.item.categoryName
},
showErrorImage: function() {
return this.imageError;
},
hideErrorImage: function() {
return !this.imageError
}
},
watch: {
showChecked: {
handler(newValue, oldValue) {
this.isEditStyle = newValue
}
},
isEditStyle: {
handler(newValue, oldValue) {
this.$emit("showEditBarR", newValue)
}
},
},
data() {
return {
isEditStyle: false
};
},
methods: {
longClick() {
if (!this.isEditStyle) {
this.isEditStyle = true
this.cbClick()
}
},
tapItem() {
this.$emit("tapItem", {
detail: {
data: this.item
}
})
},
loadImage() {
this.imageError = false;
},
errorImage() {
this.imageError = true
},
changeEditStyle(e) {
this.isEditStyle = e
},
cbClick() {
this.$emit("cbClick")
}
}
}
</script>
<style lang="scss" scoped>
.cover-box {
display: flex;
flex-direction: column;
position: relative;
.title {
width: 100%;
font-size: 26rpx;
margin-top: 10rpx;
color: #383B3D;
height: 70rpx;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; //元素几行显示
-webkit-box-orient: vertical;
}
.cover {
width: 100%;
height: 300rpx;
border-radius: 15rpx;
}
.label-box {
margin-top: 6rpx;
display: flex;
flex-direction: row;
overflow: auto;
.label {
padding: 5rpx 10rpx;
font-size: 20rpx;
margin-right: 20rpx;
border-radius: 10rpx;
flex-shrink: 0;
display: inline-block;
}
.label-color-1 {
background: #faefe6;
color: #cc6008;
}
.label-color-2 {
color: #F1413C;
background: #FEF3F3;
}
.label-color-3 {
background: #ff8787;
color: #ff3737;
}
}
}
</style>
\ No newline at end of file
<template>
<view class="c-flex_row c-aligns_center c-justify_between read-time-count-row">
<view class="c-flex_row c-aligns_center">
<view class="label">
<!-- <view class="label">
<view class="title">
今日<br>已读
</view>
</view>
</view> -->
<image class="labelimg" src="../../static/images/readtext.png"></image>
<!-- <view class="value" v-if='count.count'> -->
<view class="value">
<view class="count">
......@@ -75,22 +76,13 @@
<style lang="scss">
.read-time-count-row {
padding: 20rpx;
padding-left: 0;
.label {
width: 90rpx;
height: 90rpx;
display: flex;
align-items: center;
margin-right: 15rpx;
justify-content: center;
.title {
font-size: 30rpx;
font-weight: 500;
color: #000000;
letter-spacing: 0.33em;
line-height: 1.33em;
}
.labelimg {
margin-top: 10rpx;
margin-right: 10rpx;
width: 65rpx;
height: 70rpx;
}
.value {
......@@ -105,14 +97,14 @@
border-radius: 10rpx;
width: 90rpx;
height: 90rpx;
color: #000000;
color: #383B3D;
.count-value {
position: absolute;
top: 42%;
left: 50%;
transform: translate(-50%, -50%);
color: #000000;
color: #383B3D;
font-size: 46rpx;
font-weight: 700;
}
......
......@@ -7,12 +7,14 @@
<view class="change" @click="refreshList">换一换</view>
</view>
</view>
<view class="rowitem" v-if="listType==0||listType==2">
<view class="rowitem" v-if="listType==0">
<!-- 猜你喜欢 -->
<book-list-item2 class="item" v-for='(item, index) in dataList' :key='index' :item='item'
@tapItem='tapItem($event, index)'>
</book-list-item2>
</view>
<view class="columnitem" v-else-if="listType==1">
<!-- 热门推荐-首页 -->
<book-list-item :item='dataList[0]' :showClose='false' @tapItem='tapItem($event, index)'>
</book-list-item>
<view class="rowitem">
......@@ -21,8 +23,15 @@
</book-list-item2>
</view>
</view>
<view class="rowitem" v-else-if="listType==2">
<!-- 新书推荐 -->
<book-list-item3 class="item2" v-for='(item, index) in dataList' :key='index' :item='item' :showClose='false'
@tapItem='tapItem($event, index)'>
</book-list-item3>
</view>
<view class="columnitem" v-else-if="listType==3">
<book-list-item class="item" v-for='(item, index) in dataList' :key='index' :item='item'
<!-- 热门推荐-搜索页 -->
<book-list-item v-for='(item, index) in dataList' :key='index' :item='item'
@tapItem='tapItem($event, index)' :showClose='false'>
</book-list-item>
</view>
......@@ -43,11 +52,6 @@
import BookshelfBookItem from '../../common/models/BookshelfBookItem.js';
import {
collectionBook,
noticeCollectionListChange
} from "../../common/services/index.js"
export default {
mixins: [common],
props: {
......@@ -163,6 +167,16 @@
flex-wrap: wrap;
padding-left: 20rpx;
.item2 {
width: 47%;
margin-bottom: 20rpx;
margin-right: 20rpx;
}
.item:last-child {
margin-right: 0;
}
.item {
width: 22%;
margin-bottom: 20rpx;
......
......@@ -77,13 +77,6 @@
this.$nextTick(() => {
this.$refs[`bookList${n.currentIndex}`][0].initRefresh();
})
// this.$nextTick(() => {
// // this.$refs[`bookList${n.currentIndex}`][0].initRefresh();
// let ref = this.$refs.bookList;
// if (ref) {
// ref[n.currentIndex].initRefresh();
// }
// })
},
deep: true
}
......
<template>
<view v-if="localActiviteFlag==1" class="body">
<view style="height: 92%;">
<bookshelf v-show=" currentPage==0" ref="index" />
<bookshelf v-show="currentPage==0" ref="shelf" v-on:showEditBarH="showEditBarH" />
<bookcity v-show="currentPage==1" ref="city" />
<warehouse v-show="currentPage==2" ref="recommend" />
<userPage v-show="currentPage==3" ref="user" />
</view>
<view class="tabs-bar" :style="'z-index: 999;height: 8%;padding-bottom:' + bottomSafeHeight + 'px'">
<view class="tabs-bar" :style="'z-index: 99;height: 8%;padding-bottom:' + bottomSafeHeight + 'px'">
<view :class="currentPage==0?'tab active': 'tab'" @click="tabChange(0)">
<view class="tab-home">
<image v-if="currentPage==0" class="tabs-image" src="/static/tab/bookshelf_s.png" mode="heightFix">
......@@ -40,6 +40,15 @@
我的
</view>
</view>
<view v-if="showEditBar" class="editBar" :style="'padding-bottom:' + bottomSafeHeight + 'px;'">
<view class="editItem" @click="!isFullChoice?fullChoice():noChoice()">
{{!isFullChoice?'全选':'全不选'}}
</view>
<view class="editItem" @click="deleteCollect">
删除
</view>
</view>
</view>
<view v-else class="body">
......@@ -86,6 +95,8 @@
currentPage: 1,
localActiviteFlag: 0,
localIdcode: 0,
showEditBar: false,
isFullChoice: false,
}
},
onLoad(options) {
......@@ -135,7 +146,7 @@
loadComponentData() {
if (this.localActiviteFlag == 1) {
if (this.currentPage == 0) {
this.$refs.index.show();
this.$refs.shelf.show();
} else if (this.currentPage == 1) {
this.$refs.city.show();
} else if (this.currentPage == 2) {
......@@ -146,6 +157,21 @@
} else {
this.$refs.recommend2.show();
}
},
showEditBarH(b) {
this.showEditBar = b
this.isFullChoice = false
},
fullChoice() {
this.isFullChoice = !this.isFullChoice
this.$refs.shelf.fullChoice()
},
noChoice() {
this.isFullChoice = !this.isFullChoice
this.$refs.shelf.noChoice()
},
deleteCollect() {
this.$refs.shelf.deleteCollect()
}
}
}
......@@ -153,6 +179,7 @@
<style lang="scss">
.body {
position: relative;
height: 100%;
background: #FFF7F7;
}
......@@ -166,6 +193,22 @@
//box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.editBar {
position: absolute;
bottom: 0;
z-index: 999;
width: 100%;
height: 8%;
background: white;
display: flex;
align-items: center;
.editItem {
text-align: center;
width: 50%;
}
}
.tab-home {
padding-top: 16rpx;
}
......
......@@ -93,7 +93,6 @@
redirectTo('home?activiteFlag='+data.activiteFlag+"&idcode="+data.idcode);
// redirectTo('/pagesA/vipPay/vipPay');
}, 1000);
}
});
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment