sooka_consult_uniapp/pages/asking/asking.vue

<template>
    <!-- pages/fuwu/fuwu.wxml -->
    <view class="contain">
        <!-- 问答类别 -->
		<swiper :indicator-dots="true" :autoplay="false" class="swiper">
			<swiper-item v-for="(e,idx) in loopTimes" style="padding: 1% 2% 0 0;">
				<view class="swiper-item">
					<view v-for="(v,index) in imgListExcuted(idx)" style="width: 48%;height: 27%;" @tap="goType(v.id,v.type)">
						<image :src="loadImgSrcLocalhost(v.path)" class="img"></image>
						<view class="textDesc">
							<h2>{{v.type}}</h2>
							<span>{{v.questionNum}}</span>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 问答列表 -->
		<view class="rnwdList" v-for="(item, index) in hotQuestionList" :key="index" @tap="goDetails(item.id)">
			<span class="lb">{{ item.type }}</span>
			<view class="list">
				<span class="listTitle">{{ item.title }}</span>
				<view class="jlSj">
					<span class="jf">
						{{ item.score }}
						<em class="iconfont icon-jifen"></em>
					</span>
					<view class="ck">
						<span>
							<em class="iconfont icon-pinglun"></em>
							{{ item.comment }}
						</span>
						<span>
							<em class="iconfont icon-chakan"></em>
							{{ item.browse }}
						</span>
						<span>
							<em class="iconfont icon-shoucang"></em>
							{{ item.collect }}
						</span>
					</view>
				</view>
			</view>
			<em class="iconfont icon-xiangyoujiantou"></em>
		</view>
		<uni-fab ref="fab" horizontal="right"
		         @fabClick="goAddQuestion()"/>
		<!-- <button type="primary" @click="goAddQuestion()" v-if="form.id==null">新增</button> -->
    </view>
</template>

<script>
import upload from '@/components/upload/index.vue'
import {getTypeList,getHotQuestionList} from '@/api/asking/asking.js'
export default {
	components: {
		upload
	},
    data() {
        return {
			imageList:[
				'/profile/upload/2024/03/02/D5hjxYkldNxIef093ae65b2128b1293b86a7b537ed98_20240302170757A001.png',
				'/profile/upload/2024/03/02/D5hjxYkldNxIef093ae65b2128b1293b86a7b537ed98_20240302170757A001.png'
			],
            typeList: [
                {
                    type: null,
					path: null
                }
            ],
            hotQuestionList: [{}],
			// 查询参数
		  queryParams: {
			pageNum: 1,
			pageSize: 6,
		  },
		  loopTimes:null
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.getTypeList();
        this.getHotQuestionList();
    },
    methods: {
		imgListExcuted(idx){
			let result = []
			let pageNum = 6
			if(idx == 0){
				result = this.typeList.slice(0,6)
			} else {
				this.typeList.filter(e => {
					if(this.typeList.length - pageNum * (idx +1) < pageNum){
						console.log(this.typeList.slice(idx*6,this.typeList.length))
						// 剩余信息不够6条 全部返回
						result = this.typeList.slice(idx*6,this.typeList.length)
					} else {
						result = this.typeList.slice(idx*6,idx*6 +6 )
					}
				})
			}
			console.log('加工后result',idx,result)
			return result
		},
         //获取类型列表
        getTypeList(){
            getTypeList(this.queryParams).then(res =>{
                this.typeList = res.rows
				this.loopTimes = (this.typeList.length/6).toFixed(0) *1
				console.log('loopTimes',this.loopTimes)
            })
        },
         //获取热门问题列表
        getHotQuestionList(){
            getHotQuestionList().then(res =>{
                this.hotQuestionList = res.rows
            })
        },
		//按类型跳转问题列表
        goType(id,type) {
			uni.setStorageSync('id', id)
            uni.navigateTo({
                url: '/pages/asking/questionlist?type='+type
            });
        },
		//新增问题
        goAddQuestion() {
            uni.navigateTo({
                url: '/pages/asking/addquestion'
            });
        },

        goDetails(id) {
            uni.navigateTo({
                url: '/pages/asking/questiondetails?id=' + id
            });
        },

		updateImg(imgList){
			this.imageList = imgList;
		}
    }
};
</script>
<style lang="scss">
@import '@/pages/asking/asking.css';
.contain {
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0rpx 20rpx;
    box-sizing: border-box;
	flex-wrap: wrap;
}
 /deep/ .wx-swiper-dots-horizontal {
	bottom: 0 !important;
}
.swiper{
	width: 100%;
	height: 324px;
	.swiper-item{
		display: flex;
		flex-wrap: wrap;
		height: 100%;
		justify-content: space-between;
		.img{
			width: 100%;
			height: 100%;
		}
		.textDesc{
			position: relative;
			height: 78%;
			bottom: 95%;
			left: 1%;
		}
		.textDesc h2{
			font-size: 36rpx;
			position: absolute;
			left: 30rpx;
			top: 40rpx;
			z-index: 1;
			font-weight: bold;
			opacity: .5;
		}
		.textDesc span {
		    font-size: 30rpx;
		    position: absolute;
		    left: 30rpx;
		    top: 88rpx;
		    z-index: 1;
			opacity: .7;
		}
	}
	.swiper-item view{
		width: 300px;
		height: 30%;
		background-size: 100% 100%;
	}
	.swiper-item view image{
		width: 100%;
		height: 100%;
	}
}
</style>