mabao/pages/index/editinfo.vue

<template>
	<view class="main">
		<view class="cu-list menu">
			<view class="cu-item arrow" @click="isShowConfirm=true">
				<view class="content">
					<text class="text-grey">昵称</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{newName}}</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="gotophone">
				<view class="content">
					<text class="text-grey">已绑定电话</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm"></text>
				</view>
			</view>
			<view class="cu-item arrow" @click="">
				<view class="content">
					<text class="text-grey">切换账号</text>
				</view>
				<view class="action">
				</view>
			</view>
			<view class="cu-item arrow" @click="gotopwd">
				<view class="content">
					<text class="text-grey">支付密码</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">未设置</text>
				</view>
			</view>
		</view>
		<block v-if="isShowConfirm">
			<view class='toast-box'>
				<view class='toastbg' @click.stop="isShowConfirm=false"></view>
				<view class='showToast'>
					<view class='toast-title'>
						<text>修改昵称</text>
					</view>
					<view class='toast-main'>
						<view class='toast-input'>
							<input type='text' placeholder='输入昵称' v-model="newName" data-name='stuEidtName'></input>
						</view>
					</view>
					<view class='toast-button'>
						<view class='button2'>
							<button type="default" @click.stop="editName">保存</button>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.newName = options.name
		},
		mounted() {

		},
		data() {
			return {
				isShowConfirm: false,
				newName: ""
			}
		},
		methods: {
			editName: async function() {
				let res = await this.$request.post("/api/v1/user/updateUser", {
					nickname: this.newName
				})
				if (res.status == 0) {
					this.isShowConfirm = false
					uni.showToast({
						title:"修改成功",
						icon:"none"
					})
				}
			},
			gotophone(){
				uni.navigateTo({
					url:"editphone"
				})
			},
			gotopwd(){
				uni.navigateTo({
					url:"paypassword"
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.main {}

	.button2 button {
		width: 100%;
		font-size: 26rpx;
		height: 70rpx;
		color: #606266;
		background-color: #FFFFFF;
		border-radius: 0;
		border-top: 2rpx solid rgba(0, 0, 0, .2);
	}

	.button2 button::after {
		border: none;
	}

	.toast-box {
		width: 100%;
		height: 100%;
		opacity: 1;
		position: fixed;
		top: 0px;
		left: 0px;
	}


	.toastbg {
		opacity: 0.2;
		background-color: black;
		position: absolute;
		width: 100%;
		min-height: 100vh;
	}

	.showToast {
		position: absolute;
		opacity: 1;
		width: 70%;
		margin-left: 15%;
		margin-top: 40%;
	}

	.toast-title {
		padding-left: 5%;
		background-color: #2196f3;
		color: white;
		padding-top: 2vh;
		padding-bottom: 2vh;
		border-top-right-radius: 16rpx;
		border-top-left-radius: 16rpx;
	}

	.toast-main {
		padding-top: 2vh;
		padding-bottom: 2vh;
		background-color: white;
		text-align: center;
	}

	.toast-input {
		margin-left: 5%;
		margin-right: 5%;
		border: 1px solid #ddd;
		padding-left: 2vh;
		padding-right: 2vh;
		padding-top: 1vh;
		padding-bottom: 1vh;
	}
</style>