首次提交

pages/my/updateNickName.vue

@@ -0,0 +1,197 @@
+<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>