MeetMateApp/pages/login/loginFirst.vue

<template>
	<view class="page">
		<view class="list_info">
			<view class="name">给自己取个名字吧：</view>
			<view class="item">
				<input type="text" class="input" v-model="nickname" maxlength="10" placeholder="请输入2~10位昵称" />
			</view>
			<view class="name">请问你的性别是：</view>
			<view class="itemSex">
				<view class="sex2" :class="sex == 1?'active':''" style="margin-right: 10rpx;" @click="chkSex(1)">
					<image class="photo" src="../../static/me/sex_1.png" mode="widthFix" />
					<text>男性</text>
				</view>
				<view class="sex2" :class="sex == 2?'active':''" style="margin-left: 10rpx;" @click="chkSex(2)">
					<image class="photo" src="../../static/me/sex_2.png" mode="widthFix" />
					<text>女性</text>
				</view>
			</view>
			<view class="name">选一张图片作为您的头像：</view>
			<view class="bcenter">
				<block v-if="sex != 2">
					<view class="avator" :class="avator_str == 'a1.jpg'?'active':''" @click="selAvator('a1.jpg')">
						<image src="https://e.yujianmate.com/images/avator/a1.jpg" mode="widthFix" />
					</view>
					<view class="avator" :class="avator_str == 'a2.jpg'?'active':''" @click="selAvator('a2.jpg')">
						<image src="https://e.yujianmate.com/images/avator/a2.jpg" mode="widthFix" />
					</view>
					<view class="avator" :class="avator_str == 'a3.jpg'?'active':''" @click="selAvator('a3.jpg')">
						<image src="https://e.yujianmate.com/images/avator/a3.jpg" mode="widthFix" />
					</view>
				</block>
				<block v-if="sex != 1">
					<view class="avator" :class="avator_str == 'b1.jpg'?'active':''" @click="selAvator('b1.jpg')">
						<image src="https://e.yujianmate.com/images/avator/b1.jpg" mode="widthFix" />
					</view>
					<view class="avator" :class="avator_str == 'b2.jpg'?'active':''" @click="selAvator('b2.jpg')">
						<image src="https://e.yujianmate.com/images/avator/b2.jpg" mode="widthFix" />
					</view>
					<view class="avator" :class="avator_str == 'b3.jpg'?'active':''" @click="selAvator('b3.jpg')">
						<image src="https://e.yujianmate.com/images/avator/b3.jpg" mode="widthFix" />
					</view>
				</block>
			</view>


			<view class="blankHeight"></view>
		</view>

		<view class="btn_submit" @click="onFinish">下一步</view>


		<ToastW3 ref="ToastW3"></ToastW3>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				title: '',
				step: 1,
				sel: 1,
				sex: 1,
				avator_str: '',
				sel_tags: [],
				nickname: '',
				myinfo: {},
			}
		},
		onLoad() {
			this.loadInfo();
		},
		onShow() {},
		methods: {
			onBack() {},
			chkSel() {
				if (this.sel == 1) {
					this.sel = 0;
				} else {
					this.sel = 1;
				}
			},
			chkSex(sex) {
				this.sex = sex;
			},
			selAvator(act) {
				this.avator_str = act;
			},
			bindChange: function(e) {
				const val = e.detail.value
				// this.XLvalue = this.xueli_list[val[0]]
			},
			loadInfo() {
				console.log({
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey
				});
				uni.request({
					url: this.$apiHost + '/Web/getinfo',
					data: {
						uuid: getApp().globalData.uuid,
						skey: getApp().globalData.skey
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("----:", res.data);
						this.myinfo = res.data;
						this.nickname = res.data.nickname;
						this.sex = res.data.sex_id;
					},
					complete: (com) => {
						// uni.hideLoading();
					},
					fail: (e) => {
						console.log("----e:", e);
					}
				});


			},
			onFinish() {
				let that = this;
				if (this.nickname.length < 2) {
					that.$refs['ToastW3'].showToast({
						title: "请给自己取个昵称",
						animation: 0
					});
					return;
				}
				uni.showLoading({
					mask: true,
				});
				uni.request({
					url: this.$apiHost + '/Web/editInfo', //仅为示例，并非真实接口地址。
					data: {
						uuid: getApp().globalData.uuid,
						nickname: this.nickname,
						sex: this.sex,
						avator_str: this.avator_str
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("----", res.data);
						if (res.data.success == "yes") {
							uni.navigateTo({
								url: '/pages/my/step'
							})
							// if (this.myinfo.nickname == "") {
							// 	uni.switchTab({
							// 		url: "/pages/index/index",
							// 	});
							// } else {
							// 	uni.switchTab({
							// 		url: "/pages/my/my",
							// 	});
							// }
						} else if (res.data.success == "no") {
							uni.showToast({
								title: res.data.str,
								icon: "none",
							});
						} else {
							uni.showToast({
								title: "操作失败，请联系客服",
								icon: "none",
							});
						}
					},
					complete: (com) => {
						uni.hideLoading();
					},
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'loginFirst.scss';
</style>