yixiang/pageC/drafts.vue

<template>
	<view class="content">
		<u-navbar title="草稿箱" height="88rpx" :placeholder="true" :autoBack="true">
			<view slot="right" class="u-nav-slot">
				<text @click="show_manager = !show_manager">管理</text>
			</view>
		</u-navbar>
		<view class="tabs">
			<u-tabs :list="tabs" :scrollable="false" lineWidth="0" keyName="name" :current="current" @click="changetabs"
				:inactiveStyle="{color: '#999999',fontSize: '30rpx',}"
				:activeStyle="{color: '#00B0B0',fontSize: '30rpx',}"></u-tabs>
		</view>
		<view class="list" v-if="list.length > 0">
			<u-checkbox-group v-model="select_all" placement="column" @change="selectitem">
				<view class="list-item hflex acenter" v-for="(item,index) in list" :key="index">
					<u-checkbox v-if="show_manager" activeColor="#57C3C2" shape="circle"
						:customStyle="{marginBottom: '8px'}" :name="item.id"></u-checkbox>
					<view class="hflex acenter" style="flex:1" v-if="item.source_type != 'post'">
						<image :src="item.source.image" mode="aspectFill"></image>
						<view class="img-right">
							<text class="name text_hide2">{{item.source.title}}</text>
							<view class="hflex acenter jbetween" style="width: 100%;">
								<view class="num">{{item.created_at}}</view>
								<view class="hflex acenter btns">
									<text @click="editItem(item)">编辑</text>
									<text @click="delItem(item)">删除</text>
								</view>
							</view>
						</view>
					</view>
					<view class="hflex acenter" style="flex:1" v-if="item.source_type == 'post'">
						<image :src="item.source.images[0]" mode="aspectFill" v-if="item.source.images.length>0"></image>
						<view class="img-right">
							<text class="name text_hide2">{{item.source.content}}</text>
							<view class="hflex acenter jbetween" style="width: 100%;">
								<view class="num">{{item.created_at}}</view>
								<view class="hflex acenter btns">
									<text @click="editItem(item)">编辑</text>
									<text @click="delItem(item)">删除</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<view class="list" v-else>
			<u-empty mode="data"></u-empty>
		</view>
		<view style="height: 186rpx;" v-if="show_manager"></view>
		<view class="bottom hflex acenter jbetween" v-if="show_manager">
			<u-checkbox-group placement="column">
				<u-checkbox :checked="quanxuan" @change="selectall" activeColor="#57C3C2" shape="circle"
					:customStyle="{marginBottom: '8px'}" label="全选"></u-checkbox>
			</u-checkbox-group>
			<view class="btn">批量删除</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				last_page: 1,
				current: 0,
				tabs: [{
						id: '',
						name: '全部'
					},
					{
						id: 'article',
						name: '文章'
					},
					{
						id: 'video',
						name: '视频'
					},
					{
						id: 'info',
						name: '资讯'
					},
					{
						id: 'post',
						name: '论坛'
					},

				],
				options: [{
					text: '批量删除',
					style: {
						backgroundColor: '#FF5038'
					}
				}],
				show_manager: false,
				select_all: [],
				quanxuan: false
			}
		},
		onLoad() {},
		onShow() {
			this.list = []
			this.getlist()
		},
		onReachBottom() {
			if (this.page == this.last_page) {
				uni.$u.toast('已经到底了')
				return
			} else {
				this.page++
				this.getlist()
			}
		},
		methods: {

			editItem(item) {
				var that = this
				let data = {}
				if (item.source_type == 'post') {
					data = item.source
					uni.navigateTo({
						url: '/pageA/add-luntan?data=' + encodeURIComponent(JSON.stringify(data)) + '&edit=1'
					})
				} else {
					let topic = {
						id: item.source.topic_id
					}
					data = {
						id: item.source.id,
						video_title: item.source.video_title ? item.source.video_title : '',
						video_url: item.source.video_url ? item.source.video_url : '',
						title: item.source.title ? item.source.title : '',
						content: item.source.content ? item.source.content : '',
						topic: topic,
						image: item.source.image ? item.source.image : ''
					}
					uni.navigateTo({
						url: '/pageA/add-wenzhang?data=' + encodeURIComponent(JSON.stringify(data)) + '&type=' +item.source_type + '&edit=1'
					})
				}

			},
			delItem(item) {
				var that = this
				$api.req({
					url: item.source_type + '/' + item.source_id,
					method: 'DELETE'
				}, function(res) {
					$api.info(res.msg)
					that.page = 1
					that.list = []
					that.getlist()
				})
			},
			selectall() {
				this.quanxuan = !this.quanxuan
				console.log(this.quanxuan);
				if (this.quanxuan) {
					this.select_all = []
					for (var i = 0; i < this.list.length; i++) {
						this.select_all.push(this.list[i].id)
					}
				} else {
					this.select_all = []
				}
				console.log(this.select_all);
			},
			selectitem(e) {
				this.select_all = e
				if (this.select_all.length == this.list.length) {
					this.quanxuan = true
				} else {
					this.quanxuan = false
				}
			},
			changetabs(e) {
				this.current = e.index
				this.select_all = []
				this.quanxuan = false
				this.page = 1
				this.list = []
				this.getlist()
			},
			getlist() {
				var _this = this
				$api.req({
					url: 'draft',
					method: 'GET',
					data: {
						source_type: _this.tabs[_this.current].id,
						page: _this.page,
						limit: 10,
					}
				}, function(res) {
					if (res.code == 10000) {
						_this.list = _this.list.concat(res.data.list)
						_this.last_page = res.data.last_page
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.content::v-deep {
		background: #FFFFFF;
		position: relative;

		.bottom {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			padding: 12rpx 28rpx 80rpx;
			box-sizing: border-box;
			z-index: 29;

			.btn {
				width: 184rpx;
				height: 72rpx;
				background: #00B0B0;
				border-radius: 36rpx;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
			}
		}

		.list {
			width: 100%;
			box-sizing: border-box;
			padding: 28rpx 28rpx;

			.list-item {
				margin: 0 0 32rpx;

				image {
					width: 200rpx;
					height: 128rpx;
					border-radius: 6rpx;
					margin: 0 20rpx 0 0;
				}

				.img-right {
					width: calc(100% - 220rpx);

					.name {
						max-width: 452rpx;
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #333333;
						padding: 0 0 14rpx;
					}

					.num {
						font-size: 20rpx;
						font-family: SFPro, SFPro;
						font-weight: 400;
						color: #666666;
					}

					.price {
						font-size: 28rpx;
						font-family: JDZhengHT, JDZhengHT;
						font-weight: 400;
						color: #FF3333;
					}

					.btns {
						text:first-child {
							width: 96rpx;
							height: 48rpx;
							background: #00B0B0;
							border-radius: 26rpx;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 48rpx;
							text-align: center;
						}

						text:last-child {
							width: 96rpx;
							height: 48rpx;
							background: #F35648;
							border-radius: 26rpx;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 48rpx;
							text-align: center;
							margin: 0 0 0 22rpx;
						}
					}
				}

				.u-checkbox {
					margin: 0 32rpx 0 0;
				}
			}
		}

		.tabs {
			width: 100%;
			padding: 18rpx 0;
			border-bottom: 2rpx solid #F5F5F5;
		}

		.u-nav-slot {
			text {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}
</style>