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> |