onecric_h5/pages/News/publish.vue

<template>
	<view class="publish">
		<u-navbar leftIconColor="#000" :fixed="false" leftIconSize="48" :autoBack="true">
			<view class="" slot="left" style="color: #DC3C23;">
				<!-- Cancel -->
				{{ $t('news.lab9') }}
			</view>
			<view class="" slot="center" style="">
				<!-- Publish -->
				{{ $t('news.lab10') }}
			</view>
			<view class="flex-end" slot="right" @click="submit()">
				<text class="Confirm">
					<!-- Confirm -->
          {{ $t('news.confirm') }}
				</text>
			</view>
		</u-navbar>
		<!-- <view class="select" @click="showType = true">
			获取分类：{{select.name || '点击获取'}}
		</view> -->
		
		<view class="" style="overflow: hidden;">
			<u--textarea @focus="focus" @blur="blur" class="input" maxlength="-1" height="308" v-model="value2" confirmType="done"
				border="none" placeholder="Please enter your content" ></u--textarea>
		</view>
		<view class="" style="padding: 24rpx;">
			<u-upload :fileList="fileList1" @afterRead="afterRead" uploadText="loading" @delete="deletePic"  imageMode="scaleToFill" name="1" width="200" height="200" multiple :maxCount="10" v-if="type == 1">
				<image src="/static/image/videos/Upload@2x.png"
					mode="aspectFill" style="width: 200rpx;height: 200rpx;"></image>
			</u-upload>
			<u-upload :fileList="fileList1" @afterRead="afterRead" uploadText="loading" @delete="deletePic" accept="video" name="1" width="200" height="200" multiple :maxCount="1" v-if="type == 2">
				<image src="/static/image/videos/Uploadthevideo@2x.png"
					mode="aspectFill" style="width: 200rpx;height: 200rpx;"></image>
			</u-upload>
		</view>

		<view class="operation flex-start" v-if="show">
			<image src="/static/image/news/pulist-1.png" mode="" @click="type = 1"></image>
			<image src="/static/image/news/pulist-2.png" mode="" @click="type = 2"></image>
			<view class="font24"  @click="showType = true">
				{{select.name || $t('news.select')}}
			</view>
		</view>
		<u-picker keyName="name" :cancelText="$t('news.cancel')" :confirmText="$t('news.confirm')" @close="close" :closeOnClickOverlay="true" :show="showType" :columns="columns" @confirm="confirm" @cancel="showType = false"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:0,
				value2: '',
				showType:false,
				show: false,
				columns:[],
				select:{
					name:''
				},
				status:'ok',
				CovrUrl:'',
				fileList1: [],
			}
		},
		computed:{
			qiuNiu() {
				return this.$store.state.qiuNiu
			}
		},
		watch:{
			type(e) {
				this.$forceUpdate();
				console.log(e);
				this.fileList1 = []
			}
		},
		onLoad() {
			this.getType()
		},
		methods: {
			/* 提交数据 */
			submit() {
				if (this.$store.state.isLogin != 1) {
					this.$toUrl('/pages/login/login')
					return
				}
				let data = {
					flie:[],
					classification_id:this.select.id,
					title:this.value2,
				}
				if(this.type == 1) {
					data.flie = this.fileList1.map(item=>item.url)
				}else if(this.type == 2) {
					let video = this.fileList1.map(item=>item.url)
					data.flie = [{img:this.CovrUrl,video:video[0]}]
				}
				
				if(this.status != 'ok') {
					return this.$toast(this.$t('news.lab11'))
				}
				uni.$u.http.post('/api/Circleuser/insert',data).then(res=>{
					this.$back()
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					prevPage.$vm.luntanPage = 1;
					prevPage.$vm.getLuntan()
				}).catch(res=>{})
			},
			
			// 获取类型
			getType() {
				uni.$u.http.get('/api/circle/classification',{}).then(res=>{
					let list = res || []
					this.columns.push(list)
					if (list[0]) {
						this.select = list[0]
					}
				}).catch(res=>{})
			},
			close() {
				this.showType = false
			},
			/* 选中的分类 */
			confirm(e) {
				console.log(e);
				this.select= e.value[0]
				this.showType =false
			},
			
			// 获取焦点
			focus(e) {
				this.show = true
			},
			// 失去焦点
			blur(e) {
				// this.show = false
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				this.status = 'loading'
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: 'loading'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i])
					if(this.type == 2) {
						this.parseBlob(result)
					}
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				this.status = 'ok'
			},
			uploadFilePromise(item) {
				let { token,domain,uploadHost,httpsdomain } = this.qiuNiu;
				let type = item.name.slice(-7);
				let key = new Date().getTime() + type;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://' + uploadHost, // 仅为示例，非真实的接口地址
						filePath: item.url,
						name: 'file',
						formData: {
							key:key,
							token: token
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							console.log(data);
							console.log(httpsdomain + '/' + data.key);
							setTimeout(() => {
								resolve(httpsdomain + '/' + data.key)
							}, 1000)
						}
					});
				})
			},
			parseBlob(base64) {
				let key = new Date().getTime() + '.png';
				var blob = `${base64}?vframe/jpg/offset/0`
				let {
					token,
					domain,
					uploadHost,
					httpsdomain
				} = this.qiuNiu;
				uni.uploadFile({
					url: 'https://' + uploadHost, // 仅为示例，非真实的接口地址
					filePath: blob,
					name: 'file',
					formData: {
						key: key,
						token: token
					},
					success: (res) => {
						let data = JSON.parse(res.data)
						this.CovrUrl = httpsdomain + '/' + data.key
					},
				})
			},
		}
	}
</script>

<style lang="scss">
	/deep/.u-upload__wrap__preview__other__text {
		display: none;
	}
	page {
		background: #F3F3F7;
	}
	.select {
		color: #333;
		padding: 24rpx;
	}
	.input {
		margin: 20rpx 24rpx;
	}

	.Confirm {
		color: #fff;
		border-radius: 40rpx;
		padding: 6rpx 24rpx;
		background-color: $color2;
	}

	.operation {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 32rpx;
		background-color: white;

		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 64rpx;
		}
		view {
			color: #fff;
			padding: 8rpx 30rpx;
			border-radius: 40px;
			background-color: $color2;
		}
	}
</style>