guosen-ldt-mall/pages/activity/activity.vue

<template>
	<view class="safe-area-inset-bottom">
		<u-sticky>
			<view class="flex">
				<view class="" style="width: 85%;">
					<u-tabs active-color="#FF9447" :list="list" :is-scroll="false" :current="current" @change="change">
					</u-tabs>
				</view>
				<view class="bg-white center" style="width: 15%;">
					<image @click="checkAll" style="width: 50rpx;height: 50rpx;" src="../../static/icon/setting.png"></image>
				</view>
			</view>
		</u-sticky>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<card @operate="operate" :current="current" @checkboxChange="checkboxChange" @checkAllChange="checkAllChange" :cardList="dataList" ref="cardRef"></card>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	import card from "./comps/card.vue"
	export default {
		mixins: [MescrollMixin],
		components:{
			card
		},
		data() {
			return {
				list: [{
					name: '发起',
					value:1
				}, {
					name: '可参加',
					value:2
				},
				{
					name:'已参加',
					value:3
				}],
				current: 0,
				dataList:[]
			}
		},
		onShow() {
			this.$util.reload(this.mescroll)
		},
		methods:{
			checkboxChange(e){
				let index=e.name
				this.dataList[index].checked=e.value
				this.$forceUpdate()
			},
			checkAllChange(e){
				this.dataList.forEach(item=>{
					item.checked = e.value
				})
				this.$forceUpdate()
			},
			change(index) {
				this.current = index
				this.mescroll.resetUpScroll();
			},
			checkAll(){
				if (!this.$isEmpty(this.dataList) && this.current !=1) {
					this.$refs.cardRef.showCheckAll()	
				}
			},
			operate(){
				if (this.current==0) {
					this.stop()
				}else if (this.current==2) {
					this.exit()
				}
			},
			exit(){
				let ids= this.dataList.filter(item=>item.checked==true).map(item=>item.id)
				if (this.$isEmpty(ids)) {
					this.$u.toast('至少选择一项活动')
					return
				}
				this.$dialog.showModal("确定退出？").then(res=>{
					let operateList=[]
					ids.forEach(item=>{
						let tmp={
							activityId:item,
							joinType:1,
							joinId:this.vuex_mallId
						}
						operateList.push(tmp)
					})
					this.$api.activity.exit(operateList).then(res=>{
						if (res.success) {
							this.$refs.cardRef.hideCheckAll()
							this.mescroll.resetUpScroll();
						}
					})
				})
			},
			stop(){
				let tmp=this.$u.deepClone(this.dataList)
				let operateList= tmp.filter(item=>item.checked==true)
				if (this.$isEmpty(operateList)) {
					this.$u.toast('至少选择一项活动')
					return
				}
				this.$dialog.showModal('确定停用活动？').then(res=>{
					operateList.forEach(item=>{
						item.auditStatus=3
					})
					this.$api.activity.stop(operateList).then(res=>{
						if (res.success) {
							this.$refs.cardRef.hideCheckAll()
							this.mescroll.resetUpScroll();
						}
					})
				})
			},
			downCallback(){
				this.$refs.cardRef.hideCheckAll()
				this.mescroll.resetUpScroll();
			},
			upCallback(mescroll) {
				let params = {
					selectType:this.list[this.current].value,
					mallId:this.vuex_mallId,
					current:mescroll.num,
					size:mescroll.size,
				}
				try {
					this.$api.activity.list(params).then(res => {
						let data = res.data.records
						let total = res.data.total
						mescroll.endBySize(data.length, total);
						if (mescroll.num == 1) this.dataList = []; //如果是第一页需手动制空列表
						this.dataList = this.dataList.concat(data); //追加新数据
						this.dataList.forEach(item=>{
							item.checked=false
							item.labels=item.labelNames.split(',')
						})
					})
				} catch (e) {
					this.mescroll.endErr()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>