vue 下列表侧滑操作实例代码详解

<template>
 <div class="lottery-management-wrapper">
  <ul>
   <li class="lottery-management-list-wrapper">
    <div class="lottery-management-list" v-for="(item , index) in activitylistdata">
     <div class="lottery-management-list-left" @click="detailoftheactivity(item)">
      <dl>
       <dd>
        <h3>{{item.activityname}}</h3>
        <p>活动时间：{{item.begintime}}至{{item.endtime}}</p>
       </dd>
       <dt :class="item.status == 3 ? 'txt-red': item.status == 0 ? 'txt-blue' : ''">{{item.status == 3 ? '进行中': item.status == 1 ? '已结束': item.status == 0 ? '待启用' : ''}}</dt>
      </dl>
     </div>
     <div class="lottery-management-list-right">
      <a @click="startactivityalert = true;currentitem = item;currentindex = index" v-if="item.status == 0">启用活动</a>
      <span @click="delactivityalert = true;currentitem = item;currentindex = index" v-if="item.status == 1">删除活动</span>
      <span @click="stopactivityalert = true;currentitem = item;currentindex = index" v-if="item.status == 3 || item.status == 0">结束活动</span>
     </div>
    </div>
   </li>
  </ul>
  <div class="add-wrapper" @click="addawardactivity">
   <span class="iconfont icon-tianjia1"></span>
   <span class="text">新增活动</span>
  </div>
  <h4>商户员工账号只有活动查看权限，没有活动操作权限</h4>
  <transition name="fade">
   <div class="mask-wrapper"
      v-show="delactivityalert"
      @touchmove.prevent>
    <tipsbox title="操作提示"
         text1="是否删除当前活动"
         button1="取消"
         button2="确定"
         @confirm="delactivity"
         @cancel="delactivityalert = false">
    </tipsbox>
   </div>
  </transition>
  <transition name="fade2">
   <div class="mask-wrapper"
      v-show="stopactivityalert"
      @touchmove.prevent>
    <tipsbox title="操作提示"
         text1="是否停止当前活动"
         button1="取消"
         button2="确定"
         @confirm="stopactivity"
         @cancel="stopactivityalert = false">
    </tipsbox>
   </div>
  </transition>
  <transition name="fade3">
   <div class="mask-wrapper"
      v-show="startactivityalert"
      @touchmove.prevent>
    <tipsbox title="操作提示"
         text1="是否启用当前活动"
         button1="取消"
         button2="确定"
         @confirm="startactivity"
         @cancel="startactivityalert = false">
    </tipsbox>
   </div>
  </transition>
 </div>
</template>
<script>
 import tipsbox from 'components/tipsbox/tipsbox';
 import {configs} from 'common/js/config.js';
 import {baseajaxparam, baseajaxerr} from 'common/js/publicfn.js';
 const activitylistapi = configs.baseapi + '/marketing/rouletter/activitylist';
 const overactivityapi = configs.baseapi + '/marketing/rouletter/overactivity';
 const delactivityapi = configs.baseapi + '/marketing/rouletter/delactivity';
 const startactivityapi = configs.baseapi + '/marketing/rouletter/startactivity';
 export default {
  data () {
   return {
    delactivityalert: false,
    stopactivityalert: false,
    startactivityalert: false,
    activitylistdata: [],
    currentitem: null,
    currentindex: null
   };
  },
  methods: {
   getactivitylist () {
    let data = baseajaxparam(this);
    this.$http.jsonp(activitylistapi, {params: data}).then((res) => {
     if (res.body.code === 0) {
      this.activitylistdata = res.body.data;
      this.setslide();
     } else {
      baseajaxerr(this, res);
     }
    }).catch(function (err) {
     alert('服务器错误:' + err.status);
     console.log(err);
    });
   },
   setslide () {
    this.$nexttick(() => {
     let list = document.getelementsbyclassname('lottery-management-list');
     if (list) {
      if (this.currentindex !== null) {
       list[this.currentindex].firstelementchild.style.marginleft = '0';
      }
      for (let i = 0; i < list.length; i++) {
       (() => {
        let start = 0;
        list[i].ontouchstart = function (e) {
         start = e.touches[0].pagex;
        };
        list[i].ontouchmove = function () {
         list[i].ontouchend = function (e) {
          let end = e.changedtouches[0].pagex;
          let rightwidth = list[i].lastelementchild.offsetwidth;
          if (end < start) {
           list[i].firstelementchild.style.marginleft = -rightwidth + 'px';
          }
          if (end > start) {
           list[i].firstelementchild.style.marginleft = '0';
          }
         };
        };
       })(i);
      }
     }
    });
   },
   // 查看详情
   detailoftheactivity (item) {
    this.$router.push('/detailoftheactivity?activityid=' + item.activityid);
   },
   // 删除活动
   delactivity () {
    if (this.$store.state.roleid !== '0' && this.$store.state.roleid !== 'rol197001010800007e4b5ce2fe28308' && this.$store.state.roleid !== 'rol197001010800004ca4238a0b92382') {
     if (!this.$store.state.authlist['aut20180705181442eqbfspyr7htokji']) {
      this.$store.commit('popset', {tips: '无权限操作', status: 1, time: 1500});
      return;
     }
    }
    this.delactivityalert = false;
    let data = baseajaxparam(this);
    data.activityid = this.currentitem.activityid;
    this.$http.jsonp(delactivityapi, {params: data}).then((res) => {
     if (res.body.code === 0) {
      this.$store.commit('popset', {tips: '删除动成功', status: 0, time: 1500});
      this.getactivitylist();
     } else {
      baseajaxerr(this, res);
     }
    }).catch(function (err) {
     alert('服务器错误:' + err.status);
     console.log(err);
    });
   },
   // 停止活动
   stopactivity () {
    if (this.$store.state.roleid !== '0' && this.$store.state.roleid !== 'rol197001010800007e4b5ce2fe28308' && this.$store.state.roleid !== 'rol197001010800004ca4238a0b92382') {
     if (!this.$store.state.authlist['aut20180705181442eqbfspyr7htokji']) {
      this.$store.commit('popset', {tips: '无权限操作', status: 1, time: 1500});
      return;
     }
    }
    this.stopactivityalert = false;
    let data = baseajaxparam(this);
    data.activityid = this.currentitem.activityid;
    this.$http.jsonp(overactivityapi, {params: data}).then((res) => {
     if (res.body.code === 0) {
      this.$store.commit('popset', {tips: '结束活动成功', status: 0, time: 1500});
      this.getactivitylist();
     } else {
      baseajaxerr(this, res);
     }
    }).catch(function (err) {
     alert('服务器错误:' + err.status);
     console.log(err);
    });
   },
   // 启用活动
   startactivity () {
    if (this.$store.state.roleid !== '0' && this.$store.state.roleid !== 'rol197001010800007e4b5ce2fe28308' && this.$store.state.roleid !== 'rol197001010800004ca4238a0b92382') {
     if (!this.$store.state.authlist['aut20180705181442eqbfspyr7htokji']) {
      this.$store.commit('popset', {tips: '无权限操作', status: 1, time: 1500});
      return;
     }
    }
    this.startactivityalert = false;
    let data = baseajaxparam(this);
    data.activityid = this.currentitem.activityid;
    this.$http.jsonp(startactivityapi, {params: data}).then((res) => {
     if (res.body.code === 0) {
      this.$store.commit('popset', {tips: '启用活动成功', status: 0, time: 1500});
      this.getactivitylist();
     } else {
      baseajaxerr(this, res);
     }
    }).catch(function (err) {
     alert('服务器错误:' + err.status);
     console.log(err);
    });
   },
   addawardactivity () {
    if (this.$store.state.roleid !== '0' && this.$store.state.roleid !== 'rol197001010800007e4b5ce2fe28308' && this.$store.state.roleid !== 'rol197001010800004ca4238a0b92382') {
     if (!this.$store.state.authlist['aut20180705181442eqbfspyr7htokji']) {
      this.$store.commit('popset', {tips: '无权限操作', status: 1, time: 1500});
      return;
     }
    }
    this.$router.push('addawardactivity');
   }
  },
  created () {
   this.getactivitylist();
  },
  components: {
   tipsbox
  }
 };
