由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧。有点多
效果如图
<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 下列表侧滑操作实例代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
© 版权声明
THE END
暂无评论内容