更新个人中心认证

This commit is contained in:
songyang 2023-12-09 17:00:58 +08:00
parent a6e21486fe
commit 61dd5b8968
13 changed files with 623 additions and 118 deletions

2
env/.env.dev vendored
View File

@ -10,7 +10,7 @@ VITE_API_URL = '/proxyApi'
VITE_proxyTarget = 'http://10.40.92.186:8080' # 赵福海 (登录)
# VITE_proxyTarget = 'http://10.40.92.185:9206' # 赵福海 ( 设备类型)
# VITE_proxyTarget = 'http://10.40.92.253:8080' # 牛 (个人中心 基础信息企业申请认证)
# VITE_proxyTarget = 'http://10.40.92.16:9502' # 牛 (个人中心 基础信息企业申请认证)

View File

@ -4,6 +4,7 @@
<el-upload
:action="actionUrl"
:auto-upload="props.autoUpload"
:headers="headerInfo"
style="width: 100%"
:on-success="(response:any, file:any) => successUpload(response, file)"
:on-error="errorUpload"
@ -22,7 +23,6 @@
<!-- 上传的按钮 或者 icon 通过具名插槽的方式 -->
<div>
<slot name="default"></slot>
</div>
<slot name="textContent"></slot>
</el-upload>
@ -34,8 +34,14 @@
import { ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
// import { Base64 } from 'js-base64'
const tmpUploadUrl = import.meta.env.VITE_API_URL +"/zlpt-file/file/cos/upload"
console.log("tmpUploadUrl",tmpUploadUrl)
const tmpUploadUrl = import.meta.env.VITE_API_URL + '/zlpt-file/file/cos/upload'
import { useStore } from 'store/main'
const store = useStore()
const headerInfo = reactive({
Authorization: store.token
})
console.log('tmpUploadUrl', tmpUploadUrl)
const actionUrl = ref(tmpUploadUrl)
const props = defineProps({
// actionUrl: {
@ -132,9 +138,13 @@
type: Boolean,
default: false
},
scuccesCallback:{
type:Function,
default:()=>{}
scuccesCallback: {
type: Function,
default: () => {}
},
successResultCallBack: {
type: Function,
default: () => {}
}
})
// office
@ -150,12 +160,12 @@
//
const successUpload = (response: any, file: any) => {
console.log('successUpload', response, file)
if (response.rt.status === 200) {
if (response.code === 200) {
props.fileList.push({
url: response.data,
name: file.name
})
props.successResultCallBack(response)
} else {
ElMessage({
type: 'warning',
@ -169,8 +179,8 @@
message: '上传失败请重试!'
})
}
const beforeUpload = (file:any) => {
console.log("file",file)
const beforeUpload = (file: any) => {
console.log('file', file)
const { name = '', size } = file
if (size > props.maxSize * 1024 * 1000) {
ElMessage({
@ -179,11 +189,11 @@
})
return false
}
let names = name.split(".")
let currentName = names[names.length-1]
console.log("acceptTypeListacceptTypeList",props.acceptTypeList,currentName)
console.log("name.split().pop()",)
if (!props.acceptTypeList.includes( '.'+currentName) ) {
let names = name.split('.')
let currentName = names[names.length - 1]
console.log('acceptTypeListacceptTypeList', props.acceptTypeList, currentName)
console.log('name.split().pop()')
if (!props.acceptTypeList.includes('.' + currentName)) {
ElMessage({
type: 'warning',
message: `文件格式仅支持${props.acceptTypeList.join(',')}`
@ -191,7 +201,7 @@
return false
}
}
const handleExceed = (files:any, fileList:any) => {
const handleExceed = (files: any, fileList: any) => {
ElMessage({
type: 'warning',
message: `当前限制选择 10 个文件,本次选择了 ${files.length} 个文件,共选择了 ${
@ -200,12 +210,12 @@
})
}
//
const removeFile = (file:any, data:any) => {
const removeFile = (file: any, data: any) => {
console.log(file, data)
// props.fileList = data
}
//
const preview = (data:any) => {
const preview = (data: any) => {
const { url, response = {} } = data || {}
let name = data.name
const downLoadTypeList = props.downLoadTypeList
@ -217,13 +227,12 @@
if (downLoadTypeList.includes(suffixFileType)) {
// 'doc', 'docx', 'xlsx', 'xls', 'txt'
name = name.replace(/&/g, '') // &
const target = encodeURIComponent(
// Base64.encode(
// `${location.origin}/api/abk/web/v1/resource/file?fileId=${
// url || response.data
// }&fullfilename=${name}&sid=4AC67ADB4E264AB0A8B899A671072875`
// )
)
const target = encodeURIComponent()
// Base64.encode(
// `${location.origin}/api/abk/web/v1/resource/file?fileId=${
// url || response.data
// }&fullfilename=${name}&sid=4AC67ADB4E264AB0A8B899A671072875`
// )
if (props.officePreviewFlag && officeType.includes(suffixFileType)) {
// office
const preveiewURL = officeOnlineAddress + target
@ -238,7 +247,7 @@
}
}
const onProgressFn = (event:any, file:any, fileList:any) => {
const onProgressFn = (event: any, file: any, fileList: any) => {
processFlag.value = true
loadProcess.value = event.percent.toFixed(2)
if (loadProcess.value >= 100) {
@ -248,7 +257,7 @@
})
}
}
const changeFileFn =(ev:any)=>{
const changeFileFn = (ev: any) => {
props.scuccesCallback(ev)
}
</script>

View File

@ -7,7 +7,7 @@ export const getList = (params = {}) => {
//获取装备详情
export const getDetail = (id = '') => {
return get(`/zlpt-equip/dev/${id}`)
return get(`/zlpt-equip/dev/getInfo/${id}`)
}
//获取 推荐装备列表
@ -25,9 +25,9 @@ export const apiSubmitLease = (params = {}) => {
}
//获取装备分类列表 (级联)
export const apiGetEquipTypeList = (params = {}) => {
return post('/zlpt-equip/type/list',params)
return post('/zlpt-equip/type/list', params)
}
//获取省市区列表 (级联)
export const apiGetAddressList = (params = {}) => {
return post('/zlpt-system/baseAddress/selectAddress',params)
return post('/zlpt-system/baseAddress/selectAddress', params)
}

View File

@ -0,0 +1,15 @@
// 个人中心 基础信息模块
import { get, post } from '../../index'
// 获取验证码
export const getCodeInfoApi = (phone) => {
return post(`/zlpt-system/sms/send?phone=${phone}&type=2`, {})
}
// 立即注册按钮
export const registerNowApi = (data) => {
return post('/zlpt-auth/register', data)
}

View File

@ -37,7 +37,7 @@ service.interceptors.response.use(
} else if (data.code == '403') {
ElMessage.error('请重新登录')
router.push('/login')
} else if( data.code == '401' ){
} else if (data.code == '401') {
ElMessage.error(data.msg)
router.push('/login')
}

View File

@ -1,8 +1,42 @@
<script setup lang="ts">
import $bus from '@/utils/bus'
import { useStore } from 'store/main'
import { ElMessage, ElMessageBox } from 'element-plus'
const store = useStore()
const route = useRoute()
const router = useRouter()
// 退
const isShowLogout = computed(() => {
return store.token
})
const placeholderText = ref('请输入关键字')
// 退
const handlerLogout = () => {
ElMessageBox.confirm('是否确定退出登录', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
router.push('/login')
store.cleanUpToken('')
ElMessage({
type: 'success',
message: '已退出登录'
})
})
.catch(() => {
ElMessage({
type: 'info',
message: '已取消'
})
})
}
//
const keywordIptValue = ref('')
@ -10,15 +44,16 @@
const inputRef: any = ref(null)
//
const searchHistoryList = ref([
{ name: '220E履带挖掘机' },
{ name: '3443挖掘机' },
{ name: '塔式起重机' },
{ name: '轮式牵引铲运机' }
])
const searchHistoryList = computed(() => {
return store.searchHistoryList.slice(0, 4)
})
//
const searchKeywordBtn = () => {
/* 去除空格 */
keywordIptValue.value = keywordIptValue.value.replace(/\s*/g, '')
store.addHistoryRecord(keywordIptValue.value)
if (route.path == '/equipList') {
$bus.emit('search', keywordIptValue.value)
} else {
@ -32,7 +67,8 @@
//
const handleHistory = (hisValue: any) => {
keywordIptValue.value = hisValue
inputRef.value.focus()
searchKeywordBtn()
// inputRef.value.focus()
}
//
$bus.on('callBackText', (val) => {
@ -48,9 +84,14 @@
<div class="header-user-info">
<div class="header-box wapper">
<div class="header-item">
<a class="a-border-none" @click="$router.push('/login')">登录</a>
<span style="margin: 0 3px">/</span>
<a>注册</a>
<span v-if="!isShowLogout">
<a class="a-border-none" @click="$router.push('/login')">登录</a>
<span style="margin: 0 3px">/</span>
<a>注册</a>
</span>
<span v-else>
<a @click="handlerLogout">退出登录</a>
</span>
</div>
<div class="header-item">
<a @click="$router.push({ name: 'myuser' })">个人中心</a>
@ -85,19 +126,18 @@
@click="$router.push('/home')" />
<input
placeholder="输入设备关键词"
:placeholder="placeholderText"
type="text"
v-model="keywordIptValue"
v-model.trim="keywordIptValue"
@keydown.enter="searchKeywordBtn"
ref="inputRef" />
ref="inputRef"
@focus="placeholderText = ''"
@blur="placeholderText = '请输入关键字'" />
<button class="search-btn" @click="searchKeywordBtn">搜索</button>
<div class="ipt-down">
<a
v-for="item in searchHistoryList"
:key="item.name"
@click="handleHistory(item.name)">
{{ item.name }}
<a v-for="item in searchHistoryList" :key="item" @click="handleHistory(item)">
{{ item }}
</a>
</div>
</div>
@ -204,7 +244,7 @@
border-radius: 45px;
margin-left: 70px;
line-height: 45px;
color: transparent;
color: #333;
text-shadow: 0 0 0 #333;
padding-left: 30px;
}

View File

@ -17,6 +17,7 @@ const routes: Array<RouteRecordRaw> = [
AuthFlag: false
}
},
/* 登录页 */
{
path: '/login',
name: 'login',
@ -27,6 +28,17 @@ const routes: Array<RouteRecordRaw> = [
AuthFlag: false
}
},
/* 注册页 */
{
path: '/register',
name: 'register',
component: () => import('views/register.vue'),
meta: {
title: '注册页',
keepAlive: true,
AuthFlag: false
}
},
{
path: '/test', // 主路由地址
name: 'testIndex',
@ -57,7 +69,7 @@ const routes: Array<RouteRecordRaw> = [
{
path: '/',
component: () => import('views/AppMain.vue'),
redirect: '/login',
redirect: '/home',
meta: {
title: '首页',
keepAlive: true,
@ -264,12 +276,13 @@ const router = createRouter({
// 使页面跳转后滚动条恢复至顶部
router.beforeEach((to, from, next) => {
const store = useStore()
next()
if (store.token || to.path == '/login') {
next()
} else {
next('/login')
}
// if (store.token || to.path == '/login' || to.path == '/' || to.path == '/home' || to.path == '/register' || to.path == '/equipList' || to.path == '/equipDetail') {
// } else {
// next('/login')
// }
// chrome
document.body.scrollTop = 0;
// firefox 兼容火狐

View File

@ -2,8 +2,11 @@ export const useStore = defineStore('main', {
state: () => {
return {
loadingFlag: false, //loading控制,
token: ""
token: "",
// eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjQ1MzIwY2M3LTE0MDYtNDAwNy1iMTdhLTM3OTQ3ZmUxMjc2ZiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.XqWKkIRKVADdhGzNiOPNktmLJsv7bJCRZLDaSMJQALjhSyUBDTRGPE2KBWmb4qx3zV4fbsNGBHUODem1A7MEZA
// 搜索历史
searchHistoryList: []
}
},
getters: {},
@ -15,9 +18,19 @@ export const useStore = defineStore('main', {
this.loadingFlag = false
},
setToken(val: any) {
console.log("setToken",val)
console.log("setToken", val)
this.token = val
},
// 退出登录 清除token
cleanUpToken(val: any) {
this.token = ''
},
// 添加
addHistoryRecord(val: any) {
this.searchHistoryList.unshift(val)
}
},
persist: {
enabled: true, // 开启数据缓存
@ -27,7 +40,7 @@ export const useStore = defineStore('main', {
key: 'main',
storage: sessionStorage, //缓存模式 可选 localStorage sessionStorage
// state 中的字段名,按组打包储存
paths: ['token'] //需要缓存的字段 与 state中相关联
paths: ['token', 'searchHistoryList'] //需要缓存的字段 与 state中相关联
}
]
}

View File

@ -67,7 +67,7 @@
<el-select
placeholder="请选择省份"
clearable
v-model="applyParams.registerAddress"
v-model="applyParams.registerS"
@change="changeProvince">
<el-option
v-for="item in selProvinceList"
@ -104,7 +104,7 @@
</el-col>
<el-col :span="6">
<el-input
v-model="applyParams.registerRealityAddress"
v-model="applyParams.registerAddress"
placeholder="请输入实际办公地址"
clearable></el-input>
</el-col>
@ -117,7 +117,7 @@
<el-select
placeholder="请选择省份"
clearable
v-model="applyParams.operateAddress"
v-model="applyParams.registerSs"
@change="opeChangeProvince">
<el-option
v-for="item in selProvinceList"
@ -154,7 +154,7 @@
</el-col>
<el-col :span="6">
<el-input
v-model="applyParams.operateRealityAddress"
v-model="applyParams.operateAddress"
clearable
placeholder="请输入实际办公地址"></el-input>
</el-col>
@ -187,13 +187,15 @@
</el-col>
<el-col :span="8">
<el-form-item class="" label="营业执照">
<el-form-item class="" label="企业logo">
<uploadComponent
:maxLimit="3"
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
width="120px"
height="120px">
height="120px"
:autoUpload="true"
:successResultCallBack="successResultCallBackFn">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
@ -206,15 +208,16 @@
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-row :gutter="24">
<el-col :span="8">
<el-form-item class="" label="身份证国徽面">
<uploadComponent
:maxLimit="3"
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
width="120px"
height="120px">
height="120px"
:successResultCallBack="successResultCallBackFnfrCardf">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
@ -226,14 +229,15 @@
</el-form-item>
</el-col>
<el-col :span="10">
<el-col :span="8">
<el-form-item class="" label="身份证肖像面">
<uploadComponent
:maxLimit="3"
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
width="120px"
height="120px">
height="120px"
:successResultCallBack="successResultCallBackFnfrCardz">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
@ -244,6 +248,26 @@
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="" label="营业执照">
<uploadComponent
:maxLimit="3"
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
width="120px"
height="120px"
:successResultCallBack="successResultCallBackFnfryz">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
</uploadComponent>
<div class="previewExample">
<!-- <span>预览</span> -->
<span @click="previewBusinessLicense">查看示例</span>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
@ -327,7 +351,12 @@
</el-col>
<el-col :span="5">
<el-form-item label="被授权人邮箱">
<el-input placeholder="请输入被授权人邮箱" clearable>></el-input>
<el-input
v-model.trim="applyParams.authEmail"
placeholder="请输入被授权人邮箱"
clearable>
>
</el-input>
</el-form-item>
</el-col>
</el-row>
@ -339,7 +368,8 @@
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
width="120px"
height="120px">
height="120px"
:successResultCallBack="successResultCallBackFnCardbsz">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
@ -358,7 +388,8 @@
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
width="120px"
height="120px">
height="120px"
:successResultCallBack="successResultCallBackFnCardbsf">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
@ -379,7 +410,8 @@
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
width="120px"
height="120px">
height="120px"
:successResultCallBack="successResultCallBackFnsqs">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
@ -529,15 +561,24 @@
companyLtd: '', //
creditCode: '', //
registerAddress: '', //
/* 注册地址ID */
registerId: '',
/* 经营地址ID */
operateId: '',
registerS: '',
registerAddressProvince: '', // ()
registerAddressArea: '', // ()
registerRealityAddress: '', // ()
operateAddress: '', //
registerSs: '',
operateAddressProvince: '', // ()
operateAddressArea: '', // ()
operateRealityAddress: '', // ()
certificatetype: '', //
idNumber: '', //
/* 企业logo */
logoUrl: '',
businessLicense: '', //
legalFaceUrl: '', //
legalNationUrl: '', //
@ -548,6 +589,9 @@
authPerson: '', //
authIdNumber: '', //
authPhone: '', //
/* 被授权人邮箱 */
authEmail: '',
authDocument:
'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png', //
idNationUrl:
@ -565,14 +609,14 @@
// console.log(val, '**')
store.getmarketList(val.split(',')[0])
AssemblyRegisterAddress[0] = val.split(',')[1]
AssemblyRegisterAddress[0] = val.split(',')[0]
}
const opeChangeProvince = (val: any) => {
// console.log(val, '**')
store.getmarketList(val.split(',')[0])
AssemblyOperateAddress[0] = val.split(',')[1]
AssemblyOperateAddress[0] = val.split(',')[0]
}
//
@ -583,12 +627,12 @@
//
const changeMarket = (val: any) => {
store.getareaList(val.split(',')[0])
AssemblyRegisterAddress[1] = val.split(',')[1]
AssemblyRegisterAddress[1] = val.split(',')[0]
}
const opeChangeMarket = (val: any) => {
store.getareaList(val.split(',')[0])
AssemblyOperateAddress[1] = val.split(',')[1]
AssemblyOperateAddress[1] = val.split(',')[0]
}
//
@ -598,10 +642,10 @@
//
const changeArea = (val: any) => {
AssemblyRegisterAddress[2] = val.split(',')[1]
AssemblyRegisterAddress[2] = val.split(',')[0]
}
const opeChangeArea = (val: any) => {
AssemblyOperateAddress[2] = val.split(',')[1]
AssemblyOperateAddress[2] = val.split(',')[0]
}
//
@ -627,8 +671,8 @@
AssemblyRegisterAddress[3] = applyParams.registerRealityAddress
AssemblyOperateAddress[3] = applyParams.operateRealityAddress
applyParams.registerAddress = AssemblyRegisterAddress.join(',')
applyParams.operateAddress = AssemblyOperateAddress.join(',')
applyParams.registerId = AssemblyRegisterAddress.join(',')
applyParams.operateId = AssemblyOperateAddress.join(',')
const res: any = await applyAttestationApi({
bmCompanyInfo: applyParams,
@ -746,6 +790,35 @@
])
const test = () => {}
/* log地址 */
const successResultCallBackFn = (val: any) => {
applyParams.logoUrl = val.msg
}
/* 法人身份证正面图片地址 */
const successResultCallBackFnfrCardz = (val: any) => {
applyParams.legalNationUrl = val.msg
}
/* 法人身份证反面图片地址 */
const successResultCallBackFnfrCardf = (val: any) => {
applyParams.legalFaceUrl = val.msg
}
/* 法人营业执照图片地址 */
const successResultCallBackFnfryz = (val: any) => {
applyParams.businessLicense = val.msg
}
/* 被授权人身份证正面 */
const successResultCallBackFnCardbsz = (val: any) => {
applyParams.idFaceUrl = val.msg
}
/* 被授权人身份证反面 */
const successResultCallBackFnCardbsf = (val: any) => {
applyParams.idNationUrl = val.msg
}
/* 法人授权书 */
const successResultCallBackFnsqs = (val: any) => {
applyParams.authDocument = val.msg
}
</script>
<style lang="scss" scoped>

View File

@ -12,7 +12,7 @@
const handlerLogin = async () => {
const res: any = await loginApi(loginForm.value)
console.log( '登录成功**',res)
console.log('登录成功**', res)
if (res.code === 200) {
ElMessage({
showClose: true,
@ -53,8 +53,8 @@
<el-button type="primary" @click="handlerLogin"> </el-button>
</el-form-item>
<el-form-item class="forget-password">
<a href="">忘记密码</a>
<a href="">立即注册</a>
<a href=""></a>
<a style="cursor: pointer" @click="$router.push('/register')">立即注册</a>
</el-form-item>
</el-form>
</div>

304
src/views/register.vue Normal file
View File

@ -0,0 +1,304 @@
<script setup lang="ts">
import { getCodeInfoApi, registerNowApi } from 'http/api/register/index'
import { ElMessage } from 'element-plus'
const router = useRouter()
// const userStore = useStore()
/* 注册参数 */
const registerForm = ref({
/* 用户手机号 */
phonenumber: '',
/* 登录账号 */
username: '',
/* 登录密码 */
password: '',
/* 验证码 */
code: '',
/* 确认密码 */
checkPass: ''
})
/* 获取验证码 */
const getCodeInfo = () => {
registerFormRef.value.validateField('phonenumber', async (valid: any) => {
if (valid) {
const res: any = await getCodeInfoApi(registerForm.value.phonenumber)
if (res.code === 200) {
ElMessage({
showClose: true,
message: res.msg,
type: 'success'
})
reduceSeconds()
} else {
ElMessage({
showClose: true,
message: res.msg,
type: 'info'
})
}
}
})
}
/* 立即注册按钮 */
const handlerRegisterNow = () => {
registerFormRef.value.validate(async (valid: any) => {
if (valid) {
const res: any = await registerNowApi(registerForm.value)
if (res.code === 200) {
ElMessage({
showClose: true,
message: '注册成功',
type: 'success'
})
router.push('/login')
} else {
ElMessage({
showClose: true,
message: res.msg,
type: 'success'
})
}
}
})
}
/* 手机号码校验规则 */
const validatePhone = (rule: any, value: any, callback: any) => {
// let phone = value.replace(/\s/g, '')
let regexpPhone = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/
if (value === '') {
callback(new Error('手机号码不能为空'))
} else if (!regexpPhone.test(value)) {
callback(new Error('手机号码输入不合法'))
} else {
callback()
}
}
/* 确认密码校验 */
const validatePass2 = (rule: any, value: any, callback: any) => {
if (value === '') {
callback(new Error('请确认密码'))
} else if (value !== registerForm.value.password) {
callback(new Error('两次密码不一致,请确定'))
} else {
callback()
}
}
/* 校验规则 */
const registerRules = ref({
phonenumber: [{ required: true, validator: validatePhone, trigger: 'blur' }],
username: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
})
const registerFormRef: any = ref(null)
/* 获取验证码按钮禁用 */
const getCodeBtnDisabled = ref(false)
/* 定义倒计时的定时器 */
const secondsTimer: any = ref(null)
/* 剩余秒数 */
const residuSeconds: any = ref(60)
/* 开启一个定时器 */
const reduceSeconds = () => {
getCodeBtnDisabled.value = true
secondsTimer.value = setInterval(() => {
if (residuSeconds.value === 0) {
clearInterval(secondsTimer.value)
secondsTimer.value = null
residuSeconds.value = 60
getCodeBtnDisabled.value = false
return
} else {
residuSeconds.value--
}
}, 1000)
}
onBeforeUnmount(() => {
if (secondsTimer.value) {
secondsTimer.value = null
}
})
</script>
<template>
<!-- 注册页面 -->
<div class="register-container">
<div class="register-form">
<h3>机具租赁共享平台</h3>
<div class="register-container-box">
<div class="register-type">用户注册</div>
<el-form
label-position="top"
:model="registerForm"
:rules="registerRules"
ref="registerFormRef">
<el-form-item label="用户手机号" prop="phonenumber">
<el-input
v-model.trim="registerForm.phonenumber"
placeholder="输入手机号"
clearable />
</el-form-item>
<el-form-item label="登录帐号" prop="username">
<el-input
v-model.trim="registerForm.username"
placeholder="登录帐号"
clearable
type="text" />
</el-form-item>
<el-form-item label="登录密码" prop="password">
<el-input
v-model.trim="registerForm.password"
placeholder="登录密码"
clearable
type="password"
show-password />
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input
v-model.trim="registerForm.checkPass"
placeholder="确认密码"
clearable
type="password"
show-password />
</el-form-item>
<el-form-item label="验证码" class="get-code" prop="code">
<el-row justify="space-between">
<el-col :span="8">
<div>
<el-input
v-model.trime="registerForm.code"
placeholder="验证码"
clearable
type="text" />
</div>
</el-col>
<el-col :span="8">
<div
style="text-align: right; width: 100%"
:style="{ color: getCodeBtnDisabled ? '#747272' : '' }">
<span v-if="getCodeBtnDisabled">
{{ residuSeconds }} 秒后重新发送
</span>
</div>
</el-col>
<el-col :span="8">
<div style="text-align: right">
<el-button
type="primary"
@click="getCodeInfo"
:disabled="getCodeBtnDisabled">
获取验证码
</el-button>
</div>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handlerRegisterNow" style="width: 100%">
</el-button>
</el-form-item>
<el-form-item class="forget-password">
<span>已有账号</span>
<a @click="$router.push('/login')">去登录 &gt;</a>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<style lang="scss">
.register-container {
height: 100vh;
background-color: #125ab6;
display: flex;
align-items: center;
justify-content: center;
.register-form {
width: 500px;
// height: 360px;
display: flex;
flex-direction: column;
h3 {
color: #fff;
font-size: 18px;
font-weight: bold;
text-align: center;
margin-bottom: 30px;
}
.register-container-box {
flex: 1;
display: flex;
flex-direction: column;
background-color: #c7dff4;
border-radius: 5px;
.register-type {
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
// display: flex;
color: #333;
div {
flex: 1;
height: 40px;
text-align: center;
line-height: 40px;
&:hover {
cursor: pointer;
}
}
.active {
color: #3498db;
border-bottom: 1px solid #3498db;
}
}
.el-form {
padding: 0 50px;
.el-input {
height: 37px;
}
.el-button {
// width: 100%;
height: 37px;
}
.forget-password {
margin-bottom: 0;
}
.forget-password .el-form-item__content {
display: flex;
align-items: center;
a {
color: #3498db;
cursor: pointer;
}
}
// .get-code {
// display: flex;
// }
}
}
}
}
</style>

View File

@ -99,22 +99,22 @@
{
v_name: '已提交',
imgSrc: '../../../assets/img/home/2023_12_01_beijing2/fankuixinxi.png',
orderConunt: 1
orderConunt: 0
},
{
v_name: '进行中',
imgSrc: '../../../assets/img/home/2023_12_01_beijing2/dingdanxinxi.png',
orderConunt: 1
orderConunt: 0
},
{
v_name: '已完成',
imgSrc: '../../../assets/img/home/2023_12_01_beijing2/lishijishi.png',
orderConunt: 1
orderConunt: 0
},
{
v_name: '全部订单',
imgSrc: '../../../assets/img/home/2023_12_01_beijing2/fuwuxiangmu.png',
orderConunt: 1
orderConunt: 0
}
])
@ -123,22 +123,22 @@
{
v_name: '已上架',
imgSrc: '../../../assets/img/home/2023_12_01_beijing2/fankuixinxi.png',
orderConunt: 1
orderConunt: 0
},
{
v_name: '已下架',
imgSrc: '../../../assets/img/home/2023_12_01_beijing2/dingdanxinxi.png',
orderConunt: 1
orderConunt: 0
},
{
v_name: '已提交',
imgSrc: '../../../assets/img/home/2023_12_01_beijing2/lishijishi.png',
orderConunt: 1
orderConunt: 0
},
{
v_name: '全部装备',
imgSrc: '../../../assets/img/home/2023_12_01_beijing2/fuwuxiangmu.png',
orderConunt: 1
orderConunt: 0
}
])
//

View File

@ -62,17 +62,17 @@
// console.log(val, '**')
store.getmarketList(val.split(',')[0])
AssemblyRegisterAddress[0] = val.split(',')[1]
// AssemblyRegisterAddress[0] = val.split(',')[1]
}
//
const changeMarket = (val: any) => {
store.getareaList(val.split(',')[0])
AssemblyRegisterAddress[1] = val.split(',')[1]
// AssemblyRegisterAddress[1] = val.split(',')[1]
}
//
const opeChangeArea = (val: any) => {
AssemblyRegisterAddress[2] = val.split(',')[1]
// AssemblyRegisterAddress[2] = val.split(',')[1]
}
//
@ -98,6 +98,13 @@
leaseScope: '',
/* 设备所在地 */
location: '',
/* 省 */
provinceId: '',
/* 市 */
cityId: '',
/* 区 */
areaId: '',
/* 设备所在地 省 */
addressEconomize: '',
/* 设备所在地 市 */
@ -134,7 +141,7 @@
jsDayPrice: '',
/* 详细说明 */
description: '',
/* 设备图片 */
/* 设备图片 */
picUrl: '',
/* 检测信息 ,保险信息*/
fileList: [
@ -248,21 +255,22 @@
/* 检测信息 */
{
id: '28',
url: 'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png'
url: ''
},
/* 保险信息 */
{
id: '29',
utr: 'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png'
utr: ''
},
/* 设备图片 */
{
id: '20',
utr: 'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/DemoData/10/655f1724956e0b38bf6adb6087123f7e_b.jpg'
utr: ''
}
],
/* 设备状态 */
maStatus: 15
/* 设备型号 */
}
//
dialogFormVisibleSettlein.value = true
@ -330,6 +338,28 @@
}
]
})
/* 检测信息图片地址 */
const successResultCallBackFnjc = (val: any) => {
equipmentDeploymentParams.fileList.push({
id: '28',
url: val.msg
})
}
/* 保险信息图片地址 */
const successResultCallBackFnbs = (val: any) => {
equipmentDeploymentParams.fileList.push({
id: '29',
url: val.msg
})
}
/* 设备图片信息地址 */
const successResultCallBackFnDevicePic = (val: any) => {
equipmentDeploymentParams.fileList.push({
id: '20',
url: val.msg
})
}
</script>
<template>
@ -369,15 +399,18 @@
:model="equipmentDeploymentParams"
:rules="rules">
<el-form-item label="租赁范围" prop="easeScope">
<el-input
autocomplete="off"
style="width: 360px"
<el-select
v-model="equipmentDeploymentParams.leaseScope"
clearable />
placeholder="选择租赁范围"
style="width: 220px; margin: 0 5px"
clearable>
<el-option label="全平台" value="329"></el-option>
<el-option label="专区" value="3330"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备所在地">
<el-select
v-model="equipmentDeploymentParams.addressEconomize"
v-model="equipmentDeploymentParams.provinceId"
placeholder="选择省"
style="width: 220px; margin: 0 5px"
@change="changeProvince"
@ -386,10 +419,10 @@
v-for="item in selProvinceList"
:key="item.id"
:label="item.name"
:value="item.code + ',' + item.name"></el-option>
:value="item.code"></el-option>
</el-select>
<el-select
v-model="equipmentDeploymentParams.addressProvince"
v-model="equipmentDeploymentParams.cityId"
placeholder="选择市"
style="width: 220px; margin: 0 5px"
@change="changeMarket"
@ -398,10 +431,10 @@
v-for="item in selMarketList"
:key="item.id"
:label="item.name"
:value="item.code + ',' + item.name"></el-option>
:value="item.code"></el-option>
</el-select>
<el-select
v-model="equipmentDeploymentParams.location"
v-model="equipmentDeploymentParams.areaId"
placeholder="选择区"
style="width: 220px; margin: 0 5px"
clearable
@ -506,10 +539,12 @@
<el-form-item label="检测信息">
<uploadComponent
:maxLimit="3"
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
listType="text"
:acceptTypeList="['.pdf']"
width="120px"
height="120px">
height="120px"
:autoUpload="true"
:successResultCallBack="successResultCallBackFnjc">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
@ -518,10 +553,12 @@
<el-form-item label="保险信息">
<uploadComponent
:maxLimit="3"
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
listType="text"
:acceptTypeList="['.pdf']"
width="120px"
height="120px">
height="120px"
:autoUpload="true"
:successResultCallBack="successResultCallBackFnbs">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
@ -567,11 +604,12 @@
</el-form-item>
<el-form-item label="设备图片">
<uploadComponent
:maxLimit="3"
:maxLimit="8"
listType="picture-card"
:acceptTypeList="['.jpg', '.jpeg', '.png']"
width="120px"
height="120px">
height="120px"
:successResultCallBack="successResultCallBackFnDevicePic">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>