besiweb/pages/dynamic/send.vue

<template>
	<view>
		<view style="background-color: #fff;">
			<editor id="editor" class="ql-container" placeholder="请文明发言，不可涉及黄、赌、毒、捐赠相关动态！" 
			:show-img-size="true"
			@ready="onEditorReady"
			@blur="setInputLength"
			@input="calculateWordCount"></editor>
			<u-upload :action="action" upload-text="" :show-progress="true" :max-count="type=='video'?1:9" :show-tips="false"></u-upload>
		</view>
		<view class="operate-content">
			<span class="content">同时分享到微信朋友圈:</span>
			<div class="not-share not-share-margin" v-if="!ifShare" @click="switchShareContent"></div>
			<image v-else src="../../static/dynamic/gx_add_gou2.png" class="add-gou-img not-share-margin"
				   @click="switchShareContent"></image>
			<span class="content">关闭评论</span>
			<div class="open-comment" v-if="!ifCloseComment" @click="switchComment"></div>
			<image v-else src="../../static/dynamic/gx_add_gou2.png" class="add-gou-img" @click="switchComment"></image>
		</view>
		<view class="input-contorl-box">
			<view class="contorl-btn-box">
				<view class="control-btn">
					<image 
					src="../../static/dynamic/talk_image_icon.png"
					class="choose-img"
					@click="chooseImg"></image>
					<image v-if="!ifShowKeyboard" src="../../static/dynamic/gongxiu_emoji.png" class="choose-emoji"
						@click="switchEmojiStatus"></image>
					<image v-else src="../../static/dynamic/gongxiu_keyboard.png" class="choose-emoji"
						@click="switchEmojiStatus"></image>
				</view>
				<view style="width: 510rpx">
					<text class="input-word">{{wordCount}}/1500</text>
				</view>
			</view>
			<view class="emoji-list-box" v-show="ifShowEmoji">
				<swiper :indicator-dots="true" indicator-active-color="#FF713F">
					<swiper-item v-for="(parentItem, parentIndex) in emojiList" :key="parentIndex">
						<view class="emoji-list-item">
							<image v-for="(item,index) in parentItem" :src="getImgUrl(item)" :key="index"
								@click="clickEmoji(item)" class="emoji-img"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import emojiData from "../../static/emoji/emojiData.js"
	export default {
		data() {
			return {
				content: '', //发表内容:
				action: '', //图片上传路径
				type: 'image',
				ifShare: false, //是否把发布的内容分享到朋友圈,
				ifCloseComment: false, //是否关闭评论
				ifShowEmoji: false, //是否显示表情面板
				emojiList: [], //表情列表
				imgUrl: '../../static/dynamic/',
				ifShowKeyboard: false,
				wordCount: 0, //输入的字符数
			}
		},
		onLoad() {
			this.emojiList = emojiData;
		},
		methods: {
			switchShareContent() {
				this.ifShare = !this.ifShare;
				if (this.ifShare) {
					//分享到朋友圈
				}
			},
			switchComment() {
				this.ifCloseComment = !this.ifCloseComment;
				if (this.ifCloseComment) {
					//关闭评论
				}
			},
			//获取图片路径
			getImgUrl(item) {
				return this.imgUrl + item.url;
			},
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			setInputLength(){},
			calculateWordCount(e){
				let count = (e.detail.html.split('img')).length-1;
				this.wordCount = e.detail.text.length-1+count*4;
			},
			//点击每个表情
			clickEmoji(item) {
				var that = this;
				//往富文本编辑器里插入图片
				this.editorCtx.insertImage({
					src: this.imgUrl + item.url,
					width: 20,
					height: 20,
					extClass: 'emojiIamge',
					success: function() {
						// console.log("insert success!")
					}
				});
			},
			switchEmojiStatus() {
				this.ifShowKeyboard = !this.ifShowKeyboard;
				this.ifShowEmoji = !this.ifShowEmoji;
			},
			//选择图片
			chooseImg(){
				uni.chooseImage({
					sourceType:['album','camera'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res)=>{
                        console.log(JSON.stringify(res.tempFilePaths));
					}
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: rgb(247, 246, 242);
	}
</style>
<style lang="less" scoped>
	/deep/.u-input__textarea {
		font-size: 40rpx !important;
		padding: 25rpx 20rpx;
	}

	/deep/uni-textarea {
		caret-color: #FF713F;
	}
	/deep/.uicon-plus {
		font-size: 40px !important;
	}

	/deep/.u-add-wrap {
		color: rgb(190, 190, 190);
		background-color: #fff;
		border: 2px solid rgb(190, 190, 190);
	}
	/deep/.u-upload {
		padding: 0 0 15rpx 15rpx;
	}
	/deep/.ql-editor.ql-blank:before {
	  color: rgba(0, 0, 0, 0.5);
	  font-style: normal!important;
	  font-size: 40rpx ;
	}
	 /deep/.ql-container{
		font-size: 40rpx !important;
		padding: 15rpx 25rpx;
	}
	.operate-content {
		display: flex;
		align-items: center;
		padding: 15rpx;
		.content {
			color: rgb(113, 113, 111);
			padding-right: 25rpx;
			font-size: 32rpx;
		}
		.not-share,
		.open-comment {
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			border: 6rpx solid rgb(201, 201, 201);
			display: inline-block;
		}
		.not-share-margin {
			margin-right: 95rpx;
		}
		.add-gou-img {
			width: 45rpx;
			height: 45rpx;
		}
	}
	.input-contorl-box {
		position: fixed;
		// bottom: 0;
		bottom: 100rpx;
		margin-top: 10rpx;
		background-color: rgb(252, 251, 247);
		.contorl-btn-box {
			display: flex;
			flex-direction: row;
			align-items: center;
			border-top: 1rpx solid #000;
			.control-btn {
				background-color: #fff;
				.choose-img {
					width: 55rpx;
					height: 55rpx;
					padding: 15rpx 35rpx;
				}
				.choose-emoji {
					width: 55rpx;
					height: 55rpx;
					padding: 15rpx 35rpx;
				}
			}
			.input-word {
				font-size: 40rpx;
				display: block;
				text-align: right;
				padding-right: 15rpx;
			}
		}
		.emoji-list-box {
			width: 100%;
			height: 292rpx;
			background-color: #fff;
			.emoji-list-item {
				.emoji-img {
					width: 60rpx;
					height: 60rpx;
					padding: 15rpx 24rpx;
				}
			}
		}
	}
</style>