parentNew/src/pages/class/gift.vue

<template>
  <view class="page">
    <cu-custom :isBack="true" title="智能报课"></cu-custom>
    <view class="steps padding-tb">
      <view class="cu-steps">
        <view class="cu-item" :class="index > cur ? '' : 'text-student'" v-for="(item, index) in numList" :key="index" @tap="changeStep(index)">
          <text class="num" :data-index="index + 1"></text> {{ item.name }}
        </view>
      </view>
    </view>
    <view class="main bg-white" :style="[{ height: 'calc(100vh - 92px - ' + topHeader + 'px)' }]">
      <swiper @change="swipeChange" :current="cur" class="swipe">
        <swiper-item @touchmove.stop>
          <view class="btn-check-group padding">
            <checkbox-group @change="checkboxChange" class="flex justify-between" style="flex-wrap: wrap;" id="week">
              <label class="btn-check-label margin" :class="{ 'bg-cyan': params.week.includes(item.key + '') }" v-for="item in days" :key="item.key">
                <checkbox :value="item.key" />
                {{ item.value }}
              </label>
            </checkbox-group>
          </view>
        </swiper-item>
        <swiper-item @touchmove.stop>
          <view class="btn-check-group padding">
            <checkbox-group @change="checkboxChange" class="flex justify-between" style="flex-wrap: wrap;" id="hobby">
              <label class="btn-check-label margin" :class="{ 'bg-cyan': params.hobby.includes(item.id + '') }" v-for="item in interests" :key="item.id">
                <checkbox :value="item.id" />
                {{ item.name }}
              </label>
            </checkbox-group>
            <view class="margin">
              <input v-model="params.hobbyOther" placeholder="输入其它兴趣内容（选填）" class="margin-top input-border" />
            </view>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="VerticalBox">
            <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" :style="'height:calc(100vh - 70px - 90px - ' + topHeader + 'px)'">
              <view class="cu-item" :class="index == tabCur ? 'text-green cur' : ''" v-for="(item, index) in attends" :key="index" @tap="TabSelect" :data-id="index">
                {{ weekList[index] }}
              </view>
            </scroll-view>
            <scroll-view
              class="VerticalMain padding-sm"
              scroll-y
              scroll-with-animation
              :style="'height:calc(100vh - 70px - 90px - ' + topHeader + 'px)'"
              :scroll-into-view="'main-' + mainCur"
              @scroll="VerticalMain"
            >
              <radio-group @change="changeClass" style="width: 100%;" v-for="(attend, i) in attends" :key="i">
                <view class="cu-item bg-white padding margin-bottom-sm" v-for="(item, index) in attend.list" v-show="i == mainCur" :key="index" :id="'main-' + index">
                  <view class="cu-bar solid-bottom">
                    <view>
                      <label>
                        <view class="flex justify-between align-center">
                          <view
                            ><text>{{ item.attend_name }}</text></view
                          >
                          <view>
                            <radio :value="item.class_attend_id" :checked="checked.includes(item.class_attend_id)" class="cyan" style="transform: scale(0.7);" />
                          </view>
                        </view>
                      </label>
                    </view>
                  </view>
                  <view v-if="item.prop.length > 0">
                    <checkbox-group class="checkbox-group margin-top-xs" :data-id="item.class_attend_id" @change="propChange">
                      <label v-for="prop in item.prop" :key="prop.id">
                        <view>
                          <checkbox
                            :value="prop.id"
                            class="cyan"
                            :checked="checked_props[mainCur].class_attend_id === item.class_attend_id && checked_props[mainCur].prop.includes(prop.id + '')"
                            style="transform: scale(0.7);"
                          />{{ prop.name }}<text>￥{{ prop.money }}</text>
                        </view>
                      </label>
                    </checkbox-group>
                  </view>
                </view>
              </radio-group>
            </scroll-view>
          </view>
          <view class="static shadow">
            <view class="static-order flex">
              <shop-cart :class_attend_id="attend_id" @changeDisableBtn="changeDisableBtn"></shop-cart>
              <button class="cu-btn round bg-student text-white margin-left-xs" @tap="addCart">报课</button>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import { _intelligentDates, _intelligentInterests, _intelligentCourses, _joinShops } from '@/api/course'
