commonProblem.vue 3.2 KB
<template>
	<view class="">
		<view class="top"><image class="wh100" src="/static/questionBg.png" mode=""></image></view>
		<view class="topTitle">有什么可以帮您!</view>
		<view class="botQuestion">
				<u-tabs :list="list2" lineColor="#FED000" :scrollable="false" @click="toggle"></u-tabs>
				<scroll-view scroll-y="true" class="questionList" @scrolltolower="scrolltolower">
					<view class="list"  v-for="(item,idx) in list" :key="idx" @click="toItem(item.id)">
						<view class="question">{{item.title}}</view>
						<view class="arrow"><image  src="/static/arrowR.png" ></image></view>
					</view>
				</scroll-view>
		</view>
	</view>
</template>

<script>
	import {toa} from '@/utils/toast.js'
	import { problemSort,problemList } from '@/api/mine.js'
	export default {
		data() {
			return {
				list2: [{
					name: '猜你想问',
				}, {
					name: '退换货品',
				}, {
					name: '服务条款'
				},{name:'分期支付'}],
				page:1,
				lastPage:1,
				curId:'',
				list:[]
			}
		},
		onLoad() {
			this.problemSort()
		},
		methods: {
			toItem(id) {
				uni.navigateTo({
					url:'/pages/mine/questionDetails?id='+id
				})
			},
			async problemSort(){
			  try {
			    const res = await problemSort()
				this.list2 = res.list
				this.curId = res.list[0].id
				this.problemList()
			    console.log('problemSort', res)
			    // 保存数据
			  } catch (err) {
			 	uni.showToast({ title:err,icon:'none' })
			    console.log('problemSort', err)
			  }
			},
			async problemList(f){
			  try {
				  toa.loading('加载中')
			    const res = await problemList(this.curId,this.page,15)
				toa.hideLoading()
				this.lastPage = res.list.last_page
				this.list = f?res.list.data:this.list.concat(res.list.data)
			    console.log('problemList', res)
			    // 保存数据
			  } catch (err) {
			 	uni.showToast({ title:err,icon:'none' })
			    console.log('problemList', err)
			  }
			},
			toggle(e){
				console.log(e);
				if(this.curId == e.id) return 
				this.page = 1
				this.curId = e.id
				this.problemList(1)
			},
			scrolltolower(){
				if(this.page >= this.lastPage) return
				this.page=this.page+1 
				this.problemList()
			}
		},
	}
</script>

<style lang="less">
	.top {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 400rpx;
		z-index: -1;
	}
		.topTitle {
			position: absolute;
			left: 44rpx;
			top: 134rpx;
			 color: rgba(0,0,0,1);
			 font-size: 44rpx;
			 font-weight: 700;
		}
		.botQuestion {
				position: absolute;
				left: 0;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				top: 260rpx;
				// height: calc(100vh - 260rpx);
				width: 100%;
				background: #fff;
				.questionList {
					margin-top: 10rpx;
					height: calc(100vh - 360rpx);
					.list {
						padding: 0 32rpx;
						margin-bottom: 40rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						// height: 40rpx;
						.arrow {
							margin-left: 10rpx;
							width: 16rpx;
							height: 32rpx;
							image {
								width: 16rpx;
								height: 32rpx;
							}
						}
					}
				}
		}
</style>