recycle-front/pages/subcomponent/apply.vue

<template>
  <view class="apply-page">
    <!-- 顶部区域 -->
    <view class="header">
      <!-- 顶部导航栏 -->
      <view class="nav-bar">
        <view class="back-icon" @tap="navigateBack">
          <uni-icons type="left" size="20"></uni-icons>
        </view>
        <view class="title">回收侠·推客联盟</view>
      </view>


      <!-- 特点标签 -->
      <view class="feature-tags">
        <view class="tag">
          <text class="iconfont check">✓</text>
          <text>收益高</text>
        </view>
        <view class="tag">
          <text class="iconfont check">✓</text>
          <text>品类全</text>
        </view>
        <view class="tag">
          <text class="iconfont check">✓</text>
          <text>到账快</text>
        </view>
        <view class="tag">
          <text class="iconfont check">✓</text>
          <text>城市多</text>
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="content">
      <view class="page-header">
        <text class="title">申请推广官</text>
        <view class="contact-service" @tap="contactService">
          <text class="icon">??</text>
          <text>联系客服</text>
        </view>
      </view>

      <!-- 表单区域 -->
      <view class="form">
        <!-- 姓名输入 -->
        <view class="form-item">
          <text class="label">姓名</text>
          <input 
            class="input" 
            type="text" 
            placeholder="请输入" 
            placeholder-class="placeholder"
            v-model="formData.name"
          />
        </view>

        <!-- 电话输入 -->
        <view class="form-item">
          <text class="label">电话</text>
          <input 
            class="input" 
            type="number" 
            placeholder="请输入" 
            placeholder-class="placeholder"
            v-model="formData.phone"
          />
        </view>

        <!-- 职业选择 -->
        <view class="form-item" @tap="showPicker('occupation')">
          <text class="label">职业</text>
          <view class="picker-value">
            <text :class="{'placeholder': !formData.occupation}">
              {{formData.occupation || '请选择'}}
            </text>
            <text class="iconfont arrow">></text>
          </view>
        </view>

        <!-- 年龄选择 -->
        <view class="form-item" @tap="showPicker('age')">
          <text class="label">年龄</text>
          <view class="picker-value">
            <text :class="{'placeholder': !formData.age}">
              {{formData.age || '请选择'}}
            </text>
            <text class="iconfont arrow">></text>
          </view>
        </view>

        <!-- 推广时间选择 -->
        <view class="form-item" @tap="showPicker('promotionTime')">
          <text class="label">每日可花推广时间</text>
          <view class="picker-value">
            <text :class="{'placeholder': !formData.promotionTime}">
              {{formData.promotionTime || '请选择'}}
            </text>
            <text class="iconfont arrow">></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-btns">
      <button class="btn upgrade-btn" @tap="upgrade">升级推广官</button>
      <button class="btn submit-btn" @tap="submitForm">提交</button>
    </view>

    <!-- 选择器弹窗 -->
    <view class="picker-popup" v-if="showPickerPopup">
      <view class="popup-mask" @tap="hidePicker"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="reset">重置</text>
          <text class="title">{{pickerTitle}}</text>
        </view>
        <picker-view 
          class="picker-view" 
          :value="[currentPickerIndex]" 
          @change="onPickerChange"
          :indicator-style="indicatorStyle"
        >
          <picker-view-column>
            <view 
              class="picker-item" 
              v-for="(item, index) in currentPickerOptions" 
              :key="index"
              :class="{'selected-item': index === currentPickerIndex}"
            >{{item}}</view>
          </picker-view-column>
        </picker-view>
        <button class="confirm-btn" @tap="confirmPicker">确认</button>
      </view>
    </view>
  </view>
</template>

<script>
import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'

