NN2024010801/addons/xlapp/components/video/comment.vue

<template>
	<view :class="['comment-popup']" :style="'width:'+boxWidth+'px;height;486px;'">
		<u-popup class="popup-box popup-setting popup-profile" :show="show" @close="closeComment" :zIndex="996"
			:safeAreaInsetTop="true" bgColor="#fff" round="20rpx" :closeOnClickOverlay="true" mode="bottom"
			:overlayStyle="{'z-index': 98}" :mask-custom-style="{backgroundColor:'transparent !important'}"
			@touchmove.stop.prevent
			:customStyle="{overflowY: 'scroll',border:'1rpx solid #fff',borderColor:'#333',top: 0,width: (boxWidth)+'px',height: '486px'}">
			<view :class="['popup-main','popup-main-'+device,'popup-main-'+(isH5?'h5':'app')]"
				:style="'width:'+boxWidth+'px;486px'">
				<view class="comment-box">
					<view class="comment-title">
						<text class="comment-title_text">{{params.total||0}}{{$tt('条评论')}}</text>
					</view>
					<view class="comment-list">
						<scroll-view class="scroll-box" @scrolltolower="loadMore" scroll-y>
							<view class="scroll-wrap">
								<view class="comment-item" v-for="(v,k) in dataList" :key="k">
									<view class="comment-user-avatar"
										@click="gotoPage('/pages/user/home?id='+v.user_id)">
										<image class="user-avatar_image" :src="v.member?v.member.avatar:''"
											mode="aspectFill">
										</image>
									</view>
									<view class="info-box" :style="'width:'+(boxWidth-60)+'px;'">
										<view class="user-name" @longpress="showDelete(v,k,-1)">
											<text class="user-name_text">{{v.member? v.member.nickname:''}}</text>
											<image class="del-icon"
												v-if="(userInfo.id == v.user_id || liveUserId==userInfo.id) && v.show_delete "
												src="../../static/icons/user/icon-del.png" mode="aspectFill"></image>
										</view>
										<view class="comment-content-box" @longpress="showDelete(v,k,-1)">
											<view class="content-info">
												<text class="content-info_text">{{v.content||''}}</text>
											</view>
											<view class="content-image-box" v-if="v.albums.length>0">
												<image class="image-box_image" @click="previewImage(ak,v.albums)"
													:src="va.url" v-for="(va,ak) in v.albums" :key="ak" mode="widthFix"
													:lazy-load="true">
												</image>
											</view>
											<view class="comment-time">
												<view class="desc-box">
													<text class="comment-time_text">{{v.time_text}}</text>
													<text class="comment-reply_text"
														@click="replyTo(v,k,0)">{{$tt('回复')}}</text>
												</view>
												<view class="like-box" @click="like(v,k,-1)">
													<image class="comment-like_icon" v-if="v.is_like"
														src="../../static/icons/user/icon-like-red.png" mode="">
													</image>
													<image v-else class="comment-like_icon"
														src="../../static/icons/user/icon-like-gray.png" mode="">
													</image>
													<text class="like-num">{{getNumText(v.like_num)}}</text>
												</view>
											</view>
										</view>
										<view class="reply-show-btn" v-if="v.reply_count>0 && !v.reply_show"
											@click="showMore(v,k)">
											<text
												class="show-more_text">{{$tt('展开')}}{{v.reply_count||0}}{{'条评论'}}</text>
											<image class="show-icon" src="../../static/icons/user/icon-down-arrow.png"
												mode="">
											</image>
										</view>
										<view class="reply-show-btn" v-else-if="v.reply_count>v.reply_list.length"
											@click="showMore(v,k)">
											<text class="show-more_text">{{$tt('展开更多评论')}}</text>
											<image class="show-icon" src="../../static/icons/user/icon-down-arrow.png"
												mode="">
											</image>
										</view>

										<view class="comment-reply-list" v-if="v.reply_count>0 && v.reply_show">
											<view class="comment-item reply-item" v-for="(vv,kk) in v.reply_list"
												:key="kk">
												<view class="comment-user-avatar reply-user-avatar"
													@click="gotoPage('/pages/user/home?id='+vv.user_id)">
													<image class="user-avatar_image reply-user-avatar_image"
														:src="vv.member?vv.member.avatar:''" mode="aspectFill">
													</image>
												</view>
												<view class="info-box" :style="'width:'+(boxWidth-90)+'px;'">
													<view class="user-name" @longpress="showDelete(vv,k,kk)">
														<text
															class="user-name_text">{{vv.member? vv.member.nickname:''}}</text>
														<image @click="deleteRow(vv,k,kk)" class="del-icon"
															v-if="(userInfo.id == v.user_id || liveUserId == userInfo.id) && vv.show_delete"
															src="../../static/icons/user/icon-del.png"
															mode="aspectFill"></image>
													</view>
													<view class="comment-content-box" @longpress="showDelete(vv,k,kk)">
														<view class="content-info">
															<text
																class="content-info_text reply-info_text">{{vv.content||''}}</text>
														</view>
														<view class="content-image-box" v-if="vv.albums.length>0">
															<image class="image-box_image" :src="va.url"
																v-for="(va,ak) in vv.albums" :key="ak" mode="aspectFit"
																:lazy-load="true"></image>
														</view>
														<view class="comment-time">
															<view class="desc-box">
																<text class="comment-time_text">{{vv.time_text}}</text>
																<text class="comment-reply_text"
																	@click="replyTo(v,k,vv)">{{$tt('回复')}}</text>
															</view>
															<view class="like-box" @click="like(vv,k,kk)">
																<image class="comment-like_icon" v-if="vv.is_like"
																	src="../../static/icons/user/icon-like-red.png"
																	mode="">
																</image>
																<image v-else class="comment-like_icon"
																	src="../../static/icons/user/icon-like-gray.png"
																	mode="">
																</image>
																<text
																	class="like-num">{{getNumText(vv.like_num)}}</text>
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
										<view class="reply-show-btn" v-if="v.reply_show" @click="showUp(v,k)">
											<text class="close-reply">{{$tt('收起')}}</text>
											<image class="show-icon" src="../../static/icons/user/icon-up-arrow.png"
												mode="">
											</image>
										</view>
									</view>
								</view>
								<view class="scroll-block">
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="input-box" :style="'width:'+boxWidth+'px;'">
					<view class="photo-box" v-if="formData.albums.length>0">
						<view class="image-box" v-for="(v,k) in formData.albums" :key="k">
							<image class="photo-image" :src="v.url" mode="aspectFill"
								@click="previewImage(k,formData.albums)"></image>
							<image class="icon-image-close" src="../../static/icons/user/icon-close.png"
								mode="aspectFill" @click="deletePic(k)"></image>
						</view>
					</view>
					<view class="send-box">
						<u-input class="input-btn" type="text" v-model="formData.content" shape="circle"
							fontSize="28rpx" color="#fff" confirmType="send"
							:placeholder="formData.reply_name?$tt('回复')+'：'+formData.reply_name:$tt('说点什么')+'...'"
							border="none" :maxlength="150" clearable @focus="showGiftIcon=false" :holdKeyboard="true"
							cursorSpacing="30" @clear="clearInput()" @confirm="publishSubmit">
						</u-input>
						<!-- <u-upload class="photo-upload" :action="uploadConfig.url" :header="uploadConfig.header"
							:accept="'image'" @afterRead="afterRead" :uploadText="$tt('图片')" imageMode="aspectFit"
							:width="0" :height="0" :file-list="formData.albums" name="albums" multiple :maxCount="3"
							:previewImage="false">
							<image class="icon-photo" src="../../static/icons/user/icon-photo.png" mode="aspectFill">
							</image>
						</u-upload> -->
						<!-- <image class="icon-photo" @click="chooseImage" src="../../static/icons/user/icon-photo.png"
							mode="aspectFill">
						</image> -->

						<text @click="publishSubmit" class="input-send">{{$tt('发送')}}</text>
					</view>
				</view>
			</view>
		</u-popup>

		<u-loading-icon class="loading" :show="loading" size="60" color="#14ECCC"
			custom-style="position:absolute; top: 30rpx;z-index: 10099;left:0;right:0;margin: 0 auto;">
		</u-loading-icon>
	</view>
