jd_logistics/jd_logistics-app/pages/mine/settlementCode.vue

<template>
	<view class="container">

		<!-- Tab切换 - 平均分配宽度 -->
		<view class="custom-tabs">
			<view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
				<text class="tab-text">京东月结码</text>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
				<text class="tab-text">顺丰月结码</text>
			</view>
		</view>

		<!-- 二维码邀请内容 -->
		<view  class="tab-content">
				<!-- 店铺信息 -->
				<view class="store-info">
					<view class="store-name">月结卡号</view>
					<view class="store">
						
						<text class="store-address">12345444</text>
						<!-- <u-icon name="arrow-right"></u-icon> -->
					</view>
				</view>
			
				<!-- 二维码区域 -->
				<view class="qrcode-container">
			
					<view class="store-manager-content">
						<text class="store-manager title">请小哥扫此二维码</text>
					</view>
			
					<view class="store-manager-content">
						<text class="store-manager">警告：系统将记录所有操作，请勿违规使用</text>
					</view>
					<!-- 空出二维码位置 -->
					<view class="qrcode-placeholder">
						<!-- 这里在实际应用中会显示二维码图片 -->
						<image :src="qrCodeUrl"></image>
			
					</view>
			
					<view class="expiry-info" @click="getCode">
						<text class="text">此二维码300秒有效，点击</text>
					</view>
				</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app' // 导入 UniApp 的生命周期
	import {getQrcode} from '@/api/mine.js'

	// 当前选中的tab
	const currentTab = ref(0)

	const qrCodeUrl = ref('')
	



	onLoad(() => {
		getCode()
	})

	onShow(() => {
		
	})
	
	// 获取月结码
	const getCode = async () =>{
		let res = await getQrcode({source:1});
		console.log(res.data.qrCodeImage)
		qrCodeUrl.value = res.data.qrCodeImage;
	}
	// 切换Tab
	const switchTab = (index) => {
		currentTab.value = index
	}
</script>

<style lang="scss" scoped>
	

	.header {
		padding: 44rpx 0 30rpx 0;
		text-align: center;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;

		.header-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	// 自定义Tab布局 - 平均分配
	.custom-tabs {
		display: flex;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		position: relative;

		&.active {
			.tab-text {
				color: #2979ff;
				font-weight: bold;
			}

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 80rpx;
				height: 4rpx;
				background-color: #2979ff;
				border-radius: 2rpx;
			}
		}

		.tab-text {
			font-size: 32rpx;
			color: #666;
		}
	}

	// 内容区域
	.tab-content {
		padding: 20rpx;
	}

	// 店铺信息
	.store-info {
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		
		margin-bottom: 20rpx;
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.store-icon {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 137, 255, 0.1);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			flex-shrink: 0;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.store {
			display: flex;

			.store-name {
				height: 44rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 44rpx;
				text-align: left;
			}

			.store-address {
				min-height: 44rpx;
				line-height: 44rpx;
				font-size: 28rpx;
				color: #1B64F0;
				text-align: left;
			}

		}

	}

	// 二维码区域
	.qrcode-container {
		background-color: #fff;
		border-radius: 32rpx;
		padding: 20rpx;
		
		text-align: center;

		.store-manager-content {
			display: flex;
			justify-content: center;
			text-align: center;

			image {
				width: 48rpx;
				height: 48rpx;
				border-radius: 48rpx;
			}


			.store-manager {
				height: 44rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 44rpx;

				&.title {
					height: 48rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					line-height: 48rpx;

				}
			}
		}


		// 二维码占位区域
		.qrcode-placeholder {
			width: 400rpx;
			height: 400rpx;
			margin: 20rpx auto 30rpx;
			border-radius: 16rpx;
			background-color: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: center;

			/* 这里在实际应用中会显示二维码图片 */
			/* 暂时使用背景色占位 */
			image {
				width: 400rpx;
				height: 400rpx;
				border-radius: 16rpx;
			}
		}

		.expiry-info {
			margin: 20rpx;
			height: 84rpx;
			background: #F5F7FA;
			border-radius: 16rpx;

			font-weight: 400;
			font-size: 28rpx;
			color: #3D3D3D;
			line-height: 84rpx;
			text-align: center;
			.text{
				&::after{
					content: '刷新二维码';
					color: #1B64F0;
				}
			}
		}
	}


	// 按钮组
	.button-group {
		width: 100%;
		height: 132rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0;
		padding: 0rpx 32rpx;
		background-color: #fff;

		.button {
			height: 88rpx;
			line-height: 88rpx;
			flex: 1;
			text-align: center;
			border-radius: 16rpx;
			font-size: 30rpx;
			font-weight: bold;

			&.share-button {
				color: #1B64F0;
				margin-right: 32rpx;
				background: rgba(0, 137, 255, 0.1);
			}

			&.save-button {
				background-color: #1B64F0;
				color: #fff;
			}

			.button-text {
				font-size: 30rpx;
			}
		}


	}

	// 手机号邀请表单
	.phone-form {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 16rpx;

		.phone-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 16rpx;
			display: block;
		}

		.phone-input-group {
			height: 88rpx;
			display: flex;
			border-radius: 16rpx;
			overflow: hidden;
			background-color: #F5F7FA;

			.country-code {
				width: 140rpx;
				padding: 24rpx;
				text-align: center;
				font-size: 28rpx;
				color: #333;
				display: flex;
				align-items: center;
				justify-content: center;
				border-right: 2rpx solid #e0e0e0;
			}

			.phone-input {
				height: 88rpx;
				line-height: 88rpx;
				flex: 1;
				padding: 24rpx;
				font-size: 28rpx;
			}
		}

	}


	.employee-item-main {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 32rpx;
		padding: 20rpx;

		.photo {
			background-color: #F5F7FA;
			width: 88rpx;
			height: 88rpx;
			border-radius: 80rpx;
		}

		.employee-main-info {
			height: 84rpx;
			margin-left: 20rpx;
			align-self: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-bottom: 20rpx;
			flex: 1;

			.employee-name {
				height: 44rpx;
				line-height: 44rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.employee-phone {
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #666666;
			}

		}

		.employee-actions {
			display: flex;
			align-items: center;
			height: 116rpx;
			background-color: #fff;
			border-radius: 32rpx;
			margin-top: 16rpx;


			.status-badge {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				margin-right: 16rpx;

				.enabled {
					// background-color: #e6f7ff;
					margin-left: 16rpx;
					color: #1B64F0;
				}

				.disabled {
					// background-color: #f5f5f5;
					margin-left: 16rpx;
					color: #333333;
				}
			}

			.btn-view-order {
				height: 40rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #1B64F0;
				line-height: 40rpx;
				text-align: left;
				margin-right: 16rpx;
			}

			.dismiss-btn {
				width: 88rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background: #F52929;
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

	}


	.submit-button {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #1B64F0;
		color: #fff;
		text-align: center;
		border-radius: 16rpx;

		.submit-text {
			font-size: 32rpx;
			font-weight: bold;
		}
	}
</style>