zh_order_food_xcx/pages-my/my-appraise.vue

<template>
	<view class="flex-common-css">
		<Nav title="我的评价" titleColor="#333" bgckgroundBox='#fff'></Nav>
		<view class="tab-box flex-justify-around bgc-f ">
			<view class="tab-but flex-1 flex-direction align-items-center" @click="tabStitle(index)"
				v-for="(item, index) in tabList" :key="index">
				<view class="fs-32 mb-18" :class="tabNum==index?'fc-41ABF5':'fc-3'">
					{{item}}
				</view>
				<view v-show="tabNum==index" class="tab-hr bgc-41ABF5"></view>
			</view>
		</view>
		<scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			<view class="list-box">
				<view class="item-box bgc-f b-rad-20 mb-20" v-for="(item,index) in itemData" :key="index">
					<view class="fw-600 fs-32 fc-3 mb-16">
						{{item.name}}
					</view>
					<view class="goods-box align-items-center mb-24">
						<image class="goods-img mr-16" src="../static/img/my/bg.png" mode=""></image>
						<view class="">
							<view class="mb-8 fs-24 fc-6">
								2024-05-21 01:05 下单
							</view>
							<view class="fc-FF7F00 fs-24">
								你个这次外卖体验打多少分吗？
							</view>
						</view>
					</view>
					<view class="flex-justify-end">
						<view class="fc-41ABF5 fs-28 item-but" @click="goToUrl">
							评价
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				tabNum: 0,
				tabOneNum: 0,
				tabTwoNum: 0,
				itemData: [{
					name: '猪油拌饭猪油拌（回兴店）'
				}]
			};
		},
		computed: {
			tabList() {
				return ['待评价(' + this.tabOneNum + ')', '已评价(' + this.tabTwoNum + ')'];
			}
		},
		onLoad(data) {},
		mounted() {},
		methods: {
			tabStitle(index) {
				this.tabNum = index
			},
			scrolltolower() {
				console.log('触底');
			},
			goToUrl() {
				uni.navigateTo({
					url:'/pages-my/appraise'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tab-box {
		padding: 22rpx 0 4rpx 0;
	}

	.tab-hr {
		width: 40rpx;
		height: 4rpx;
		border-radius: 2rpx;
	}

	.list-box {
		padding: 24rpx;
		box-sizing: border-box;
	}

	.item-box {
		padding: 24rpx;
		box-sizing: border-box;
	}

	.goods-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 8rpx;
	}

	.item-but {
		width: 152rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		border: 2rpx solid #41ABF5;
		border-radius: 200rpx;
	}
</style>