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>
       <https://img.qb5200.com/download-x/dd>
       <dt :class="item.status == 3 ? 'txt-red': item.status == 0 ? 'txt-blue' : ''">{{item.status == 3 ? '进行中': item.status == 1 ? '已结束': item.status == 0 ? '待启用' : ''}}<https://img.qb5200.com/download-x/dt>
      <https://img.qb5200.com/download-x/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/rouletterhttps://img.qb5200.com/download-x/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('https://img.qb5200.com/download-x/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>