282 lines
6.8 KiB
Vue
282 lines
6.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="my-header">
|
|||
|
|
<view class="my-icons" @click="goBack"> <uni-icons type="left" size="16"></uni-icons> </view>
|
|||
|
|
<view class="my-text">{{title}}</view>
|
|||
|
|
<view class="my-icons"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 修改用户昵称 -->
|
|||
|
|
<view v-if="editType == 0" class="pBox">
|
|||
|
|
<u-form :model="form" ref="uForm">
|
|||
|
|
<u-form-item label="昵称" prop="name">
|
|||
|
|
<u-input v-model="form.name" clearable :border="false" placeholder="请填写昵称"/>
|
|||
|
|
</u-form-item>
|
|||
|
|
</u-form>
|
|||
|
|
<view class="but-sub" @click="submit">提交保存</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 修改用户手机号 -->
|
|||
|
|
<view v-if="editType == 1" class="pBox">
|
|||
|
|
<u-form :model="form" ref="uForm">
|
|||
|
|
<u-form-item label="手机号" prop="mobile" label-width="70px">
|
|||
|
|
<u-input v-model="mobile" clearable :border="false" placeholder="请填写手机号"/>
|
|||
|
|
</u-form-item>
|
|||
|
|
<u-form-item label="验证码" prop="code" label-width="70px">
|
|||
|
|
<u-input v-model="code" clearable :border="false" placeholder="请填写验证码"/>
|
|||
|
|
<u-button slot="right" :disabled="isCode" size="mini" type="success" @click="getCode">{{codeText}}</u-button>
|
|||
|
|
</u-form-item>
|
|||
|
|
</u-form>
|
|||
|
|
<view class="but-sub" @click="submit">保存变更</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 修改用户车牌号 -->
|
|||
|
|
<view v-if="editType == 2" class="pBox">
|
|||
|
|
<view></view>
|
|||
|
|
<u-form :model="form" ref="uForm">
|
|||
|
|
<u-form-item label="车牌号" prop="mobile" label-width="70px">
|
|||
|
|
<u-input v-model="form.carNo" @focus="show = true" clearable :border="false" placeholder="请输入车牌号"/>
|
|||
|
|
</u-form-item>
|
|||
|
|
</u-form>
|
|||
|
|
<view class="but-sub" @click="submit">保存</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <u-keyboard ref="uKeyboard" :tips="value" mode="number" @cancel="show = false" @confirm="submitAmount" -->
|
|||
|
|
<!-- @change="valChange" @backspace="backspace" v-model="pic" :show="show" mode="car"></u-keyboard> -->
|
|||
|
|
<u-keyboard ref="uKeyboard" mode="car" v-model="value" :show="show" @cancel="show = false"
|
|||
|
|
@confirm="submitAmount" @change="valChange" @backspace="backspace" :tips="value"></u-keyboard>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import request from "../../utils/request";
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
pic:0,
|
|||
|
|
value:"",
|
|||
|
|
show:false,
|
|||
|
|
// 标题
|
|||
|
|
title: '修改昵称',
|
|||
|
|
// 修改类型
|
|||
|
|
editType:2,
|
|||
|
|
// 提交表单
|
|||
|
|
form:{},
|
|||
|
|
// 手机号
|
|||
|
|
mobile: "",
|
|||
|
|
// 验证码
|
|||
|
|
code:"",
|
|||
|
|
codeText: '获取验证码',
|
|||
|
|
// 是否正在获取验证码
|
|||
|
|
isCode:false,
|
|||
|
|
timestamp:60,
|
|||
|
|
rules: {
|
|||
|
|
name: [
|
|||
|
|
{
|
|||
|
|
required: true,message: '请填写昵称',
|
|||
|
|
// 可以单个或者同时写两个触发验证方式
|
|||
|
|
trigger: 'blur,change'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
mobile: [
|
|||
|
|
{ required: true, message: '请输入手机号', trigger: ['change','blur'], },
|
|||
|
|
{
|
|||
|
|
// 自定义验证函数，见上说明
|
|||
|
|
validator: (rule, value, callback) => {
|
|||
|
|
// 上面有说，返回true表示校验通过，返回false表示不通过
|
|||
|
|
// this.$u.test.mobile()就是返回true或者false的
|
|||
|
|
return this.$u.test.mobile(value);
|
|||
|
|
},
|
|||
|
|
message: '手机号码不正确',
|
|||
|
|
// 触发器可以同时用blur和change
|
|||
|
|
trigger: ['change','blur'],
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(e) {
|
|||
|
|
this.editType = e.editType
|
|||
|
|
if (this.editType == 0){
|
|||
|
|
this.title = "修改昵称"
|
|||
|
|
}else if(this.editType == 1){
|
|||
|
|
this.title = "修改手机号"
|
|||
|
|
}else if(this.editType == 2){
|
|||
|
|
this.title = "我的车"
|
|||
|
|
}else{
|
|||
|
|
this.title = "支付密码"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
|||
|
|
onReady() {
|
|||
|
|
// this.$refs.uForm.setRules(this.rules);
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.getUser()
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 数字键盘确定按钮
|
|||
|
|
submitAmount(){
|
|||
|
|
if (this.value!=""){
|
|||
|
|
this.show = false
|
|||
|
|
}else{
|
|||
|
|
uni.showToast({
|
|||
|
|
title:"请输入车牌号",
|
|||
|
|
icon:"error"
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
valChange(val) {
|
|||
|
|
// 按键震动
|
|||
|
|
uni.vibrateShort({
|
|||
|
|
success: function () {}
|
|||
|
|
});
|
|||
|
|
// 将每次按键的值拼接到value变量中，注意+=写法
|
|||
|
|
this.value += val;
|
|||
|
|
this.form.carNo += val;
|
|||
|
|
},
|
|||
|
|
// 退格键被点击
|
|||
|
|
backspace() {
|
|||
|
|
uni.vibrateShort({
|
|||
|
|
success: function () {}
|
|||
|
|
});
|
|||
|
|
// 删除value的最后一个字符
|
|||
|
|
if (this.value.length) {
|
|||
|
|
this.value = this.value.substr(0, this.value.length - 1);
|
|||
|
|
this.form.carNo = this.value
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 倒计时60s
|
|||
|
|
countdown(){
|
|||
|
|
let _this = this
|
|||
|
|
setInterval(() => {
|
|||
|
|
// countdown减1
|
|||
|
|
_this.timestamp--;
|
|||
|
|
_this.codeText = _this.timestamp+"秒重新获取"
|
|||
|
|
// 如果倒计时为0，清除定时器
|
|||
|
|
if(_this.timestamp === 0) {
|
|||
|
|
_this.isCode = false
|
|||
|
|
_this.timestamp = 60
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
},
|
|||
|
|
// 获取验证码
|
|||
|
|
getCode() {
|
|||
|
|
this.isCode = true
|
|||
|
|
// 调用后端接口
|
|||
|
|
this.countdown()
|
|||
|
|
},
|
|||
|
|
// 查询当前登录用户信息
|
|||
|
|
getUser(){
|
|||
|
|
request({
|
|||
|
|
url: 'business/userManager/user/getUser',
|
|||
|
|
method: 'get',
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.data != null && res.data != "" && res.data != undefined) {
|
|||
|
|
this.form = res.data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 提交表单
|
|||
|
|
submit(){
|
|||
|
|
// this.$refs.uForm.validate(valid => {
|
|||
|
|
// if (valid) {
|
|||
|
|
// console.log('验证通过');
|
|||
|
|
request({
|
|||
|
|
url: 'business/userManager/user/edit',
|
|||
|
|
method: 'put',
|
|||
|
|
data:this.form,
|
|||
|
|
}).then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:"/pagesMy/setup/index"
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// } else {
|
|||
|
|
// console.log('验证失败');
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
},
|
|||
|
|
goBack() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.pBox{
|
|||
|
|
width: 90%;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
.but-sub{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 45px;
|
|||
|
|
line-height: 45px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
background-color: #2b7aff;
|
|||
|
|
color: white;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.content {
|
|||
|
|
background: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding-top: 88px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.my-header {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 88px;
|
|||
|
|
background: #ffffff;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
color: #000;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 0px 15px;
|
|||
|
|
padding-top: 40px;
|
|||
|
|
|
|||
|
|
.my-icons {
|
|||
|
|
width: 20px;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-hang {
|
|||
|
|
background-color: white;
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 15px 10px;
|
|||
|
|
border-bottom: 1px solid #f4f5f6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.touxiang {
|
|||
|
|
width: 50px;
|
|||
|
|
height: 50px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
// background-color: #f4f5f6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dis {
|
|||
|
|
color: #a69999;
|
|||
|
|
}
|
|||
|
|
</style>
|