提交

pages/activity/activity.vue

@@ -0,0 +1,137 @@
+<template>
+	<view class="safe-area-inset-bottom">
+		<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==1) {
+					this.join()
+				}else if (this.current==2) {
+					this.exit()
+				}
+			},
+			
+			exit(){
+				this.$dialog.showModal("确定退出？").then(res=>{
+					let ids= this.dataList.filter(item=>item.checked==true).map(item=>item.id)
+					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(){
+				this.$dialog.showModal('确定停用活动？').then(res=>{
+					let tmp=this.$u.deepClone(this.dataList)
+					let operateList= tmp.filter(item=>item.checked==true)
+					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 = {
+					auditStatus:1,
+					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>

pages/activity/comps/card.vue

@@ -0,0 +1,151 @@
+<template>
+	<view class="">
+		<view class="card" style="display: flex;" v-for="(item,index) in cardList" :key="index">
+			<view v-if="checkAllShow" class="center" style="width: 10%;background-color: #F1F1F1;">
+				<u-checkbox shape="circle" @change="checkboxChange" v-model="item.checked" :name="index"></u-checkbox>
+			</view>
+			<navigator :url="`/pages/activity/detail?detail=${JSON.stringify(item)}&current=${current}`" hover-class="none" class="" >
+				<image class="bg" :src="item.pic"></image>
+				<view class="content">
+					<text class="text-cut-1 title">{{item.title}}</text>
+					<view class="cu-tag btn-bg-color round sm tag" v-for="(item1,index1) in item.labels" :key="index1">
+						{{item1}}
+					</view>
+		
+					<view class="time">
+						<text>报名截至时间：{{item.endTime}}</text>
+					</view>
+				</view>
+				<image v-if="item.auditStatus==4" class="status" src="@/static/icon/await.png" mode="widthFix"></image>
+				<image v-if="item.auditStatus==1" class="status" src="@/static/icon/pass.png" mode="widthFix"></image>
+				<image v-if="item.auditStatus==2" class="status" src="@/static/icon/fail.png" mode="widthFix"></image>
+			</navigator>
+		</view>
+		
+		<block v-if="checkAllShow">
+			<view class="" style="height: 110rpx;"></view>
+			<view class="bottom-bar" >
+				<view class="left">
+					<u-checkbox @change="checkAllChange" shape="circle" v-model="checkAll" >全选</u-checkbox>
+				</view>
+				<view @click="operate" class="btn-bg-color center right">
+					<text v-if="current==0">结束活动</text>
+					<text v-if="current==1">参加活动</text>
+					<text v-if="current==2">退出活动</text>
+				</view>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	export default{
+		props:{
+			cardList:Array,
+			current:Number
+		},
+		data(){
+			return {
+				checkAllShow:false,
+			}
+		},
+		computed:{
+			checkAll:{
+				get(){
+					let tmpList= this.cardList.filter(item=>item.checked == true)
+					if (tmpList.length == this.cardList.length) {
+						return true
+					}
+					return false
+				},
+				set(){
+					
+				}
+			}
+		},
+		methods: {
+			showCheckAll(){
+				this.checkAllShow=!this.checkAllShow
+			},
+			hideCheckAll(){
+				this.checkAllShow=false
+			},
+			checkboxChange(e) {
+				this.$emit('checkboxChange',e)
+			},
+			checkAllChange(e){
+				this.$emit('checkAllChange',e)
+			},
+			operate(){
+				this.$emit('operate')
+			}
+		}
+		
+	}
+</script>
+
+<style lang="scss" scoped>
+	.bottom-bar {
+		position: fixed;
+		bottom: 0;
+		z-index: 99;
+		width: 100%;
+		background-color: #FFFFFF;
+		height: 100rpx;
+		display: flex;
+	
+		.left {
+			width: 70%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			padding-left: 30rpx;
+		}
+	
+		.right {
+			width: 30%;
+		}
+	}
+	
+	.card {
+		overflow: hidden;
+		position: relative;
+		background-color: #FFFFFF;
+		margin: 20rpx;
+		border-radius: 20rpx;
+	
+		.bg {
+			border-radius: 20rpx 20rpx 0 0;
+			width: 100vw;
+			height: 250rpx;
+		}
+	
+		.status {
+			position: absolute;
+			right: 10rpx;
+			bottom: 10rpx;
+			width: 100rpx;
+		}
+	
+		.content {
+			padding: 10rpx 20rpx;
+	
+			.title {
+				font-weight: 800;
+				font-size: 30rpx;
+			}
+	
+			.tag {
+				padding: 20rpx 32rpx;
+				margin: 20rpx 20rpx 20rpx 0;
+			}
+	
+			.time {
+				font-size: 24rpx;
+				margin-bottom: 20rpx;
+			}
+	
+	
+		}
+	}
+</style>

pages/activity/detail.vue

@@ -0,0 +1,318 @@
+<template>
+	<view class="safe-area-inset-bottom">
+		<my-bar title="活动详情" :transparent="transparent">
+			<view slot="content" class="publish">
+				<image :src="detail.pic" style="height: 380rpx;width: 100%;"></image>
+			</view>
+		</my-bar>
+		<view class="clock">
+			<!-- <view class="cu-btn round sm" style="background-color: #dcdcdc;">
+				<u-icon name="clock"></u-icon>
+				<text class="margin-left-10">设置响应倒计时</text>
+			</view>
+			<view class="tips">
+				<text>*</text>
+				<text>如未在限定时间内响应，系统默认自动推送给旗下商户。</text>
+			</view> -->
+		</view>
+
+		<view class="content">
+			<text class="title">{{detail.title}}</text>
+			<view class="data" style="margin-top: 30rpx;">
+				<u-icon name="clock" color="#EF9944"></u-icon>
+				<text class="margin-left-10">{{detail.beginTime | date('mm/dd hh:MM:ss')}} 至 {{detail.endTime | date('mm/dd hh:MM:ss')}}</text>
+			</view>
+			<!-- <view class="data">
+				<u-icon name="map"></u-icon>
+				<text class="margin-left-10">仅限全天河区内报名</text>
+			</view> -->
+			<view class="data flex">
+				<view class="flex">
+					<u-icon name="grid" color="#EF9944"></u-icon>
+					<text class="margin-left-10">{{detail.labelNames}}</text>
+				</view>
+				<view class="flex margin-left-50">
+					<u-icon name="bag" color="#EF9944"></u-icon>
+					<text class="margin-left-10">活动供应价{{detail.supplyPrice}}%</text>
+				</view>
+			</view>
+			<view class="data">
+				<u-icon name="home-fill" color="#EF9944"></u-icon>
+				<text class="margin-left-10">联营积分全场通用</text>
+			</view>
+		</view>
+
+		<view class="intro" v-if="current==1">
+			<view class="flex">
+				<u-icon name="coupon" color="#EF9944"></u-icon>
+				<text class="margin-left-10">商场活动补贴</text>
+			</view>
+			<view class="desc" style="display: flex;border-bottom: 1rpx solid #DDDDDD;align-items: center;">
+				<u-input v-model="appendSupplyPrice" placeholder="请输入折扣" style="width: 90%;" />
+				<text class="padding-left-20">%</text>
+			</view>
+		</view>
+
+		<view class="intro">
+			<view class="flex">
+				<u-icon name="bookmark" color="#EF9944"></u-icon>
+				<text class="margin-left-10">活动介绍</text>
+			</view>
+			<view class="desc">
+				{{detail.detail}}
+			</view>
+		</view>
+
+		<view class="attend" v-if="!$isEmpty(detail.activityJoinRecords)">
+			<view class="margin-bottom-20">
+				<u-icon name="calendar-fill" color="#EF9944"></u-icon>
+				<text class="margin-left-10">已参加</text>
+			</view>
+
+			<view class="flex">
+				<view class="flex " style="width: 90%;">
+					<view class="data" v-for="(item,index) in detail.activityJoinRecords" :key="index">
+						<view class="item">
+							<image :src="item.joinPic" mode=""></image>
+							<view>
+								<text>{{name | ellipsis}}</text>
+								<text>{{item.finalSupplyPrice}}折</text>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view v-if="detail.activityJoinRecords.length>3" class="center" style="width: 10%;margin-right: 15rpx;">
+					<u-icon name="more-circle" size="80" color="#ababab"></u-icon>
+				</view>
+			</view>
+		</view>
+		
+		<!-- <block >
+			<view class="" style="height: 90rpx;"></view>
+			<view @click="operate" :style="{paddingBottom:safeAreaBottom}" class="footer-fixed center">
+				<view  class="cu-btn df btn-bg-color  round " style="width: 90%;height: 80rpx;">
+					<block v-if="current==0">
+						<text v-if="detail.auditStatus==0">待审核</text>
+						<text v-if="detail.auditStatus==1">审核通过</text>
+						<text v-if="detail.auditStatus==2">审核不通过</text>
+						<text v-if="detail.auditStatus==3">已停用</text>
+					</block>
+					<block v-if="current==1">
+						<text>参加活动</text>
+					</block>
+					<block v-if="current==2">
+						<text>退出活动</text>
+					</block>
+				</view>
+			</view>
+		</block> -->
+	</view>
+</template>
+
+<script>
+	import myBar from "@/components/my-bar.vue"
+	export default {
+		components: {
+			myBar
+		},
+		onPageScroll(obj) {
+			this.transparent = obj.scrollTop * 0.006;
+		},
+		filters: {
+			// 名称超出显示省略号
+			ellipsis(value) {
+				if (!value) return '';
+				if (value.length > 4) {
+					return value.slice(0, 3) + '...'
+				}
+				return value
+			}
+		},
+		data() {
+			return {
+				id: '',
+				current: 0, //0 发起活动详情，1可参加活动详情，2已参加活动详情
+				transparent: '',
+				name: '星巴克',
+				detail: {},
+				appendSupplyPrice: 100
+			}
+		},
+		onLoad(options) {
+			if(options.detail){
+				this.detail = JSON.parse(options.detail)
+			}
+			// this.current = options.current || 0
+			// if (!this.id) {
+			// 	this.$u.toast('系统错误')
+			// 	return
+			// }
+			// this.fetchDetail()
+		},
+		methods: {
+			fetchDetail() {
+				this.$api.activity.detail({
+					id: this.id
+				}).then(res => {
+					this.detail = res.data
+				})
+			},
+			operate() {
+				if (this.current == 0) {
+					return
+				}
+				if (this.current == 1) {
+					//参加活动
+					this.join()
+				} else if (this.current == 2) {
+					//退出活动
+					this.exit()
+				}
+
+			},
+			join() {
+				this.$dialog.showModal("确定参加？").then(res => {
+					let operateList = {
+						activityId: this.id,
+						joinType: 1,
+						joinId: this.vuex_mallId,
+						appendSupplyPrice: this.appendSupplyPrice
+					}
+					this.$api.activity.join(operateList).then(res => {
+						if (res.success) {
+							this.$dialog.showModal("参加成功", false).then(() => {
+								this.$util.isReloadAndBack()
+							})
+						}
+					})
+				})
+			},
+			exit() {
+				this.$dialog.showModal("确定退出？").then(res => {
+					let operateList = [{
+						activityId: this.id,
+						joinType: 1,
+						joinId: this.vuex_mallId
+					}]
+					this.$api.activity.exit(operateList).then(res => {
+						if (res.success) {
+							this.$dialog.showModal("退出成功", false).then(() => {
+								this.$util.isReloadAndBack()
+							})
+						}
+					})
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.publish {
+		background-color: #FFFFFF;
+		overflow: hidden;
+		border-radius: 10rpx;
+		height: 380rpx;
+		position: absolute;
+		bottom: 20rpx;
+		left: 0;
+		right: 0;
+		width: 92%;
+		margin: 0 auto -120rpx;
+		border-radius: 10rpx;
+		box-shadow: 0rpx 16rpx 8rpx -8rpx #a8a8a8;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+
+		text {
+			font-size: 26rpx;
+			color: #797979;
+		}
+	}
+
+	.clock {
+		background-color: #FFFFFF;
+		height: 120rpx;
+		padding-bottom: 20rpx;
+
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		align-items: center;
+
+		.tips {
+			margin-top: 10rpx;
+			font-size: 24rpx;
+			color: #FF9447;
+		}
+	}
+
+	.content {
+		padding: 15rpx 30rpx;
+		background-color: #FFFFFF;
+
+		.title {
+			line-height: 50rpx;
+			font-weight: 800;
+			font-size: 32rpx;
+		}
+
+		.data {
+			margin: 20rpx 0;
+			color: #787878;
+		}
+	}
+
+	.intro {
+		margin-top: 15rpx;
+		padding: 15rpx 30rpx;
+		background-color: #FFFFFF;
+
+		.desc {
+			color: #9a9a9a;
+			margin-top: 20rpx;
+			line-height: 46rpx;
+			font-size: 28rpx;
+		}
+	}
+
+	.attend {
+		margin-top: 15rpx;
+		padding: 15rpx 0 15rpx 30rpx;
+		background-color: #FFFFFF;
+
+		.data {
+			margin: 10rpx 20rpx 10rpx 0;
+			$width: 80rpx;
+
+			.item {
+				width: 190rpx;
+				height: $width;
+				background-color: #eeeeee;
+				border-radius: 50rpx;
+				display: flex;
+
+				image {
+					width: $width;
+					height: $width;
+				}
+
+				view {
+					padding-left: 10rpx;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					font-size: 22rpx;
+
+					text:first-child {
+						font-weight: 800;
+						margin-bottom: 4rpx;
+					}
+				}
+			}
+		}
+	}
+</style>