198 lines
3.9 KiB
Vue
198 lines
3.9 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="wrapper">
|
||
<view class="input-content">
|
||
<view class="cu-form-group" style="border: 2upx solid whitesmoke;margin-bottom: 20px;border-radius: 30px">
|
||
<text class="title">原昵称</text>
|
||
<input type="text" :value="oldnickName" placeholder-class="input-empty" disabled="true" />
|
||
</view>
|
||
<view class="cu-form-group" style="border: 2upx solid whitesmoke;margin-bottom: 20px;border-radius: 30px">
|
||
<text class="title">新昵称</text>
|
||
<input type="nickname" v-model="nickName" placeholder="请设置新昵称" placeholder-class="input-empty" maxlength="20"
|
||
minlength="6" />
|
||
</view>
|
||
</view>
|
||
<button class="confirm-btn" @click="updatNickName">修改昵称</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
nickName: '',
|
||
oldnickName: ''
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.oldnickName = this.$queue.getData('userName');
|
||
},
|
||
methods: {
|
||
updatNickName() {
|
||
var patrn = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、 ]/im;
|
||
if (patrn.test(this.nickName)) { // 如果包含特殊字符返回false
|
||
this.$queue.showToast('包含特殊字符,请重新输入');
|
||
return;
|
||
}
|
||
uni.showLoading({
|
||
title: '提交中...'
|
||
});
|
||
let userId = this.$queue.getData('userId');
|
||
let data = {
|
||
userName:this.nickName
|
||
}
|
||
this.$Request.postT('/app/user/updateUserName',data).then(res => {
|
||
uni.hideLoading();
|
||
if (res.code === 0) {
|
||
this.$queue.showToast("更新成功");
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 500);
|
||
}
|
||
});
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang='scss'>
|
||
page {
|
||
background: #fff;
|
||
}
|
||
|
||
.send-msg {
|
||
border-radius: 30px;
|
||
color: white;
|
||
height: 30px;
|
||
font-size: 14px;
|
||
line-height: 30px;
|
||
background: #e10a07;
|
||
}
|
||
|
||
.container {
|
||
padding-top: 32upx;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
}
|
||
|
||
.wrapper {
|
||
position: relative;
|
||
z-index: 90;
|
||
background: #fff;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.right-top-sign {
|
||
position: absolute;
|
||
top: 40px;
|
||
right: -15px;
|
||
z-index: 95;
|
||
|
||
&:before,
|
||
&:after {
|
||
display: block;
|
||
content: "";
|
||
width: 20px;
|
||
height: 40px;
|
||
background: -moz-linear-gradient(left, #fa4dbe 0, #fbaa58 100%);
|
||
background: -webkit-gradient(linear,
|
||
left top,
|
||
left right,
|
||
color-stop(0, #fa4dbe),
|
||
color-stop(100%, #fbaa58));
|
||
background: -webkit-linear-gradient(left, #fa4dbe 0, #fbaa58 100%);
|
||
background: -o-linear-gradient(left, #fa4dbe 0, #fbaa58 100%);
|
||
background: -ms-linear-gradient(left, #fa4dbe 0, #fbaa58 100%);
|
||
background: linear-gradient(to left, #fa4dbe 0, #fbaa58 100%);
|
||
}
|
||
|
||
&:before {
|
||
transform: rotate(50deg);
|
||
border-radius: 0 50px 0 0;
|
||
}
|
||
|
||
&:after {
|
||
position: absolute;
|
||
right: -198px;
|
||
top: 0;
|
||
transform: rotate(-50deg);
|
||
border-radius: 50px 0 0 0;
|
||
/* background: pink; */
|
||
}
|
||
}
|
||
|
||
.left-bottom-sign {
|
||
position: absolute;
|
||
left: -270px;
|
||
bottom: -320px;
|
||
/*border: 100upx solid #d0d1fd;*/
|
||
border-radius: 50%;
|
||
padding: 90px;
|
||
}
|
||
|
||
|
||
.welcome {
|
||
position: relative;
|
||
left: 30px;
|
||
top: -55px;
|
||
font-size: 28px;
|
||
color: #555;
|
||
text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
|
||
}
|
||
|
||
.input-content {
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.confirm-btn {
|
||
width: 300px;
|
||
height: 42px;
|
||
line-height: 42px;
|
||
border-radius: 30px;
|
||
margin-top: 40px;
|
||
background: #fcd202;
|
||
color: #fff;
|
||
|
||
|
||
&:after {
|
||
border-radius: 60px;
|
||
}
|
||
}
|
||
|
||
.confirm-btn1 {
|
||
width: 300px;
|
||
height: 42px;
|
||
line-height: 42px;
|
||
border-radius: 30px;
|
||
margin-top: 40px;
|
||
background: whitesmoke;
|
||
color: grey;
|
||
|
||
|
||
&:after {
|
||
border-radius: 60px;
|
||
}
|
||
}
|
||
|
||
.forget-section {
|
||
text-align: center;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.register-section {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 30px;
|
||
width: 100%;
|
||
text-align: center;
|
||
|
||
text {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
</style>
|