ydd_front/mer_uniapp/pages/discover/components/discover_topic.vue

<template>
	<view :data-theme="theme">
		<view class="header borderPad header-box">
			<text class="title">话题</text>
			<text class="iconfont icon-guanbi5" @click="close"></text>
		</view>
		<view class='search acea-row row-between-wrapper'>
			<view class='input acea-row row-middle'>
				<text class='iconfont icon-sousuo2'></text>
				<input class="placeholder" type='text' :value='searchValue' :focus="focus" placeholder='点击搜索话题'
					placeholder-class='placeholder'  @input="setValue" @confirm="searchBut" maxlength="20"></input>
			</view>
			<view class='bnt' @tap='searchBut'>搜索</view>
		</view>
		<view class="topic-recommend">
			<view class="topic-title acea-row row-middle"><text class="dian mr10"></text>推荐话题</view>
			<view class="list acea-row">
				<view v-for="item in topicRecommendList" :key="item.id" :class="item.isChoose ? 'active' : ''"
					@click="onCheck(item)" class="item borderPad mr20 mb30"><text
						:class="item.isChoose ? 'font-color' : ''" class="icon">#</text>{{item.name}}
				</view>
			</view>
		</view>
		<view class="topic-recommend">
			<view class="topic-title mt10 acea-row row-middle"><text class="dian mr10"></text>全部话题</view>
			<view class="list acea-row" style="border: none;">
				<view v-for="item in topicList" :key="item.id" @click="onCheck(item)"
					:class="item.isChoose ? 'active' : ''" class="item borderPad mr20 mb30">
					<text class="icon" :class="item.isChoose ? 'font-color' : ''">#</text>{{item.name}}
				</view>
			</view>
		</view>
		<view class="foot_bar">
			<button class="confirm_btn" @click="submit">确定({{topicSelectedList.length}}/5)</button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		topicListApi,
		topicRecommendListApi,
	} from '@/api/discover.js';
	let app = getApp();
	export default {
		computed: mapGetters(['discoverTopic']),
		data() {
			return {
				focus: false,
				searchValue: '',
				theme: app.globalData.theme,
				where: {
					page: 1,
					limit: 30,
					keywords: '',
				},
				loaded: false,
				loading: false,
				topicList: [], //全部
				topicRecommendList: [], //推荐
				topicSelectedList: [] //选中
			}
		},
		mounted() {
			this.topicSelectedList = [...this.discoverTopic];
			this.getTopicList();
			this.getTopicRecommendList();
		},
		onReachBottom() {
			this.getTopicList();
		},
		methods: {
			close() {
				this.$emit('onClose');
			},
			/*获取初始化选中的数据*/
			getInitchecked(arr) {
				let that = this;
				arr.forEach((item, index) => {
					that.$set(item, 'check', false);
					that.topicSelectedList.forEach((val, i) => {
						if ((item.id == val.id)) {
							that.$set(item, 'isChoose', true);
						}
					})
				})
			},
			searchBut(){
				this.focus = false;
				this.where.page = 1;
				this.loaded = false;
				this.loading= false;
				this.topicList = [];
				this.getTopicList();
			},
			//搜索
			onBlur(){
			},
			setValue: function(event) {
				this.$set(this, 'searchValue', event.detail.value);
			},
			/*确定提交*/
			submit() {
				this.$store.commit('DiscoverTopic',this.topicSelectedList);
				this.$emit('onClose',this.topicSelectedList)
			},
			//点击
			onCheck(item) {
				if (this.topicSelectedList.length > 4 && !item.isChoose) {
					return;
				}
				let list = [...this.topicRecommendList, ...this.topicList]
				list.forEach((val, i) => {
					if ((val.id == item.id)) {
						this.$set(val, 'isChoose', !val.isChoose);
					} 
				})
				if (item.isChoose) {
					this.topicSelectedList.push(item)
				} else {
					this.topicSelectedList.splice(this.topicSelectedList.findIndex(itemn => ((itemn.id == item.id))), 1)
				}
			},
			//全部
			getTopicList() {
				if (this.loading || this.loaded) return;
				this.loading = true;
				this.where.keywords = encodeURIComponent(this.searchValue);
				topicListApi(this.where).then(
					res => {
						this.loadingb = false;
						this.loaded = res.data.list.length < this.where.limit;
						this.topicList.push.apply(this.topicList, res.data.list);
						this.where.page = this.where.page + 1;
						this.topicList.forEach((item, index) => {
							this.$set(item, 'isChoose', false);
						})
						this.getInitchecked(this.topicList);
					},
					error => {
						this.$util.Tips({
							title: error.message
						})
					}
				);
			},
			//推荐
			getTopicRecommendList() {
				topicRecommendListApi().then(
					res => {
						this.topicRecommendList = res.data;
						this.topicRecommendList.forEach((item, index) => {
							this.$set(item, 'isChoose', false);
						})
						this.getInitchecked(this.topicRecommendList);
					},
					error => {
						this.$util.Tips({
							title: error.message
						})
					}
				);
			}
		}
	}
</script>
<style lang="scss" scoped>
	.header {
		position: relative;
		text-align: center;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	
		.title {
			color: #282828;
			font-size: 36rpx;
			font-weight: bold;
		}
	
		.iconfont {
			color: #8A8A8A;
			font-size: 28rpx;
			position: absolute;
			top: 4rpx;
			right: 24rpx;
		}
	}
	.foot_bar {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #ffffff;
		padding: 20rpx 0;
		z-index: 5;
	
		.confirm_btn {
			width: 710rpx;
			height: 86rpx;
			line-height: 84rpx;
			color: #ffffff;
			text-align: center;
			font-size: 32rpx;
			@include main_bg_color(theme);
			border-radius: 43rpx;
			margin: 0 auto;
		}
	}
	.topic {
		&-recommend {
			padding: 30rpx 0 0 30rpx;

			.dian {
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				opacity: 1;
				@include main_bg_color(theme);
			}

			.list {
				border-bottom: 1px solid #EEEEEE;
				padding-bottom: 20rpx;

				.active {
					@include cate-two-btn(theme);
					@include main_color(theme);
					border: none;
				}
			}

			.item {
				height: 62rpx;
				line-height: 59rpx;
				border-radius: 31rpx;
				border: 1px solid #CCCCCC;
				color: #282828;
				font-size: 24rpx;

				.icon {
					color: #999999;
					margin-right: 6rpx;
				}
			}

			.item:nth-last-child(1) {
				margin-right: 0;
			}
		}

		&-title {
			font-weight: 600;
			color: #282828;
			font-size: 30rpx;
			margin-bottom: 30rpx;
		}
	}

	.search {
		padding: 0 24rpx 18rpx 30rpx;
		background-color: #fff !important;

		.input {
			width: 610rpx;
			background-color: #f7f7f7;
			border-radius: 33rpx;
			padding: 0 35rpx;
			box-sizing: border-box;
			height: 66rpx;

			input {
				width: 472rpx;
				font-size: 26rpx;
			}

			.placeholder {
				color: #bbb;
			}

			.iconfont {
				color: #000;
				font-size: 35rpx;
			}
		}

		.bnt {
			text-align: center;
			height: 66rpx;
			line-height: 66rpx;
			font-size: 30rpx;
			color: #282828;
		}
	}
	.header-box{
		height: 50rpx;
		line-height: 50rpx;
	}
	.placeholder{
		margin-left: 16rpx;
	}
</style>