xinelu-applet-ui/pagesB/myevaluation/myevaluation.vue

<template>
	<view class="app">
		<view class="" v-if="evaluatedata.length>0">
			<view class="orderitem" v-for="(item,index) in evaluatedata">
				<view class="tiemitem">
					<!-- <span>孤注一掷</span> -->
				</view>

				<view class="details">
					<image :src="require('@/pagesC/images/headsculpture.png')" mode=""
						v-if="item.orderType== 'FAMILY_DOCTOR' ">
					</image>
					<image :src="baseurl+item.pictureUrl" mode=""
						v-if="item.orderType== 'INTEGRAL_EXCHANGE' || item.orderType== 'DIRECT_BUY' || item.orderType== 'APPOINTMENT_ORDER'">
					</image>
					<image :src="baseurl+item.personPictureUrl" mode="" v-if="item.orderType== 'HEALTH_CONSULTATION'">
					</image>
					<view class="ppointment">
						<view class="doctorname">
							<span>{{item.orderName}}</span>
						</view>
						<view class="reservation">
							<span>{{item.createTime}}</span>
						</view>
					</view>

				</view>
				<view class="bottom">

					<span class="rate" v-if="item.compositeScore"><u-rate :count="5" v-model="item.compositeScore"
							:size='50' active-color='#F4EA2A' disabled></u-rate></span>

					<span class="rateval">已评价</span>
				</view>
			</view>
		</view>
		<view class="noorder" v-else>
			<u-empty mode="order" icon-size='220' text="暂无数据"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getAppletOrderList
	} from '@/api/pagesB/Serviceevaluation/Serviceevaluation.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				parentId: '',
				orderStatus: 'EVALUATED', //状态
				evaluatedata: {}, //列表
				baseurl: '',
				cardNo: '', //身份证号
				region: '', //地区
				pageNum: 1,
				pageSize: 20,
				userinfo: {},
				rateval: '', //评价星棵树
				total: 0,
			}
		},
		onShow() {
			this.baseurl = baseurl;
			this.userinfo = uni.getStorageSync('userinfo');
			this.cardNo = this.userinfo.cardNo;
			this.parentId = this.userinfo.id;
			// this.cardNo = '372926199812187720';
			// this.parentId = '88';
			this.region = uni.getStorageSync('region');
			this.getlist();

		},
		onReachBottom() { //下滑加载
			if (this.evaluatedata.length >= this.total) {

			} else {
				this.pageNum++
				getAppletOrderList(this.parentId, this.orderStatus, this.cardNo, this.region, this.pageNum, this
					.pageSize).then(res => {
					if (res.rows) {
						res.rows.forEach(e => {
							this.evaluatedata.push(e)
						})
						this.total = res.total

					}


				})

			}
		},
		methods: {
			// 列表
			getlist() {
				getAppletOrderList(this.parentId, this.orderStatus, this.cardNo, this.region, this.pageNum, this.pageSize)
					.then(res => {
						this.evaluatedata = res.rows
						this.total = res.total
						// console.log(this.evaluatedata.length)

					})

			},

		},

	}
</script>

<style lang="scss">
	.app {
		height: 100vh;
		background-color: #F7F5F5;
		padding: 20rpx 0 0 0;

		.noorder {
			margin-top: 20%;
		}

		.orderitem {
			width: 96%;
			height: 383rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;
			margin: 20rpx auto;
			position: relative;
			margin-bottom: 20rpx;

			.tiemitem {
				width: 92%;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
				position: absolute;
				left: 35rpx;
				top: 30rpx;

				span:nth-child(2) {
					margin-left: 20rpx;
				}

				span:nth-child(3) {
					display: inline-block;
					position: absolute;
					right: 0;
					font-weight: 500;
					color: #26A888;
				}
			}

			.details {
				width: 96%;
				height: 200rpx;
				// background-color: #26A888;
				position: absolute;
				top: 97rpx;
				left: 50%;
				transform: translateX(-50%);


				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 5rpx;
					position: absolute;
				}

				.ppointment {
					position: absolute;
					width: 71%;
					height: 100%;
					right: 0;
					overflow: auto;

					.doctorname {
						font-family: Source Han Sans CN;
						font-weight: 600;
						color: #333333;
						margin-top: 53rpx;
						height: 74rpx;

						overflow: auto;


						span:nth-child(1) {
							font-size: 28rpx;
						}

						span:nth-child(2) {
							display: inline-block;
							position: absolute;
							font-size: 28rpx;
							right: 0;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #333333;
						}
					}

					.reservation {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #959595;
						position: absolute;
						top: 61%;
					}
				}
			}

			.bottom {
				position: absolute;
				width: 96%;
				height: 20%;
				bottom: 4%;
				font-size: 28rpx;
				font-family: Source Han Sans CN;

				.rate {
					display: inline-block;
					font-weight: 400;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 10rpx;
					text-align: center;
				}

				.rateval {
					line-height: 30px;
					width: 169rpx;
					height: 61rpx;
					background: #26A888;
					border-radius: 5rpx;
					display: inline-block;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					text-align: center;
				}
			}


		}
	}
</style>