MoeNovaClient/pages/my/step.vue

<template>
  <view class="step-container">
    <view class="reserveASeat"></view>
    <!-- 步骤指示器 -->
    <view class="step-header">
      <text class="step-number">STEP {{ currentStep }}</text>
      <view class="progress-container">
        <view class="progress-bar">
          <view
            class="progress-inner"
            :style="{ width: currentStep === 1 ? '50%' : '100%' }"
          ></view>
					</view>
					</view>
				</view>

    <!-- 步骤1：个人信息 -->
    <view v-if="currentStep === 1" class="step-content">
      <view class="step-title">这里是 <text>·灵魂汇聚·</text> 的起点</view>
      <!-- 头像上传 -->
      <view class="avatar-section">
        <view class="avatar-wrapper" @click="chooseAvatar">
          <CircleAvatar
            v-if="userInfo.avatar"
            class="avator"
            :src="userInfo.avatar"
          ></CircleAvatar>
          <view class="avatar-placeholder">
            <image
              src="/static/me/photo.png"
              mode="aspectFit"
              class="camera-icon"
            ></image>
				</view>
				</view>
					</view>

      <!-- 昵称输入 -->
      <view class="input-section">
        <view class="input-label">我的名字</view>
        <view class="input-wrapper">
          <input
            type="text"
            v-model="userInfo.nickname"
            placeholder="取一个独一无二的名字吧~"
            placeholder-class="input-placeholder"
            maxlength="10"
          />
          <view class="input-actions">
            <image
              src="/static/me/step/dlzc_icon_suiji.png"
              mode="aspectFit"
              class="action-icon random"
              @click="generateRandomNickname"
            ></image>
				</view>
				</view>
				</view>

      <!-- 性别选择 -->
      <view class="gender-section">
        <view class="input-label">性别</view>
        <view class="gender-options">
          <view
            class="gender-item"
            :class="{ active: userInfo.gender === '1' }"
            @click="userInfo.gender = '1'"
          >
            <image
              src="/static/me/step/dlzc_icon_nan.png"
              mode="aspectFit"
              class="gender-icon"
            ></image>
            <text>男生</text>
				</view>
          <view
            class="gender-item"
            :class="{ active: userInfo.gender === '2' }"
            @click="userInfo.gender = '2'"
          >
            <image
              src="/static/me/step/dlzc_icon_nv.png"
              mode="aspectFit"
              class="gender-icon"
            ></image>
            <text>女生</text>
				</view>
          <view
            class="gender-item"
            :class="{ active: userInfo.gender === '3' }"
            @click="userInfo.gender = '3'"
          >
            <image
              src="/static/me/step/dlzc_icon_qita.png"
              mode="aspectFit"
              class="gender-icon"
            ></image>
            <text>其它</text>
				</view>
				</view>
				</view>

      <!-- 生日选择 -->
      <view class="birthday-section">
        <view class="input-label">我的生日</view>
        <view class="birthday-picker">
          <picker
            style="height: auto"
            mode="date"
            :value="userInfo.birthday"
            :end="endDate"
            @change="bindDateChange"
          >
            <view class="uni-input">
              <text :class="{ placeholder: !userInfo.birthday }">{{
                userInfo.birthday || "选择生日"
              }}</text>
              <text v-if="userInfo.birthday" class="constellation">{{
                userInfo.xinzuo
              }}</text>
				</view>
          </picker>
          <image
            src="/static/me/step/dlzc_icon_arrow.png"
            mode="aspectFit"
            class="arrow-icon"
          ></image>
					</view>
				</view>
    </view>

    <!-- 步骤2：兴趣选择 -->
    <view v-if="currentStep === 2" class="step-content">
      <view class="step-title">亦是 <text>·奇思妙想·</text> 的原野</view>
      <view class="interest-section">
        <text class="interest-tip">请选择</text>
        <view
          class="interest-circles"
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleTouchEnd"
        >
          <view class="interest-circles-container" :style="getContainerStyle()">
            <view
              v-for="(interest, index) in interests"
              :key="index"
              class="interest-circle-box"
              :class="{ 
                'active': selectedInterests.includes(interest.id),
                'disabled': !selectedInterests.includes(interest.id) && isMaxSelected
              }"
              @click="toggleInterest(interest.id)"
              :style="getCircleStyle(index)"
            >
              <view class="interest-circle">
                <view>{{ interest.name }}</view>
              </view>
            </view>
          </view>
		</view>

        <!-- 添加兴趣爱好 -->
        <view class="add-interests">
          <view class="add-title">
            添加兴趣爱好
            <text class="add-hint">(最多选择5个)</text>
		</view>
          <view class="interest-tags">
            <view
              v-for="(tag, index) in selectedTags"
              :key="index"
              class="interest-tag"
            >
              {{ tag.name }}
              <text class="remove-tag" @click.stop="removeTag(tag)">×</text>
		</view>
            <view
              class="add-tag"
              @click="showPopup"
              v-if="!isMaxSelected"
            >
              <image
                src="/static/me/step/dlzc_icon_tianjia.png"
                mode="aspectFit"
                class="add-icon"
              ></image>
              创建新偏好
					</view>
				</view>
			</view>
      </view>
		</view>

    <!-- 底部按钮 -->
    <view class="bottom-button" @click="handleNext">
      {{ currentStep === 1 ? "下一步" : "完成" }}
    </view>

    <!-- 添加标签弹窗 -->
    <uni-popup ref="addTagPopup" type="center" :mask-click="false">
      <view class="add-tag-popup">
        <view class="popup-title">创建新偏好</view>
        <scroll-view 
          scroll-y 
          class="popup-content"
          :scroll-top="scrollTop"
          @scroll="onScroll"
        >
          <view class="popup-input">
            <input 
              type="text" 
              v-model="newTag" 
              :disabled="isMaxSelected"
              :placeholder="isMaxSelected ? '已达到标签上限' : '输入您的兴趣爱好'" 
              placeholder-style="color: #999999;"
              maxlength="5"
              @confirm="addNewTag"
              class="tag-input"
              :class="{ 'disabled': isMaxSelected }"
            />
          </view>
          <view class="selected-tags" v-if="selectedTags.length > 0">
            <view class="selected-tags-title">
              已选标签 ({{ selectedTags.length }}/{{ maxTags }})
              <text v-if="isMaxSelected" class="max-hint">已达到上限</text>
            </view>
            <view class="selected-tags-list">
				<view 
                v-for="(tag, index) in selectedTags" 
					:key="index"
                class="selected-tag"
				>
                {{ tag.name }}
                <text class="remove-tag" @click.stop="removeTag(tag)">×</text>
				</view>
			</view>
		</view>
        </scroll-view>
        <view class="popup-buttons">
          <button class="btn-cancel" @click="closePopup">再考虑一下</button>
          <button 
            class="btn-confirm" 
            :class="{ 'disabled': isMaxSelected || !newTag.trim() }"
            @click="addNewTag"
          >确认添加</button>
		</view>
      </view>
    </uni-popup>
	</view>
