qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 健康档案统计，样式优化完善。

Browse Source
This commit is contained in:
tianyongbao
2025-11-26 02:19:19 +08:00
parent 2006eb22e4
commit aa2b470219
62 changed files with 16320 additions and 4930 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/pages_mine/pages/info/edit.vue
View File

@@ -1,6 +1,6 @@
<template>
<view class="container">
<view class="example">
<view class="edit-container">
<view class="form-card">
<uni-forms ref="form" :model="user" labelWidth="80px">
<uni-forms-item label="用户昵称" name="nickName">
<uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
@@ -15,7 +15,12 @@
<uni-data-checkbox v-model="user.sex" :localdata="sexs" />
</uni-forms-item>
</uni-forms>
<button type="primary" @click="submit">提交</button>
</view>
<view class="submit-section">
<button class="submit-btn" @click="submit">
<text class="btn-text">保存修改</text>
</button>
</view>
</view>
</template>
@@ -96,37 +101,52 @@ export default {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
page {
background-color: #ffffff;
background-color: #f5f7fa;
}
.example {
padding: 15px;
background-color: #fff;
.edit-container {
padding: 32rpx;
}
.segmented-control {
margin-bottom: 15px;
.form-card {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 24rpx;
padding: 32rpx 24rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
margin-bottom: 32rpx;
}
.button-group {
margin-top: 15px;
display: flex;
justify-content: space-around;
.submit-section {
padding: 0 8rpx;
}
.form-item {
.submit-btn {
width: 100%;
height: 88rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 44rpx;
border: none;
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
display: flex;
align-items: center;
flex: 1;
}
.button {
display: flex;
align-items: center;
height: 35px;
line-height: 35px;
margin-left: 10px;
justify-content: center;
transition: all 0.3s ease;
&::after {
border: none;
}
&:active {
transform: scale(0.98);
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
}
.btn-text {
color: #ffffff;
font-size: 32rpx;
font-weight: 600;
}
}
</style>

116
src/pages_mine/pages/info/index.vue
View File

@@ -1,28 +1,55 @@
<template>
<view class="container">
<uni-list>
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'person-filled' }" title="昵称" :rightText="user.nickName" />
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'phone-filled' }" title="手机号码"
:rightText="user.phonenumber" />
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'email-filled' }" title="邮箱" :rightText="user.email" />
<!-- <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'auth-filled' }" title="岗位" :rightText="postGroup" />
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'staff-filled' }" title="角色" :rightText="roleGroup" /> -->
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'calendar-filled' }" title="创建日期"
:rightText="user.createTime" />
</uni-list>
<!-- <u-button @click="register()">绑定微信</u-button> -->
<view class="profile-container">
<view class="profile-card">
<view class="info-item" v-for="(item, index) in infoList" :key="index">
<view class="item-left">
<view class="info-icon" :style="{ background: item.gradient }">
<uni-icons :type="item.icon" size="20" color="#ffffff"></uni-icons>
</view>
<text class="item-label">{{ item.label }}</text>
</view>
<text class="item-value">{{ item.value }}</text>
</view>
</view>
</view>
</template>
<script setup>
import { getUserProfile } from "@/api/system/user"
import { ref } from "vue";
import { ref, computed } from "vue";
import modal from "@/plugins/modal"
const user = ref({})
const roleGroup = ref("")
const postGroup = ref("")
const infoList = computed(() => [
{
icon: 'person',
label: '昵称',
value: user.value.nickName || '未设置',
gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
},
{
icon: 'phone',
label: '手机号码',
value: user.value.phonenumber || '未绑定',
gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
},
{
icon: 'email',
label: '邮箱',
value: user.value.email || '未绑定',
gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
},
{
icon: 'calendar',
label: '创建日期',
value: user.value.createTime || '-',
gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
}
])
function getUser() {
getUserProfile().then(response => {
user.value = response.data
@@ -41,13 +68,68 @@ function register(){
modal.closeLoading()
})
})
}
</script>
<style lang="scss">
<style lang="scss" scoped>
page {
background-color: #ffffff;
background-color: #f5f7fa;
}
.profile-container {
padding: 32rpx;
}
.profile-card {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 24rpx;
padding: 8rpx 0;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx 24rpx;
transition: background-color 0.3s ease;
&:not(:last-child) {
border-bottom: 1rpx solid #e8edf3;
}
.item-left {
display: flex;
align-items: center;
flex: 1;
.info-icon {
width: 64rpx;
height: 64rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 24rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.item-label {
color: #606266;
font-size: 28rpx;
font-weight: 500;
}
}
.item-value {
color: #303133;
font-size: 28rpx;
max-width: 400rpx;
text-align: right;
word-break: break-all;
}
}
</style>