Commit 6bd287bb authored by jyx's avatar jyx

优化样式

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