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

fix: 工作台页面，整体ui功能优化。

Browse Source
This commit is contained in:
tianyongbao
2025-11-14 02:13:02 +08:00
parent f4b0366a39
commit 459ab82cf2
62 changed files with 8331 additions and 3968 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
src/pages_mine/pages/about/index.vue
View File

@@ -1,71 +1,226 @@
<template>
<view class="about-container">
<view class="header-section text-center">
<image style="width: 150rpx;height: 150rpx;" src="/static/logo.png" mode="widthFix">
</image>
<uni-title type="h2" title="智聪网络科技"></uni-title>
<view class="header-section">
<view class="logo-wrapper">
<image class="logo-image" src="/static/logo.png" mode="aspectFit"></image>
<view class="logo-shine"></view>
</view>
<text class="app-name">智聪网络科技</text>
<text class="app-slogan">专业的财务管理工具</text>
</view>
<view class="content-section">
<view class="menu-list">
<view class="list-cell list-cell-arrow">
<view class="menu-item-box">
<view>版本信息</view>
<view class="text-right">v{{version}}</view>
<view class="info-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>
<view class="list-cell list-cell-arrow">
<view class="menu-item-box">
<view>官方邮箱</view>
<view class="text-right">qdintc@126com</view>
</view>
</view>
<view class="list-cell list-cell-arrow">
<view class="menu-item-box">
<view>服务热线</view>
<view class="text-right">17753252359</view>
</view>
</view>
<view class="list-cell list-cell-arrow">
<view class="menu-item-box">
<view>公司网站</view>
<view class="text-right">
<uni-link :href="url" :text="url" showUnderLine="false"></uni-link>
</view>
</view>
<view class="item-right">
<uni-link v-if="item.isLink" :href="item.value" :text="item.displayText" showUnderLine="false" color="#667eea"></uni-link>
<text v-else class="item-value">{{ item.value }}</text>
</view>
</view>
</view>
<view class="copyright">
<view>Copyright &copy; 2025 智聪网络科技 All Rights Reserved.</view>
<text class="copyright-text">Copyright &copy; 2025 智聪网络科技</text>
<text class="copyright-text">All Rights Reserved.</text>
</view>
</view>
</template>
<script setup>
import config from '@/config.js'
const url=config.appInfo.site_url;
const version=config.appInfo.version;
import { computed } from 'vue'
import config from '@/config.js'
const url = config.appInfo.site_url
const version = config.appInfo.version
const infoList = computed(() => [
{
icon: 'flag',
label: '版本信息',
value: `v${version}`,
displayText: `v${version}`,
gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
isLink: false
},
{
icon: 'email',
label: '官方邮箱',
value: 'qdintc@126.com',
displayText: 'qdintc@126.com',
gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
isLink: false
},
{
icon: 'phone',
label: '服务热线',
value: '17753252359',
displayText: '17753252359',
gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
isLink: false
},
{
icon: 'home',
label: '公司网站',
value: url,
displayText: url,
gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
isLink: true
}
])
</script>
<style lang="scss">
page {
background-color: #f8f8f8;
}
<style lang="scss" scoped>
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #f5f7fa;
min-height: 100%;
height: auto;
}
.copyright {
margin-top: 50rpx;
text-align: center;
line-height: 60rpx;
color: #999;
}
.about-container {
display: flex;
flex-direction: column;
}
.header-section {
.header-section {
padding: 60rpx 0 50rpx;
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: pulse 15s infinite;
}
.logo-wrapper {
position: relative;
margin-bottom: 24rpx;
.logo-image {
width: 140rpx;
height: 140rpx;
border-radius: 28rpx;
box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.2);
background: #ffffff;
padding: 16rpx;
}
.logo-shine {
position: absolute;
top: -10rpx;
right: -10rpx;
width: 40rpx;
height: 40rpx;
background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
border-radius: 20rpx;
border: 4rpx solid #667eea;
}
}
.app-name {
color: #ffffff;
font-size: 36rpx;
font-weight: 700;
margin-bottom: 8rpx;
}
.app-slogan {
color: rgba(255, 255, 255, 0.8);
font-size: 26rpx;
}
}
.info-card {
margin: 10rpx 24rpx 24rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 20rpx;
padding: 4rpx 0;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
flex: 1;
}
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 20rpx;
&:not(:last-child) {
border-bottom: 1rpx solid #e8edf3;
}
.item-left {
display: flex;
padding: 30rpx 0 0;
flex-direction: column;
align-items: center;
.info-icon {
width: 56rpx;
height: 56rpx;
border-radius: 14rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.item-label {
color: #606266;
font-size: 26rpx;
font-weight: 500;
}
}
.item-right {
flex: 1;
text-align: right;
.item-value {
color: #303133;
font-size: 26rpx;
}
}
}
.copyright {
padding: 32rpx 24rpx 50rpx;
display: flex;
flex-direction: column;
align-items: center;
gap: 6rpx;
.copyright-text {
color: #909399;
font-size: 24rpx;
line-height: 36rpx;
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.1) rotate(180deg);
}
}
</style>

