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;left:0;z-index:999;display: flex;flex-direction: column;justify-content: center;align-items: center;">
      <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 {
    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: [
          "水瓶座", "双鱼座", "白羊座", "金牛座", "双子座", 
          "巨蟹座", "狮子座", "处女座", "天秤座", "天蝎座", 
          "射手座", "摩羯座"
        ],
        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
        };

        console.log("提交数据:", data);

        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) => {
            console.log("提交响应:", res.data);
            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: (err) => {
            console.error("提交失败:", err);
            uni.showToast({
              title: "网络错误",
              icon: "none",
            });
          },
          complete: () => {
            uni.hideLoading();
          },
        });
      },
      chooseAvatar() {
        this.checkRights();
        console.log("----upload avatar");
        var _self = this;
        uni.chooseImage({
          count: 1,
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"], // 从相册、相机选择
          extension: [".png", ".jpeg", ".jpg"],
          success: function (res) {
            console.log("res:", res);
            if (res.tempFilePaths.length > 0) {
              _self.imglocal = res.tempFilePaths[0];
              _self.userInfo.avatar = 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", // 文件对应的 key
                success: function (uploadFileRes) {
                  let resdata = JSON.parse(uploadFileRes.data);
                  console.log("Upload success:", uploadFileRes);
                  console.log("Upload data:", resdata);
                  if (resdata.success == "yes") {
                    _self.showRights = false;
                    _self.userInfo.avatar = resdata.url; // 更新为服务器返回的URL
                    uni.showToast({
                      title: '头像上传成功',
                      icon: 'success',
                      duration: 1500
                    });
                  } else {
                    uni.showToast({
                      title: resdata.msg || '上传失败',
                      icon: 'none',
                      duration: 1500
                    });
                  }
                },
                fail: function (uploadFileFail) {
                  console.log("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);
              });
            }
          },
          error: function (e) {
            console.log(e);
            uni.showToast({
              title: '选择图片失败',
              icon: 'none',
              duration: 1500
            });
          },
        });
      },
      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("权限被拒绝");
              uni.showToast({
                title: '相机权限被拒绝',
                icon: 'none',
                duration: 2000
              });
            } else if (result === -1) {
              console.log("权限被永久拒绝");
              uni.showModal({
                title: '提示',
                content: '相机权限被永久拒绝，请到设置中手动开启',
                confirmText: '去设置',
                cancelText: '取消',
                success: function(res) {
                  if (res.confirm) {
                    gotoAppPermissionSetting();
                  }
                }
              });
            }
          })
          .catch((error) => {
            that.showRights = true;
            console.log("权限申请失败：", error);
            uni.showToast({
              title: '权限申请失败',
              icon: 'none',
              duration: 1500
            });
          });
      },
      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>