</template>

<script>
	import {
		getToken
	} from '../../config/cache.js';
	import request from '../../config/request.js'
	let app = getApp().globalData;
	export default {
		name: "play",
		props: ['id', 'show', 'videoIndex', 'liveUserId'],
		data() {
			return {
				loading: false,
				boxWidth: 360,
				boxHeight: 800,
				isH5: false,
				device: '',
				userInfo: {
					id: 0
				},
				params: {
					page: 1,
					pageSize: 18,
					total: 0,
					video_id: 0,
					reply_id: 0,
					loaded: false,
				},
				formData: {
					video_id: 0,
					reply_id: 0,
					reply_uid: 0,
					reply_index: -1,
					reply_name: '',
					albums: [],
					content: '',
				},
				dataList: [],
				fileList: [],
				uploadConfig: {
					url: this.baseUrl + '/api/v1/uploadImage',
					header: {
						Authorization: "Bearer " + getToken()
					}
				},
			}
		},
		created() {
			const windowInfo = uni.getWindowInfo();
			this.boxHeight = windowInfo.windowHeight
			this.boxWidth = windowInfo.windowWidth

			this.params.video_id = this.id
			this.formData.video_id = this.id

			this.device = uni.getSystemInfoSync().osName;
			// #ifdef H5 || MP-WEIXIN
			this.isH5 = true
			// #endif

			this.getInfo()
			this.getList();
		},
		methods: {
			$tt(text, arr = {}) {
				return app.$t(text, arr);
			},
			gotoPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			loadData() {
				this.dataList = []
				this.params.page = 1
				this.params.loaded = false
				this.getList()

			},
			loadMore() {
				if (!this.params.loaded) {
					this.params.page++;
					this.getList()
				}
			},
			closeComment() {
				uni.$emit('close-comment', true);
			},
			// 数字格式化
			getNumText(num) {
				return num > 10000 ? (num / 10000).toFixed(1) + this.$tt('万') : num;
			},
			//  预览
			previewImage(index, urls) {
				let arr = [];
				if (urls.length <= 0) {
					return false;
				}
				urls.forEach((item, k) => {
					arr.push(item.url)
				})
				console.log(index, urls)
				uni.previewImage({
					current: index,
					urls: arr ? arr : [],
					loop: true
				})
			},
			showUp(row, index) {
				this.dataList[index].reply_show = 0
			},
			showMore(row, index) {
				this.getReplyList(row.id)
				this.dataList[index].reply_show = 1
			},
			clearInput() {
				this.formData.content = '';
				this.formData.reply_uid = 0;
				this.formData.reply_name = '';
				this.formData.reply_id = 0;
				this.formData.reply_index = -1;
			},
			// 回复
			replyTo(row, index, reply_row) {
				console.log('回复', row)
				if (reply_row) {
					this.formData.reply_uid = reply_row.user_id;
					this.formData.reply_name = typeof(reply_row.member.nickname) != 'undefined' ? reply_row.member
						.nickname : '';
				} else {
					this.formData.reply_name = typeof(row.member.nickname) != 'undefined' ? row.member.nickname : '';
				}

				this.formData.reply_id = typeof(row.id) != 'undefined' ? row.id : 0;
				this.formData.reply_index = index;

			},
			// 用户信息
			async getInfo() {
				let _this = this
				const res = await request.api('/user/info', {
					type: 'info',
				})
				if (res.success == true) {
					this.userInfo = res.data
				}
			},
			// 列表
			async getList() {
				this.loading = true;
				const res = await request.api('/video/comment/index', this.params)
				this.loading = false;
				this.params.total = typeof(res.data.all_total) != 'undefined' ? res.data.all_total : 0
				if (res.success == true && res.data.list.length > 0) {
					if (this.params.page == 1) {
						this.dataList = res.data.list
					} else {
						this.dataList = this.dataList.concat(res.data.list)
					}
					if (this.formData.reply_index > 0) {
						let index = this.formData.reply_index;
						this.dataList[index].reply_show = 1
					}
					this.$forceUpdate()
				} else if (res.code == 403) {
					uni.showToast({
						title: this.$tt('请先登录'),
						icon: 'none'
					})
				} else {
					if (this.params.page != 1) {
						this.params.loaded = true
						uni.showToast({
							title: this.$tt('暂时没有更多了'),
							icon: 'none'
						})
					}
				}
			},
			// 加载回复列表
			async getReplyList(reply_id, index) {
				this.loading = true;
				let params = Object.assign({}, this.params);
				params.reply_id = reply_id
				const res = await request.api('/video/comment/index', params)
				this.loading = false;
				this.dataList[index].reply_count = typeof(res.data.total) != 'undefined' ? res.data.total : 0
				if (res.success == true && res.data.list.length > 0) {
					let dataList = this.dataList[index]['reply_list']
					if (dataList.length <= 0) {
						dataList = res.data.list
					} else {
						dataList = dataList.concat(res.data.list)
					}
					this.dataList[index]['reply_list'] = dataList
					this.$forceUpdate()
				}
			},
			// 发布
			async publishSubmit() {
				if (this.formData.content == '' && this.formData.albums.length <= 0) {

				}
				this.loading = true;
				const res = await request.api('/video/comment/publish', this.formData)
				this.loading = false;
				this.params.total = typeof(res.data.total) != 'undefined' ? res.data.total : 0
				if (res.success == true) {
					this.formData.content = ''
					this.formData.albums = []
					this.loadData()
					uni.hideKeyboard()
					uni.$emit('load.comment_num', {
						index: this.videoIndex,
						num: 1
					})
				} else if (res.code == 403) {
					uni.showModal({
						title: this.$tt('操作提示'),
						content: this.$tt('请先登录账号后使用'),
						cancelText: this.$tt('暂不登录'),
						confirmText: this.$tt('立即登录'),
						confirmColor: '#14ECCC',
						success: function(result) {
							if (result.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							} else {
								uni.navigateTo({
									url: '/pages/index/index'
								})
							}
						}
					})
				} else {
					uni.showToast({
						title: this.$tt(res.msg),
						icon: 'none'
					})
				}
			},
			// 点赞
			async like(data, index, index1) {
				let row = Object.assign({}, data)
				if (this.loading) {
					return false;
				}
				this.loading = true;
				const res = await request.api('/video/comment/like', {
					id: row.id,
					status: row.is_like == 1 ? 2 : 1,
				})
				this.loading = false;
				if (res.code == 403) {
					uni.showModal({
						title: this.$tt('操作提示'),
						content: this.$tt('请先登录账号后使用'),
						cancelText: this.$tt('暂不登录'),
						confirmText: this.$tt('立即登录'),
						confirmColor: '#14ECCC',
						success: function(result) {
							if (result.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							} else {
								uni.navigateTo({
									url: '/pages/index/index'
								})
							}
						}
					})
				} else {
					// this.loadData()
					if (index1 >= 0) {
						this.dataList[index].reply_show = 1
						this.dataList[index]['reply_list'][index1].is_like = row.is_like == 1 ? 0 : 1
						let num = this.dataList[index]['reply_list'][index1].like_num
						this.dataList[index]['reply_list'][index1].like_num = (row.is_like == 1 ? (num - 1 > 0 ? num -
							1 : 0) : num + 1)
					} else {
						this.dataList[index].is_like = row.is_like == 1 ? 0 : 1
						let num = this.dataList[index].like_num
						this.dataList[index].like_num = (row.is_like == 1 ? (num - 1 > 0 ? num - 1 : 0) : num + 1)
					}
					this.$forceUpdate()
				}
			},
			//
			showDelete(row, index, index1) {
				return false;
				let _this = this
				uni.showModal({
					title: _this.$tt('操作提示'),
					content: _this.$tt('是否删除该条评论？不可恢复，谨慎操作～'),
					cancelText: _this.$tt('取消'),
					confirmText: _this.$tt('确定'),
					confirmColor: '#14ECCC',
					success: function(res) {
						if (res.confirm) {
							_this.deleteRow(row, index, index1)
						}
					}
				})
			},
			// 删除
			async deleteRow(data, index, index1) {
				let row = Object.assign({}, data)
				if (this.loading) {
					return false;
				}
				this.loading = true;
				const res = await request.api('/video/comment/delete', {
					id: row.id,
				})
				this.loading = false;
				if (res.success == true) {
					if (index1 > 0) {
						this.dataList[index]['reply_list'].splice(index1, 1)
					} else {
						this.dataList.splice(index1, 1)
					}
					this.params.total = (this.params.total > 1) ? this.params.total - 1 : 0
					uni.$emit('load.comment_num', {
						index: this.videoIndex,
						num: -1
					})
				} else if (res.code == 403) {
					uni.showModal({
						title: this.$tt('操作提示'),
						content: this.$tt('请先登录账号后使用'),
						cancelText: this.$tt('暂不登录'),
						confirmText: this.$tt('立即登录'),
						confirmColor: '#14ECCC',
						success: function(result) {
							if (result.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							} else {
								uni.navigateTo({
									url: '/pages/index/index'
								})
							}
						}
					})
				} else {
					uni.showToast({
						title: this.$tt(res.msg),
						icon: 'none'
					})
				}
			},
			async chooseImage(name) {
				let _this = this
				uni.chooseImage({
					count: 3,
					success: function(res) {
						let urls = res.tempFilePaths;
						console.log(res)
						_this.catchImageUpload(name, urls)
					}
				})
			},
			async catchImageUpload(name, urls) {
				let _this = this
				if (urls.length > 0) {
					for (let i = 0; i < urls.length; i++) {
						let res = await _this.uploadFilePromise(urls[i], name);
						_this.formData[name][i] = res;
					}
				}
			},
			// 删除图片
			async deletePic(index) {
				this.formData['albums'].splice(index, 1)
			},
			// 读取图片
			async afterRead(event) {
				console.log(event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.formData[event.name].length
				lists.map((item) => {
					this.formData[event.name].push({
						...item,
						status: 'uploading',
						message: this.$tt('上传中')
					})
				})

				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.formData[event.name][fileListLen]
					if (result) {
						this.formData[event.name].splice(fileListLen, 1, Object.assign(
							item, {
								status: 'success',
								message: this.$tt('上传成功'),
								url: result.url
							}))
						fileListLen++
					} else {
						this.formData[event.name].splice(fileListLen, 1, Object.assign(
							item, {
								status: 'fail',
								message: this.$tt('上传失败'),
							}))
					}
				}
			},
			blobToBase64(blob, callback) {
				// 创建FileReader对象
				let reader = new FileReader();
				reader.onload = function(e) {
					// 当读取操作完成时，调用callback函数并传入转换后的Base64字符串
					callback(e.target.result);
				};
				reader.readAsDataURL(blob); // 读取Blob对象
			},
			uploadFilePromise(url) {
				let _this = this
				console.log(url)
				_this.loading = true

				plus.io.resolveLocalFileSystemURL(url, function(entry) {
					entry.file(function(file) {
						var reader = new plus.io.FileReader();
						reader.onloadend = function(e) {
							// 这里的e.target.result就是文件的blob数据
							var blob = new Blob([e.target.result], {
								type: file.type
							});

							console.log('文件', blob)
						}
					})
				})

				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: _this.baseUrl + '/api/v1/uploadImage',
						filePath: url,
						fileType: 'image',
						header: _this.uploadConfig.header,
						name: 'file',
						formData: {},
						success: (res) => {
							console.log('上传结果', res)
							_this.loading = false
							let result = JSON.parse(res.data)
							if (result.success == true) {
								resolve(result.data)
							} else {
								uni.showToast({
									title: this.$tt('上传失败'),
									style: 'z-index:10078',
									icon: 'none',
								})
							}

						}
					});
				})
			},
		}

	}
