源文件
This commit is contained in:
187
jeepay-ui-merchant/src/views/current/AvatarModal.vue
Normal file
187
jeepay-ui-merchant/src/views/current/AvatarModal.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="data.visible"
|
||||
title="修改头像"
|
||||
:mask-closable="false"
|
||||
:confirm-loading="data.confirmLoading"
|
||||
:width="800"
|
||||
:footer="null"
|
||||
@cancel="cancelHandel"
|
||||
>
|
||||
<a-row>
|
||||
<a-col :xs="24" :md="12" :style="{height: '350px'}">
|
||||
<vue-cropper
|
||||
ref="cropper"
|
||||
:img="data.options.img"
|
||||
:info="true"
|
||||
:auto-crop="data.options.autoCrop"
|
||||
:auto-crop-width="data.options.autoCropWidth"
|
||||
:auto-crop-height="data.options.autoCropHeight"
|
||||
:fixed-box="data.options.fixedBox"
|
||||
@realTime="realTime"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :xs="24" :md="12" :style="{height: '350px'}">
|
||||
<div class="avatar-upload-preview">
|
||||
<img :src="data.previews.url" :style="data.previews.img">
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<br>
|
||||
<a-row>
|
||||
<a-col :lg="2" :md="2">
|
||||
<a-upload name="file" :before-upload="beforeUpload" :show-upload-list="false">
|
||||
<a-button>
|
||||
<upload-outlined />
|
||||
选择图片
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</a-col>
|
||||
<a-col :lg="{span: 1, offset: 2}" :md="2">
|
||||
<a-button icon="plus" @click="changeScale(1)" />
|
||||
</a-col>
|
||||
<a-col :lg="{span: 1, offset: 1}" :md="2">
|
||||
<a-button icon="minus" @click="changeScale(-1)" />
|
||||
</a-col>
|
||||
<a-col :lg="{span: 1, offset: 1}" :md="2">
|
||||
<a-button icon="undo" @click="rotateLeft" />
|
||||
</a-col>
|
||||
<a-col :lg="{span: 1, offset: 1}" :md="2">
|
||||
<a-button icon="redo" @click="rotateRight" />
|
||||
</a-col>
|
||||
<a-col :lg="{span: 2, offset: 6}" :md="2">
|
||||
<a-button type="primary" @click="finish('blob')">
|
||||
保存
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { upload, $updateUserInfo } from '@/api/manage'
|
||||
import {reactive,ref} from 'vue'
|
||||
import {message} from 'ant-design-vue'
|
||||
import {useUserStore} from '@/store/modules/user'
|
||||
const emit = defineEmits(['ok'])
|
||||
const cropper = ref()
|
||||
const data =reactive({
|
||||
recordId: useUserStore().userInfo.sysUserId, // 拿到ID
|
||||
userLoad: upload.avatar, // 图片上传地址
|
||||
visible: false,
|
||||
id: null,
|
||||
confirmLoading: false,
|
||||
fileList: [],
|
||||
uploading: false,
|
||||
options: {
|
||||
// img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
||||
img:'' as any ,
|
||||
autoCrop: true,
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 200,
|
||||
fixedBox: true
|
||||
},
|
||||
previews: {} as any
|
||||
})
|
||||
|
||||
defineExpose({edit,okHandel})
|
||||
function edit (id) {
|
||||
data.visible = true
|
||||
data.id = id
|
||||
/* 获取原始头像 */
|
||||
}
|
||||
function close () {
|
||||
data.id = null
|
||||
data.visible = false
|
||||
}
|
||||
function cancelHandel () {
|
||||
close()
|
||||
}
|
||||
function changeScale (num) {
|
||||
num = num || 1
|
||||
cropper.value.changeScale(num)
|
||||
}
|
||||
function rotateLeft () {
|
||||
cropper.value.rotateLeft()
|
||||
}
|
||||
function rotateRight () {
|
||||
cropper.value.rotateRight()
|
||||
}
|
||||
function beforeUpload (file) {
|
||||
const reader = new FileReader()
|
||||
// 把Array Buffer转化为blob 如果是base64不需要
|
||||
// 转化为base64
|
||||
reader.readAsDataURL(file)
|
||||
reader.onload = () => {
|
||||
data.options.img = reader.result
|
||||
}
|
||||
// 转化为blob
|
||||
// reader.readAsArrayBuffer(file)
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
// 上传图片（点击上传按钮）
|
||||
function finish (type) {
|
||||
console.log('finish')
|
||||
|
||||
// 创建一个空对象
|
||||
const reqData:any ={}
|
||||
// 输出
|
||||
if (type === 'blob') {
|
||||
cropper.value.getCropBlob((data) => {
|
||||
// 通过该方法可以获取当前文件的一个内存URL
|
||||
const img = window.URL.createObjectURL(data)
|
||||
data.model = true
|
||||
data.modelSrc = img
|
||||
reqData.avatarUrl = img
|
||||
// this.$http.post('https://www.mocky.io/v2/5cc8019d300000980a055e76', reqData, { contentType: false, processData: false, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
|
||||
$updateUserInfo(reqData).then((response) => {
|
||||
message.success('上传成功')
|
||||
emit('ok', response.url)
|
||||
data.visible = false
|
||||
}).catch(err => {
|
||||
|
||||
})
|
||||
console.log(data.userLoad, data.recordId, data.modelSrc)
|
||||
})
|
||||
} else {
|
||||
cropper.value.getCropData((data) => {
|
||||
data.model = true
|
||||
data.modelSrc = data
|
||||
})
|
||||
}
|
||||
}
|
||||
function okHandel () {
|
||||
|
||||
data.confirmLoading = true
|
||||
setTimeout(() => {
|
||||
data.confirmLoading = false
|
||||
close()
|
||||
message.success('上传头像成功')
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
function realTime (data) {
|
||||
data.previews = data
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.avatar-upload-preview {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
476
jeepay-ui-merchant/src/views/current/UserinfoPage.vue
Normal file
476
jeepay-ui-merchant/src/views/current/UserinfoPage.vue
Normal file
@@ -0,0 +1,476 @@
|
||||
<template>
|
||||
<div :key="data.updateKey" style="background: #fff;border-radius:10px">
|
||||
<a-tabs v-model:activeKey="data.tableKey" @change="selectTabs">
|
||||
<a-tab-pane key="1" :disabled="data.isPwdExpired" tab="基本信息">
|
||||
<div class="account-settings-info-view">
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="16" :lg="16">
|
||||
<a-form ref="infoFormModel" :model="data.saveObject" :label-col="{span: 9}" :wrapper-col="{span: 10}" :rules="data.rules">
|
||||
<a-form-item label="用户登录名:">
|
||||
<a-input v-model:value="data.saveObject.loginUsername" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item label="用户姓名：" name="realname">
|
||||
<a-input v-model:value="data.saveObject.realname" />
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号：" name="telphone">
|
||||
<a-input v-model:value="data.saveObject.telphone" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item label="请选择性别：">
|
||||
<a-radio-group v-model:value="data.saveObject.sex">
|
||||
<a-radio :value="1">
|
||||
男
|
||||
</a-radio>
|
||||
<a-radio :value="2">
|
||||
女
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-form-item class="bottom-btn">
|
||||
<a-button type="primary" :loading="data.btnLoading" @click="changeInfo">
|
||||
<check-circle-outlined />
|
||||
更新基本信息
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :lg="8" :style="{ minHeight: '180px',margin:'0 auto' }">
|
||||
<!-- 原始的头像上传，带有图片裁剪功能 -->
|
||||
<!-- <div class="ant-upload-preview" @click="$refs.modal.edit(1)" > -->
|
||||
<div class="ant-upload-preview">
|
||||
<!-- <a-icon type="cloud-upload-o" class="upload-icon"/> -->
|
||||
<!-- <div class="mask">
|
||||
<a-icon type="plus" />
|
||||
</div> -->
|
||||
<img
|
||||
:src="data.saveObject.avatarUrl"
|
||||
style="border: 1px solid rgba(0,0,0,0.08)"
|
||||
>
|
||||
|
||||
<JeepayUpload
|
||||
v-model:src="data.saveObject.avatarUrl"
|
||||
bizType="avatar"
|
||||
style="margin-top:10px"
|
||||
:showUploadList="false"
|
||||
/>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 图片裁剪组件 <avatar-modal ref="modal" @ok="setavatar"/> -->
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="安全信息">
|
||||
<a-tabs v-model:activeKey="data.tableKey2" tab-position="left" @change="selectTabsSub">
|
||||
<a-tab-pane key="password" tab="修改密码">
|
||||
<div class="account-settings-info-view">
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="16" :lg="16">
|
||||
<a-form ref="pwdFormModel" :model="data.updateObject" :label-col="{span: 9}" :wrapper-col="{span: 10}" :rules="data.rulesPass">
|
||||
<a-form-item label="原密码：" name="originalPwd">
|
||||
<a-input-password v-model:value="data.updateObject.originalPwd" autocomplete="new-password" placeholder="请输入原密码" />
|
||||
</a-form-item>
|
||||
<a-form-item label="新密码：" name="newPwd">
|
||||
<a-input-password v-model:value="data.updateObject.newPwd" autocomplete="new-password" placeholder="请输入新密码" />
|
||||
</a-form-item>
|
||||
<a-form-item label="确认新密码：" name="confirmPwd">
|
||||
<a-input-password v-model:value="data.updateObject.confirmPwd" autocomplete="new-password" placeholder="确认新密码" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-form-item class="bottom-btn">
|
||||
<a-button type="primary" :loading="data.btnLoading" @click="confirm">
|
||||
<check-circle-outlined />
|
||||
更新密码
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="mfaVer" tab="MFA认证" :disabled="data.isPwdExpired">
|
||||
<div class="account-settings-info-view">
|
||||
<a-row v-if="data.mfaInfo.mfaBindState == '0'" :gutter="12" justify="start">
|
||||
<a-col :push="2">
|
||||
<QrcodeVue :value="data.mfaInfo.mfaBindUrl" :size="200" />
|
||||
</a-col>
|
||||
<a-col :push="3">
|
||||
<a-alert message="" type="warning">
|
||||
<template #description>
|
||||
1.请使用MFA工具
|
||||
<a-popover placement="bottom">
|
||||
<template #content>
|
||||
<p>推荐使用以下工具：</p>
|
||||
<p>1. 阿里云或腾讯云手机客户端</p>
|
||||
<p>2. 微信小程序：二次验证码</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
</a-popover>
|
||||
，扫描左侧二维码进行绑定。<br><br>
|
||||
2.扫描完成后，输入工具内对应的验证码。<br><br>
|
||||
注：不能扫码？
|
||||
<a-popover placement="bottom">
|
||||
<template #content>
|
||||
<p>输入以下账号、秘钥进行绑定：</p>
|
||||
<p>账号：{{ data.saveObject.telphone }}</p>
|
||||
<p>秘钥：{{ data.mfaInfo.mfaSecretKey }}</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
</a-popover>
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-else>
|
||||
<a-col :push="2">
|
||||
<a-alert message="" type="success">
|
||||
<template #description>
|
||||
已完成MFA认证。
|
||||
</template>
|
||||
</a-alert>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="12" justify="start" type="flex" style="margin-top: 30px;">
|
||||
<a-col :md="6" :lg="6">
|
||||
<a-form ref="mfaFormModel" :model="data.mfaInfo" :rules="data.rulesCode">
|
||||
<a-form-item label="验证码" name="verCode">
|
||||
<a-input v-model:value="data.mfaInfo.verCode" placeholder="请输入验证码" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-form-item class="bottom-btn">
|
||||
<a-button v-if="data.mfaInfo.mfaBindState=='0'" type="primary" :loading="data.btnLoading" @click="mfaBindConfirm">
|
||||
<check-circle-outlined />
|
||||
确认绑定
|
||||
</a-button>
|
||||
<a-button v-else type="primary" danger :loading="data.btnLoading" @click="mfaRelieveConfirm">
|
||||
<check-circle-outlined />
|
||||
确认解绑
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="msg" tab="预留信息">
|
||||
<div class="account-settings-info-view">
|
||||
<a-row :gutter="16">
|
||||
<a-col :md="16" :lg="16">
|
||||
<a-form :label-col="{span: 9}" :wrapper-col="{span: 10}">
|
||||
<a-form-item label="预留信息：" name="">
|
||||
<a-input v-model:value="data.safeWord" placeholder="请输入新的预留信息" show-count :maxlength="10" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-form-item class="bottom-btn" style="margin-bottom: 90px;">
|
||||
<a-button type="primary" :loading="data.btnLoading" @click="safeWordUpdate">
|
||||
<check-circle-outlined />
|
||||
确认更新
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { $getUserInfo, $updateUserInfo, $getMFAInfo, $mfaBind, $mfaRelieve, $updateUserPass, upload, $getPasswordRules } from '@/api/manage'
|
||||
import AvatarModal from './AvatarModal.vue'
|
||||
import QrcodeVue from 'qrcode.vue'
|
||||
// import store from '@/store'
|
||||
import {useUserStore} from '@/store/modules/user'
|
||||
import { Base64 } from 'js-base64'
|
||||
import {ref, reactive,onMounted,getCurrentInstance,toRaw} from 'vue'
|
||||
import {message} from 'ant-design-vue'
|
||||
import { getCurrentUserInfo } from '@/api/login'
|
||||
import { useRoute } from 'vue-router'
|
||||
const infoFormModel = ref()
|
||||
const pwdFormModel = ref()
|
||||
const mfaFormModel = ref()
|
||||
|
||||
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
const data = reactive({
|
||||
action: upload.avatar, // 上传图标地址
|
||||
btnLoading: false,
|
||||
groupKey: 'password',
|
||||
passwordRules: /^$/, //密码规则
|
||||
passwordRulesText: '', //密码规则提示文字
|
||||
safeWord:'', //预留信息
|
||||
saveObject: {
|
||||
loginUsername: '', // 登录名
|
||||
realname: '', // 真实姓名
|
||||
telphone: '',
|
||||
sex: '',
|
||||
avatarUrl: '' // 用户头像
|
||||
},
|
||||
mfaInfo: {
|
||||
mfaBindUrl: '',
|
||||
mfaBindState: '',
|
||||
mfaSecretKey: '',
|
||||
verCode: ''
|
||||
},
|
||||
updateKey:0, //刷新键
|
||||
confirmLoading:false,
|
||||
// avatarUrl: useUserStore().userInfo.avatarImgPath,
|
||||
updateObject: {
|
||||
originalPwd: '', // 原密码
|
||||
newPwd: '', // 新密码
|
||||
confirmPwd: '' // 确认密码
|
||||
} as any,
|
||||
recordId: useUserStore().userInfo.sysUserId, // 拿到ID
|
||||
rules: {
|
||||
realname: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }]
|
||||
},
|
||||
rulesCode: {
|
||||
verCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
|
||||
},
|
||||
rulesPass: {
|
||||
originalPwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
|
||||
newPwd: [
|
||||
{ required: false, trigger: 'blur' },{
|
||||
validator: (rule, value) => {
|
||||
if (!data.passwordRules.test(data.updateObject.newPwd)) {
|
||||
return Promise.reject(data.passwordRulesText)
|
||||
} else if(data.updateObject.newPwd !== data.updateObject.confirmPwd) {
|
||||
return Promise.reject('新密码与确认新密码不一致')
|
||||
} else return Promise.resolve()
|
||||
}
|
||||
}
|
||||
],
|
||||
confirmPwd: [{ required: false, trigger: 'blur' }, {
|
||||
validator: (rule, value) => {
|
||||
if (!data.passwordRules.test(data.updateObject.confirmPwd)) {
|
||||
return Promise.reject(data.passwordRulesText)
|
||||
} else if(data.updateObject.newPwd !== data.updateObject.confirmPwd) {
|
||||
return Promise.reject('新密码与确认新密码不一致')
|
||||
} else return Promise.resolve()
|
||||
}
|
||||
}]
|
||||
},
|
||||
|
||||
tableKey: '1',
|
||||
tableKey2:'password', //子tabkey
|
||||
isPwdExpired: false, //是否强制改密码
|
||||
|
||||
})
|
||||
|
||||
onMounted(()=>{
|
||||
|
||||
if(useRoute().query.isPwdExpired == '1'){
|
||||
data.isPwdExpired = true
|
||||
data.tableKey = '2'
|
||||
}
|
||||
if(useRoute().query.type === 'msg'){
|
||||
data.tableKey = '2'
|
||||
data.tableKey2 = 'msg'
|
||||
}
|
||||
|
||||
detail()
|
||||
getPasswordRules()
|
||||
})
|
||||
function detail () { // 获取基本信息
|
||||
|
||||
$getUserInfo().then(res => {
|
||||
data.saveObject = res
|
||||
data.safeWord = res.safeWord
|
||||
})
|
||||
}
|
||||
function getPasswordRules () { // 获取密码规则
|
||||
$getPasswordRules().then(res => {
|
||||
data.passwordRules = new RegExp(res.regexpRules)
|
||||
data.passwordRulesText = res.errTips
|
||||
})
|
||||
}
|
||||
function changeInfo () { // 更新基本信息事件
|
||||
infoFormModel.value.validate().then(valid =>{
|
||||
|
||||
$infoBox.confirmPrimary('确认更新信息吗？', '', () => {
|
||||
data.btnLoading = true // 打开按钮上的 loading
|
||||
// that.$store.commit('showLoading') // 关闭全局刷新
|
||||
// 请求接口
|
||||
$updateUserInfo(toRaw(data.saveObject)).then(res => {
|
||||
data.btnLoading = false // 关闭按钮刷新
|
||||
//$store.commit('hideLoading') // 关闭全局刷新
|
||||
return getCurrentUserInfo()
|
||||
}).then(bizData => {
|
||||
bizData.avatarUrl = data.saveObject.avatarUrl
|
||||
bizData.realname = data.saveObject.realname
|
||||
useUserStore().refUserInfo() // 刷新用户信息
|
||||
// store.commit('SET_USER_INFO', bizData) // 调用vuex设置用户基本信息
|
||||
message.success('修改成功')
|
||||
}).catch(res => {
|
||||
// that.$store.commit('hideLoading') // 关闭全局刷新
|
||||
data.btnLoading = false
|
||||
console.log(res)
|
||||
message.error('修改失败')
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
function confirm (e) { // 确认更新密码
|
||||
pwdFormModel.value.validate().then(valid=>{
|
||||
$infoBox.confirmPrimary('确认更新密码吗？', '', () => {
|
||||
// 请求接口
|
||||
data.btnLoading = true // 打开按钮上的 loading
|
||||
data.confirmLoading = true // 显示loading
|
||||
data.updateObject.recordId = data.recordId // 用户ID
|
||||
const copyUpdateObject = JSON.parse(JSON.stringify(data.updateObject))
|
||||
copyUpdateObject.originalPwd = Base64.encode(copyUpdateObject.originalPwd)
|
||||
copyUpdateObject.confirmPwd = Base64.encode(copyUpdateObject.confirmPwd)
|
||||
|
||||
$updateUserPass(copyUpdateObject).then(res => {
|
||||
message.success('修改成功')
|
||||
// 退出登录
|
||||
useUserStore().logout()
|
||||
}).catch(res => {
|
||||
data.confirmLoading = false
|
||||
data.btnLoading = false
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
function selectTabs () { // 清空必填提示
|
||||
data.updateObject.originalPwd = ''
|
||||
data.updateObject.newPwd = ''
|
||||
data.updateObject.confirmPwd = ''
|
||||
console.log(data.updateObject)
|
||||
}
|
||||
// 上传文件成功回调方法，参数value为文件地址，name是自定义参数
|
||||
function uploadSuccess (value, name) {
|
||||
data.saveObject.avatarUrl = value
|
||||
console.log(data.saveObject.avatarUrl)
|
||||
data.updateKey += 1
|
||||
}
|
||||
function selectTabsSub (key) { // 清空必填提示
|
||||
if (key) {
|
||||
data.groupKey = key
|
||||
detail()
|
||||
}
|
||||
// 获取MFA信息
|
||||
if(data.groupKey == 'mfaVer') {
|
||||
getMFAInfo()
|
||||
}
|
||||
}
|
||||
|
||||
function getMFAInfo() {
|
||||
$getMFAInfo().then(res => {
|
||||
data.mfaInfo = res
|
||||
})
|
||||
}
|
||||
|
||||
// MFA绑定
|
||||
function mfaBindConfirm() {
|
||||
mfaFormModel.value.validate().then(valid =>{
|
||||
$infoBox.confirmPrimary('确认绑定MFA认证吗？', '', () => {
|
||||
// 请求接口
|
||||
data.btnLoading = true // 打开按钮上的 loading
|
||||
data.confirmLoading = true // 显示loading
|
||||
$mfaBind({verCode: data.mfaInfo.verCode}).then(res => {
|
||||
data.confirmLoading = false
|
||||
data.btnLoading = false
|
||||
|
||||
getMFAInfo()
|
||||
message.success('绑定成功')
|
||||
// 退出登录
|
||||
// useUserStore().logout()
|
||||
}).catch(res => {
|
||||
data.confirmLoading = false
|
||||
data.btnLoading = false
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// MFA解绑
|
||||
function mfaRelieveConfirm() {
|
||||
mfaFormModel.value.validate().then(valid =>{
|
||||
$infoBox.confirmPrimary('确认解绑MFA认证吗？', '', () => {
|
||||
// 请求接口
|
||||
data.btnLoading = true // 打开按钮上的 loading
|
||||
data.confirmLoading = true // 显示loading
|
||||
$mfaRelieve({verCode: data.mfaInfo.verCode}).then(res => {
|
||||
data.confirmLoading = false
|
||||
data.btnLoading = false
|
||||
|
||||
getMFAInfo()
|
||||
message.success('解绑成功')
|
||||
// 退出登录
|
||||
// useUserStore().logout()
|
||||
}).catch(res => {
|
||||
data.confirmLoading = false
|
||||
data.btnLoading = false
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
function safeWordUpdate(){
|
||||
if(!data.safeWord){
|
||||
return message.error('信息内容不可为空')
|
||||
}
|
||||
$updateUserInfo({safeWord:data.safeWord}).then(res =>{
|
||||
message.success('更新成功')
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.avatar-upload-wrapper {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
}
|
||||
.bottom-btn{
|
||||
/deep/ div{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.ant-upload-preview {
|
||||
text-align:center ;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
// max-width: 180px;
|
||||
border-radius: 50%;
|
||||
// box-shadow: 0 0 4px #ccc;
|
||||
|
||||
.upload-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
font-size: 1.4rem;
|
||||
padding: 0.5rem;
|
||||
background: rgba(222, 221, 221, 0.7);
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.mask {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
background: rgba(0,0,0,0.4);
|
||||
cursor: pointer;
|
||||
transition: opacity 0.4s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -1rem;
|
||||
margin-top: -1rem;
|
||||
color: #d6d6d6;
|
||||
}
|
||||
}
|
||||
|
||||
img, .mask {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
94
jeepay-ui-merchant/src/views/current/postList.vue
Normal file
94
jeepay-ui-merchant/src/views/current/postList.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<a-list size="large" :data-source="vdata.noticeList" :pagination="pagination">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item class="list-ltem" @click="showDrawer(item.articleId)">
|
||||
<span>{{ item.title }}</span>
|
||||
<a style="color: #707070;">{{ item.createdAt }} <right-outlined :style="{fontSize: '12px', color: '#707070',marginLeft:'10px'}" /> </a>
|
||||
</a-list-item>
|
||||
</template>
|
||||
<template #header>
|
||||
<div class="title">全部公告</div>
|
||||
</template>
|
||||
</a-list>
|
||||
</div>
|
||||
<JeepayNoticeViewer ref="noticeViewer" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineComponent,onMounted,reactive,ref } from 'vue'
|
||||
import { API_URL_NOTICELIST, req } from '@/api/manage'
|
||||
const vdata = reactive({
|
||||
noticeList:[],
|
||||
content:''//文章内容
|
||||
})
|
||||
const noticeViewer = ref()
|
||||
const visible = ref<boolean>(false)
|
||||
onMounted(() =>{
|
||||
reqTableDataFunc({
|
||||
pageSize:10,
|
||||
pageNumber:1
|
||||
}).then(res =>{
|
||||
console.log(res)
|
||||
vdata.noticeList = res.records
|
||||
pagination.total = res.total
|
||||
})
|
||||
})
|
||||
function reqTableDataFunc(params: any) { // 请求table接口数据
|
||||
return req.list(API_URL_NOTICELIST, Object.assign(params,{articleType:1}))
|
||||
}
|
||||
|
||||
const showDrawer =async (articleId) => {
|
||||
noticeViewer.value.showDrawer(articleId)
|
||||
|
||||
}
|
||||
|
||||
const pagination = {
|
||||
onChange: (page: number) => {
|
||||
let params = {
|
||||
pageSize:10,
|
||||
pageNumber:page
|
||||
}
|
||||
reqTableDataFunc(params).then(res =>{
|
||||
vdata.noticeList = res.records
|
||||
pagination.total = res.total
|
||||
})
|
||||
},
|
||||
pageSize: 10,
|
||||
total:0
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-list-pagination){
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.card{
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
.list-ltem{
|
||||
padding-left: 30px;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
height: 60px;
|
||||
span{
|
||||
&:nth-child(1){
|
||||
cursor:pointer;
|
||||
|
||||
}
|
||||
&:hover{
|
||||
color: #2691FF;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user