hire-wx-houxuanren/pagesC/add-quanzi.vue

<template>
	<view class="add-quanzi">
		<view class="add-quanzi-upload">
			<view v-if="images" class="quanzi-image u-flex u-row-center" @click="uploadimg">
				<image :src="images" mode="aspectFill"></image>
			</view>
			<view v-else class="upload-box u-flex u-row-center" @click="uploadimg">
				<text>封面</text>
				<image src="static/upload.png" mode=""></image>
			</view>
		</view>
		<view class="quanzi-name u-flex u-row-between">
			<input type="text" maxlength="20" placeholder="填写圈子标题（必填）" v-model="textarea">
			<text>{{textarea.length}}/20</text>
		</view>
		<view v-if="msg == '包含敏感词'" class="quanzi-tips">
			包含敏感文字请重新填写
		</view>
		<view class="fabu-btn" @click="toover">
			立即创建
		</view>
	</view>
</template>

<script>
	import {
		create_group
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				textarea: '',
				images: '',
				msg: ''
			}
		},
		onLoad() {

		},
		methods: {
			uploadimg() {
				uni.chooseImage({
					count: 1,
					success: (img) => {
						uni.showLoading({
							mask: true,
							title: "请稍后"
						})
						uni.uploadFile({
							url: 'https://hire.hdlkeji.com' + '/api/common/upload',
							filePath: img.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								uni.hideLoading()
								if (JSON.parse(res.data).code == 1) {
									this.images = JSON.parse(res.data).data.fullurl
								} else {
									this.$u.toast(JSON.parse(res.data).msg)
								}
							},
							fail: (e) => {
								console.log(e);
							}
						})
					}
				})
			},
			toover() {
				if (!this.images) {
					this.$u.toast("请上传圈子封面")
					return
				}
				if (!this.textarea) {
					this.$u.toast("请输入圈子名称")
					return
				}
				// uni.showLoading({
				// 	mask: true,
				// 	title: "请稍后"
				// })
				create_group({
					title: this.textarea,
					image: this.images
				}).then(res => {
					this.msg = res.msg
					if (res.code == 1) {
						setTimeout(() => {
							uni.redirectTo({
								url: "/pagesC/add-quanzi-over"
							})
						}, 800)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.add-quanzi {
		padding: 0 32rpx;

		.fabu-btn {
			position: fixed;
			bottom: 30rpx;
			left: 32rpx;
			width: 686rpx;
			line-height: 92rpx;
			background: #0C66C2;
			border-radius: 12rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.quanzi-tips {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF2D2D;
		}

		.quanzi-name {
			padding: 32rpx 0;
			border-bottom: 2rpx solid #F4F4F4;
			margin-bottom: 30rpx;

			input {
				flex: 1;
				font-size: 32rpx;
			}

			text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #C8C8C8;
			}
		}

		.add-quanzi-upload {
			padding: 32rpx 0;

			.quanzi-image {
				width: 210rpx;
				height: 210rpx;

				image {
					width: 210rpx;
					height: 210rpx;
				}
			}

			.upload-box {
				width: 210rpx;
				height: 210rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
				position: relative;

				text {
					width: 70rpx;
					line-height: 36rpx;
					background: rgba(85, 85, 85, 0.6);
					border-radius: 16rpx 0rpx 16rpx 0rpx;
					text-align: center;
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}

				image {
					width: 70rpx;
					height: 70rpx;
				}
			}
		}
	}
</style>