mabaoDoctor/pages/opinion/opinion.vue

<template style="background-color: #b1b1b1;">
	<view style="width: 100%;height: 100%;">
		
		
		<view class="topbut">
			<!-- 正序 -->
			<view v-if="sort" @click="timeSort">
				<text style="margin-right: 20rpx;">时间正序</text>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<!-- 倒序 -->
			<view v-else @click="timeSort">
				<text style="margin-right: 20rpx;">时间倒序</text>
				<u-icon name="arrow-up"></u-icon>
			</view>
		</view>
		<view style="width: 100%;height: 100rpx;"></view>
		<!-- 卡片 -->
		<view class="list_view" v-for="item,index in list" :key='index' @click="next" :data-index="index">
			<!-- 左边内容 -->
			<view style="width: 80%;">
				<!-- 名字 -->
				<view style="margin-bottom: 20rpx;">
					<text style="width: 130rpx;color: #666666;display: inline-block;">患者:</text>
					<text>{{item.patient_name}}</text>
				</view>
				<!-- 年龄 -->
				<view style="margin-bottom: 20rpx;">
					<text style="width: 130rpx;color: #666666;display: inline-block;">年龄:</text>
					<text>{{item.numBirthday}}</text>
					
				</view>
				<!-- 订单号 -->
				<view style="margin-bottom: 20rpx;">
					<text style="width: 130rpx;color: #666666;display: inline-block;">订单号:</text>
					<text>{{item.order_sn}}</text>
				</view>
				<!-- 填写时间 -->
				<view style="margin-bottom: 20rpx;">
					<text style="width: 130rpx;color: #666666;display: inline-block;">填写时间:</text>
					<text>{{item.created_at}}</text>
				</view>
			</view>
			<!-- 右边按钮 -->
			<view style="width: 20%;" class="flex justify-center">
				<view style="padding: 8rpx 16rpx;border-radius: 20rpx;background-color:#eaeaea ;height: 50rpx;color: b1b1b1;" class="flex justify-center align-center">意见单</view>
			</view>
		</view>
		<u-empty text="暂无数据" :show="list.length==0" mode="order" margin-top="250" v-if="list.length==0"></u-empty>
		<view style="width: 100%;height: 100rpx;"></view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {

		},
		mounted() {

		},
		data() {
			return {
				
				//排序
				sort: true,
				//列表
				list: [],
				num:1
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			timeSort(e){
				this.sort = !this.sort
				this.list = []
				this.$nextTick(function(){
					//调用接口 页数 类型 状态
				if(this.sort){//正序
					this.getList(1)
				}else{//倒序
					this.getList(2)
				}
				})
				
				
			},
			next(e){
				console.log()
				uni.navigateTo({
					url:'opiniondetails?id='+this.list[e.currentTarget.dataset.index].id+'&type=1'
				})
			},
			/**
			 * 渲染患者列表
			 */
			getList:async function(orderby=0){
				let obj = {"curPage":1,'pageSize':10,'orders':orderby};
				let that = this;
				console.log("obj",obj)
				let res = await that.$request.post('suggest/suggestList',obj);
				console.log("res",res)
				if(res.status==0 && res.data!=''){
					let data = res.data;
					console.log('我是data',data); 
					that.list=data;
				}else{
					uni.showToast({
						icon:'none',
						title:'请求失败 请稍后重试'
					})
				}
			},
			
		},
		onReachBottom() {
			this.num++
			console.log('到底', this.num);//到底次数
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			
		}
	};
</script>

<style lang="scss">
	.topbut {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		// justify-content: center;
		background-color: #FFFFFF;
		z-index: 1;
	}


	//每张卡片的样式
	.list_view {
		margin: 20rpx 28rpx 0 28rpx;
		padding: 35rpx 40rpx;
		background-color: #FFFFFF;
		box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
		border-radius: 12px;
		display: flex;
		font-size: 26rpx;
	}
</style>