由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧。有点多效果如图<templ
由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧。有点多
效果如图
<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>总结
以上所述是小编给大家介绍的vue 下列表侧滑操作实例代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
vue 列表侧滑 vue 侧滑