<template> <view class="container"> <view class="info-box"> <view class="info-item-box flex"> <view class="label"> 姓名 </view> <view class="text"> {{ info.name }} </view> </view> <view class="info-item-box flex"> <view class="label"> 证件号码 </view> <view class="text"> {{ info.idNumber }} </view> </view> <view class="info-item-box flex"> <view class="label"> 业务水平认证证书编号 </view> <view class="text"> {{ info.certificateNumber }} </view> </view> <view class="info-item-box flex"> <view class="label"> 信用信息卡号 </view> <view class="text"> {{ info.creditCardNumber }} </view> </view> <view class="info-item-box flex"> <view class="label"> 缴费年份 </view> <view class="text" @click="showYear = true"> {{ info.year }}(可拉下选中缴费时间) </view> </view> </view> <u-select v-model="showYear" :list="yearList" @confirm="onYearConfirm"></u-select> <view class="bottom-box"> <u-button type="error" shape="circle" @click="onSubmit">点击缴费</u-button> </view> </view> </template> <script setup> import { ref } from 'vue' import { onLoad } from '@dcloudio/uni-app' const id = ref() const info = ref({ name: 'xxxxxxxxxx', // 姓名 idNumber: 'xxxxxxxxxx', // 证件号码 tel: 'xxxxxxxxxx', // 手机号码 certificateNumber: 'xxxxxxxxxx', // 业务水平认证证书编号 creditCardNumber: 'xxxxxxxxxx', // 信用信息卡号 year: '2024', }) const showYear = ref(false) const yearList = ref([ { value: '2025', label: '2025' }, { value: '2024', label: '2024' } ]) function onYearConfirm(val) { info.value.year = val[0].value } function onSubmit() { console.log('点击缴费'); } onLoad((load) => { id.value = load.id }) </script> <style lang="scss" scoped> .container { height: 100vh; width: 100vw; background-color: $uni-bg-color; padding: 0 20rpx; .info-box { padding: 30rpx; background-color: $uni-bg-color-grey; border-radius: $uni-card-border-radius; .info-item-box { font-size: $uni-title-font-size-2; border-bottom: 1rpx solid #E6E6E6; height: 82rpx; .label { font-weight: bold; } } .flex { display: flex; align-items: center; .label { width: 40%; } .text { width: 60%; } } .row { .label { line-height: 62rpx; } .text { line-height: 42rpx; font-size: $uni-title-font-size-3; font-weight: bold; } } } .bottom-box { padding: 20rpx; position: absolute; bottom: 50rpx; width: 95%; } } </style>