147
src/pages_mine/pages/avatar/index.vue
View File

@@ -2,6 +2,10 @@
<view class="container">
<view class="page-body uni-content-info">
<view class='cropper-content'>
<view class="preview-tip">
<uni-icons type="info" size="16" color="#667eea"></uni-icons>
<text class="tip-text">拖动裁剪框选择头像区域</text>
</view>
<view v-if="isShowImg" class="uni-corpper"
:style="'width:' + cropperInitW + 'px;height:' + cropperInitH + 'px;background:#000'">
<view class="uni-corpper-content"
@@ -38,10 +42,20 @@
</view>
</view>
</view>
<view v-else class="empty-state">
<uni-icons type="images" size="80" color="#ddd"></uni-icons>
<text class="empty-text">请选择头像</text>
</view>
</view>
<view class='cropper-config'>
<button type="primary reverse" @click="getImage" style='margin-top: 30rpx;'> 选择头像 </button>
<button type="warn" @click="getImageInfo" style='margin-top: 30rpx;'> 提交 </button>
<button class="choose-btn" @click="getImage">
<uni-icons type="images" size="20" color="#667eea"></uni-icons>
<text class="btn-text">选择头像</text>
</button>
<button class="submit-btn" @click="getImageInfo">
<uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
<text class="btn-text">确认提交</text>
</button>
</view>
<canvas canvas-id="myCanvas"
:style="'position:absolute;border: 1px solid red; width:' + imageW + 'px;height:' + imageH + 'px;top:-9999px;left:-9999px;'"></canvas>
@@ -348,16 +362,124 @@ export default {
}
</script>
<style>
/* pages/uni-cropper/index.wxss */
<style scoped>
page {
background-color: #f5f7fa;
}
.container {
min-height: 100vh;
background-color: #f5f7fa;
}
.page-body {
padding: 24rpx;
}
.preview-tip {
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx;
margin-bottom: 16rpx;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
border-radius: 16rpx;
border: 2rpx solid rgba(102, 126, 234, 0.2);
gap: 8rpx;
}
.tip-text {
color: #667eea;
font-size: 24rpx;
}
.empty-state {
width: 100%;
height: 750rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 24rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}
.empty-text {
color: #999;
font-size: 26rpx;
margin-top: 24rpx;
}
.cropper-config {
padding: 20rpx 40rpx;
padding: 32rpx 0;
display: flex;
flex-direction: column;
gap: 20rpx;
}
.choose-btn {
width: 100%;
height: 88rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 44rpx;
border: 2rpx solid #667eea;
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.15);
display: flex;
align-items: center;
justify-content: center;
gap: 12rpx;
transition: all 0.3s ease;
}
.choose-btn::after {
border: none;
}
.choose-btn:active {
transform: scale(0.98);
background: linear-gradient(135deg, #f8f9fb 0%, #eff1f5 100%);
}
.choose-btn .btn-text {
color: #667eea;
font-size: 32rpx;
font-weight: 600;
}
.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;
justify-content: center;
gap: 12rpx;
transition: all 0.3s ease;
}
.submit-btn::after {
border: none;
}
.submit-btn:active {
transform: scale(0.98);
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
}
.submit-btn .btn-text {
color: #ffffff;
font-size: 32rpx;
font-weight: 600;
}
.cropper-content {
min-height: 750rpx;
width: 100%;
margin-bottom: 8rpx;
}
.uni-corpper {
@@ -370,6 +492,8 @@ export default {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
box-sizing: border-box;
border-radius: 24rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
}
.uni-corpper-content {
@@ -415,8 +539,9 @@ export default {
width: 100%;
height: 100%;
overflow: visible;
outline: 1rpx solid #69f;
outline-color: rgba(102, 153, 255, .75)
outline: 2rpx solid #667eea;
outline-color: rgba(102, 126, 234, 0.9);
border-radius: 12rpx;
}
/* 横向虚线 */
@@ -586,12 +711,14 @@ export default {
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
cursor: n-resize;
width: 36rpx;
height: 36rpx;
background-color: #69f;
width: 40rpx;
height: 40rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: absolute;
z-index: 1112;
opacity: 1;
border-radius: 50%;
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4);
}
.point-b {

178
src/pages_mine/pages/help/index.vue
View File

@@ -1,15 +1,24 @@
<template>
<view class="help-container">
<view v-for="(item, findex) in list" :key="findex" :title="item.title" class="list-title">
<view class="text-title">
<view :class="item.icon"></view>{{ item.title }}
<view v-for="(item, findex) in list" :key="findex" class="help-section">
<view class="section-header">
<view class="header-icon" :style="{ background: findex === 0 ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' : 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' }">
<uni-icons :type="findex === 0 ? 'help' : 'info'" size="20" color="#ffffff"></uni-icons>
</view>
<text class="section-title">{{ item.title }}</text>
</view>
<view class="childList">
<view v-for="(child, zindex) in item.childList" :key="zindex" class="question" hover-class="hover"
>
<view class="text-item">{{ child.title }}</view>
<view class="text-item">{{ child.content }}</view>
<view class="line" v-if="zindex !== item.childList.length - 1"></view>
<view class="qa-card">
<view v-for="(child, zindex) in item.childList" :key="zindex" class="qa-item">
<view class="question-row">
<view class="q-badge">Q</view>
<text class="question-text">{{ child.title }}</text>
</view>
<view class="answer-row">
<view class="a-badge">A</view>
<text class="answer-text">{{ child.content }}</text>
</view>
<view class="divider" v-if="zindex !== item.childList.length - 1"></view>
</view>
</view>
</view>
@@ -20,7 +29,6 @@
import { ref } from "vue";
const list =ref([{
icon: 'iconfont icon-user',
title: '智聪网络科技问题',
childList: [{
title: '智聪网络科技平台免费吗？',
@@ -34,7 +42,6 @@
}]
},
{
icon: 'iconfont icon-help',
title: '其他问题',
childList: [{
title: '如何退出登录？',
@@ -57,51 +64,132 @@
</script>
<style lang="scss" scoped>
page {
background-color: #f8f8f8;
}
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #f5f7fa;
min-height: 100%;
height: auto;
}
.help-container {
margin-bottom: 100rpx;
padding: 30rpx;
.help-container {
padding: 24rpx;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
/* 隐藏滚动条 */
&::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.list-title {
margin-bottom: 30rpx;
.help-section {
margin-bottom: 24rpx;
&:last-child {
margin-bottom: 0;
}
}
.childList {
background: #ffffff;
box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
border-radius: 16rpx;
margin-top: 10rpx;
.section-header {
display: flex;
align-items: center;
margin-bottom: 16rpx;
.header-icon {
width: 52rpx;
height: 52rpx;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
.line {
width: 100%;
height: 1rpx;
background-color: #F5F5F5;
}
.text-title {
.section-title {
color: #303133;
font-size: 32rpx;
font-weight: bold;
margin-left: 10rpx;
.iconfont {
font-size: 16px;
margin-right: 10rpx;
}
font-size: 30rpx;
font-weight: 600;
}
}
.text-item {
font-size: 28rpx;
padding: 24rpx;
.qa-card {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 20rpx;
padding: 12rpx 0;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}
.qa-item {
padding: 20rpx;
}
.question-row {
display: flex;
align-items: flex-start;
margin-bottom: 12rpx;
.q-badge {
width: 36rpx;
height: 36rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 22rpx;
font-weight: 600;
margin-right: 12rpx;
flex-shrink: 0;
}
.question-text {
flex: 1;
color: #303133;
font-size: 26rpx;
font-weight: 500;
line-height: 36rpx;
}
}
.question {
.answer-row {
display: flex;
align-items: flex-start;
.a-badge {
width: 36rpx;
height: 36rpx;
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 22rpx;
font-weight: 600;
margin-right: 12rpx;
flex-shrink: 0;
}
.answer-text {
flex: 1;
color: #606266;
font-size: 28rpx;
font-size: 24rpx;
line-height: 36rpx;
}
}
.divider {
height: 1rpx;
background: linear-gradient(90deg, transparent, #e8edf3 20%, #e8edf3 80%, transparent);
margin: 20rpx 0;
}
</style>

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>

114
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
@@ -46,8 +73,63 @@ function register(){
</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>

154
src/pages_mine/pages/pwd/index.vue
View File

@@ -1,17 +1,45 @@
<template>
<view class="pwd-retrieve-container">
<uni-forms ref="form" :value="user" labelWidth="80px">
<uni-forms-item name="oldPassword" label="旧密码">
<uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
</uni-forms-item>
<uni-forms-item name="newPassword" label="新密码">
<uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
</uni-forms-item>
<uni-forms-item name="confirmPassword" label="确认密码">
<uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
</uni-forms-item>
<button type="primary" @click="submit">提交</button>
</uni-forms>
<view class="pwd-container">
<view class="form-card">
<uni-forms ref="form" :value="user" labelWidth="80px">
<uni-forms-item name="oldPassword" label="旧密码">
<uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
</uni-forms-item>
<uni-forms-item name="newPassword" label="新密码">
<uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
</uni-forms-item>
<uni-forms-item name="confirmPassword" label="确认密码">
<uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
</uni-forms-item>
</uni-forms>
</view>
<view class="tips-card">
<view class="tips-header">
<uni-icons type="info" size="18" color="#667eea"></uni-icons>
<text class="tips-title">密码要求</text>
</view>
<view class="tips-list">
<view class="tip-item">
<text class="tip-dot">•</text>
<text class="tip-text">密码长度为 6-20 个字符</text>
</view>
<view class="tip-item">
<text class="tip-dot">•</text>
<text class="tip-text">建议使用字母、数字和符号组合</text>
</view>
<view class="tip-item">
<text class="tip-dot">•</text>
<text class="tip-text">不要使用容易被猜到的密码</text>
</view>
</view>
</view>
<view class="submit-section">
<button class="submit-btn" @click="submit">
<text class="btn-text">修改密码</text>
</button>
</view>
</view>
</template>
@@ -79,13 +107,99 @@
}
</script>
<style lang="scss">
page {
background-color: #ffffff;
}
<style lang="scss" scoped>
page {
background-color: #f5f7fa;
}
.pwd-retrieve-container {
padding-top: 36rpx;
padding: 15px;
.pwd-container {
padding: 32rpx;
}
.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: 24rpx;
}
.tips-card {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
border-radius: 24rpx;
padding: 24rpx;
margin-bottom: 32rpx;
border: 2rpx solid rgba(102, 126, 234, 0.2);
}
.tips-header {
display: flex;
align-items: center;
margin-bottom: 16rpx;
.tips-title {
color: #667eea;
font-size: 28rpx;
font-weight: 600;
margin-left: 8rpx;
}
}
.tips-list {
.tip-item {
display: flex;
align-items: flex-start;
margin-bottom: 8rpx;
&:last-child {
margin-bottom: 0;
}
.tip-dot {
color: #667eea;
font-size: 28rpx;
margin-right: 8rpx;
line-height: 40rpx;
}
.tip-text {
flex: 1;
color: #606266;
font-size: 24rpx;
line-height: 40rpx;
}
}
}
.submit-section {
padding: 0 8rpx;
}
.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;
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>

128
src/pages_mine/pages/setting/index.vue
View File

@@ -1,33 +1,25 @@
<template>
<view class="setting-container" :style="{ height: `${windowHeight}px` }">
<view class="menu-list">
<view class="list-cell list-cell-arrow" @click="handleToPwd">
<view class="menu-item-box">
<view class="iconfont icon-password menu-icon"></view>
<view>修改密码</view>
<view class="setting-container">
<view class="menu-card">
<view class="menu-item" @click="handleToPwd">
<view class="item-left">
<view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<uni-icons type="locked" size="20" color="#ffffff"></uni-icons>
</view>
<text class="menu-text">修改密码</text>
</view>
<uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
</view>
<!-- <view class="list-cell list-cell-arrow" @click="handleToUpgrade">
<view class="menu-item-box">
<view class="iconfont icon-refresh menu-icon"></view>
<view>检查更新</view>
</view>
</view> -->
<!-- <view class="list-cell list-cell-arrow" @click="handleCleanTmp">
<view class="menu-item-box">
<view class="iconfont icon-clean menu-icon"></view>
<view>清理缓存</view>
</view>
</view> -->
</view>
<view class="cu-list menu">
<view class="cu-item item-box">
<view class="content text-center" @click="handleLogout">
<text class="text-black">退出登录</text>
</view>
</view>
<view class="logout-section">
<button class="logout-btn" @click="handleLogout">
<uni-icons type="redo" size="20" color="#f56c6c"></uni-icons>
<text class="logout-text">退出登录</text>
</button>
</view>
</view>
<view>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog type="info" cancelText="关闭" confirmText="退出" title="通知" content="确定注销并退出系统吗"
@@ -42,7 +34,6 @@ import { ref } from "vue";
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const windowHeight = ref(uni.getSystemInfoSync().windowHeight);
const popup = ref(null);
function handleToPwd() {
@@ -85,20 +76,85 @@ function dialogClose() {
</script>
<style lang="scss" scoped>
.page {
background-color: #f8f8f8;
page {
background-color: #f5f7fa;
}
.item-box {
background-color: #FFFFFF;
margin: 30rpx;
.setting-container {
padding: 32rpx;
}
.menu-card {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 24rpx;
overflow: hidden;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
margin-bottom: 32rpx;
}
.menu-item {
display: flex;
flex-direction: row;
justify-content: center;
justify-content: space-between;
align-items: center;
padding: 10rpx;
border-radius: 8rpx;
color: #303133;
font-size: 32rpx;
padding: 32rpx 24rpx;
transition: background-color 0.3s ease;
&:active {
background-color: rgba(0, 0, 0, 0.02);
}
.item-left {
display: flex;
align-items: center;
.menu-icon-wrapper {
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);
}
.menu-text {
color: #2c3e50;
font-size: 28rpx;
}
}
}
.logout-section {
padding: 0 8rpx;
}
.logout-btn {
width: 100%;
height: 88rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
border-radius: 44rpx;
border: 2rpx solid #f56c6c;
box-shadow: 0 4rpx 16rpx rgba(245, 108, 108, 0.15);
display: flex;
align-items: center;
justify-content: center;
gap: 12rpx;
transition: all 0.3s ease;
&::after {
border: none;
}
&:active {
transform: scale(0.98);
background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
}
.logout-text {
color: #f56c6c;
font-size: 32rpx;
font-weight: 600;
}
}
</style>