MeetMateApp/pages/my/step.vue

<template>
	<view class="page">
		<view class="list_info">
			<block v-if="step == 1">
				<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="item">
					<input type="text" class="input" placeholder="请输入昵称" maxlength="10"/>
				</view>
				<view class="name">你的微信号是：</view>
				<view class="item">
					<input type="text" class="input" placeholder="请输入微信号" maxlength="32"/>
				</view>
				<view class="name">选一张你的真实照片作为封面：</view>
				<view class="bcenter">
					<view class="avator">
						<image src="../../static/me/avator.png" mode="widthFix" />
						<image class="photo" src="../../static/me/photo.png" mode="widthFix" />
					</view>
				</view>
			</block>
			<block v-if="step == 2">
				<view class="name">给自己写一个个性签名：</view>
				<view class="item">
					<input type="text" class="input" placeholder="请输入个性签名" maxlength="64"/>
				</view>
				<view class="name">职业：</view>
				<view class="item">
					<input type="text" class="input" placeholder="请输入职业" maxlength="16"/>
				</view>
				<view class="name">年龄：</view>
				<view class="itemSingle">
					<slider class="slider" value="30" @change="sliderChange" activeColor="#FF2A95"
						background-color="#282828" block-color="#FF2A95" block-size="12" min="18" max="100"
						show-value />
				</view>
				<view class="name">身高（CM）：</view>
				<view class="itemSingle">
					<slider class="slider" value="175" @change="sliderChange" activeColor="#FF2A95"
						background-color="#282828" block-color="#FF2A95" block-size="12" min="150" max="220"
						show-value />
				</view>
				<view class="name">体重（KG）：</view>
				<view class="itemSingle">
					<slider class="slider" value="65" @change="sliderChange" activeColor="#FF2A95"
						background-color="#282828" block-color="#FF2A95" block-size="12" min="30" max="100"
						show-value />
				</view>
			</block>
			<block v-if="step == 3">
				<view class="name">学历：</view>
				<view class="itemXL">
					<picker-view indicator-class="selectLine" :value="XLvalue" @change="bindChange" class="picker-view"
						mask-style="background:none;">
						<picker-view-column>
							<view class="itemXll" v-for="(item,index) in xueli_list" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="name">您的星座是：</view>
				<view class="itemXL">
					<picker-view indicator-class="selectLine" :value="XZvalue" @change="bindChange" class="picker-view"
						mask-style="background:none;">
						<picker-view-column>
							<view class="itemXll" v-for="(item,index) in xz_list" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</block>
			<block v-if="step == 4">
				<view class="name">你的兴趣爱好是？</view>
				<view class="desc">提示：最多选择10个兴趣爱好标签</view>
				<view class="item_tag">
					<view @click="chkTag(item)" class="tag" :class="selTags(item)?'active':''"
						v-for="(item,index) in list_tag">
						{{item}}
					</view>
				</view>
			</block>

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

		<view class="btn_submit" v-if="step == 1" @click="step ++;">下一步</view>
		<view class="btn_list" v-if="step == 2 || step == 3">
			<view class="btn_submit1" @click="step --;">上一步</view>
			<view class="btn_submit2" @click="step ++;">下一步</view>
		</view>
		<view class="btn_list" v-if="step == 4">
			<view class="btn_submit1" @click="step --;">上一步</view>
			<view class="btn_submit2">完成</view>
		</view>


		<!-- 提示框 -->
		<DialogBox ref="DialogBox"></DialogBox>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				title: '',
				step: 1,
				sel: 1,
				sex: 1,
				xueli_list: [
					'小学', '初中', '高中', '大学', '硕士', '博士'
				],
				XLvalue: [1],
				xz_list: [
					'水瓶座', '双鱼座', '白羊座', '金牛座', '双子座', '巨蟹座',
					'狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座'
				],
				XZvalue: [1],
				list_tag: [
					'篮球', '排球', '足球', '羽毛球', '健身达人', '美食达人'
				],
				sel_tags: []
			}
		},
		onLoad() {
			// setTimeout(function() {
			// 	uni.setNavigationBarColor({
			// 		frontColor: '#ffffff',
			// 		backgroundColor: '#00000000',
			// 		animation: {
			// 			duration: 400,
			// 			timingFunc: 'easeIn'
			// 		}
			// 	})
			// }, 200);
		},
		onShow() {
			this.loadData();
		},
		methods: {
			onBack() {},
			chkSel() {
				if (this.sel == 1) {
					this.sel = 0;
				} else {
					this.sel = 1;
				}
			},
			chkSex(sex) {
				this.sex = sex;
			},
			bindChange: function(e) {
				const val = e.detail.value
				// this.XLvalue = this.xueli_list[val[0]]
			},
			selTags(itm) {
				let that = this;
				let isIn = false;
				for (let entry of this.sel_tags) {
					console.log(entry); // 1, "string", false
					if (entry == itm) {
						isIn = true;
						break;
					}
				}
				return isIn;
			},
			chkTag(itm) {
				if (this.selTags(itm)) {
					let tmpTags = [];
					for (let entry of this.sel_tags) {
						console.log(entry); // 1, "string", false
						if (entry != itm) {
							tmpTags.push(entry);
						}
					}
					this.sel_tags = tmpTags;
				} else {
					this.sel_tags.push(itm);
				}
			},
			loadData() {
				console.log("this.globalData", getApp().globalData);
				let obj2 = {
					is_first: 0
				}
				const postData = Object.assign({}, getApp().globalData.postHeader, obj2);

				console.log(postData);

				uni.request({
					url: this.$apiHost + '/Gushi/getmyinfo', //仅为示例，并非真实接口地址。
					data: postData,
					method: 'POST',
					header: {
						'content-type': 'application/json', //自定义请求头信息
						'Access-Control-Allow-Origin': '*'
					},
					success: (res) => {
						console.log('data:', res.data);
						this.myinfo = res.data;
					}
				});



			},
			EditNickname() {
				let that = this;
				this.$refs['DialogBox'].confirm({
					title: '更改昵称',
					placeholder: '请输入修改的昵称',
					value: that.myinfo.nickname,
					DialogType: 'input',
					animation: 0
				}).then((res) => {
					if (res.value.length < 1) {
						uni.showToast({
							title: "请输入有效的昵称",
							icon: 'none'
						});
						return;
					}
					that.myinfo.nickname = res.value;
					let obj2 = {
						nickname: res.value
					}
					const postData = Object.assign({}, getApp().globalData.postHeader, obj2);
					uni.request({
						url: that.$apiHost + '/Gushi/editinfo', //检测是否已绑定
						data: postData,
						method: 'POST',
						header: {
							'content-type': 'application/json', //自定义请求头信息
							'Access-Control-Allow-Origin': '*'
						},
						success: (res) => {
							uni.showToast({
								title: res.data.str,
								icon: 'none'
							});
						}
					});
				})
			},
		}
	}
</script>

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