concrete-transportation-uniapp-20250821/pages_order/base/sells.vue

<template>
	<view class="content">
		<navbar title="推荐记录" leftClick @leftClick="$utils.navigateBack" />
		<view class="ilst">
			<view v-for="(item, index) in recommendList" :key="index">
				<view class="item">
					<view class="flex-sb" style="line-height:90rpx;font-size:30rpx">
						<view>{{ item.name }}</view>
						<view style="color:#ccc;font-size:26rpx">{{ item.time }}</view>
					</view>
					<view style="line-height:42rpx;font-size:28rpx;color:#666;padding-bottom:30rpx">
						您推荐的 <text v-if="item.isDriver">司机</text><text v-else>老板</text> 平台正在联系中。感谢你的信任，如有合作将为您提供丰厚奖励。
					</view>
				</view>
			</view>
			<view v-if="isEmpty" class="re-empty">
				<view>暂无数据</view>
			</view>
		</view>
		
		<!-- 底部推荐按钮 -->
		<view class="re-end-pand b-fiexd">
			<button @click="recommend">我要推荐</button>
		</view>
	</view>
</template>

<script>
	import navbar from '@/components/base/navbar.vue'
	
	export default {
		name: 'BaseSells',
		components: {
			navbar
		},
		data() {
			return {
				isEmpty: false,
				recommendList: [
					{
						id: 1,
						name: '张师傅',
						time: '2024-01-15 10:30',
						isDriver: true
					},
					{
						id: 2,
						name: '李总',
						time: '2024-01-14 15:20',
						isDriver: false
					},
					{
						id: 3,
						name: '王师傅',
						time: '2024-01-13 09:45',
						isDriver: true
					}
				]
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '我要推荐'
			});
		},
		methods: {
			recommend() {
				uni.showActionSheet({
					itemList: ['推荐司机', '推荐老板'],
					success: (res) => {
						if (res.tapIndex === 0) {
							// 推荐司机
							uni.navigateTo({
								url: '/pages_order/base/addyuan?type=driver'
							});
						} else {
							// 推荐老板
							uni.navigateTo({
								url: '/pages_order/base/addyuan?type=boss'
							});
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 20rpx;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 120rpx;
	}
	
	.ilst {
		margin-top: 20rpx;
	}
	
	.item {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.flex-sb {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.re-empty {
		text-align: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;
	}
	
	.re-end-pand {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		border-top: 1rpx solid #f0f0f0;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		
		button {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #007AFF;
			color: #fff;
			border-radius: 40rpx;
			font-size: 32rpx;
			border: none;
		}
	}
	
	.b-fiexd {
		position: fixed;
	}
</style>