</script>

<style scoped>
	.comment-popup {
		position: fixed;
		z-index: 996;
		background-color: transparent;
		/* bottom: -2rpx; */
	}

	.popup-main {
		overflow: hidden;
		background-color: #303030;
		height: 600px;
		/* position: absolute; */
		bottom: 0;
		left: -1rpx;

		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}



	.popup-main-app {
		position: absolute;
	}

	.popup-main-android {
		/* position: absolute; */
		padding-bottom: 120rpx;
	}

	.popup-main-h5 {
		padding-bottom: 120rpx;
	}

	.comment-title {
		display: flex;
		align-items: center;
		padding: 30rpx 0;

		border-bottom: 1rpx solid #666;
	}

	.comment-title_text {
		height: 36rpx;
		line-height: 36rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.comment-list {
		height: 486px;
		padding: 30rpx 0rpx 130rpx;
	}

	.scroll-box {
		height: 600px;
	}

	.scroll-wrap {
		padding: 20rpx 30rpx 60rpx;
	}

	.scroll-block {
		width: 100%;
		height: 200rpx;
	}

	.comment-item {
		display: flex;
		flex-direction: row;
		/* align-items: center; */
		margin-bottom: 20rpx;
	}

	.comment-user-avatar {
		width: 42rpx;
		height: 42rpx;
		margin-right: 20rpx;
		border-radius: 100rpx;
	}

	.user-avatar_image {
		width: 42rpx;
		height: 42rpx;
		border-radius: 200rpx;
	}

	.reply-user-avatar {
		width: 28rpx;
		height: 28rpx;
		border-radius: 200rpx;
		margin-right: 10rpx;
	}

	.reply-user-avatar_image {
		width: 28rpx;
		height: 28rpx;
		border-radius: 200rpx;
	}

	.info-box {}

	.user-name {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.user-name_text {
		font-size: 24rpx;
		color: #666;
		/* flex: 1; */
	}

	.del-icon {
		width: 38rpx;
		height: 38rpx;
		margin-left: 30rpx;
	}

	.content-info {
		padding: 8rpx 0;
	}

	.content-info_text {
		font-size: 26rpx;
		color: #e4e4e4;
	}

	.reply-info_text {
		font-size: 26rpx;
	}

	.content-image-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-bottom: 10rpx;
	}

	.image-box_image {
		width: 150rpx;
		margin-right: 20rpx;
	}

	.comment-time {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.desc-box {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.comment-time_text {
		font-size: 24rpx;
		color: #666;
	}

	.comment-reply_text {
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #999;
	}

	.like-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 30rpx;
	}

	.comment-like_icon {
		width: 38rpx;
		height: 38rpx;
	}

	.like-num {
		margin-left: 4rpx;
		font-size: 24rpx;
		color: #999;
	}

	.reply-show-btn {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.close-reply {
		margin-left: 4rpx;
		font-size: 24rpx;
		color: #999;
	}

	.show-more_text {
		margin-left: 4rpx;
		font-size: 24rpx;
		color: #999;
	}

	.show-icon {
		margin-left: 10rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.input-box {
		/* width: 100%; */
		/* height: 48rpx; */
		position: absolute;
		background-color: #222;
		bottom: -2rpx;
		padding: 30rpx 30rpx;
	}

	.photo-box {
		padding: 10rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.image-box {
		position: relative;
		margin-right: 20rpx;
	}

	.photo-image {
		width: 64rpx;
		height: 64rpx;

	}

	.icon-image-close {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: 4rpx;
		right: 2rpx;
		background-color: #666;
		padding: 2rpx;
	}

	.send-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.photo-upload {
		width: 42rpx;
		height: 42rpx;
		margin: 0rpx 30rpx;
		flex: 0;
		position: relative;
	}

	.icon-photo {
		width: 42rpx;
		height: 42rpx;
		/* margin: 0rpx 30rpx; */
		/* position: absolute; */
		/* top: -20rpx; */
		/* left: -40rpx; */
	}

	.input-btn {
		/* width: 320rpx; */
		height: 80rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #666;
		flex: 1;
	}

	.input-send {
		font-size: 28rpx;
		border-radius: 20rpx;
		padding: 10rpx 40rpx;
		color: #000;
		background-color: #14ECCC;
	}
</style>