powerbank/pages/abbr/index.vue

<template>
	<view class="page">
		<u-navbar title="常见问题" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000" title-size='36' height='50'></u-navbar>
		<view class="serch">
			<u-search placeholder="搜索问题" height="72" :showAction="false" v-model="keyword" @change="sousuo"></u-search>
		</view>

		<view class="list" v-if="!listitem.length == 0">
			<view class="tab">
				<u-tabs :list="list" :is-scroll="true" :current="current" active-color="#38D492" bar-width="80"
					gutter="40" item-width="200" @change="change"></u-tabs>
			</view>
			<view class="wenti" v-for="(item,index) in listitem" :key="index">
				<view class="wzwt" @click="btnxq(item.articleId)">
					<text>{{item.title}}</text> <u-icon name="arrow-right"></u-icon>
				</view>

			</view>
			<view class="huan" @click="btnhuan" v-if="list[0].name == '猜你想问'">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uQyHxbK49U3S5f4uLU6m" mode=""></image> 换一换
			</view>
		</view>
		<view class="" v-if="flag" style="width: 100%;margin-top: 50rpx;text-align: center;">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uO8bv6yv8Icg5hlbKccj" mode="" style="width: 430rpx;height: 430rpx;"></image>
			<text
				style="display: block;font-size: 36rpx;color: #666;margin-top: 30rpx;font-weight: 600;">您搜索的问题暂无相关分类</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				current: 0,
				classifyId: '',
				listitem: [],
				huanindex: 1,
				keyword: '',
				flag:false
			}
		},
		onLoad() {
			this.getfenlei()
			setTimeout(() => {
				this.getlists()
			}, 1000)
		},
		methods: {
			sousuo() {
				this.huanindex = 1
				this.getfenlei()
			},

			getfenlei() {
				this.$u.get('/app/article/problem/list', {
					keyword: this.keyword
				}).then(res => {
					if (res.rows.length != 0) {
						this.flag = false
						this.list = res.rows.map(row => ({
							name: row.classifyName,
							classifyId: row.classifyId
						}))
						if (this.list.length != 0) {
							this.classifyId = this.list[1].classifyId
							this.getlists()
						}
					} else {
						this.listitem = []
						this.flag = true
					}
				})
			},
			btnhuan() {
				if (this.list.length != 0) {
					this.classifyId = this.list[this.huanindex++].classifyId
					// this.current++
					if (this.huanindex == this.list.length) {
						this.huanindex = 1
					}
					// if(this.current == this.list.length){
					// 	this.current = 0
					// }
					this.getlists()
				}
			},
			btnxq(id) {
				uni.navigateTo({
					url: '/page_user/aboutxq?id=' + id
				})
			},
			change(index) {
				if (index == 0) {
					this.classifyId = this.list[index + 1].classifyId
					this.current = index
					this.getlists()
				} else {
					this.classifyId = this.list[index].classifyId
					this.current = index
					this.getlists()
				}
			},
			getlists() {
				this.$u.get('/app/article/list?classifyId=' + this.classifyId + '&pageNum=' + 1 + '&pageSize=' + 6).then(
					res => {
						if (res.code == 200) {
							this.listitem = res.rows
						}
					})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title,
	/deep/ .uicon-nav-back {
		padding-bottom: 22rpx;
	}
	page {
		// background-color: ;
		background: linear-gradient(180deg, #38D492 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.page {
		width: 750rpx;
		padding-left: 34rpx;
		padding-right: 34rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;

		.serch {
			margin-top: 44rpx;
		}

		.list {
			width: 680rpx;
			height: 654rpx;
			background: #FFFFFF;
			margin-top: 46rpx;
			border-radius: 50rpx;
			padding: 10rpx 32rpx;
			box-sizing: border-box;
			overflow: hidden;

			// overflow-x: scroll;
			.tab {
				width: 650rpx;
				margin-bottom: 38rpx;
				// display: flex;

			}

			.wenti {
				.wzwt {
					display: flex;
					justify-content: space-between;
					margin-bottom: 38rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #3D3D3D;
				}
			}

			.huan {
				image {
					width: 28rpx;
					height: 28rpx;
					vertical-align: middle;
					margin-right: 10rpx;
				}

				width: 100%;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}
		}
	}

	.active {
		border-bottom: 6rpx solid #D9D8FF;
		padding-bottom: 10rpx;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
	}
</style>