</template>

<script>
	import {
		requestAndroidPermission,
  gotoAppPermissionSetting,
} from "../index/permission.js";
	export default {
		components: {},
		data() {
			return {
      currentStep: 1,
      userInfo: {
        avatar: "",
        nickname: "",
        gender: "",
        birthday: "",
        xinzuo: "",
      },
      interests: [
        { id: 1, name: "老二次元了" },
        { id: 2, name: "coser" },
        { id: 3, name: "沉迷音乐-Hop" },
        { id: 4, name: "网游小达人" },
        { id: 5, name: "AJ控" },
        { id: 6, name: "白日梦想家" },
        { id: 7, name: "撸铁狂魔" },
        { id: 8, name: "古风汉服" },
        { id: 9, name: "爱画画" },
        { id: 10, name: "数码极客" },
        { id: 11, name: "盲盒玩家" },
        { id: 12, name: "三坑玩家" },
        { id: 13, name: "动漫达人" },
        { id: 14, name: "独立设计师" },
        { id: 15, name: "爱卡通" },
        { id: 16, name: "兜风去" },
        { id: 17, name: "爱夜跑" },
        { id: 18, name: "街头滑板" },
        { id: 19, name: "球类运动" },
        { id: 20, name: "lo娘" },
        { id: 21, name: "rapper" },
        { id: 22, name: "时尚达人" },
        { id: 23, name: "机甲狂潮" },
        { id: 24, name: "养宠物" },
        { id: 25, name: "风轻云淡" },
        { id: 26, name: "养多肉" },
        { id: 27, name: "热爱自然" },
        { id: 28, name: "赛博朋克" },
        { id: 29, name: "骨子里高冷" },
        { id: 30, name: "爱唠嗑" },
        { id: 31, name: "资深中二" },
        { id: 32, name: "天然呆" },
        { id: 33, name: "思想家" },
        { id: 34, name: "极度抽象" },
        { id: 35, name: "学院派" },
        { id: 36, name: "平平无奇" },
        { id: 37, name: "热情奔放" },
        { id: 38, name: "博古通今" },
        { id: 39, name: "labubu粉" },
        { id: 40, name: "玛特收藏家" },
      ],
      selectedInterests: [],
      showAddTag: false,
      newTag: "",
      endDate: "",
      circleConfig: {
        size: 132,
        gap: 30,
        rowGap: 20,
        offsetLefts: 30,
        offsetTops: 20,
        rows: 4,
        baseTop: 30,
        baseLeft: 30,
      },
      containerWidth: 0,
      customTags: [],
      maxTags: 5,
      scrollTop: 0,
      xinzuo: [
        "水瓶座", "双鱼座", "白羊座", "金牛座", "双子座", 
        "巨蟹座", "狮子座", "处女座", "天秤座", "天蝎座", 
        "射手座", "摩羯座"
      ],
    };
  },
  computed: {
    totalWidth() {
      const { size, gap, rows } = this.circleConfig;
      const columns = Math.ceil(this.interests.length / rows);
      return columns * (size + gap) + gap + "rpx";
    },
    selectedTags() {
      const selectedPresets = this.interests
        .filter((interest) => this.selectedInterests.includes(interest.id))
        .map((interest) => ({
          id: interest.id,
          name: interest.name,
          isPreset: true,
        }));
      return [...selectedPresets, ...this.customTags];
    },
    isMaxSelected() {
      return this.selectedTags.length >= this.maxTags;
    },
		},
		onLoad() {
    this.currentStep = 1;
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, "0");
    const day = String(now.getDate()).padStart(2, "0");
    this.endDate = `${year}-${month}-${day}`;
    
    // 页面加载时获取用户信息
    this.getInfoData();
		},
		onShow() {},
		methods: {
			onBack() {},
			chkSel() {
				if (this.sel == 1) {
					this.sel = 0;
				} else {
					this.sel = 1;
				}
			},
			chkSex(sex) {
				this.sex = sex;
			},
			delTag(tg) {
				let list_tag2 = [];
				for (let i = 0; i < this.sel_tags.length; i++) {
        if (this.sel_tags[i] != tg && this.sel_tags[i] != "") {
						list_tag2.push(this.sel_tags[i]);
					}
				}
				this.sel_tags = list_tag2;
			},
			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 && entry != "") {
							tmpTags.push(entry);
						}
					}
					this.sel_tags = tmpTags;
				} else {
        if (this.sel_tags.length >= 5) {
          this.$refs["ToastW3"].showToast({
            title: "最多选择5个标签",
            animation: 0,
						});
						return;
					}
					this.sel_tags.push(itm);
				}
			},
			sliderChange1(e) {
				this.age = e.detail.value;
			},
			sliderChange2(e) {
				this.height = e.detail.value;
			},
			sliderChange3(e) {
				this.weight = e.detail.value;
			},
			SetXueli() {
				let that = this;
				uni.showActionSheet({
        itemColor: "#000000",
					itemList: this.xueli,
        success: function (res) {
						that.xueli_sel = that.xueli[res.tapIndex];
						// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
        fail: function (res) {
						console.log(res.errMsg);
        },
				});
			},
			SetXinzuo() {
				let that = this;
				uni.showActionSheet({
        itemColor: "#000000",
					itemList: this.xinzuo,
        success: function (res) {
						that.xinzuo_sel = that.xinzuo[res.tapIndex];
						// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
        fail: function (res) {
						console.log(res.errMsg);
        },
				});
			},
			getInfoData() {
        console.log(this.$apiHost + "/Member/getinfoData");
				uni.request({
        url: this.$apiHost + "/Member/getinfoData",
					data: {
          uuid: getApp().globalData.uuid,
					},
					header: {
          "content-type": "application/json",
					},
					success: (res) => {
          console.log("res", res.data);
						if (res.data) {
							// 根据返回数据设置用户信息
							this.userInfo = {
								...this.userInfo,
								nickname: res.data.nickname || "",
								gender: res.data.sex ? String(res.data.sex) : "",
								birthday: res.data.birthday || "",
								xinzuo: res.data.xinzuo || ""
							};
							
							if (res.data.avator) {
								this.userInfo.avatar = res.data.avator;
							}
							
							// 如果有兴趣爱好，解析并设置
							if (res.data.aihao && res.data.aihao.length > 0) {
								// 解析爱好标签
								const aihaos = res.data.aihao.split(",");
								
								// 处理预设兴趣
								const presetTags = [];
								const customTags = [];
								
								aihaos.forEach(tag => {
									// 查找是否是预设兴趣
									const matchedInterest = this.interests.find(i => i.name === tag);
									if (matchedInterest) {
										presetTags.push(matchedInterest.id);
									} else if (tag.trim()) {
										customTags.push({
											name: tag,
											isCustom: true
										});
									}
								});
								
								this.selectedInterests = presetTags;
								this.customTags = customTags;
							}
						}
					},
					fail: (err) => {
						console.error("获取用户信息失败", err);
						uni.showToast({
							title: "获取信息失败，请重试",
							icon: "none"
						});
					}
				});
			},

			submitUserInfo() {
				// 收集所有标签
				let tagStr = this.selectedTags.map(item => item.name).join(',');
				
				// 构建提交的数据对象
				const data = {
					uuid: getApp().globalData.uuid,
					nickname: this.userInfo.nickname,
					avator: this.userInfo.avatar,
					sex: this.userInfo.gender,
					birthday: this.userInfo.birthday,
					xinzuo: this.userInfo.xinzuo,
					aihao: tagStr
				};

				uni.showLoading({
					title: "保存中...",
					mask: true
				});
				
				uni.request({
					url: this.$apiHost + "/Member/setinfoData",
					data: data,
					method: "POST",
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						sign: getApp().globalData.headerSign,
					},
					dataType: "json",
					success: (res) => {
						if (res.data.success === "yes") {
							// 保存用户信息到全局变量和本地存储
							if (this.userInfo.nickname) {
								getApp().globalData.nickname = this.userInfo.nickname;
								uni.setStorageSync("nickname", this.userInfo.nickname);
							}
							
							if (this.userInfo.avatar) {
								getApp().globalData.avator = this.userInfo.avatar;
								uni.setStorageSync("avator", this.userInfo.avatar);
							}
							
							uni.showToast({
								title: "注册成功",
								icon: "success",
							});
							
							// 延迟返回上一页面
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						} else {
							uni.showToast({
								title: res.data.str || "保存失败",
								icon: "none",
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: "网络错误",
							icon: "none",
						});
					},
					complete: () => {
						uni.hideLoading();
					},
				});
			},
			// upload() {
			// 	let that = this;
			// 	this.$refs['DialogBox'].confirm({
			// 		title: '提示',
			// 		content: '该权限用于获取设备拍摄或获取本地应用相册，进行头像的图片上传。',
			// 		DialogType: 'inquiry',
			// 		btn1: '拒绝',
			// 		btn2: '同意',
			// 		animation: 0
			// 	}).then((res) => {
			// 		that.upload2();
			// 	})
			// },
			upload() {
				this.checkRights();
				console.log("----upload");
				var _self = this;
				uni.chooseImage({
					count: 1,
        sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册、相机选择
        extension: [".png", ".jpeg", ".jpg"],
        success: function (res) {
          console.log("res:", res);
          _self.imglocal = res.tempFilePaths[0];
						const tempFilePaths = res.tempFilePaths[0];
          console.log("tempFilePaths:", tempFilePaths);
						// 图片上传
						const uploadTask = uni.uploadFile({
            url: _self.$apiHost + "/Xweb/upload_img?skey=" + _self.skey, // post请求地址
							filePath: res.tempFilePaths[0],
            name: "file", // 待确认
            success: function (uploadFileRes) {
              let resdata = JSON.parse(uploadFileRes.data);
              console.log("Success11:", uploadFileRes);
              console.log("Success21:", resdata);
              if (resdata.success == "yes") {
									_self.avator = resdata.url;
								}
							},
            fail: function (uploadFileFail) {
              console.log("Error:", uploadFileFail.data);
							},
							complete: () => {
              console.log("Complete:");
            },
						});
					},
        error: function (e) {
						console.log(e);
        },
				});
			},
			checkRights() {
				let that = this;
				that.showRights = true;
      requestAndroidPermission("android.permission.CAMERA")
        .then((result) => {
						that.showRights = false;
						// 根据返回的结果进行处理
          if (result === 1) {
          } else if (result === 0) {
            console.log("权限被拒绝");
						} else if (result === -1) {
            console.log("权限被永久拒绝");
						}
					})
        .catch((error) => {
						that.showRights = true;
          console.log("权限申请失败：", error);
					});
			},
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          this.userInfo.avatar = res.tempFilePaths[0];
        },
      });
    },
    toggleInterest(id) {
      if (this.selectedInterests.includes(id)) {
        // 取消选择
        this.selectedInterests.splice(this.selectedInterests.indexOf(id), 1);
      } else if (!this.isMaxSelected) {
        // 添加选择
        this.selectedInterests.push(id);
				} else {
        uni.showToast({
          title: '最多只能选择5个标签哦',
          icon: 'none',
          duration: 1500
        });
      }
    },
    removeTag(tag) {
      if (tag.isPreset) {
        const index = this.selectedInterests.indexOf(tag.id);
        if (index !== -1) {
          this.selectedInterests.splice(index, 1);
        }
      } else {
        const index = this.customTags.findIndex(
          (item) => item.name === tag.name
        );
        if (index !== -1) {
          this.customTags.splice(index, 1);
        }
      }

      uni.showToast({
        title: '已删除',
        icon: 'none',
        duration: 1500
      });
    },
    showPopup() {
      this.$refs.addTagPopup.open();
    },
    closePopup() {
      this.$refs.addTagPopup.close();
      this.newTag = '';
    },
    addNewTag() {
      const tagName = this.newTag.trim();
      if (!tagName) {
        uni.showToast({
          title: '请输入标签内容',
          icon: 'none'
        });
        return;
      }

      if (tagName.length > 5) {
        uni.showToast({
          title: '标签最多5个字哦',
          icon: 'none'
        });
        return;
      }
      
      if (this.isMaxSelected) {
        uni.showToast({
          title: '最多只能添加5个标签哦',
          icon: 'none'
        });
        return;
      }

      const isPresetDuplicate = this.interests.some(
        (interest) => interest.name === tagName
      );
      
      const isCustomDuplicate = this.customTags.some(
        (tag) => tag.name === tagName
      );

      if (isPresetDuplicate || isCustomDuplicate) {
        uni.showToast({
          title: '这个标签已经添加过啦',
          icon: 'none'
        });
        return;
      }

      this.customTags.push({
        name: tagName,
        isCustom: true,
      });
      
      uni.showToast({
        title: '添加成功',
        icon: 'success',
        duration: 1500
      });
      
      this.newTag = '';
      this.closePopup();
    },
    generateRandomNickname() {
      const characters = "0123456789";
      let result = "织梦者_";
      for (let i = 0; i < 8; i++) {
        result += characters.charAt(
          Math.floor(Math.random() * characters.length)
        );
      }
      this.userInfo.nickname = result;
    },
    bindDateChange(e) {
      const selectedDate = new Date(e.detail.value);
      const now = new Date();

      if (selectedDate > now) {
        uni.showToast({
          title: "不能选择未来日期",
          icon: "none",
        });
        return;
      }

      this.userInfo.birthday = e.detail.value;
      this.setXinzuoByDate(e.detail.value);
    },
    bindXinzuoChange(e) {
      const index = e.detail.value;
      this.xinzuoIndex = index;
      this.userInfo.xinzuo = this.xinzuo[index];
    },
    setXinzuoByDate(birthday) {
      if (!birthday) return;
      const date = new Date(birthday);
      const month = date.getMonth() + 1;
      const day = date.getDate();

      let xinzuoIndex = 0;
      if ((month == 1 && day >= 20) || (month == 2 && day <= 18)) {
        xinzuoIndex = 0; // 水瓶座
      } else if ((month == 2 && day >= 19) || (month == 3 && day <= 20)) {
        xinzuoIndex = 1; // 双鱼座
      } else if ((month == 3 && day >= 21) || (month == 4 && day <= 19)) {
        xinzuoIndex = 2; // 白羊座
      } else if ((month == 4 && day >= 20) || (month == 5 && day <= 20)) {
        xinzuoIndex = 3; // 金牛座
      } else if ((month == 5 && day >= 21) || (month == 6 && day <= 21)) {
        xinzuoIndex = 4; // 双子座
      } else if ((month == 6 && day >= 22) || (month == 7 && day <= 22)) {
        xinzuoIndex = 5; // 巨蟹座
      } else if ((month == 7 && day >= 23) || (month == 8 && day <= 22)) {
        xinzuoIndex = 6; // 狮子座
      } else if ((month == 8 && day >= 23) || (month == 9 && day <= 22)) {
        xinzuoIndex = 7; // 处女座
      } else if ((month == 9 && day >= 23) || (month == 10 && day <= 23)) {
        xinzuoIndex = 8; // 天秤座
      } else if ((month == 10 && day >= 24) || (month == 11 && day <= 22)) {
        xinzuoIndex = 9; // 天蝎座
      } else if ((month == 11 && day >= 23) || (month == 12 && day <= 21)) {
        xinzuoIndex = 10; // 射手座
      } else {
        xinzuoIndex = 11; // 摩羯座
      }

      this.xinzuoIndex = xinzuoIndex;
      this.userInfo.xinzuo = this.xinzuo[xinzuoIndex];
    },
    getCircleStyle(index) {
      const {
        size,
        gap,
        rowGap,
        rows,
        baseTop,
        offsetLefts,
        offsetTops,
        baseLeft,
      } = this.circleConfig;
      const row = index % rows;
      const column = Math.floor(index / rows);
      let offsetLeft = 0;
      let offsetTop = 0;

      if (row % 2== 0 ) {
        offsetLeft = offsetLefts;
      } else {
        offsetLeft = -offsetLefts;
      }
      if (column % 2 == 1 ) {
        offsetTop = offsetTops;
      } else {
        offsetTop = -offsetTops;
      }

      const left = baseLeft + column * (size + gap) + offsetLeft + "rpx";
      const top = baseTop + row * (size + rowGap) + offsetTop + "rpx";

      return {
        position: "absolute",
        left,
        top,
        width: size + "rpx",
        height: size + "rpx",
      };
    },
    getContainerStyle() {
      return {
        width: this.totalWidth,
        height: "648rpx",
        position: "relative",
      };
    },
    handleTouchStart(e) {
      this.touchStartX = e.touches[0].clientX;
      this.touchStartScrollLeft = e.currentTarget.scrollLeft;
    },
    handleTouchMove(e) {
      if (!this.touchStartX) return;
      const deltaX = this.touchStartX - e.touches[0].clientX;
      e.currentTarget.scrollLeft = this.touchStartScrollLeft + deltaX;
    },
    handleTouchEnd() {
      this.touchStartX = null;
      this.touchStartScrollLeft = null;
    },
    handleNext() {
      if (this.currentStep === 1) {
        // 验证第一步数据
        if (!this.userInfo.nickname) {
          uni.showToast({
            title: "请输入昵称",
            icon: "none",
          });
          return;
        }
        if (!this.userInfo.gender) {
          uni.showToast({
            title: "请选择性别",
            icon: "none",
          });
          return;
        }
        this.currentStep = 2;
      } else {
        // 验证第二步数据
        if (
          this.selectedInterests.length === 0 &&
          this.selectedTags.length === 0
        ) {
          uni.showToast({
            title: "请至少选择一个兴趣",
            icon: "none",
          });
          return;
        }
        // 提交所有数据
        this.submitUserInfo();
      }
    },
    onScroll(e) {
      this.scrollTop = e.detail.scrollTop;
    }
  },
};
</script>

