报名参赛

assets/http/api.js

@@ -65,6 +65,13 @@ const activity = {
 	getMyTotalHeat: p => http.get('/sing_active/activeproductrecord/getMyTotalHeat', {
 		params: p
 	}),
+	
+	submitForm: p => http.post('/sing_active/activeproductrecord/submit',{
+		params: p
+	}),
+	mediaSave: p => http.post('/sing_active/activeproductrecord/save',{
+		params: p
+	}), 
 }
 
 //微信api
@@ -243,6 +250,9 @@ const activerecord={
 	list: p => http.get('sing_active/activerecord/list', {
 		params: p
 	}),
+	detail: p => http.get('sing_active/activerecord/detail', {
+	  params: p
+	}),
 }
 
 

pages.json

@@ -235,6 +235,16 @@
             }
             
         }
+		,{
+		    "path" : "pages/apply/apply",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "我要报名",
+		        "enablePullDownRefresh": false,
+				"navigationStyle":"custom"
+		    }
+		    
+		}
     ],
 	"tabBar": {
 		"color": "#555555",

pages/apply/apply.vue

@@ -0,0 +1,197 @@
+<template>
+	<view class="">
+		<!-- #ifdef MP-WEIXIN -->
+		<u-navbar title-color="#000000"  :is-back="true" title="我要报名"></u-navbar>
+		<!-- #endif -->
+		
+		<view class="add-media" @click="handleUploadWork">
+			<view class="flex-direction flex justify-center" style="align-items: center;" v-show="!videoUrl">
+				<u-icon name="plus-circle-fill" color="#E72226" size="90"></u-icon>
+				<text style="margin-top: 26rpx; color: #010101; font-size: 24rpx; font-weight: bold;">上传作品(图片或视频)</text>
+			</view>
+			<video v-show="videoUrl" :src="videoUrl"></video>
+		</view>
+		
+		<view class="fill-info">
+			<text class="info-title" style="font-weight: bold; color: #010101; font-size: 34rpx;">填写信息</text>
+			<view v-if="activeType == 'VIDEO_TEXT'" style="margin-bottom: 64rpx;">
+				<text style="color: #010101; font-size: 28rpx; font-weight: bold;">作品封面</text>
+				<view style="padding: 32rpx 0; border-bottom: 1rpx solid #E3E3E3;">
+					<u-upload
+						:fileList="fileList"
+						@delete="deletePic"
+						:auto-upload="false"
+						name="1"
+						multiple
+						:maxCount="1"
+						width="134"
+						height="134"
+						upload-text=" "
+					></u-upload>
+				</view>
+			</view>
+			
+			<view style="margin-bottom: 64rpx;">
+				<text style="color: #010101; font-size: 28rpx; font-weight: bold;">标题</text>
+				<view style="padding: 32rpx 0 0; border-bottom: 1rpx solid #E3E3E3;">
+					<u-input
+						placeholder="请输入标题内容"
+						v-model="applyInfo.title"
+					  ></u-input>
+				  </view>
+			</view>
+			
+			<view style="margin-bottom: 64rpx;">
+				<text style="color: #010101; font-size: 28rpx; font-weight: bold;">详细介绍</text>
+				<view style="padding: 32rpx 0 0; border-bottom: 1rpx solid #E3E3E3;">
+					<u-input
+						placeholder="请输入详细介绍"
+						v-model="applyInfo.content"
+					  ></u-input>
+				  </view>
+			</view>
+			
+			<view style="margin-bottom: 64rpx;">
+				<text style="color: #010101; font-size: 28rpx; font-weight: bold;">联系方式</text>
+				<view style="padding: 32rpx 0 0; border-bottom: 1rpx solid #E3E3E3;">
+					<u-input
+						placeholder="请输入手机号码"
+						v-model="applyInfo.phone"
+				  ></u-input>
+				 </view>
+			</view>
+				
+			<u-button shape="circle" :custom-style="customStyle" @click="handleConfirm">确定提交</u-button>	
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: '',
+	data() {
+		return {
+			fileList: [],
+			customStyle: {
+				color: 'white',
+				background: "#E72226",
+				fontSize: '32rpx',
+				width: '340rpx',
+				margin: '25rpx auto 0'
+			},
+			applyInfo:{},
+			activeType: '', //活动类型: VIDEO_TEXT视频图文 IMAGE_TEXT图片文本
+			videoUrl: ''
+		};
+	},
+	onLoad(options) {
+		this.activeType = options.activeType;
+	},
+	methods: {
+		/**
+		 * 上传文件
+		 */
+		async uploadFile(params){
+			this.$api.uploadFile(params).then(res=>{
+				this.videoUrl = res.data.data.link;
+			})
+		},
+		handleUploadWork(){
+			var that = this;
+			uni.chooseVideo({
+				count: 1,
+				sourceType: ['album'],
+				success: function (res) {
+					console.log("视频大小",res)
+					let tempFilePath = res.tempFilePath;
+					that.uploadFile(tempFilePath)
+					//压缩视频
+					// uni.compressVideo({  
+					//     src: tempFilePath,  
+					//     quality: 'high',//'low':低，'medium':中，'high':高  
+					// 	bitrate: 0,
+					// 	fps: 0,
+					// 	resolution: 0,
+					//     success: function (csRes){  
+					//         // 未进入                        
+					//         console.log('压缩后大小')  
+					//         console.log(csRes.size)  
+					
+					//     },  
+					//     fail: function (cfRes) {  
+					// 		console.log(cfRes)
+					//         uni.showToast({  
+					//             title:'视频压缩失败',  
+					//             icon:'none'  
+					//         })  
+					//     }  
+					// });
+				}
+			});
+
+		},
+		// 删除图片
+		deletePic(event) {
+			this[`fileList${event.name}`].splice(event.index, 1)
+		},
+		uploadFilePromise(url) {
+			return new Promise((resolve, reject) => {
+				let a = uni.uploadFile({
+					url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
+					filePath: url,
+					name: 'file',
+					formData: {
+						user: 'test'
+					},
+					success: (res) => {
+						setTimeout(() => {
+							resolve(res.data.data)
+						}, 1000)
+					}
+				});
+			})
+		},
+		handleConfirm(){
+			console.log('1111111',this.applyInfo)
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	.add-media{
+		width: 700rpx;
+		height: 428rpx;
+		border-radius: 14rpx;
+		background: #FFFFFF;
+		margin: 40rpx auto;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+	.fill-info{
+		width: 700rpx;
+		border-radius: 14rpx;
+		background: #FFFFFF;
+		margin: 0 auto;
+		display: flex;
+		flex-direction: column;
+		padding: 40rpx 54rpx 50rpx;
+		margin-bottom: 88rpx;
+		.info-title{
+			position: relative;
+			margin-bottom: 60rpx;
+			&:before{
+				content: '';
+				width: 8rpx;
+				height: 32rpx;
+				background: #E72226;
+				position: absolute;
+				left: -18rpx;
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+	}
+</style>

pages/index/home.vue

@@ -3,12 +3,15 @@
 		<!-- #ifdef MP-WEIXIN -->
 		<u-navbar title-color="#000000"  :is-back="fasle" title="首页"></u-navbar>
 		<!-- #endif -->
-		
 		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
 			@up="upCallback">
+			<view v-if="noticeContent">
+				<u-notice-bar mode="horizontal" :list="noticeContent"></u-notice-bar>
+			</view>
 			<view style="padding: 30rpx 30rpx 10rpx;">
 				<u-swiper :list="swiperList" border-radius="12" name="url" mode="rect" height="300"></u-swiper>
 			</view>
+			
 			<view class="">
 				<view class="cu-list grid  no-border" :class="gridClass" style="border-radius:20rpx ;">
 					<view class="cu-item" @click.stop="jump(item)"  v-for="(item,index) in gridList" :key="index">
@@ -89,6 +92,7 @@
 	import poster from "@/components/poster/poster.vue"
 	import uqrcode from "@/components/uqrcode/uqrcode.vue"
 	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	import util from "@/utils/util.js";
 	export default {
 		mixins: [MescrollMixin],
 		components: {
@@ -122,11 +126,15 @@
 				//菜单
 				gridClass:'',
 				gridList: [],
-				keyword:''
+				keyword:'',
+				noticeContent: [],
+				//活动详情
+				activeInfo: {}
 			};
 		},
 		onLoad(options) {
 			this.handelRoute(options)
+			this.notice()
 		},
 		onShow() {
 			if (this.canReset) {
@@ -135,6 +143,28 @@
 			this.canReset = true
 		},
 		methods: {
+			/**
+			 * 获取活动详情
+			 */
+			async activeDetail(){
+				let params={
+					id: this.activeId
+				}
+				this.$api.activerecord.detail(params).then(res=>{
+					this.activeInfo = res.data.data;
+				})
+			},
+			/**
+			 * 获取通知公告
+			 */
+			async notice(){
+				let params={
+					title:'活动通知'
+				}
+				this.$api.notice.detail(params).then(res=>{
+					this.noticeContent.push( util.formatHtml(res.data.data.content))
+				})
+			},
 			/**
 			 * 处理路由转发
 			 */
@@ -187,6 +217,7 @@
 					this.activeId = await this.getDefaultActiveId()
 				}
 				await this.getActivityParams(activeId)
+				this.activeDetail();
 				//获取排行榜
 				this.mescroll.resetUpScroll();
 				//获取轮播图
@@ -201,6 +232,21 @@
 				if (item.name == '排行榜') {
 					item.path = '/pages/rank/rank?activeId=' + this.activeId
 				}
+				if (item.name == '报名参赛') {
+					let nowTime = new Date().getTime();
+					let startTime=this.$dateTime.getTime(this.activeInfo.startTime)
+					let endTime=this.$dateTime.getTime(this.activeInfo.endTime)
+					if(nowTime < startTime){
+						this.$refs.toast.info("活动未开始");
+					}else if(nowTime > endTime){
+						this.$refs.toast.info("活动已结束");
+					}else{
+						uni.navigateTo({
+							url: `${item.path}?activeId=${this.activeId}&activeType=${this.activeInfo.type}`
+						})
+					}
+					return;
+				}
 				uni.navigateTo({
 					url: item.path
 				})