</script>
<style lang="stylus" rel="stylesheet/stylus">
 @import '../../../common/stylus/mixin'
 .lottery-management-wrapper {
  width :100%;
  position :absolute;
  background-color :#ecf0f3;
  min-height :100%;
  .lottery-management-list-wrapper {
   width :100%;
   overflow hidden;
   .lottery-management-list {
    background-color :#fff;
    margin-bottom cal(10);
    overflow :hidden;
    width :200%;
    .lottery-management-list-left {
     width :cal(750);
     float :left;
     transition: margin-left .4s;
     dl {
      overflow :hidden;
      height :cal(128);
      dd {
       float left;
       width :80%;
       h3 {
        font-size :cal(28);
        color: #4a4a4a;
        margin:cal(32) 0 0 cal(50);
       }
       p {
        font-size : cal(18)
        color:#4a4a4a;
        margin:cal(16) 0 0 cal(50);
       }
      }
      dt {
       float :left;
       width :20%;
       color: #9b9b9b;
       font-size :cal(26);
       line-height :cal(128);
      }
      .txt-red {
       color:#d0021b;
      }
      .txt-blue {
       color:#4a90e2;
      }
     }
    }
    .lottery-management-list-right {
     float :left;
     overflow: hidden;
     font-size :cal(24);
     line-height :cal(128);
     color :#ffffff;
     text-align :center;
     a {
      float: left;
      background-color :#70aef6;
      width :cal(190);
      color :#ffffff;
     }
     span {
      float: left;
      width :cal(128);
      background-color :#fe3a32;
     }
    }
   }
  }
  .add-wrapper {
   height: cal(100)
   box-sizing: border-box
   padding-top: cal(24)
   margin-bottom: cal(72)
   background: #fff
   text-align: center
   font-size: 0
   margin-top :cal(20)
   .icon-tianjia1 {
    color: #fe6f3f
    font-size: cal(54)
    vertical-align: top
    margin-right: cal(12)
   }
   .text {
    line-height: cal(60)
    vertical-align: top
    color: #fe6f3f
    font-size: cal(30)
   }
  }
  h4 {
   color: #d0021b;
   font-size :cal(24);
   text-align: center;
   margin-bottom :cal(100);
  }
  .mask-wrapper {
   position: fixed
   left: 0
   right: 0
   bottom: 0
   top: 0
   background: rgba(0,0,0,.5)
   &.fade-enter-active, &.fade-leave-active {
    transition: all 0.2s linear
   }
   &.fade-enter,&.fade-leave-active{
    opacity: 0
   }
   &.fade2-enter-active, &.fade2-leave-active {
    transition: all 0.2s linear
   }
   &.fade2-enter,&.fade2-leave-active{
    opacity: 0
   }
   &.fade3-enter-active, &.fade3-leave-active {
    transition: all 0.2s linear
   }
   &.fade3-enter,&.fade3-leave-active{
    opacity: 0
   }
  }
 }
</style>