jp-railway/pages/mine/issue.vue

<template>
	<view>
		<u-navbar title="发布内容" back-icon-name="close" ref="refNavbar" >
			<view class="slot-wrap"
			 :class="{
				 'slot-wrap-a':true,
				 'slot-wrap-b':subForm.synopsis
			 }"
			 @click="selectvideo()">		 
				 	发布		
			</view>	
		</u-navbar>
		
		<textarea placeholder="记录点滴生活..."
		v-model="subForm.synopsis" maxlength="200"
		 name="" id="" cols="30" rows="10"></textarea>
		<view style="float: right;">字数限制：{{subForm.synopsis?subForm.synopsis.length:0}}/200</view>
	 
	  <view class="upload">
		
	  	<u-upload-file  ref="uUpload" :action="action"
		  :max-size="50 * 1024 * 1024"
		  :file-max-size="50 * 1024 * 1024"
		   :maxCount="9"
		  :form-data="formData" :header="header"
		 :file-list="fileList" ></u-upload-file>
	  </view>
	  
	  <view class="select" v-if="false">
	  	<view class="join">
	  		<text class="sign">#</text>
			<text class="text">参与活动</text>
	  	</view>
		<view class="choose" @click="selectshare" >
				<text >{{itemshare.label?itemshare.label:'选择活动'}}</text>
				<u-icon name="arrow-right"></u-icon>
		</view>
	  </view>
	  <view style="padding: 10px;">每周只能发布一次 ，每周一重置次数</view>
	  <view style="padding: 10px;">上传备注:<br/>1.最多上传9张（含图片\视频）
	  <br/>2.文件大小限制为50M
	  <br/> 3.图片一行显示3个，视频一行显示1个;
	  <br/>4.发布后图片排列在视频前面，其余顺序按上传顺序排列</view>
	  
	  <view class="bottom"  v-if="false" >
	  			<button>发布作品</button>
	  </view>
	  <u-select v-model="showshare" :default-value=[itemshare.index?itemshare.index:0] @confirm="confirmshare"
	   value-name="index" label-name="title"
	   :list="listshare"></u-select>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/activity.js'
	import * as API_share from '@/apis/pagejs/share.js'
	
	export default {
		data() {
			return {
				listshare:[],
				itemshare:{},
				showshare:false,
				action:"",
				formData:{},
				fileList:[],
				header:{
					
				},
				nic:0,
				listForm:{
					pageIndex:1,
					pageSize:50,
					status:'7d69d622-3785-470e-b36c-d0f155b79dfa',
					
				},
				subForm:{
					
				},
			}
		},onLoad(op) {
			this.action=process.car.BASE_URL+"uploadPicture"
			
			this.formData.subFolder="mineissue"
			//接口应该免登陆
			var token=this.carhelp.getToken()
			
			this.header={
		
				'Authorization':token
			}
			// //获取微信配置
			// WxJsApi.getWxConfig(['getLocation','addEventListener']).then((res)=>{
			
			// 	this.isReady=true;
			// 	//(res)
			 
			// }).catch(error => {
			// 		//(res)
			// })
			if(op.id){
				this.itemshare.id=op.id;
				this.itemshare.index=-1;
			}
			if(op.nic){
				this.nic=op.nic;
			}
			//this.getShareList()
		},
		methods:{
			confirmshare(es){
				
				var e=es[0]
				this.itemshare=e
				this.itemshare.index=e.value;
			},
			getShareList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.pageList(this.listForm).then((res) => {
					
					uni.hideLoading();
					this.listshare = res.data.data;
					
						for(var i in this.listshare){
							var item=this.listshare[i]
							item.index=i;
							if(this.itemshare.index==-1){
								
								if(item.id==this.itemshare.id){
										this.confirmshare([{value:i,label:item.title}])
												
								}
							}
						}
				
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			selectshare(){
				this.showshare=true;
			},
			selectvideo(){
				if(this.subForm.synopsis){
					
				}else{
					return
				}
				
				
				if(this.itemshare.label){
					this.subForm.activityId=this.listshare[this.itemshare.value].id;
				}
				
				var lists2 = this.$refs.uUpload.lists;
				var lists1 = [];
				var urls=[]
				var isPics=[]
				
				var bl=true;
				for(var i in lists2){
					//console.log(item.progress)
					//console.log(lists2[i])
					if(lists2[i].progress!=100){
						uni.showToast({
							title:"图片/视频上传中，请稍后"
						})
						bl=false
						break;
					}
					if(lists2[i].response){
						
					}else{
						continue;
					}
					var p =lists2[i].response.data;
					var fileName=p.fileName
					
					if(fileName.indexOf('.mp4')>=0){
						p.isPic=false
					}else{
						p.isPic=true
					}
					lists1.push(p);
				}
				if(!bl){
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				lists1=lists1.sort(function(item1,item2){
					
					if(!item1.isPic&&item2.isPic){
						return 1
					}
					if(item1.isPic&&!item2.isPic){
						return -1
					}
					if(item1.isPic&&item2.isPic){
						return 0
					}
					return 0
				})
				
				for(var i in lists1){
					
					var p =lists1[i];
					var fileName=p.fileName
					urls.push(p.fileUrl)
					isPics.push(p.isPic)
				}
				this.subForm.urls=urls.join()
				this.subForm.isPics=isPics.join()
				
				console.log(isPics.join())
				
				API_share.addShare(this.subForm).then((res) => {
					
					uni.hideLoading();
					this.carhelp.set("addShare",1);
					if(this.nic){
						uni.showModal({
							showCancel:false,
							 title:"提示",
							content:"操作成功",
							
							cancelText:"确定",
							success: res1 => {
							
								this.$refs.refNavbar.goBack()
								
							}})
					}else{
						uni.showModal({
						
							 title:"提示",
							content:"操作成功",
							confirmText:"前往分享空间",
							cancelText:"返回",
							success: res1 => {
								
								if (res1.confirm) {
									uni.redirectTo({
										url:"/pages/staffHome/filesonic"
									})
								}else{
									this.$refs.refNavbar.goBack()
								}
								
								
								
							}})
					}
					
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bottom{
		   padding: 16rpx 32rpx;
		   background-color: #fff;
		   position: fixed;
		   bottom: 0;
		   left: 0;
		   right: 0;
		   uni-button{
			   border-radius: 8px;
			   background-color: rgba(31, 74, 153, 1);
			   color: rgba(255, 255, 255, 1);
			   font-size: 16px;
			   line-height: 40px;
			   
		   }
		   
	}
	page{
		background-color: #fff;
		font-family: 'Regular';
	}
	/deep/.u-slot-content {
		display: block;
		text-align: right !important;
		margin-right: 16px;
		color: #333333;
	
	}
	/deep/.uicon-close{
		font-size: 32rpx !important;
		color: #101010 !important;
	}
	.slot-wrap-a{
		
	}
	.slot-wrap-b{
		background-color: #03a9f4 !important;
	}
	
	.slot-wrap{
		background-color: rgba(204, 204, 204, 1);
		width: 104rpx;
		height:56rpx;
		line-height:56rpx ;
		border-radius: 8px;
		
		color: #fff;
		text-align: center;
		position: absolute;
		top: 50%;
		right: 32rpx;
		transform: translateY(-50%);
	}

uni-textarea{
	width: 100%;
	
	text-indent: 28rpx;
	padding-top:28rpx;
	font-family: Microsoft Yahei;
}
.upload{
	padding: 32rpx;
	/deep/.u-add-tips{
		// display: none;
	}
}
.select{
	display: flex;
	justify-content: space-between;
	padding: 0 32rpx;
	height: 56px;
	line-height: 56px;
	.join{
		
		color: rgba(16, 16, 16, 1);
		font-size: 16px;
		.sign{
			color: #1F4A99;
			margin-right: 8rpx;
		}
		
	}
	.choose{
		text{
			margin-right: 8rpx;
		}
		color: rgba(153, 153, 153, 1);
	}
}
</style>