app_ancientSayings/pages/readingRecords/index.vue

<template>
	<view class="readingRecords_content">
		<view class="reading_records_list">
			<view class="_records_list_item" v-for="m in historyList" :key="m.id">
				<view class="_list_item_book_img">
					<image class="is_image" :src="m.cover"></image>
				</view>
				<view class="_list_item_right">
					<view class="_list_item_title">
						{{m.title}}
					</view>
					<view class="_list_item_operate">
						<view class="_item_operate_name">{{m.order}}</view>
						<view class="_item_operate_all">
							<view class="_operate_all_have" v-if="m.bookcase == 1">
								<view class="_all_have_image">
									<image class="is_image" src="/static/images/readingRecords_have.png" />
								</view>
								<view class="_all_have_name">已有</view>
							</view>
							<view class="_operate_all_add" v-else @tap="addBookshelf(m)">
								<view class="_all_add_image">
									<image class="is_image" src="/static/images/readingRecords_add.png" />
								</view>
								<view class="_all_add_name">书架</view>
							</view>
							<view class="_operate_all_del" @tap="deteleBookHistory(m)">
								<view class="_all_del_image">
									<image class="is_image" src="/static/images/readingRecords_add_sdelete.png" />
								</view>
							</view>
						</view>
					</view>
					<view class="_list_item_time">{{m.update_time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrlImage
	} from '@/utils/utils'
	export default {
		data() {
			return {
				historyList: []
			}
		},
		onShow() {
			this.siGetHistory();
		},
		methods: {
			addBookshelf(row) {
				uni.showLoading({
					title: '加载中...'
				});
				const data = {
					sid: row.sid,
				}
				uni.$u.http.post('/addBookshelf', data).then((res) => {
					uni.hideLoading();
					if (res.status == 1) {
						uni.showToast({
							title: '加入成功',
							icon: 'none'
						})
						this.siGetHistory(false);
					}
				}).catch((err) => {
					uni.hideLoading();
					console.log(err, "========")
				})
			},
			siGetHistory(showLoadingFlag = true) {
				if (showLoadingFlag) {
					uni.showLoading({
						title: '加载中...'
					});
				}
				const data = {};
				uni.$u.http.post('/getHistory', data).then((res) => {
					uni.hideLoading();
					if (res.status == 1) {
						const history = res.data.history;
						const historyList = baseUrlImage(history);
						this.historyList = historyList;
					}
				}).catch((err) => {
					uni.hideLoading();
					console.log(err, '========');
				});
			},
			deteleBookHistory(row) {
				uni.showLoading({
					title: '加载中...'
				});
				const data = {
					id: row.id,
				}
				uni.$u.http.post('/delHistory', data).then((res) => {
					setTimeout(() => {
						uni.hideLoading();
					}, 1000);
					if (res.status == 1) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						this.siGetHistory(false);
					}
				}).catch((err) => {
					setTimeout(() => {
						uni.hideLoading();
					}, 1000);
					console.log(err, "========")
				})
			}
		}
	}
</script>

<style lang="scss">
	.is_image {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.readingRecords_content {
		padding: 32rpx;

		.reading_records_list {

			._records_list_item {
				display: flex;
				margin-bottom: 32rpx;

				._list_item_book_img {
					width: 150rpx;
					height: 200rpx;
				}

				._list_item_right {
					flex: 1;
					padding: 16rpx 0 16rpx 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					._list_item_title {
						color: #1A1A1A;
						font-size: 32rpx;
						line-height: 1;
					}

					._list_item_operate {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;

						._item_operate_name {
							color: #999999;
							font-size: 26rpx;
							line-height: 1;
						}

						._item_operate_all {
							display: flex;

							._operate_all_add {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 114rpx;
								height: 60rpx;
								line-height: 60rpx;
								border-radius: 30rpx;
								border: 1px solid #FF728F;

								._all_add_image {
									width: 24rpx;
									height: 24rpx;
								}

								._all_add_name {
									font-size: 26rpx;
									color: #FF728F;
									margin-left: 4rpx;
								}
							}


							._operate_all_have {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 114rpx;
								height: 60rpx;
								line-height: 60rpx;
								border-radius: 30rpx;
								border: 1px solid #999999;

								._all_have_image {
									width: 24rpx;
									height: 24rpx;
								}

								._all_have_name {
									font-size: 26rpx;
									color: #999999;
									margin-left: 4rpx;
								}
							}

							._operate_all_del {
								margin-left: 16rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								width: 72rpx;
								height: 60rpx;
								line-height: 60rpx;
								border-radius: 30rpx;
								border: 1px solid #696969;

								._all_del_image {
									width: 40rpx;
									height: 40rpx;
								}
							}
						}

					}

					._list_item_time {
						color: #999999;
						font-size: 26rpx;
						line-height: 1;
						margin-top: 8rpx;
					}
				}
			}
		}
	}
</style>