<style lang="scss">
.reserveASeat {
  width: 100%;
  height: calc(var(--status-bar-height) + 20rpx);
}

.popSel {
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  background-color: #f2f6f2;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding-bottom: 100rpx;
}

.tag_all_select {
  padding: 20rpx;
  height: 100%;
  overflow-y: auto;

  .tag_items {
    display: flex;
    flex-wrap: wrap;
    gap: 30rpx;
    justify-content: center;
    align-items: center;
    padding-bottom: 50rpx;

    .tag_item {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      color: #333;
      font-size: 26rpx;
      transition: all 0.3s ease;
      cursor: pointer;

      &.small {
        width: 120rpx;
        height: 120rpx;
      }

      &.medium {
        width: 160rpx;
        height: 160rpx;
        font-size: 28rpx;
      }

      &.large {
        width: 200rpx;
        height: 200rpx;
        font-size: 32rpx;
      }

      &.active {
        transform: scale(1.2);
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.3);
        z-index: 1;
      }

      &:not(.active):hover {
        transform: scale(1.05);
      }
    }
  }
}

.step-container {
  min-height: 100vh;
  background: url("../../static/me/step/wd_bg_bianjiziliao.png") top center/100%
      no-repeat,
    #f2f6f2;
  padding: 40rpx 0;
  padding-bottom: 230rpx;
  box-sizing: border-box;
}

