shanxian-work-app/pages/mine/repairs.vue

<template>
	<view>

		<!-- <view class="menus" > -->

		<allArea @getChild="childMess"></allArea>

		<!-- </view> -->


		<view class="feed" style="">
			<view class="cut">
				<text @click="choose" :class="curPage==0?'cur':''" :data-idx="0">未读</text>
				<text @click="choose" :class="curPage==1?'cur':''" :data-idx="1">已读</text>
			</view>
			<view class="box">
				<view class="list" v-for="(item,index) in repairsList" :key='index'>
					<view class="content">
						<view style="font-size:28rpx;" class="title">
							<view class="title-left">
								<text> {{item.trouble_part}}</text>
								<text style="margin-left:15rpx;">({{item.bike_no}})</text>
							</view>
							<view class="title-right" v-if="curPage==0" @click="markRead(item.id)" >标为已读</view>
						</view>
						<view class="body">
							<view class="body-left">
								<image style="height:50rpx;width:112rpx" src="http://resource.weilaibike.com/yunwei/rep4.png" v-if="item.trouble_part=='刹车'"></image>
								<image style="height:96rpx;width:96rpx" src="http://resource.weilaibike.com/yunwei/rep6.png" v-if="item.trouble_part=='车胎'"></image>
								<image style="height:58rpx;width:116rpx" src="http://resource.weilaibike.com/yunwei/rep5.png" v-if="item.trouble_part=='链条'"></image>
								<image style="height:66rpx;width:116rpx" src="http://resource.weilaibike.com/yunwei/rep1.png" v-if="item.trouble_part=='车座'"></image>
								<image style="height:80rpx;width:60rpx" src="http://resource.weilaibike.com/yunwei/rep2.png" v-if="item.trouble_part=='二维码'"></image>
								<image style="height:72rpx;width:64rpx" src="http://resource.weilaibike.com/yunwei/rep3.png" v-if="item.trouble_part=='其他'"></image>
							</view>
							<view class="body-right">
								<view class="describe">问题描述：{{item.trouble_description}}</view>
							</view>
						</view>
						<view class="time flexB">
							<text>创建时间：{{item.created_at}}</text>
							<text>手机号：{{item.users.mobile}}</text>
						</view>
					</view>
				</view>
				<view class="noData" v-if="repairsList.length == 0">
					<image src="http://resource.weilaibike.com/none.png" ></image>
					<view>暂无相关数据~</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	var app = getApp()
	import allArea from '../../component/allArea/allArea.vue'
	export default {
		data() {
			return {
				screenHeight: '', //屏幕可视高度
			
				value1: 0, //第一个显示什么
				option1: [],
				curPage: 0, //tab切换 【1 已读  0未读】
				repairsList: [], //用户反馈列表
				page: 1,
				areaID: uni.getStorageSync('curId'), //区域id
				list: uni.getStorageSync('allArea'), //骑行区域选择列表
				value1: 0, //骑行区与第一个显示什么
			}
		},
		created() {
			
		},
		onLoad() {
			if(uni.getStorageSync('curVal')){
				this.lookRepairs()
			}
			else {
				this.areaID=this.list[0].areaID;
				console.log(this.areaID,'12345678')
				this.lookRepairs()
			}
		},
		methods: {
			childMess:function(e){
				console.log(e,'这是子组件穿过来的值')
				this.areaID=e.areaID
				this.lookRepairs()
			},
			//获取保修列表
			lookRepairs:function(){
				uni.showLoading({
				      title: '加载中...',
				    })
				    let cur = this.curPage;
				    let areaID = this.areaID;
				    app.request('user/userRepaired?status=' + cur + '&area_id=' + areaID, '', 'GET').then(res => {
				     uni.hideLoading();
				      if (res.statusCode == 200) {
				        console.log(res, '报修列表')
				        let list = res.data.data;
				        if (list.length == 0) {
				         
				            this.repairsList=[]
				            
				        
				        } else {
				       
				            this.repairsList= res.data.data
				            // bgColor: '#efefef'
				         
				        }
				      }
				    })
			},
			  choose:function(e) { //已读未读切换
			    let idx = e.currentTarget.dataset.idx;
			      this.curPage=idx,
			    this.lookRepairs();
			    // this.goTop();
			  },
			  //标记为已读
			   markRead:function(e) { //标记为已读
			      let id = e.currentTarget.dataset.id
			      app.request('user/userRepaired/status?id=' + id, '', 'GET').then(res => {
			        if (res.statusCode == 200) {
			          this.lookRepairs();
			        }
			      })
			    },
			// back: function() {
			// 	uni.navigateBack({
			// 		delta: 1
			// 	})
			// }
		},
		components: {
			allArea
		}
	}
