parentNew/src/pages/class/gift.vue

<template>
  <view class="page" style="background-color: #fff;">
    <cu-custom :isBack="true" title="智能报课"></cu-custom>
    <view class="steps solid-bottom flex justify-between">
      <!-- <view class="text-center"><text class="text-red">点击切换下一步</text></view>
      <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 v-for="(item, index) in stepList" :key="index" class="step flex-sub text-center" :class="{ cur: cur === index }" @tap="changeStep(index)">{{ item.name }}</view>
    </view>
    <view class="main" :style="[{ height: 'calc(100vh - 40px - ' + 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-light-green': params.week.includes(item.key + '') }" v-for="item in days" :key="item.key">
                <checkbox :value="item.key" />
                {{ item.value }}
              </label>
            </checkbox-group>
          </view>
          <view class="flex next-step padding-lr" style="width: 100%;">
            <button class="cu-btn round lg bg-light-green flex-sub" @tap="changeStep(1)">下一步</button>
          </view>
        </swiper-item>
        <swiper-item @touchmove.stop>
          <view class="btn-check-group padding">
            <view class="margin">
              <input v-model="serachKey" placeholder="输入兴趣内容  如:画画" class="margin-top input-border" @confirm="search" />
              <view class="flex margin-top-sm">
                <view v-for="(h, i) in params.hobbyOther" :key="i" class="hobby"
                  >{{ h }}
                  <text class="cuIcon-close del-hobby text-red" @tap="delHobby(h)"></text>
                </view>
              </view>
            </view>
            <view class="interests" v-if="interests.length > 0">
              <img src="/static/imgs/intelligent-bg.png" mode="widthFix" alt="" />
              <checkbox-group id="hobby">
                <view
                  v-for="(item, index) in interests"
                  :key="index"
                  :style="[{ top: index * 80 + 'rpx', left: (index % 2) * 320 + index * 40 + 'rpx' }]"
                  @tap="chooseInterest(item)"
                  class="interest"
                >
                  <label
                    class="btn-check-label margin"
                    :style="{
                      color: params.hobbyOther.includes(item) ? '#fff' : '#000',
                      backgroundColor: params.hobbyOther.includes(item) ? colors[index % 4] : '#f0f0f0'
                    }"
                  >
                    <checkbox :value="item" />
                    {{ item }}
                  </label>
                  <text class="cuIcon-title" :style="[{ color: colors[index % 4] }]"></text>
                </view>
              </checkbox-group>
            </view>
          </view>
          <view class="flex next-step padding-lr" style="width: 100%;">
            <button class="cu-btn round lg bg-light-green flex-sub margin-right-sm" @tap="changeStep(0)">上一步</button>
            <button class="cu-btn round lg bg-light-green flex-sub" @tap="changeStep(2)">下一步</button>
          </view>
        </swiper-item>
        <swiper-item>
          <view v-if="attends.length === 0" class="padding text-center text-lg">
            没有找到相关课程！
          </view>
          <view v-else>
            <view class="VerticalBox">
              <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" :style="'height:calc(100vh - 70px - 40px - ' + 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 - 40px - ' + 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="flex justify-between" style="width: 100%;">
                <view>
                  <button class="cu-btn round line-grey" @tap="changeStep(1)">
                    <text class="cuIcon-back lg margin-right-sm"></text>
                    重选
                  </button>
                </view>
                <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>
            </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,
      stepList: [
        {
          name: '选周期'
        },
        {
          name: '选兴趣'
        },
        {
          name: '确认选课'
        }
      ],
      cur: 0,
      serachKey: '', //关键字搜素
      keys: [], //兴趣选项
      days: [], //周期
      interests: [], //兴趣
      attends: [], //课程
      weekList: [], //日期
      params: {
        week: [],
        hobby: [],
        student_id: '',
        hobbyOther: []
      },
      tabCur: 0,
      mainCur: 0,
      verticalNavTop: 0,
      colors: ['#0CAAF4', '#082FCC', '#FDC534', '#09E294'],
      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
        const choose = res.data[5]
        this.params.hobby = [choose.id]
        this.keys = choose.names
      })
    },
    search() {
      this.interests = this.keys.filter(item => item.includes(this.serachKey))
    },
    get_options() {
      const params = Object.assign({}, this.params)
      params.week = params.week.join(',')
      params.hobby = params.hobby.join(',')
      params.hobbyOther = params.hobbyOther.join(',')
      _intelligentCourses(params).then(res => {
        this.attends = res.data
        this.checked = [] //初始化选项
        Object.keys(this.attends).forEach(item => {
          const class_attend_id = this.attends[item].list[0].class_attend_id
          const prop = this.attends[item].list[0].prop.length > 0 ? [this.attends[item].list[0].prop[0].id + ''] : []
          this.$set(this.checked, item, class_attend_id)
          this.$set(this.checked_props, item, { class_attend_id: class_attend_id, prop: prop })
        })
        this.weekList = this.attends.map(item => item.week)
      })
    },
    delHobby(key) {
      this.params.hobbyOther = this.params.hobbyOther.filter(item => item != key)
    },
    chooseInterest(key) {
      if (this.params.hobbyOther.includes(key)) {
        this.params.hobbyOther = this.params.hobbyOther.filter(item => item != key)
      } else {
        this.params.hobbyOther.push(key)
      }
    },
    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: [] })
      console.log(this.checked_props)
    },
    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%;
  }
}
.step {
  position: relative;
  padding: 10px 0;
  &.cur {
    color: #09e294;
    &:before {
      content: '';
      position: absolute;
      bottom: 0;
      background-color: #09e294;
      width: 30px;
      height: 2px;
      transform: translateX(25%);
    }
  }
}
.hobby {
  position: relative;
  margin-left: 20rpx;
  .del-hobby {
    position: absolute;
    top: -6rpx;
    right: -20rpx;
  }
}
.interests {
  position: relative;
  .interest {
    position: absolute;
  }
}
.next-step {
  position: fixed;
  bottom: 60px;
}
.btn-check-group {
  checkbox {
    display: none;
  }
  radio {
    display: none;
  }
  label {
    display: inline-block;
    margin-right: 10rpx;
    position: relative;
    padding: 10rpx 40rpx;
    // 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>