export default {
  mixins: [pullRefreshMixin],
  data() {
    return {
      formData: {
        name: '',
        phone: '',
        occupation: '',
        age: '',
        promotionTime: ''
      },
      showPickerPopup: false,
      currentPickerType: '',
      currentPickerIndex: 0,
      indicatorStyle: 'height: 88rpx; border: none;',
      pickerOptions: {
        occupation: ['产品摄影师', '外呼专员', '宝妈', '导购员', '产品经理'],
        age: ['28岁', '29岁', '30岁', '31岁', '32岁'],
        promotionTime: ['2小时', '3小时', '4小时', '5小时', '6小时']
      }
    }
  },
  computed: {
    pickerTitle() {
      const titles = {
        occupation: '职业',
        age: '年龄',
        promotionTime: '每日可花推广时间'
      }
      return titles[this.currentPickerType] || ''
    },
    currentPickerOptions() {
      return this.pickerOptions[this.currentPickerType] || []
    }
  },
  methods: {
    async onRefresh() {
      // 模拟刷新数据
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.stopPullRefresh()
    },
    navigateBack() {
      uni.navigateBack()
    },
    contactService() {
      // 实现联系客服功能
      uni.showToast({
        title: '正在连接客服...',
        icon: 'none'
      })
    },
    showPicker(type) {
      this.currentPickerType = type
      // 设置当前选中项的索引
      const currentValue = this.formData[this.currentPickerType]
      this.currentPickerIndex = this.currentPickerOptions.indexOf(currentValue)
      if (this.currentPickerIndex === -1) this.currentPickerIndex = 0
      this.showPickerPopup = true
    },
    hidePicker() {
      this.showPickerPopup = false
    },
    onPickerChange(e) {
      const index = e.detail.value[0]
      this.currentPickerIndex = index
    },
    confirmPicker() {
      const selectedValue = this.currentPickerOptions[this.currentPickerIndex]
      this.formData[this.currentPickerType] = selectedValue
      this.hidePicker()
    },
	upgrade(){
		uni.navigateTo({
		  url: '/pages/component/upgrad'
		})
	},
    submitForm() {
      // 实现表单提交功能
      console.log('提交表单数据：', this.formData)
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.apply-page {
  min-height: 100vh;
  background: linear-gradient(to right,#9be48f,#42dfc2);
  padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
}

.header {
  background: linear-gradient(to right,#9be48f,#42dfc2);
  padding: 0 30rpx;
  padding-bottom: 20rpx;

  .nav-bar {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    height: 88rpx;
    padding-top: var(--status-bar-height);
  
    .title {
      font-family: DingTalk JinBuTi;
      font-weight: 400;
      font-style: italic;
      font-size: 50rpx;
      line-height: 100%;
      letter-spacing: 0%;
      vertical-align: bottom;
      color: #333;
      margin-left: 10%;
    }
  
    .back-icon, .more-icon {
      width: 88rpx;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 40rpx;
        color: #333;
      }
    }
  }

  .feature-tags {
    display: flex;
    justify-content: space-between;
	width: 90%;
	margin: 0 auto;
    margin-top: 10rpx;
    border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 20rpx;
	background: linear-gradient(to right,#9be48f,#42dfc2);
    .tag {
      // background: rgba(255, 255, 255, 0.8);
      border-radius: 30rpx;
      padding: 12rpx 24rpx;
      display: flex;
      align-items: center;

      .check {
        color: #4CAF50;
        margin-right: 8rpx;
        font-size: 24rpx;
      }

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

.content {
  padding: 40rpx 30rpx;
  background: linear-gradient(to bottom,#eaffe6,6%,#fcfffb);
  border-radius: 40rpx 40rpx 0 0;
  margin-top: 20rpx;
  min-height: 100vh;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;

    .title {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
    }

    .contact-service {
      display: flex;
      align-items: center;
      padding: 12rpx 24rpx;
      border-radius: 10rpx;
      border: 2rpx solid #df8155;
      background: #fff0d2;
      .icon {
        margin-right: 8rpx;
        font-size: 28rpx;
      }

      text {
        font-size: 26rpx;
        color: #da7143;
      }
    }
  }

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

      .label {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 13px;
        line-height: 140%;
        letter-spacing: 0%;
        color: #343534;
        font-weight: normal;
        margin-bottom: 16rpx;
        display: block;
      }

      .input {
        width: 100%;
        height: 88rpx;
        background: transparent;
        padding: 0;
        font-size: 30rpx;
        border: none;
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);

        &::placeholder {
          color: rgba(153, 153, 153, 0.35);
          font-size: 30rpx;
        }
      }

      .picker-value {
        width: 100%;
        height: 88rpx;
        background: transparent;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: none;
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);

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

          &.placeholder {
            color: rgba(153, 153, 153, 0.35);
          }
        }

        .arrow {
          color: #999;
          font-size: 24rpx;
          // transform: rotate(90deg);
          opacity: 0.5;
        }
      }
    }
  }
}

.bottom-btns {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);

  .btn {
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    border-radius: 44rpx;
    font-size: 32rpx;
    margin: 0 10rpx;
    border: none;

    &.upgrade-btn {
      background: rgba(255, 255, 255, 0.9);
      color: #666;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    }

    &.submit-btn {
      background: linear-gradient(90deg, #91dba5, #7ed4a6);
      color: #fff;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    }
  }
}

.picker-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;

  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .popup-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;
    padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);

    .popup-header {
      display: flex;
      align-items: center;
      padding: 30rpx;
      position: relative;
      justify-content: center;
      border-bottom: 1rpx solid #f5f5f5;

      .title {
        font-size: 32rpx;
        color: #333;
        font-weight: normal;
      }

      .reset {
        position: absolute;
        left: 30rpx;
        font-size: 28rpx;
        color: #666;
      }
    }

    .picker-view {
      width: 100%;
      height: 440rpx;
      background: #fff;
      
      .picker-item {
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        font-size: 28rpx;
        color: #999;
        font-weight: normal;
      }
    }

    .confirm-btn {
      margin: 30rpx;
      height: 88rpx;
      line-height: 88rpx;
      background: linear-gradient(90deg, #91dba5, #7ed4a6);
      color: #fff;
      font-size: 32rpx;
      border-radius: 44rpx;
      border: none;
    }
  }
}

::v-deep .uni-picker-view-indicator {
  height: 88rpx !important;
  background-color: rgba(245, 245, 245, 0.3);
}

::v-deep .uni-picker-view-mask {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)),
                    linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
}

::v-deep .uni-picker-view-content {
  .picker-item {
    transition: all 0.2s;
  }
}

::v-deep .uni-picker-view-indicator::after,
::v-deep .uni-picker-view-indicator::before {
  display: none;
}

::v-deep .selected-item {
  font-size: 34rpx !important;
  color: #333 !important;
  font-weight: 600 !important;
}

::v-deep .placeholder {
  color: rgba(153, 153, 153, 0.5) !important;
  font-size: 30rpx;
}
</style>