mh/pages/me/set.vue

<template>
	<view class="set">
		<view class="set-main">
			<view class="set-item flex">
				<view class="set-font">头像</view>
				<view class="set-image flexs" @click="uploadHead">
					<image :src="info.avatar" mode="aspectFill" class="head"></image>
					<image src="/static/image/publice/jinruer@2x.png" mode=""></image>
				</view>
			</view>
			<view class="set-item flex">
				<view class="set-font">昵称</view>
				<view class="set-input"><input type="text" @input="changeName" :value="info.nickname" /></view>
			</view>
			<view class="set-item flex">
				<view class="set-font">邀请码</view>
				<view class="set-input"><input type="text" disabled="" :value="sharecode" /></view>
			</view>
		</view>
		<button class="btn" hover-class="hover-view" @click="quitLogin">退出登录</button>
		<!-- #ifdef APP-PLUS -->
		<button class="btn1" hover-class="hover-view" @click="quitLogin1">注销账户</button>
		<!-- #endif -->
		<uni-popup ref="popup" type="center">
			<view class="psw-wrapper">
				<view class="psw-title">请输入自己的账户</view>
				<input type="text" v-model="password" class="psw-ipt" />
				<view class="psw-btn">
					<text @click.stop="qx">取消</text>
					<text class="psw-qd" @click.stop="pswQd">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import $DB from '../../http/debounce.js';
import uniPopup from '../../components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			sharecode: '',
			password: '',
			info: {} //
		};
	},
	methods: {
		//退出登录
		quitLogin() {
			uni.showModal({
				content: '是否退出登录？',
				success: res => {
					if (res.confirm) {
						uni.removeStorageSync('token');
						// #ifdef MP-WEIXIN
						uni.redirectTo({ url: '/pages/login/wxLogin' });
						// #endif
						// #ifndef MP-WEIXIN
						uni.redirectTo({ url: '/pages/login/login' });
						// #endif
					}
				}
			});
		},
		quitLogin1() {
			this.$refs.popup.open();
		},
		qx() {
			this.password = '';
			this.$refs.popup.close();
		},
		pswQd() {
			// if (this.password != this.info.nickname) {
			// 	this.$refs.popup.close();
			// 	this.password = '';
			// 	uni.showToast({
			// 		title: '请输入自己的账户',
			// 		duration: 1500,
			// 		mask: false,
			// 		icon: 'none'
			// 	});
			// 	return;
			// }
			this.$refs.popup.close();
			this.password = '';
			uni.showToast({
				title: '申请注销成功，请耐心等待审核',
				duration: 1500,
				mask: false,
				icon: 'none'
			});
		},
		//修改名字
		changeName: $DB(function(e) {
			if (!e.detail.value) return;
			this.$api.changeInfo({ nickname: e.detail.value }).then(res => {
				if (res.code === 1) {
				}
			});
		}),
		//修改头像
		uploadHead() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: res => {
					this.$api.upload_image({ path: res.tempFilePaths[0] }).then(res => {
						this.$api.changeInfo({ avatar_url: 'https://www.chaomangdao.com' + res.url }).then(res => {
							if (res.code === 1) {
								uni.showToast({ title: res.msg });
								this.getSet();
							}
						});
					});
				}
			});
		},
		//获取设置信息
		getSet() {
			this.$api.getSettingInfo().then(res => {
				if (res.code === 1) {
					this.info = res.data;
				}
			});
			this.$api
				.userinfo()
				.then(res => {
					if (res.code === 1) {
						this.sharecode = res.data.sharecode;
					}
				})
				.catch(res => {
					console.log(res);
				});
		}
	},
	onShow() {
		this.getSet();
	}
};
</script>

<style lang="scss">
.set {
	min-height: calc(100vh - 44px);
	position: relative;
}
.set-item {
	padding: 30rpx;
	background: #ffffff;
	margin-top: 2rpx;
	&:first-child {
		padding: 15rpx 30rpx;
	}
	.set-font {
		font-size: 28rpx;
	}
	.set-image {
		image {
			width: 22rpx;
			height: 22rpx;
		}
		.head {
			width: 70rpx;
			height: 70rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
			border-radius: 50%;
		}
	}
	.set-input {
		color: #999999;
		font-size: 26rpx;
		input {
			font-size: 26rpx;
			text-align: right;
		}
	}
}
.btn {
	color: #333333;
	height: 98rpx;
	bottom: 42rpx;
	left: 50%;
	width: 690rpx;
	position: absolute;
	transform: translateX(-50%);
	font-size: 30rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(102, 102, 102, 0.2);
	border-radius: 10rpx;
}
.btn1 {
	color: #333333;
	height: 98rpx;
	bottom: 142rpx;
	left: 50%;
	width: 690rpx;
	position: absolute;
	transform: translateX(-50%);
	font-size: 30rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(102, 102, 102, 0.2);
	border-radius: 10rpx;
}
.psw-wrapper {
	width: 548rpx;
	height: 344rpx;
	background-color: #ffffff;
	.psw-title {
		width: 100%;
		font-size: 35rpx;
		padding: 43rpx 0 49rpx;
		text-align: center;
		font-weight: 800;
	}
	.psw-ipt {
		display: block;
		background-color: #dce3ed;
		height: 90rpx;
		width: 464rpx;
		padding-left: 30rpx;
		margin: 0 auto;
		font-size: 80rpx;
	}
	.psw-btn text {
		display: inline-block;
		text-align: center;
		width: 50%;
		padding-top: 29rpx;
		font-size: 35rpx;
	}
	.psw-qd {
		color: #32c6ff;
	}
}
</style>