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 v-if="showRights" style="
        width: 100%;
        height: 300rpx;
        background-color: rgba(255, 255, 255, 0.9);
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 999;">
      <text style="
          width: 90%;
          color: #000000;
          font-size: 38rpx;
          text-align: left;
          padding: 10rpx 20rpx;
          padding-top: 10rpx;">正在获取相机、存储权限</text>
      <text style="
          width: 90%;
          color: #666666;
          font-size: 28rpx;
          text-align: left;
          padding: 10rpx 20rpx;">该权限用于获取设备拍摄或获取本地应用相册，进行头像或图片上传。</text>
    </view>
  </view>
</template>

<script> 
import permission from '@/common/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: [
        "水瓶座",
        "双鱼座",
        "白羊座",
        "金牛座",
        "双子座",
        "巨蟹座",
        "狮子座",
        "处女座",
        "天秤座",
        "天蝎座",
        "射手座",
        "摩羯座",
      ],
      showRights: false,
      skey: getApp().globalData.skey,
      imglocal: "",
    };
  },
  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.switchTab({
                url: "/pages/index/index",
              });
            }, 1500);
          } else {
            uni.showToast({
              title: res.data.str || "保存失败",
              icon: "none",
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: "网络错误",
            icon: "none",
          });
        },
        complete: () => {
          uni.hideLoading();
        },
      });
    },
    chooseAvatar() {
      uni.showActionSheet({
        itemList: ['拍照', '从相册选择'],
        success: (res) => {
          const sourceType = res.tapIndex === 0 ? 'camera' : 'album';
          this.chooseImage(sourceType);
        }
      });
    },
    async chooseImage(sourceType) {
      try {
        let hasPermission = false;
        
        if (sourceType === 'camera') {
          hasPermission = await this.checkCameraPermission();
        } else if (sourceType === 'album') {
          hasPermission = await this.checkPhotoLibraryPermission();
        }

        if (!hasPermission) {
          uni.showToast({
            title: '未获得权限',
            icon: 'none'
          });
          return;
        }

        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: [sourceType],
          success: async (res) => {
            console.log('res:', res)
            if (res.tempFilePaths.length > 0) {
              this.userInfo.avatar = res.tempFilePaths[0]; // 立即显示选择的图片
              const tempFilePath = res.tempFilePaths[0];
              console.log('tempFilePaths:', tempFilePath);
              await this.uploadImage(tempFilePath);
            }
          },
          fail: (err) => {
            console.error('选择图片失败：', err);
            uni.showToast({
              title: '选择图片失败',
              icon: 'none'
            });
          }
        });
      } catch (error) {
        console.error('权限检查失败：', error);
        uni.showToast({
          title: '权限检查失败',
          icon: 'none'
        });
      }
    },
    async checkCameraPermission() {
      const hasPermission = await permission.request(permission.PermissionType.CAMERA, {
        title: '相机权限申请',
        describe: '需要使用相机拍摄照片，请允许使用相机权限'
      });
      return hasPermission;
    },
    async checkPhotoLibraryPermission() {
      const hasPermission = await permission.request(permission.PermissionType.PHOTO_LIBRARY, {
        title: '相册权限申请',
        describe: '需要访问相册选择照片，请允许访问相册权限'
      });
      return hasPermission;
    },
    uploadImage(tempFilePath) {
      const _self = this;
      const uploadTask = uni.uploadFile({
        url: _self.$apiHost + '/Xweb/upload_img?skey=' + _self.skey,
        filePath: tempFilePath,
        name: 'file',
        success: function(uploadFileRes) {
          let resdata = JSON.parse(uploadFileRes.data);
          console.log('Success:', uploadFileRes);
          console.log('Upload data:', resdata);
          if (resdata.success == 'yes') {
            _self.showRights = false;
            _self.userInfo.avatar = resdata.url;
            uni.showToast({
              title: '头像上传成功',
              icon: 'success',
              duration: 1500
            });
          } else {
            uni.showToast({
              title: resdata.msg || '上传失败',
              icon: 'none',
              duration: 1500
            });
          }
        },
        fail: function(uploadFileFail) {
          console.error('Error:', uploadFileFail);
          uni.showToast({
            title: '上传失败，请重试',
            icon: 'none',
            duration: 1500
          });
        },
        complete: () => {
          console.log('Upload complete');
        }
      });

      // 显示上传进度
      uploadTask.onProgressUpdate((res) => {
        console.log('上传进度' + res.progress);
        console.log('已经上传的数据长度' + res.totalBytesSent);
        console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
      });
    },
    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>