Sow nothing reap nothing

微信小程序表单步骤进度分步保存简单实现

已有1,291次关注

微信小程序表单步骤进度分步保存简单实现.gif

WXML代码:

<view class="container">

  <view class="into_progress">
    <view class="prog_item {{item.active ? 'active' : ''}}" wx:for="{{progArr}}" wx:key="index" data-id="{{item.id}}" bindtap="handleProgChange">
      <view class="item_num">
        <view class="num_val">
          <text>{{item.num}}</text>
        </view>
        <view class="num_text">{{item.text}}</view>
      </view>
      <view class="item_line {{item.active && thisProg > index ? 'white' : ''}}" wx:if="{{index < 5}}"></view>
    </view>
  </view>
  <!-- 1 -->
  <block wx:if="{{thisProg == 0}}">
    <form bindsubmit="stepExecution">
    <view class="into_box">第一步</view>
    <view class="opeat_btn">
      <button class="btn_gradient_bg submit_btn" form-type="submit">下一步</button>
    </view>
    </form>
  </block>
  <!-- 2 -->
  <block wx:if="{{thisProg == 1}}">
    <form bindsubmit="stepExecution">
    <view class="into_box">第二步</view>
    <view class="award_btn">
      <button class="save blue text-center" data-id="0" form-type="submit">上一步</button>
      <button class="btn_gradient_bg end text-center" form-type="submit">下一步</button>
    </view>
    </form>
  </block>
  <!-- 3 -->
  <block wx:if="{{thisProg == 2}}">
    <form bindsubmit="stepExecution">
    <view class="into_box">第三步</view>
    <view class="award_btn">
      <button class="save blue text-center" data-id="1" form-type="submit">上一步</button>
      <button class="btn_gradient_bg end text-center" form-type="submit">下一步</button>
    </view>
    </form>
  </block>
  <!-- 4 -->
  <block wx:if="{{thisProg == 3}}">
    <form bindsubmit="stepExecution">
    <view class="into_box">第四步</view>
    <view class="award_btn">
      <button class="save blue text-center" data-id="2" form-type="submit">上一步</button>
      <button class="btn_gradient_bg end text-center" form-type="submit">下一步</button>
    </view>
    </form>
  </block>
  <!-- 5 -->
  <block wx:if="{{thisProg == 4}}">
    <form bindsubmit="stepExecution">
    <view class="into_box">第五步</view>
    <view class="award_btn">
      <button class="save blue text-center" data-id="3" form-type="submit">上一步</button>
      <button class="btn_gradient_bg end text-center" form-type="submit">下一步</button>
    </view>
    </form>
  </block>
  <!-- 6 -->
  <block wx:if="{{thisProg == 5}}">
    <form bindsubmit="stepExecution">
    <view class="into_box">第六步</view>
    <view class="award_btn">
      <button class="save blue text-center" data-id="4" form-type="submit">上一步</button>
      <button class="btn_gradient_bg end text-center" form-type="submit">完成</button>
    </view>
    </form>
  </block>

</view>

WXSS代码:

.container{background-color: #F6F6F6;min-height: 100vh;}

.into_progress{height: 150rpx;background: linear-gradient(180deg, #2EAFFB 0%, #0B94FF 100%);padding: 0 30rpx;display: flex;align-items: center;justify-content: center;}
.prog_item{flex: 0 0 16.66%;display: flex;}
.prog_item:last-child{flex: 0;}
.prog_item .item_num{text-align: center;}
.prog_item .item_num .num_val{height: 48rpx;width: 48rpx;background: #1D77C4;border: 1rpx solid #7BCCFF;border-radius: 50%;display: flex;justify-content: center;align-items: center;margin: 0 auto;}
.prog_item .item_num .num_val text{font-size: 28rpx;color: #D5E6FF;}
.prog_item .item_num .num_text{font-size: 24rpx;color: #fff;margin-top: 12rpx;}
.prog_item .item_line{width: 100%;height: 4rpx;background: rgba(24, 88, 161, .4);margin: 25rpx 0 0 0;}
.prog_item .item_line.white{background: #fff;}
.prog_item.active .item_num .num_val{background: #fff;border: 1rpx solid #fff;}
.prog_item.active .item_num .num_val text{display: inline-block;border: 1rpx solid #2EAFFB;color: #2EAFFB;width: 40rpx;height: 40rpx;display: inline-block;border-radius: 50%;}

.into_box{background-color: #fff;padding: 60rpx 30rpx;font-size: 30rpx;text-align: center;}

.opeat_btn{margin: 30rpx;}
.opeat_btn .submit_btn{border-radius: 48rpx;line-height: 90rpx;font-size: 32rpx;color: #fff;border: 1px solid #0590FF;}
.award_btn{padding: 30rpx;display: flex;}
.award_btn button{line-height: 90rpx;flex: 1;border-radius: 48rpx;font-size: 32rpx;margin: 0 10rpx;}
.award_btn .save{background: #F8F8F8;border: 1px solid #0590FF;}
.award_btn .end{color: #fff;}

JS代码:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    progArr: [
      {id: 0, num: 1, text: '第一', active: true}, 
      {id: 1, num: 2, text: '第二', active: false}, 
      {id: 2, num: 3, text: '第三', active: false}, 
      {id: 3, num: 4, text: '第四', active: false}, 
      {id: 4, num: 5, text: '第五', active: false}, 
      {id: 5, num: 6, text: '第六', active: false}
    ],
    thisProg: 0
  },

  /**
   * 生命周期函数--监听页面加载
   * @param {*} options 
   */
  onLoad(options) {
    // 定位第四步,传入3即可,第一步默认从0开始
    // this.progressChange(3);
  },

  /**
   * 头部进度改变
   * @param {*} e 
   */
  handleProgChange(e){
    let thisId = e.currentTarget.dataset.id;
    this.progressChange(thisId);
  },
  
  /**
   * 上下步
   * @param {*} thisId 
   */
  progressChange(thisId){
    let that = this;
    let { progArr } = that.data;
    progArr.forEach((item, index) => {
      index <= thisId ? item.active = true : item.active = false;
    });
    this.setData({progArr, thisProg: thisId});
  },

  /**
   * 当前步骤id
   */
  thisSetpId(){
    let { progArr } = this.data;
    let steps = 0;
    progArr.find((item) => {
      if(item.active){
        steps = item.id;
      }
    });
    return steps;
  },

  /**
   * 步骤
   * @param {*} e 
   */
  stepExecution(e){
    let that = this;
    let steps = that.thisSetpId();
    let thisIds = e.detail.target.dataset.id;
    if(steps == 0){
      that.progressChange(1);
    }else if(steps == 1){
      if(thisIds == 0){
        that.progressChange(thisIds);
      }else{
        that.progressChange(2);
      }
    }else if(steps == 2){
      if(thisIds == 1){
        that.progressChange(thisIds);
      }else{
        that.progressChange(3);
      }
    }else if(steps == 3){
      if(thisIds == 2){
        that.progressChange(thisIds);
      }else{
        that.progressChange(4);
      }
    }else if(steps == 4){
      if(thisIds == 3){
        that.progressChange(thisIds);
      }else{
        that.progressChange(5);
      }
    }else if(steps == 5){
      if(thisIds == 4){
        that.progressChange(thisIds);
      }else{
        wx.showToast({
          title: '完成',
          icon: 'success'
        })
      }
    }
  }
})

JSON代码:

{  
  "navigationBarBackgroundColor": "#2EAFFB",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "步骤进度"
}

已自动关闭评论