.step-header {
  margin-bottom: 20rpx;
  padding: 0 40rpx;

  .step-number {
    font-size: 48rpx;
    font-weight: bold;
    color: #000;
    margin-bottom: 20rpx;
    display: block;
    text-align: center;
  }

  .progress-container {
    height: 6rpx;
    background: #f1f1f1;
    border-radius: 4rpx;
    overflow: hidden;

    .progress-inner {
      height: 100%;
      background: #1f1f1f;
      border-radius: 4rpx;
      transition: width 0.3s ease;
      height: 6rpx;
    }
  }
}

.step-content {
  padding:0 40rpx; 

  .step-title {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #666;
    margin-bottom: 50rpx;
    letter-spacing: 1rpx;

    text {
      font-size: 40rpx;
    }
  }
}

.avatar-section {
				display: flex;
				justify-content: center;
  margin-bottom: 60rpx;

  .avatar-wrapper {
    width: 200rpx;
    height: 200rpx;
				border-radius: 50%;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4rpx dashed #e5e5e5;
    position: relative;

    .avatar {
      width: 100%;
      height: 100%;
    }

    .avatar-placeholder {
      width: 64rpx;
      height: 64rpx;
      position: absolute;
      bottom: 0;
      right: 0;

      .camera-icon {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.input-section {
  margin-bottom: 20rpx;

  .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8f8f8;
    border-radius: 16rpx;
    padding-right: 20rpx;

    input {
      flex: 1;
      height: 88rpx;
      padding: 0 20rpx 0 30rpx;
      font-size: 28rpx;
      color: #333;
      background: transparent;

      &::placeholder {
        color: #999;
      }
    }

    .input-actions {
      display: flex;
      align-items: center;
      gap: 16rpx;

      .close-icon {
        width: 36rpx;
        height: 36rpx;
      }

      .random {
        width: 44rpx;
        height: 44rpx;
      }
    }
  }
}

.gender-section {
  margin-bottom: 20rpx;

  .gender-options {
    display: flex;
    gap: 20rpx;

    .gender-item {
      flex: 1;
      background: #f8f8f8;
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
				transition: all 0.3s ease;

      width: 184px;
      height: 168rpx;
      border-radius: 20rpx;
      border: 4rpx solid #e9e9e9;

      &.active {
        background: linear-gradient(
          180deg,
          #f0ffd9 0%,
          rgba(240, 255, 217, 0) 99%
        );
        transform: scale(1.02);
        border-color: #1f1f1f;
      }

      .gender-icon {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 16rpx;
      }

      text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}

.birthday-section {
  margin-bottom: 20rpx;
  background: #fff;
  padding: 20rpx;
  border-radius: 20rpx;

  .input-label {
    font-size: 28rpx;
    color: #333;
    padding-bottom: 20rpx;
  }

  .birthday-picker {
    height: 88rpx;
    background: #f8f8f8;
    border-radius: 16rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    picker {
      flex: 1;
      height: 100%;

      .uni-input {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        gap: 12rpx;

        text {
          font-size: 28rpx;
          color: #333;

          &.placeholder {
            color: #999;
          }

          &.constellation {
            font-size: 28rpx;
            color: #1f1f1f;
            padding: 4rpx 12rpx;
            border-radius: 8rpx;
          }
        }
      }
    }

    .arrow-icon {
      width: 32rpx;
      height: 32rpx;
      flex-shrink: 0;
    }
  }
}

.interest-section {
  .interest-tip {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 30rpx; 
  }

  .interest-circles {
    width: 100%;
    height: 648rpx;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
    margin-bottom: 60rpx;
    padding: 10rpx;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
      display: none;
    }

    -ms-overflow-style: none;
    scrollbar-width: none;

    .interest-circles-container {
      position: relative;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;
      padding: 20rpx;
    }

    .interest-circle-box {
      width: 132rpx;
      height: 132rpx;
      border-radius: 50%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      &.active {
        background: url("../../static/me/step/dlzc_btn_xuanzhong.png") no-repeat
          center center / 100% 100%;
      }

      &.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        
        .interest-circle {
          background: rgba(0, 0, 0, 0.02);
        }
      }

      .interest-circle {
					width: 120rpx;
					height: 120rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.04);
        font-size: 24rpx;
        color: #666;
        transition: all 0.3s ease;
        text-align: center;
        box-sizing: border-box;
        max-width: 120rpx;
        padding: 10rpx;

        > view {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

.interest-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 30rpx;
  padding: 0 20rpx;

  .interest-tag {
    padding: 16rpx 24rpx;
    background: #FFFFFF;
    border-radius: 100rpx;
					font-size: 28rpx;
    color: #333333;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
    position: relative;

    .remove-tag {
      margin-left: 12rpx;
      font-size: 32rpx;
      color: #333333;
      padding: 0 6rpx;
      display: flex;
      align-items: center;
      position: relative;
      z-index: 1;
      
      &::after {
        content: '';
        position: absolute;
        left: -8rpx;
        right: -8rpx;
        top: -8rpx;
        bottom: -8rpx;
        z-index: 0;
      }
    }
  }

  .add-tag {
    padding: 16rpx 24rpx;
    background: #FFFFFF;
    border-radius: 100rpx;
    font-size: 28rpx;
    color: #333333;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);

    .add-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 12rpx;
    }
  }
}

.bottom-button {
  position: fixed;
  left: 40rpx;
  right: 40rpx;
  bottom: 40rpx;
  height: 88rpx;
  background: #000;
  border-radius: 44rpx;
  color: #fff;
					font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

  &.step2 {
    background: linear-gradient(90deg, #acf934 0%, #23c343 100%);
    color: #000;
  }
}

.add-tag-popup {
  background: #FFFFFF;
  border-radius: 24rpx;
  width: 580rpx;
  height: 70vh;
  max-height: 800rpx;
  display: flex;
  flex-direction: column;

  .popup-title {
    padding: 40rpx 30rpx 20rpx;
    font-size: 32rpx;
    color: #333333;
    text-align: center;
    font-weight: 600;
    flex-shrink: 0;
  }

  .popup-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 30rpx;
    margin-bottom: 20rpx;

    .popup-input {
      margin-bottom: 30rpx;

      .tag-input {
        width: 100%;
        height: 80rpx;
        background: #f2f6f2;
        border-radius: 12rpx;
        padding: 0 24rpx;
        font-size: 28rpx;
        color: #333333;

        &.disabled {
          background: rgba(0, 0, 0, 0.02);
          color: #999;
        }
      }
    }

    .selected-tags {
      .selected-tags-title {
        font-size: 28rpx;
        color: #666666;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .max-hint {
          font-size: 24rpx;
          color: #FF6B6B;
        }
      }

      .selected-tags-list {
        display: flex;
        flex-wrap: wrap;
        gap: 16rpx;

        .selected-tag {
          padding: 12rpx 24rpx;
          background: #f2f6f2;
          border-radius: 100rpx;
          font-size: 26rpx;
          color: #333333;
        }
      }
    }
  }

  .popup-buttons {
    padding: 20rpx 30rpx 30rpx;
    display: flex;
    gap: 20rpx;
    background: #FFFFFF;
    flex-shrink: 0;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: -20rpx;
      height: 20rpx;
      background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
    }

    button {
      flex: 1;
      height: 80rpx;
      border-radius: 12rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;

      &.btn-cancel {
        background: #FFFFFF;
        color: #333333;
        border: 2rpx solid #1F1F1F;
      }

      &.btn-confirm {
        background: #333333;
        color: #FFFFFF;

        &.disabled {
          opacity: 0.5;
          background: #999;
        }
      }
    }
  }
}

.birthday-section,
.input-section,
.gender-section {
  background: #fff;
  padding: 20rpx;
  border-radius: 20rpx;

  .input-label {
    font-size: 28rpx;
    color: #333;
    padding-bottom: 20rpx;
		}
	}
</style>