Untitled.gif

注意

• 列表长度不超过一屏适用
• 150为列表到screenTop之间多余到距离（自定义导航栏的高度）

<!--created by allen on 2018/05/29-->

<template>
  <div class="ud-good-style">
    <navigation-bar title="商品分类" :useDefaultReturn="false" @wxcMinibarLeftButtonClicked="goBack"></navigation-bar>
    <scroller class="goods-style-page" :show-scrollbar="false">
      <div style="height: 20px"></div>
      <div v-for="(item, index) in goodsStyle" class="list" @click="goSeconfClass(item)">
        <div :ref="'item' + index"
             :style="{opacity: moveIndex == index ? 0 : 1, borderBottomWidth: index == goodsStyle.length -1 ? '0px' : '2px'}" class='listCell'>
          <div class="listCell_left">
            <text>{{item.name}}</text>
          </div>
          <div class="listCell_right" v-if="goodsStyle.length>1" @panstart="panStart($event,index)" @panmove="panMove($event,index)" @panend="panEnd($event,index)">
            <text class="iconfont right_icon">&#xe751;</text>
          </div>
            <div class="listCell_right" v-else>
                <text class="iconfont right_icon">&#xe751;</text>
            </div>
        </div>
      </div>
      <div v-if='Move' class="sub-box" :style="sub">
        <div class='listCell'>
          <div class="listCell_left">
            <text>{{chooseItem.name}}</text>
          </div>
          <div class="listCell_right">
            <text class="iconfont right_icon">&#xe751;</text>
          </div>
        </div>
      </div>
    </scroller>
  </div>

</template>

<script>
  import { getFirstClassList, categorySort } from '../services/goods'
  import { Utils } from 'weex-ui'
  export default {
    components: {
      NavigationBar: require('../common/navigationBar')
    },
    data:()=>({
      goodsStyle:[],
      Move:false,
      startIndex: '',
      sub: {
        top: 0,
        left: 0,
      },
      moveIndex: null,
      chooseItem: ''
    }),
    created() {
      this.getFirstCategoryList()
    },
    methods: {
      goBack () {
        this.$router.setBackParams({refresh: true})
        this.$router.back()
      },
      panStart (e,index) {
        this.Move = true
        this.sub = {
          top: e.changedTouches[0].screenY - 50
        }
        this.moveIndex = index
        this.startIndex = index
        this.chooseItem = this.goodsStyle[index]
      },
      panMove(e,index){
        if(this.goodsStyle.length > 1) {
          let moveIndex = Math.round((e.changedTouches[0].screenY-150)/100)
          console.log(moveIndex)
          let item = this.goodsStyle[this.moveIndex]
          if (moveIndex != this.moveIndex && moveIndex < this.goodsStyle.length && moveIndex >= 0) {
            this.goodsStyle.splice(this.moveIndex, 1)
            this.goodsStyle.splice(moveIndex, 0, item)
            this.moveIndex = moveIndex
          }
          let top = e.changedTouches[0].screenY - 50
          let h = Utils.env.getScreenHeight()
          this.sub = {
            top: top <= 0 ? 0 : top > h ? h : top
          }
        }
      },
      panEnd(e,index){
          let moveAt = 0

          if (this.moveIndex > index ) { //下移动

              moveAt = this.goodsStyle[this.moveIndex -1 ].gc_id

          } else if (this.moveIndex < index){ //上移动

              moveAt = this.goodsStyle[this.moveIndex + 1 ].gc_id

          }else{

            moveAt = this.goodsStyle[this.moveIndex].gc_id

          }

        this.Move = false
          if (moveAt === 0 ){
              return false
          }
          this.moveIndex = null
        categorySort({
          move_at: moveAt,
          category: this.chooseItem.gc_id
        }, data => {
            console.log('成功！')
        })
      },
      //获得一级分类
      getFirstCategoryList () {
        getFirstClassList({
          state: 1
        }, data => {
          if (data.data.length > 0) {
            this.goodsStyle = data.data
          }
        })
      },
      goSeconfClass (item) {
        this.$router.open({
          name: 'goodsStyleSec',
          params: {
            category: item
          }
        })
      }
    }
  }
</script>

<style src="../common.css"></style>
<style>
  .goods-style-page{
    padding-bottom: 20px;
  }
  .list{
    background-color: rgba(255,45,75,0.3);
    /*padding-left: 26px;*/
    /*padding-right: 26px;*/
  }
  .listCell{
    width:750px;
    padding-left: 26px;
    padding-right: 26px;
    justify-content: space-between;
    flex-direction: row;
    border-bottom-width: 2px;
    border-bottom-color: #eeeeee;
    background-color: #ffffff;
  }
  .listCell_left{
    flex: 1;
    height: 100px;
    justify-content: center;
  }
  .listCell_right{
    height: 100px;
    width: 40px;
    justify-content: center;
    align-items: center;
  }
  .right_icon{
    color:#D6D9DA;
    text-align: center;
  }
  .iconfont{
    font-family: iconfont;
  }
  .sub-box{
    position: fixed;
    width: 750px;
  }
</style>