1304 lines
30 KiB
Vue
1304 lines
30 KiB
Vue
|
<template>
|
|||
|
|
<view class="device-detail">
|
|||
|
|
<!-- 自定义导航栏 -->
|
|||
|
|
<view class="tabback">
|
|||
|
|
<view class="rtjt" @click="btnback">←</view>
|
|||
|
|
<view class="name">{{ $t('editAccount') }}</view>
|
|||
|
|
<view style="width: 36rpx;"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 主要内容区域 -->
|
|||
|
|
<view class="content">
|
|||
|
|
<!-- 头像上传区域 -->
|
|||
|
|
<view class="avatar-section">
|
|||
|
|
<view class="avatar-container">
|
|||
|
|
<view class="avatar-placeholder" v-if="userInfo.avatar" @click="btnimgava">
|
|||
|
|
<image style="border-radius: 50%;" :src="userInfo.avatar" mode="aspectFill"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="avatar-placeholder" v-else @click="btnimgava">
|
|||
|
|
<image style="border-radius: 50%;" src="https://api.ccttiot.com/smartmeter/img/static/ugALV02cU3TX6aSoprJ8"
|
|||
|
|
mode="aspectFill"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 用户信息表单 -->
|
|||
|
|
<view class="form-section">
|
|||
|
|
<!-- 用户名 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="label">{{ $t('username') }}</text>
|
|||
|
|
<view class="input-container">
|
|||
|
|
<input class="input-field" :value="userInfo.nickName" disabled />
|
|||
|
|
<view class="edit-icon" @click="editUsername">
|
|||
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uDKe99jkjV2fPYGODK31"
|
|||
|
|
mode="aspectFill"></image>️
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 电子邮件 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="label">{{ $t('email') }}</text>
|
|||
|
|
<view class="input-container">
|
|||
|
|
<input class="input-field" :value="userInfo.email" disabled />
|
|||
|
|
<!-- <view class="edit-icon" @click="editEmail"><image src="https://api.ccttiot.com/smartmeter/img/static/uDKe99jkjV2fPYGODK31" mode="aspectFill"></image>️</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 密码 -->
|
|||
|
|
<!-- <view class="form-item">
|
|||
|
|
<text class="label">{{ $t('password') }}</text>
|
|||
|
|
<view class="input-container">
|
|||
|
|
<input
|
|||
|
|
class="input-field"
|
|||
|
|
type="password"
|
|||
|
|
value="........"
|
|||
|
|
disabled
|
|||
|
|
/>
|
|||
|
|
<view class="edit-icon" @click="editPassword"><image src="https://api.ccttiot.com/smartmeter/img/static/uDKe99jkjV2fPYGODK31" mode="aspectFill"></image>️</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
<!-- 手机号 -->
|
|||
|
|
<!-- <view class="form-item">
|
|||
|
|
<text class="label">{{ $t('phoneNumber') }}</text>
|
|||
|
|
<view class="input-container">
|
|||
|
|
<input
|
|||
|
|
class="input-field"
|
|||
|
|
:value="userInfo.phone"
|
|||
|
|
disabled
|
|||
|
|
/>
|
|||
|
|
<view class="edit-icon" @click="editPhone"><image src="https://api.ccttiot.com/smartmeter/img/static/uDKe99jkjV2fPYGODK31" mode="aspectFill"></image></view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
<!-- PIN码 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="label">{{ $t('pin') }}</text>
|
|||
|
|
<view class="pin-container">
|
|||
|
|
<view class="pin-switch-container">
|
|||
|
|
<text class="pin-switch-desc">{{ enablePin ? $t('pinEnabled') : $t('pinDisabled') }}</text>
|
|||
|
|
<switch
|
|||
|
|
:checked="enablePin"
|
|||
|
|
@change="onPinSwitchChange"
|
|||
|
|
color="#333"
|
|||
|
|
class="pin-switch"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<!-- 修改pin -->
|
|||
|
|
<!-- <view class="pin-edit-container">
|
|||
|
|
<input class="pin-display-field" value="••••" disabled />
|
|||
|
|
<view class="edit-icon" @click="editPin">
|
|||
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uDKe99jkjV2fPYGODK31"
|
|||
|
|
mode="aspectFill"></image>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 删除账户按钮 -->
|
|||
|
|
<!-- <view class="delete-section">
|
|||
|
|
<button class="delete-btn" @click="deleteAccount">{{ $t('deleteAccount') }}</button>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
<!-- 自定义底部选择弹窗 -->
|
|||
|
|
<view class="action-sheet" v-if="showActionSheet" @click="hideActionSheet">
|
|||
|
|
<view class="action-sheet-content" @click.stop>
|
|||
|
|
<view class="action-sheet-item" @click="takePhoto">
|
|||
|
|
<text class="action-sheet-text">{{ $i18n.t('takePhoto') }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="action-sheet-item" @click="chooseFromAlbum">
|
|||
|
|
<text class="action-sheet-text">{{ $i18n.t('chooseFromAlbum') }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="action-sheet-cancel" @click="hideActionSheet">
|
|||
|
|
<text class="action-sheet-text">{{ $i18n.t('actionSheetCancel') }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- PIN修改弹窗 -->
|
|||
|
|
<view class="pin-modal" v-if="showPinModal" @click="hidePinModal">
|
|||
|
|
<view class="pin-modal-content" @click.stop>
|
|||
|
|
<view class="pin-modal-header">
|
|||
|
|
<text class="pin-modal-title">{{ $t('editPinTitle') }}</text>
|
|||
|
|
<view class="pin-modal-close" @click="hidePinModal">×</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pin-modal-body">
|
|||
|
|
<!-- 旧PIN输入 -->
|
|||
|
|
<view class="pin-input-group">
|
|||
|
|
<text class="pin-input-label">{{ $t('oldPin') }}</text>
|
|||
|
|
<input
|
|||
|
|
class="pin-input"
|
|||
|
|
type="password"
|
|||
|
|
:placeholder="$t('oldPinPlaceholder')"
|
|||
|
|
v-model="pinForm.oldPin"
|
|||
|
|
maxlength="4"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<!-- 新PIN输入 -->
|
|||
|
|
<view class="pin-input-group">
|
|||
|
|
<text class="pin-input-label">{{ $t('newPin') }}</text>
|
|||
|
|
<input
|
|||
|
|
class="pin-input"
|
|||
|
|
type="password"
|
|||
|
|
:placeholder="$t('newPinPlaceholder')"
|
|||
|
|
v-model="pinForm.newPin"
|
|||
|
|
maxlength="4"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<!-- 确认新PIN输入 -->
|
|||
|
|
<view class="pin-input-group">
|
|||
|
|
<text class="pin-input-label">{{ $t('confirmNewPin') }}</text>
|
|||
|
|
<input
|
|||
|
|
class="pin-input"
|
|||
|
|
type="password"
|
|||
|
|
:placeholder="$t('confirmNewPinPlaceholder')"
|
|||
|
|
v-model="pinForm.confirmNewPin"
|
|||
|
|
maxlength="4"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pin-modal-footer">
|
|||
|
|
<button class="pin-btn pin-btn-cancel" @click="hidePinModal">{{ $t('modalCancel') }}</button>
|
|||
|
|
<button class="pin-btn pin-btn-confirm" @click="confirmPinChange">{{ $t('modalConfirm') }}</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- PIN验证弹窗 -->
|
|||
|
|
<view class="pin-modal" v-if="showPinVerifyModal" @click="hidePinVerifyModal">
|
|||
|
|
<view class="pin-modal-content" @click.stop>
|
|||
|
|
<view class="pin-modal-header">
|
|||
|
|
<text class="pin-modal-title">{{ $t('verifyPin') }}</text>
|
|||
|
|
<view class="pin-modal-close" @click="hidePinVerifyModal">×</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pin-modal-body">
|
|||
|
|
<view class="pin-verify-tip">
|
|||
|
|
<text class="pin-verify-tip-text">{{ pendingSwitchAction === 'enable' ? $t('verifyPinToEnable') : $t('verifyPinToDisable') }}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- PIN验证输入 -->
|
|||
|
|
<view class="pin-input-group">
|
|||
|
|
<text class="pin-input-label">{{ $t('pin') }}</text>
|
|||
|
|
<input
|
|||
|
|
class="pin-input"
|
|||
|
|
type="password"
|
|||
|
|
:placeholder="$t('verifyPinPlaceholder')"
|
|||
|
|
v-model="pinVerifyForm.pin"
|
|||
|
|
maxlength="4"
|
|||
|
|
@confirm="confirmPinVerification"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pin-modal-footer">
|
|||
|
|
<button class="pin-btn pin-btn-cancel" @click="hidePinVerifyModal">{{ $t('modalCancel') }}</button>
|
|||
|
|
<button class="pin-btn pin-btn-confirm" @click="confirmPinVerification">{{ $t('modalConfirm') }}</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 用户名编辑弹窗 -->
|
|||
|
|
<view class="pin-modal" v-if="showUsernameModal" @click="hideUsernameModal">
|
|||
|
|
<view class="pin-modal-content" @click.stop>
|
|||
|
|
<view class="pin-modal-header">
|
|||
|
|
<text class="pin-modal-title">{{ $t('editUsernameTitle') }}</text>
|
|||
|
|
<view class="pin-modal-close" @click="hideUsernameModal">×</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pin-modal-body">
|
|||
|
|
<view class="pin-input-group">
|
|||
|
|
<text class="pin-input-label">{{ $t('username') }}</text>
|
|||
|
|
<input
|
|||
|
|
class="pin-input"
|
|||
|
|
type="text"
|
|||
|
|
:placeholder="$t('pleaseEnterUsername')"
|
|||
|
|
v-model="usernameForm.nickName"
|
|||
|
|
maxlength="20"
|
|||
|
|
@confirm="confirmUsernameChange"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pin-modal-footer">
|
|||
|
|
<button class="pin-btn pin-btn-cancel" @click="hideUsernameModal">{{ $t('modalCancel') }}</button>
|
|||
|
|
<button class="pin-btn pin-btn-confirm" @click="confirmUsernameChange">{{ $t('modalConfirm') }}</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import i18n from '@/common/i18n/index.js'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
userInfo: {},
|
|||
|
|
showActionSheet: false,
|
|||
|
|
userImgs: 'https://api.ccttiot.com/smartmeter/img/static/uKFO4XdQVUgGYJHt4gwn',
|
|||
|
|
cropImageSrc: '',
|
|||
|
|
kjid: '',
|
|||
|
|
token: '',
|
|||
|
|
showPinModal: false, // 显示PIN修改弹窗
|
|||
|
|
pinForm: { // PIN表单数据
|
|||
|
|
oldPin: '',
|
|||
|
|
newPin: '',
|
|||
|
|
confirmNewPin: ''
|
|||
|
|
},
|
|||
|
|
enablePin: false,
|
|||
|
|
showPinVerifyModal: false, // 显示PIN验证弹窗
|
|||
|
|
pinVerifyForm: { // PIN验证表单数据
|
|||
|
|
pin: ''
|
|||
|
|
},
|
|||
|
|
pendingSwitchAction: null, // 待执行的开关操作
|
|||
|
|
showUsernameModal: false, // 显示用户名编辑弹窗
|
|||
|
|
usernameForm: { // 用户名表单数据
|
|||
|
|
nickName: ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.getinfo()
|
|||
|
|
this.getQiniuToken()
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
// 每次页面显示时重新加载安全设置，确保状态同步
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 点击上传图片
|
|||
|
|
btnimgava() {
|
|||
|
|
this.showActionSheet = true
|
|||
|
|
},
|
|||
|
|
// 隐藏弹窗
|
|||
|
|
hideActionSheet() {
|
|||
|
|
this.showActionSheet = false
|
|||
|
|
},
|
|||
|
|
// 拍照
|
|||
|
|
takePhoto() {
|
|||
|
|
this.hideActionSheet()
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count: 1,
|
|||
|
|
sizeType: ['compressed'],
|
|||
|
|
sourceType: ['camera'],
|
|||
|
|
success: (imgRes) => {
|
|||
|
|
this.cropImageSrc = imgRes.tempFilePaths[0]
|
|||
|
|
let _this = this
|
|||
|
|
let math = 'static/' + _this.generateGuid(20)
|
|||
|
|
// 上传裁剪后的图片到七牛云
|
|||
|
|
uni.uploadFile({
|
|||
|
|
url: 'https://up-z2.qiniup.com',
|
|||
|
|
name: 'file',
|
|||
|
|
filePath: _this.cropImageSrc,
|
|||
|
|
formData: {
|
|||
|
|
token: this.token, // 后端返回的token
|
|||
|
|
key: 'smartmeter/img/' + math
|
|||
|
|
},
|
|||
|
|
success: function(res) {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
let str = JSON.parse(res.data)
|
|||
|
|
_this.userImgs = 'https://api.ccttiot.com/' + str.key
|
|||
|
|
_this.userInfo.avatar = 'https://api.ccttiot.com/' + str.key
|
|||
|
|
_this.getxiugaiinfo()
|
|||
|
|
console.log('最终图片路径:', _this.userImgs)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: _this.$i18n.t('imageSelectedSuccess'),
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
fail: function(err) {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
console.error('上传失败:', err)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: _this.$i18n.t('uploadFailed'),
|
|||
|
|
icon: 'none',
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('拍照失败:', err)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$i18n.t('imageOperationCancelled'),
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 从相册选择
|
|||
|
|
chooseFromAlbum() {
|
|||
|
|
this.hideActionSheet()
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count: 1,
|
|||
|
|
sizeType: ['compressed'],
|
|||
|
|
sourceType: ['album'],
|
|||
|
|
success: (imgRes) => {
|
|||
|
|
this.cropImageSrc = imgRes.tempFilePaths[0]
|
|||
|
|
let _this = this
|
|||
|
|
let math = 'static/' + _this.generateGuid(20)
|
|||
|
|
// 上传裁剪后的图片到七牛云
|
|||
|
|
uni.uploadFile({
|
|||
|
|
url: 'https://up-z2.qiniup.com',
|
|||
|
|
name: 'file',
|
|||
|
|
filePath: _this.cropImageSrc,
|
|||
|
|
formData: {
|
|||
|
|
token: this.token, // 后端返回的token
|
|||
|
|
key: 'smartmeter/img/' + math
|
|||
|
|
},
|
|||
|
|
success: function(res) {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
let str = JSON.parse(res.data)
|
|||
|
|
_this.userImgs = 'https://api.ccttiot.com/' + str.key
|
|||
|
|
_this.userInfo.avatar = 'https://api.ccttiot.com/' + str.key
|
|||
|
|
_this.getxiugaiinfo()
|
|||
|
|
console.log('最终图片路径:', _this.userImgs)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: _this.$i18n.t('imageSelectedSuccess'),
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail: function(err) {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
console.error('上传失败:', err)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: _this.$i18n.t('uploadFailed'),
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('选择图片失败:', err)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$i18n.t('imageOperationCancelled'),
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 生成随机字符串（替代$u.guid方法）
|
|||
|
|
generateGuid(length) {
|
|||
|
|
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
|
|||
|
|
let result = ''
|
|||
|
|
for (let i = 0; i < length; i++) {
|
|||
|
|
result += chars.charAt(Math.floor(Math.random() * chars.length))
|
|||
|
|
}
|
|||
|
|
return result
|
|||
|
|
},
|
|||
|
|
// 获取上传七牛云token
|
|||
|
|
getQiniuToken() {
|
|||
|
|
this.$http.get("/common/qiniuToken").then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.token = res.data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 上传图片接口
|
|||
|
|
getxiugaiinfo() {
|
|||
|
|
let data = {
|
|||
|
|
avatar: this.userImgs
|
|||
|
|
}
|
|||
|
|
this.$http.put(`/system/user/profile`, data).then(resp => {
|
|||
|
|
if (resp.code == 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: resp.msg,
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: resp.msg,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取个人信息
|
|||
|
|
getinfo() {
|
|||
|
|
this.$http.get('/getInfo').then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.userInfo = res.user
|
|||
|
|
this.enablePin = res.user.enablePin
|
|||
|
|
uni.setStorageSync('user', res.user)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 多语言翻译方法
|
|||
|
|
$t(key) {
|
|||
|
|
return i18n.t(key)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 点击返回上一级
|
|||
|
|
btnback() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 编辑用户名
|
|||
|
|
editUsername() {
|
|||
|
|
// 设置表单数据
|
|||
|
|
this.usernameForm = {
|
|||
|
|
nickName: this.userInfo.nickName || ''
|
|||
|
|
}
|
|||
|
|
// 显示自定义弹窗
|
|||
|
|
this.showUsernameModal = true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 隐藏用户名编辑弹窗
|
|||
|
|
hideUsernameModal() {
|
|||
|
|
this.showUsernameModal = false
|
|||
|
|
// 重置表单数据
|
|||
|
|
this.usernameForm = {
|
|||
|
|
nickName: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 确认用户名修改
|
|||
|
|
confirmUsernameChange() {
|
|||
|
|
// 验证用户名是否输入
|
|||
|
|
if (!this.usernameForm.nickName.trim()) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('pleaseEnterUsername'),
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 验证用户名长度
|
|||
|
|
if (this.usernameForm.nickName.trim().length < 2) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('usernameTooShort'),
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果用户名没有变化，直接关闭弹窗
|
|||
|
|
if (this.usernameForm.nickName.trim() === this.userInfo.nickName) {
|
|||
|
|
this.hideUsernameModal()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 调用API更新用户名
|
|||
|
|
this.updateUsername()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 更新用户名
|
|||
|
|
updateUsername() {
|
|||
|
|
// 显示加载中
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: this.$t('updating')
|
|||
|
|
})
|
|||
|
|
const data = {
|
|||
|
|
nickName: this.usernameForm.nickName.trim()
|
|||
|
|
}
|
|||
|
|
this.$http.put('/system/user/profile', data).then(resp => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
if (resp.code == 200) {
|
|||
|
|
// 更新本地用户信息
|
|||
|
|
this.userInfo.nickName = data.nickName
|
|||
|
|
uni.setStorageSync('user', this.userInfo)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('usernameUpdateSuccess'),
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
// 关闭弹窗
|
|||
|
|
this.hideUsernameModal()
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: resp.msg || this.$t('usernameUpdateFailed'),
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}).catch(error => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
console.error('更新用户名失败:', error)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('usernameUpdateFailed'),
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 编辑邮箱
|
|||
|
|
// editEmail() {
|
|||
|
|
// uni.showModal({
|
|||
|
|
// title: this.$t('editEmailTitle'),
|
|||
|
|
// content: this.userInfo.email,
|
|||
|
|
// editable: true,
|
|||
|
|
// placeholderText: this.userInfo.email,
|
|||
|
|
// cancelText: this.$t('modalCancel'),
|
|||
|
|
// confirmText: this.$t('modalConfirm'),
|
|||
|
|
// success: (res) => {
|
|||
|
|
// if (res.confirm && res.content) {
|
|||
|
|
// this.userInfo.email = res.content
|
|||
|
|
// uni.showToast({
|
|||
|
|
// title: this.$t('emailUpdateSuccess'),
|
|||
|
|
// icon: 'success'
|
|||
|
|
// })
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// },
|
|||
|
|
|
|||
|
|
// 编辑密码
|
|||
|
|
// editPassword() {
|
|||
|
|
// uni.showModal({
|
|||
|
|
// title: this.$t('editPasswordTitle'),
|
|||
|
|
// content: '',
|
|||
|
|
// editable: true,
|
|||
|
|
// placeholderText: this.$t('editPasswordContent'),
|
|||
|
|
// cancelText: this.$t('modalCancel'),
|
|||
|
|
// confirmText: this.$t('modalConfirm'),
|
|||
|
|
// success: (res) => {
|
|||
|
|
// if (res.confirm && res.content) {
|
|||
|
|
// // 这里应该调用修改密码的API
|
|||
|
|
// uni.showToast({
|
|||
|
|
// title: this.$t('passwordUpdateSuccess'),
|
|||
|
|
// icon: 'success'
|
|||
|
|
// })
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// },
|
|||
|
|
|
|||
|
|
// 编辑手机号
|
|||
|
|
// editPhone() {
|
|||
|
|
// uni.showModal({
|
|||
|
|
// title: this.$t('editPhoneTitle'),
|
|||
|
|
// content: this.userInfo.phone,
|
|||
|
|
// editable: true,
|
|||
|
|
// placeholderText: this.userInfo.phone,
|
|||
|
|
// cancelText: this.$t('modalCancel'),
|
|||
|
|
// confirmText: this.$t('modalConfirm'),
|
|||
|
|
// success: (res) => {
|
|||
|
|
// if (res.confirm && res.content) {
|
|||
|
|
// this.userInfo.phone = res.content
|
|||
|
|
// uni.showToast({
|
|||
|
|
// title: this.$t('phoneUpdateSuccess'),
|
|||
|
|
// icon: 'success'
|
|||
|
|
// })
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// },
|
|||
|
|
|
|||
|
|
// 删除账户
|
|||
|
|
deleteAccount() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: this.$t('deleteAccountTitle'),
|
|||
|
|
content: this.$t('deleteAccountContent'),
|
|||
|
|
confirmColor: '#ff4444',
|
|||
|
|
cancelText: this.$t('modalCancel'),
|
|||
|
|
confirmText: this.$t('modalConfirm'),
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
// 这里应该调用删除账户的API
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('deleteAccountSuccess'),
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
// 删除成功后返回登录页面
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: '/pages/index/index'
|
|||
|
|
})
|
|||
|
|
}, 1500)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 编辑PIN码
|
|||
|
|
editPin() {
|
|||
|
|
// 重置表单数据
|
|||
|
|
this.pinForm = {
|
|||
|
|
oldPin: '',
|
|||
|
|
newPin: '',
|
|||
|
|
confirmNewPin: ''
|
|||
|
|
}
|
|||
|
|
this.showPinModal = true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 隐藏PIN修改弹窗
|
|||
|
|
hidePinModal() {
|
|||
|
|
this.showPinModal = false
|
|||
|
|
console.log(2222);
|
|||
|
|
// 重置表单数据
|
|||
|
|
this.pinForm = {
|
|||
|
|
oldPin: '',
|
|||
|
|
newPin: '',
|
|||
|
|
confirmNewPin: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 确认修改PIN
|
|||
|
|
confirmPinChange() {
|
|||
|
|
// 验证旧PIN是否输入
|
|||
|
|
if (!this.pinForm.oldPin) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('pleaseEnterOldPin'),
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 验证新PIN是否输入
|
|||
|
|
if (!this.pinForm.newPin) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('pleaseEnterNewPin'),
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 验证确认PIN是否输入
|
|||
|
|
if (!this.pinForm.confirmNewPin) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('pleaseConfirmNewPin'),
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 验证PIN长度
|
|||
|
|
if (this.pinForm.oldPin.length !== 4 || this.pinForm.newPin.length !== 4 || this.pinForm.confirmNewPin.length !== 4) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('pinMustBe4Digits'),
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 验证新PIN是否一致
|
|||
|
|
if (this.pinForm.newPin !== this.pinForm.confirmNewPin) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('newPinsNotMatch'),
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 验证新PIN不能与旧PIN相同
|
|||
|
|
if (this.pinForm.oldPin === this.pinForm.newPin) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('newPinCannotBeSame'),
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 调用修改PIN的API
|
|||
|
|
this.updatePin()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 调用修改PIN的API
|
|||
|
|
updatePin() {
|
|||
|
|
// 显示加载中
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: this.$t('updating')
|
|||
|
|
})
|
|||
|
|
// 这里需要根据实际API接口进行调用
|
|||
|
|
// 假设API接口为 /system/user/updatePin
|
|||
|
|
this.$http.put(`/system/user/profile/updatePin?oldPin=${this.pinForm.oldPin}&newPin=${this.pinForm.newPin}&enablePin=${this.enablePin}`).then(resp => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
if (resp.code == 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('pinUpdateSuccess'),
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
this.hidePinModal()
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: resp.msg || this.$t('pinUpdateFailed'),
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}).catch(error => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
console.error('修改PIN失败:', error)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('pinUpdateFailed'),
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// PIN开关变化处理
|
|||
|
|
onPinSwitchChange(e) {
|
|||
|
|
const enabled = e.detail.value
|
|||
|
|
this.enablePin = enabled
|
|||
|
|
console.log('PIN开关变化:', enabled)
|
|||
|
|
// 记录待执行的操作
|
|||
|
|
this.pendingSwitchAction = enabled ? 'enable' : 'disable'
|
|||
|
|
// 重置PIN验证表单
|
|||
|
|
this.pinVerifyForm = {
|
|||
|
|
pin: ''
|
|||
|
|
}
|
|||
|
|
// 显示PIN验证弹窗
|
|||
|
|
this.showPinVerifyModal = true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 隐藏PIN验证弹窗
|
|||
|
|
hidePinVerifyModal() {
|
|||
|
|
this.showPinVerifyModal = false
|
|||
|
|
this.enablePin = this.userInfo.enablePin
|
|||
|
|
// 重置表单数据
|
|||
|
|
this.pinVerifyForm = {
|
|||
|
|
pin: ''
|
|||
|
|
}
|
|||
|
|
this.pendingSwitchAction = null
|
|||
|
|
},
|
|||
|
|
// 确认PIN验证
|
|||
|
|
confirmPinVerification() {
|
|||
|
|
// 验证PIN是否输入
|
|||
|
|
if (!this.pinVerifyForm.pin) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('pleaseEnterOldPin'),
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 验证PIN长度
|
|||
|
|
if (this.pinVerifyForm.pin.length !== 4) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('pinMustBe4Digits'),
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 调用PIN验证API
|
|||
|
|
this.verifyPin()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 验证PIN码
|
|||
|
|
verifyPin() {
|
|||
|
|
// 显示加载中
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: this.$t('verifying')
|
|||
|
|
})
|
|||
|
|
// 调用PIN验证API
|
|||
|
|
this.$http.put(`/system/user/profile/updatePin?pin=${this.pinVerifyForm.pin}&enablePin=${this.enablePin}`).then(resp => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
if (resp.code == 200) {
|
|||
|
|
// PIN验证成功，执行开关操作
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('pinVerificationSuccess'),
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 1500
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 关闭验证弹窗
|
|||
|
|
this.hidePinVerifyModal()
|
|||
|
|
this.getinfo()
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: resp.msg || this.$t('pinVerificationFailed'),
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}).catch(error => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
console.error('PIN验证失败:', error)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$t('pinVerificationFailed'),
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 3000
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.tabback {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 160rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
padding-top: 80rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 999 !important;
|
|||
|
|
background-color: #fff;
|
|||
|
|
|
|||
|
|
.rtjt {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device-detail {
|
|||
|
|
padding-top: 150rpx;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
/* padding: 40rpx 30rpx; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 头像区域
|
|||
|
|
.avatar-section {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: 104rpx;
|
|||
|
|
margin-top: 104rpx;
|
|||
|
|
|
|||
|
|
.avatar-container {
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.avatar-placeholder {
|
|||
|
|
width: 250rpx;
|
|||
|
|
height: 250rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background-color: #f8f8f8;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 250rpx;
|
|||
|
|
height: 250rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar-icon {
|
|||
|
|
font-size: 80rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
right: -24rpx;
|
|||
|
|
width: 110rpx;
|
|||
|
|
height: 68rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 110rpx;
|
|||
|
|
height: 68rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-icon {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-sheet {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
z-index: 9999;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-sheet-content {
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 20rpx 20rpx 0 0;
|
|||
|
|
padding-bottom: 40rpx;
|
|||
|
|
animation: slideUp 0.3s ease-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes slideUp {
|
|||
|
|
from {
|
|||
|
|
transform: translateY(100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-sheet-item {
|
|||
|
|
padding: 30rpx 40rpx;
|
|||
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-sheet-item:active {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-sheet-cancel {
|
|||
|
|
padding: 30rpx 40rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
background-color: #f8f8f8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-sheet-cancel:active {
|
|||
|
|
background-color: #e8e8e8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-sheet-text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-sheet-cancel .action-sheet-text {
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 表单区域
|
|||
|
|
.form-section {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
|
|||
|
|
.form-item {
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
border-bottom: 1rpx solid #eee;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.input-field {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333;
|
|||
|
|
|
|||
|
|
&::placeholder {
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:disabled {
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.edit-icon {
|
|||
|
|
width: 52rpx;
|
|||
|
|
height: 52rpx;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 52rpx;
|
|||
|
|
height: 52rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 安全开关样式
|
|||
|
|
.switch-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
border-bottom: 1rpx solid #eee;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.switch-desc {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.security-switch {
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.debug-info {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
background-color: #f8f8f8;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.debug-text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.debug-btn {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
padding: 10rpx 20rpx;
|
|||
|
|
background-color: #333;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除账户按钮
|
|||
|
|
.delete-section {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.delete-btn {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 88rpx;
|
|||
|
|
line-height: 88rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
color: #ff4444;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
background-color: #f8f8f8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// PIN容器样式
|
|||
|
|
.pin-container {
|
|||
|
|
.pin-switch-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
// border-bottom: 1rpx solid #eee;
|
|||
|
|
// padding-bottom: 20rpx;
|
|||
|
|
// margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.pin-switch-desc {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pin-switch {
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pin-edit-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
border-bottom: 1rpx solid #eee;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.pin-display-field {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #666;
|
|||
|
|
|
|||
|
|
&:disabled {
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.edit-icon {
|
|||
|
|
width: 52rpx;
|
|||
|
|
height: 52rpx;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 52rpx;
|
|||
|
|
height: 52rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// PIN修改弹窗样式
|
|||
|
|
.pin-modal {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
z-index: 9999;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 40rpx;
|
|||
|
|
|
|||
|
|
.pin-modal-content {
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 600rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
animation: modalSlideIn 0.3s ease-out;
|
|||
|
|
|
|||
|
|
.pin-modal-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 40rpx 40rpx 20rpx;
|
|||
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|||
|
|
|
|||
|
|
.pin-modal-title {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pin-modal-close {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
color: #999;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pin-modal-body {
|
|||
|
|
padding: 40rpx;
|
|||
|
|
|
|||
|
|
.pin-verify-tip {
|
|||
|
|
background-color: #f8f9fa;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
margin-bottom: 32rpx;
|
|||
|
|
border-left: 4rpx solid #333;
|
|||
|
|
|
|||
|
|
.pin-verify-tip-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pin-input-group {
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pin-input-label {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pin-input {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 88rpx;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
border: 2rpx solid #e0e0e0;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333;
|
|||
|
|
background-color: #fff;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
&:focus {
|
|||
|
|
border-color: #333;
|
|||
|
|
outline: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::placeholder {
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pin-modal-footer {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 20rpx 40rpx 40rpx;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
|
|||
|
|
.pin-btn {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 88rpx;
|
|||
|
|
line-height: 88rpx;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
|
|||
|
|
&.pin-btn-cancel {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
color: #666;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
background-color: #e8e8e8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.pin-btn-confirm {
|
|||
|
|
background-color: #333;
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
background-color: #0056b3;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes modalSlideIn {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: scale(0.9) translateY(-50rpx);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: scale(1) translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|