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">{{phone!=''?phone:'未绑定手机号'}}</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="gotopwd">
				<view class="content">
					<text class="text-grey">支付密码</text>
				</view>
				<view class="action">
				</view>
			</view>
			<view class="cu-item arrow" @click="switchNum">
				<view class="content">
					<text class="text-grey">退出登录</text>
				</view>
				<view class="action">
				</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>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
	export default {
		onLoad(options) {
			this.newName = options.name
			this.phone = options.phone
		},
		mounted() {

		},
		data() {
			return {
				isShowConfirm: false,
				newName: "",
				phone: "",
			}
		},
		methods: {
			...mapMutations(['logout']),
			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"
				})
			},
			switchNum() {
				uni.showModal({
					title: "提示",
					content: "是否要注销当前账号",
					success: (res) => {
						if (res.confirm) {
							let that = this
							uni.showLoading({
								title: '清除中...'
							});
							setTimeout(function() {
								that.logout()
								uni.clearStorage();
								uni.hideLoading();
								uni.reLaunch({
									url:"index"
								})
							}, 2000);
						} else if (res.cancel) {
						}
					}
				})
			}
		}
	};
</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>