yizhizan-h5/pages/my/jobApplicant/welcomePage.vue

<template>
  <view class="welcome-page">
    <view class="welcome-content">
      <swiper
        class="custom-swiper"
        :autoplay="false"
        :current="currentIndex"
        @change="onSwiperChange"
      >
        <!-- circular -->
        <swiper-item>
          <view class="swiper-content">
            <view class="bg-img">
              <image src="@/static/images/jobApplicant/BG.svg" mode="aspectFill" />
            </view>
            <view class="swiper-img">
              <image
                src="@/static/images/jobApplicant/delivery_bro.svg"
                mode="scaleToFill"
                class="bro-img"
              />
            </view>
            <view class="swiper-txt">
              <view class="content-title"
                >了解多一点 <br />
                推荐更准确</view
              >
              <view class="content-desc"
                >亿职赞，专为跨境行业提供人才服务 <br />
                请您完成求职引导</view
              >
              <view class="next-page" @click="switchBanner(1)"
                >下一步
                <image src="@/static/images/jobApplicant/next.svg" mode="scaleToFill" />
              </view>
            </view>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-content">
            <view class="bg-img">
              <image src="@/static/images/jobApplicant/BG.svg" mode="aspectFill" />
            </view>
            <view class="swiper-img">
              <image
                src="@/static/images/jobApplicant/delivery-address_bro.png"
                mode="aspectFix"
                class="address-img"
              />
            </view>
            <view class="swiper-txt" style="height: 1004rpx">
              <!-- 表单内容 -->
              <view class="form-container">
                <!-- 工作城市 -->
                <view class="form-item">
                  <text class="form-label">期望工作的城市</text>
                  <view class="form-input" @click="selectCity">
                    <text class="input-text">{{ city || "请选择" }}</text>
                    <u-icon name="arrow-right" color="#999" size="24"></u-icon>
                  </view>
                </view>
                <!-- 工作职位 -->
                <view class="form-item">
                  <text class="form-label">期望的职位</text>
                  <view class="form-input" @click="selectJob">
                    <text class="input-text">{{ jobTitle || "请选择" }}</text>
                    <u-icon name="arrow-right" color="#999" size="24"></u-icon>
                  </view>
                </view>

                <!-- 期望薪酬 -->
                <view class="form-item">
                  <text class="form-label">期望的薪酬</text>
                  <view class="salary-container">
                    <view class="salary-inputs">
                      <view class="salary-input">
                        <text class="currency">¥</text>
                        <input
                          v-model="minSalary"
                          type="number"
                          placeholder="8000"
                          class="salary-field"
                        />
                      </view>
                      <view class="salary-input">
                        <text class="currency">¥</text>
                        <input
                          v-model="maxSalary"
                          type="number"
                          placeholder="10000"
                          class="salary-field"
                        />
                      </view>
                    </view>
                    <!-- 范围滑块 -->
                    <view class="range-slider-container">
                      <view class="range-slider-track" @click="onTrackClick">
                        <view class="range-slider-progress" :style="progressStyle"></view>
                        <view
                          class="range-slider-thumb range-slider-thumb-left"
                          :style="leftThumbStyle"
                          @touchstart.stop="onLeftThumbStart"
                          @touchmove.stop="onLeftThumbMove"
                          @touchend.stop="onLeftThumbEnd"
                        ></view>
                        <view
                          class="range-slider-thumb range-slider-thumb-right"
                          :style="rightThumbStyle"
                          @touchstart.stop="onRightThumbStart"
                          @touchmove.stop="onRightThumbMove"
                          @touchend.stop="onRightThumbEnd"
                        ></view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="next-page" @click="switchBanner(2)"
                >下一步
                <image src="@/static/images/jobApplicant/next.svg" mode="scaleToFill" />
              </view>
            </view>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-content">
            <view class="bg-img">
              <image src="@/static/images/jobApplicant/BG.svg" mode="aspectFill" />
            </view>
            <view class="swiper-img">
              <image
                src="@/static/images/jobApplicant/bangongyuansu.svg"
                mode="aspectFix"
                class="people-img"
              />
            </view>
            <view class="swiper-txt">
              <view class="content-title">跨境电商工作经验？</view>
              <view class="content-desc"
                >请根据过往经验进行选择 <br />
                届时我们将为您提供更为准确的服务</view
              >
              <view class="check-box">
                <view class="check-item" @click="checkWork(1)">
                  <image
                    v-if="check == 1"
                    src="@/static/images/jobApplicant/check.svg"
                    mode="scaleToFill"
                  />
                  <image
                    v-else
                    src="@/static/images/jobApplicant/border.svg"
                    mode="scaleToFill"
                  />
                  有跨境电商工作经验
                </view>
                <view class="check-item" @click="checkWork(2)">
                  <image
                    v-if="check == 2"
                    src="@/static/images/jobApplicant/check.svg"
                    mode="scaleToFill"
                  />
                  <image
                    v-else
                    src="@/static/images/jobApplicant/border.svg"
                    mode="scaleToFill"
                  />
                  有跨境电商工作经验
                </view>
              </view>
              <view class="next-page" @click="goWord"
                >下一步
                <image src="@/static/images/jobApplicant/next.svg" mode="scaleToFill" />
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
      <!-- 自定义指示器 -->
      <view class="custom-indicator">
        <view
          v-for="(item, index) in 3"
          :key="index"
          class="indicator-dot"
          :class="{ active: currentIndex === index }"
          @click="switchBanner(index)"
        ></view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      currentIndex: 0,
      check: 1,
      jobTitle: "",
      city: "",
      minSalary: "8000",
      maxSalary: "10000",
      jobType: "fulltime",
      industry: "",
      // 范围滑块相关数据
      minValue: 8000,
      maxValue: 10000,
      sliderMin: 5000,
      sliderMax: 50000,
      step: 1000,
      trackWidth: 0,
      draggingThumb: null, // 'left' 或 'right' 或 null
      startX: 0,
      startValue: 0,
    };
  },
  computed: {
    // 左侧滑块位置百分比
    leftPercent() {
      return ((this.minValue - this.sliderMin) / (this.sliderMax - this.sliderMin)) * 100;
    },
    // 右侧滑块位置百分比
    rightPercent() {
      return ((this.maxValue - this.sliderMin) / (this.sliderMax - this.sliderMin)) * 100;
    },
    // 进度条样式
    progressStyle() {
      return {
        left: this.leftPercent + "%",
        width: this.rightPercent - this.leftPercent + "%",
      };
    },
    // 左侧滑块样式
    leftThumbStyle() {
      return {
        left: this.leftPercent + "%",
      };
    },
    // 右侧滑块样式
    rightThumbStyle() {
      return {
        left: this.rightPercent + "%",
      };
    },
  },
  methods: {
    checkWork(value) {
      this.check = value;
    },
    // 轮播图切换事件
    onSwiperChange(e) {
      this.currentIndex = e.detail.current;
    },

    // 切换轮播图
    switchBanner(index) {
      this.currentIndex = index;
    },

    // 点击轮播图
    handleBannerClick(item) {
      if (item.link) {
        uni.navigateTo({
          url: item.link,
        });
      }
    },

    // 暂停自动播放
    pauseAutoplay() {
      this.autoplay = false;
    },

    // 开始自动播放
    startAutoplay() {
      this.autoplay = true;
    },
    selectJob() {
      uni.navigateTo({
        url: "/package/jobIntention/jobList",
      });
    },
    selectCity() {
      uni.navigateTo({
        url: "/package/jobIntention/city",
      });
    },
    selectJobType(type) {
      this.jobType = type;
    },
    // 获取滑块轨道宽度
    getTrackWidth() {
      uni
        .createSelectorQuery()
        .in(this)
        .select(".range-slider-track")
        .boundingClientRect((data) => {
          this.trackWidth = data.width;
        })
        .exec();
    },
    // 将像素位置转换为数值
    pixelToValue(pixel) {
      const percent = (pixel / this.trackWidth) * 100;
      const value = this.sliderMin + (percent / 100) * (this.sliderMax - this.sliderMin);
      return Math.round(value / this.step) * this.step;
    },
    // 左侧滑块开始拖拽
    onLeftThumbStart(e) {
      this.draggingThumb = "left";
      this.startX = e.touches[0].clientX;
      this.startValue = this.minValue;
      e.preventDefault();
    },
    // 左侧滑块拖拽中
    onLeftThumbMove(e) {
      if (this.draggingThumb !== "left") return;

      const deltaX = e.touches[0].clientX - this.startX;
      const deltaPercent = (deltaX / this.trackWidth) * 100;
      const deltaValue = (deltaPercent / 100) * (this.sliderMax - this.sliderMin);
      let newValue = this.startValue + deltaValue;

      // 限制范围
      newValue = Math.max(this.sliderMin, Math.min(newValue, this.maxValue - this.step));
      newValue = Math.round(newValue / this.step) * this.step;

      this.minValue = newValue;
      this.minSalary = newValue.toString();
      e.preventDefault();
    },
    // 左侧滑块结束拖拽
    onLeftThumbEnd(e) {
      this.draggingThumb = null;
      e.preventDefault();
    },
    // 右侧滑块开始拖拽
    onRightThumbStart(e) {
      this.draggingThumb = "right";
      this.startX = e.touches[0].clientX;
      this.startValue = this.maxValue;
      e.preventDefault();
    },
    // 右侧滑块拖拽中
    onRightThumbMove(e) {
      if (this.draggingThumb !== "right") return;

      const deltaX = e.touches[0].clientX - this.startX;
      const deltaPercent = (deltaX / this.trackWidth) * 100;
      const deltaValue = (deltaPercent / 100) * (this.sliderMax - this.sliderMin);
      let newValue = this.startValue + deltaValue;

      // 限制范围
      newValue = Math.max(this.minValue + this.step, Math.min(newValue, this.sliderMax));
      newValue = Math.round(newValue / this.step) * this.step;

      this.maxValue = newValue;
      this.maxSalary = newValue.toString();
      e.preventDefault();
    },
    // 右侧滑块结束拖拽
    onRightThumbEnd(e) {
      this.draggingThumb = null;
      e.preventDefault();
    },
    // 点击轨道
    onTrackClick(e) {
      if (this.draggingThumb) return;

      const rect = e.currentTarget.getBoundingClientRect();
      const clickX = e.detail.x - rect.left;
      const clickPercent = (clickX / rect.width) * 100;
      const clickValue =
        this.sliderMin + (clickPercent / 100) * (this.sliderMax - this.sliderMin);

      // 判断点击位置更靠近哪个滑块
      const distanceToLeft = Math.abs(clickValue - this.minValue);
      const distanceToRight = Math.abs(clickValue - this.maxValue);

      if (distanceToLeft < distanceToRight) {
        // 更靠近左侧滑块
        let newValue = Math.round(clickValue / this.step) * this.step;
        newValue = Math.max(
          this.sliderMin,
          Math.min(newValue, this.maxValue - this.step)
        );
        this.minValue = newValue;
        this.minSalary = newValue.toString();
      } else {
        // 更靠近右侧滑块
        let newValue = Math.round(clickValue / this.step) * this.step;
        newValue = Math.max(
          this.minValue + this.step,
          Math.min(newValue, this.sliderMax)
        );
        this.maxValue = newValue;
        this.maxSalary = newValue.toString();
      }
    },
    goWord(){
        uni.navigateTo({
            url:'/pages/my/jobApplicant/workProgress'
        })
    },
  },
  onHide() {
    // 页面隐藏时暂停自动播放
    this.pauseAutoplay();
  },
  mounted() {
    // 初始化滑块轨道宽度
    this.$nextTick(() => {
      this.getTrackWidth();
    });
  },
  onShow() {
    // 页面显示时恢复自动播放
    this.startAutoplay();
    // 监听选择结果
    uni.$on("jobSelected", (data) => {
      this.jobTitle = data.name;
    });
    uni.$on("citySelected", (data) => {
      this.city = data.name;
    });
    uni.$on("industrySelected", (data) => {
      this.industry = data.name;
    });
  },
  onUnload() {
    // 移除监听
    uni.$off("jobSelected");
    uni.$off("citySelected");
    uni.$off("industrySelected");
  },
};
</script>
<style scoped lang="scss">
.welcome-page {
  background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .bg-img {
    position: absolute;
    z-index: -1;
    top: 26rpx;
    left: -240rpx;
    width: 1680rpx;
    height: 1570rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .check-box {
    .check-item {
      color: rgba(51, 51, 51, 1);
      font-family: DM Sans;
      font-size: 36rpx;
      font-weight: 400;
      line-height: 46rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 26rpx;
      image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 24rpx;
      }
    }
  }
  .welcome-content {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: 2;
  }
  .custom-swiper {
    height: 100%;
  }
  .custom-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -186rpx;
    gap: 16rpx;
    position: relative;
    z-index: 3;
    .indicator-dot {
      width: 32rpx;
      height: 24rpx;
      border-radius: 100rpx;
      background: #1be5df;
      transition: all 0.3s ease;

      &.active {
        width: 48rpx;
        border-radius: 100rpx;
        background: #016bf6;
      }
    }
  }
  .swiper-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    .swiper-img {
      flex: 1;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .bro-img {
        width: 640rpx;
        height: 436rpx;
      }
      .address-img {
        width: 714rpx;
        height: 298rpx;
      }
      .people-img {
        width: 586rpx;
        height: 586rpx;
      }
    }
    .swiper-txt {
      flex-shrink: 0;
      background: #fff;
      border-top-left-radius: 48rpx;
      border-top-right-radius: 48rpx;
      width: 100%;
      height: 782rpx;
      padding: 56rpx 40rpx;
      padding-bottom: 160rpx;
      box-sizing: border-box;
      .next-page {
        color: #016bf6;
        font-family: DM Sans;
        font-size: 30rpx;
        font-weight: 400;
        line-height: 36rpx;
        letter-spacing: 0%;
        position: absolute;
        right: 34rpx;
        bottom: 46rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 48rpx;
          height: 48rpx;
        }
      }
      .content-title {
        color: #016bf6;
        font-family: DM Sans;
        font-size: 68rpx;
        font-weight: 700;
        line-height: 88rpx;
        letter-spacing: 0%;
        text-align: center;
      }
      .content-desc {
        color: #016bf6;
        font-family: DM Sans;
        font-size: 34rpx;
        font-weight: 500;
        line-height: 48rpx;
        letter-spacing: 0px;
        text-align: center;
        margin-top: 24rpx;
      }
      .form-container {
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
      }

      .form-item {
        margin-bottom: 40rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .form-label {
          color: rgba(58, 57, 67, 1);
          font-family: DM Sans;
          font-size: 36rpx;
          font-weight: 500;
          line-height: 48rpx;
          letter-spacing: 0px;
          text-align: left;
        }

        .form-input {
          height: 108rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 32rpx 48rpx;
          border-radius: 12rpx;
          box-shadow: 0px 8px 150px 0px rgba(0, 0, 0, 0.06);
          margin-top: 20rpx;
          .input-text {
            color: rgba(97, 110, 124, 1);
            font-family: DM Sans;
            font-weight: 400;
            line-height: 20px;
            letter-spacing: 0px;
            text-align: left;
            font-size: 28rpx;
          }
        }
      }

      .salary-container {
        .salary-inputs {
          display: flex;
          align-items: center;
          margin: 20rpx 0 30rpx 0;
          gap: 50rpx;

          .salary-input {
            display: flex;
            align-items: center;
            flex: 1;
            padding: 20rpx;
            border-radius: 12rpx;
            box-shadow: 0px 8px 150px 0px rgba(0, 0, 0, 0.06);
            background: rgba(255, 255, 255, 1);

            .currency,
            .salary-field {
              color: rgba(97, 110, 124, 1);
              font-family: DM Sans;
              font-weight: 400;
              line-height: 20px;
              letter-spacing: 0px;
              text-align: left;
              font-size: 28rpx;
            }
          }

          .salary-separator {
            margin: 0 20rpx;
            color: rgba(153, 153, 153, 1);
            font-size: 28rpx;
          }
        }

        .range-slider-container {
          padding: 20rpx 10rpx;
        }

        .range-slider-track {
          position: relative;
          height: 6rpx;
          background-color: #e5e5ea;
          border-radius: 3rpx;
          cursor: pointer;
        }

        .range-slider-progress {
          position: absolute;
          top: 0;
          height: 100%;
          background-color: #007aff;
          border-radius: 3rpx;
          transition: all 0.1s ease;
        }

        .range-slider-thumb {
          position: absolute;
          top: 50%;
          width: 40rpx;
          height: 40rpx;
          background-color: #007aff;
          border-radius: 50%;
          border: 4rpx solid #ffffff;
          box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
          transform: translate(-50%, -50%);
          cursor: pointer;
          transition: all 0.1s ease;
        }

        .range-slider-thumb:active {
          transform: translate(-50%, -50%) scale(1.1);
          box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.4);
        }
      }

      .job-type-container {
        display: flex;
        gap: 50rpx;
        margin-top: 20rpx;
      }
    }
  }
}
</style>