</script>

<style>
	@import url("/static/css/base.css");

	/* pages/feedback/feedback.wxss */
	.iconfont {
		display: inline-block;
		height: 100%;
		font-size: 34rpx;
		width: 50rpx;
		text-align: center;
		padding: 14rpx 0;
	}

	.title {
		height: 50rpx;
/* 		background-color: #007AFF; */

	}

	.title-right {
		float: right;
		color: red;
	}

	.title-left,
	.title-right {
		display: inline-block;
	}

	.body-left {
		display: inline-block;
		width: 20%;

		text-align: center;
	}

	.body-right {
		display: inline-block;
		width: 70%;
		padding-left: 30rpx;
		font-size: 26rpx;
	}

	.body .right .describe {
		line-height: 1.8;
	}

	.body,
	.title,
	.time {
		padding: 15rpx 20rpx;

	}


	.time {
		color: #999;
		/* padding: 0 20rpx; */
		font-size: 26rpx;
		border-top: 1rpx solid #efefef;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}

	.menus-bg {
		width: 100%;
	}

	.menus {
		width: 100%;
		position: fixed;
		z-index: 100;
		left: 0;
		top: 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		z-index: 99999;
	}

	.menu {
		width: 100%;
		position: fixed;
		left: 70rpx;
		top: 0rpx;
		z-index: 888;
		align-items: center;
		height: 129rpx !important;
		padding-top: 18rpx;
		z-index: 99999;
	}

	.menu1 .van-dropdown-menu {
		width: 100%;
		position: fixed;
		left: 70rpx;
		top: 0rpx;
		z-index: 888;
		align-items: center;
		height: 100rpx !important;
		padding-top: 75rpx;
		z-index: 99999;
	}

	.van-dropdown-menu__item {
		flex: 0.25 !important;
		z-index: 99999;
	}

	.menus text {
		margin-left: 20rpx;
		font-size: 35rpx;
	}

	.feed {
		height: 100%;
		position: relative;
		background: #ff000022;
		margin-top: 100rpx;
	}

	.feed,
	.cut {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 30rpx;
		position: absolute;
		background: #fff;
		padding: 30rpx 0;
		z-index: 999;

	}

	.quest>view {
		margin-top: 10rpx;
	}

	.quest .user {
		margin-top: 15rpx;
	}

	.box {

		height: 80%;
		margin: 130rpx 0 40rpx 0;
		width: 100%;
	}

	.time {
		padding: 20rpx 20rpx;
		padding: 20rpx 0;
		border-top: 1rpx solid #efefef;
		width: 92%;
		margin: 0 auto;
	}

	.list {
		/*  background: #fff; */
		margin-top: 70rpx;
		width: 92%;
		margin: 15rpx auto 0;
		border: 1px solid #d8d8d8;
		border-radius: 20rpx;
		box-shadow: 0 0 6rpx 0 rgba(216, 216, 216, 1);
	}

	.list .info {
		display: flex;
		padding: 15rpx 0;
	}

	.list .quest {
		width: 70%;
	}

	.list text {
		font-size: 26rpx;
	}

	.list .read {
		margin-top: 15rpx;
	}

	.list .read view {
		color: #FE5C28;
		font-size: 26rpx;
	}

	.list image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		vertical-align: middle;
		margin: 5rpx 15rpx 0 20rpx;
	}
</style>