import shopCart from '@/components/shop-cart.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    shopCart
  },
  data() {
    return {
      topHeader: this.globalCustomBarHeight,
      numList: [
        {
          name: '选周期'
        },
        {
          name: '选兴趣'
        },
        {
          name: '确认选课'
        }
      ],
      cur: 0,
      days: [], //周期
      interests: [], //兴趣
      attends: [], //课程
      weekList: [], //日期
      params: {
        week: [],
        hobby: [],
        student_id: '',
        hobbyOther: ''
      },
      tabCur: 0,
      mainCur: 0,
      verticalNavTop: 0,
      checked: [], // 选中
      checked_props: [], // 选中工具
      attend_id: 0, // 添加成功课程
      disableBtn: false, // 避免多次重复点击
      action: 'stopmove'
    }
  },
  computed: {
    ...mapGetters(['kid'])
  },
  onLoad(options) {
    const id = decodeURIComponent(options.package_id)
    this.package_id = id
    this.params.student_id = this.kid
    this.init()
  },
  onShow() {
    this.disableBtn = false
  },
  methods: {
    init() {
      this.getDateConfig()
      this.getHobbyConfig()
    },
    getDateConfig() {
      _intelligentDates().then(res => {
        this.days = res.data
      })
    },
    getHobbyConfig() {
      _intelligentInterests().then(res => {
        this.interests = res.data
      })
    },
    get_options() {
      const params = Object.assign({}, this.params)
      params.week = params.week.join(',')
      params.hobby = params.hobby.join(',')
      _intelligentCourses(params).then(res => {
        this.attends = res.data
        Object.keys(this.attends).forEach(item => {
          this.$set(this.checked_props, item, { prop: [] })
        })
        this.weekList = this.attends.map(item => item.week)
      })
    },
    checkboxChange(e) {
      const type = e.target.id
      const values = e.detail.value
      switch (type) {
        case 'week':
          this.params.week = values
          break
        case 'hobby':
          this.params.hobby = values
          break
        default:
          console.log('error')
      }
    },
    changeStep(index) {
      if (index === 1 && this.params.week.length < 1) {
        uni.showToast({ title: '请先选择周期', icon: 'none' })
        return false
      }
      if (index === 2 && this.params.hobby.length < 1) {
        uni.showToast({ title: '请先选择兴趣', icon: 'none' })
        return false
      }
      const step = Math.abs(index - this.cur)
      if (step > 1) return false
      this.cur = index
    },
    swipeChange(e) {
      this.cur = e.detail.current
      if (this.cur === 2) {
        this.get_options()
      }
    },
    changeDisableBtn() {
      this.disableBtn = true
    },
    changeClass(e) {
      const value = Number(e.detail.value)
      this.checked[this.mainCur] = value
      this.$set(this.checked, this.mainCur, value)
      this.$set(this.checked_props, this.mainCur, { class_attend_id: value, prop: [] })
    },
    propChange(e) {
      const parentId = e.target.dataset.id
      const values = e.detail.value
      if (!this.checked.includes(parentId)) {
        this.$set(this.checked, this.mainCur, parentId)
      }
      const item = { class_attend_id: parentId, prop: values }
      this.$set(this.checked_props, this.mainCur, item)
    },
    TabSelect(e) {
      this.tabCur = e.currentTarget.dataset.id
      this.mainCur = e.currentTarget.dataset.id
      this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
    },
    addCart() {
      if (this.disableBtn) return false
      this.disableBtn = true
      const _self = this
      const list = this.checked_props
        .filter(item => item.class_attend_id)
        .map(item => {
          return {
            class_attend_id: item.class_attend_id,
            prop: item.prop.join(','),
            student_id: this.kid
          }
        })
      if (list.length < 1) {
        uni.showToast({ title: '请先选择课程', icon: 'none' })
        this.disableBtn = false
        return false
      }
      _joinShops({ list }).then(res => {
        if (res.code === 1) {
          _self.globalNavigateTo('classCart')
        } else {
          this.disableBtn = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
}
.main {
  .swipe {
    height: 100%;
  }
}
.btn-check-group {
  checkbox {
    display: none;
  }
  radio {
    display: none;
  }
  label {
    display: inline-block;
    margin-right: 10rpx;
    position: relative;
    padding: 10rpx 30rpx;
    line-height: 30px;
    border-radius: 100rpx;
    flex-wrap: nowrap;
    border: 1px solid #eee;
  }
}
.input-border {
  height: 80rpx;
  border-radius: 4px;
  border: 1px solid #eee;
  &:focus {
    border: 1px solid #5fd0e4;
  }
}

::v-deep radio.disabled::before,
::v-deep checkbox.disabled::before {
  color: #e1e1e1 !important;
}
.static {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: #fff;
  height: 70px;
  align-items: center;
  padding: 0 0.8rem;
  justify-content: flex-end;
}
.fixed {
  position: fixed;
  z-index: 99;
}
.VerticalNav.nav {
  width: 200upx;
  white-space: initial;
}

.VerticalNav.nav .cu-item {
  width: 100%;
  text-align: center;
  background-color: #fff;
  margin: 0;
  border: none;
  height: 50px;
  position: relative;
}

.VerticalNav.nav .cu-item.cur {
  background-color: #f1f1f1;
}

.VerticalNav.nav .cu-item.cur::after {
  content: '';
  width: 8upx;
  height: 30upx;
  border-radius: 10upx 0 0 10upx;
  position: absolute;
  background-color: currentColor;
  top: 0;
  right: 0upx;
  bottom: 0;
  margin: auto;
}

.VerticalBox {
  display: flex;
}

.VerticalMain {
  background-color: #f1f1f1;
  flex: 1;
}
</style>