shop-app/pages/account/message/chat/components/Footer.vue

<!--
 * @Author: ch
 * @Date: 2022-05-11 11:45:08
 * @LastEditors: ch
 * @LastEditTime: 2022-05-21 11:38:36
 * @Description: file content
-->
<template>
	<view class="footer">
		<GoodsInfo class="goods" v-if="simpleGoods.id && goodsShow" :goodsInfo="simpleGoods"
			@send="sendGoods" @close="goodsShow=false" @click="$Router.back()"/>
		<view class="operation">
			<textarea class="operation--input" :focus="focus" v-model="msgCtx" @focus="moreShow = false" @click="emojiShow = false"/>
			<view class="operation--btns">
				<image class="operation--emoji" src="@/static/imxx/emoji.png" @click="emojiShow = !emojiShow"/>
				<view class="operation--send" v-if="msgCtx.length" @click="send(msgCtx, MSG_TYPE.TXT)">发送</view>
				<image class="operation--more" v-else src="@/static/imxx/more.png" @click="moreShow = true" />
			</view>
		</view>
		<view class="emoji" v-if="emojiShow">
			<view class="emoji--tab">
				<text class="emoji--tab-item" :class="idx == curEmojiIdx && 'emoji--tab-item__active'" 
					v-for="(item, idx) in emojiData" :key="idx" @click="curEmojiIdx = idx">{{item.name}}</text>
			</view>
			<view class="emoji--icon">
				<view class="emoji--icon-item" @click="handleAddEmoji(item)"
					v-for="item in emojiData[curEmojiIdx].list" :key="item">{{emojiUtf16(item)}}</view>
			</view>
		</view>
		<view class="other" v-if="moreShow">
			<u-upload @afterRead="uploadImg" >
				<view class="other--btn">
					<image class="other--img" src="@/static/imxx/img.png"/>
					<view>图片</view>
				</view>
			</u-upload>
			
			<u-upload @afterRead="uploadVideo" compressed accept="video">
				<view class="other--btn">
					<image class="other--img" src="@/static/imxx/video.png"/>
					<view>视频</view>
				</view>
			</u-upload>
		</view>
	</view>
</template>
<script>
import {Im} from '@/common/utils';
import {MSG_TYPE} from '@/common/dicts/im';
import {Request} from '@/common/utils';
import {ApiPutUser} from '@/common/api/account';
import {ApiPostGetOssConfig} from '@/common/api/oss';
import UiButton from '@/components/UiButton.vue';
import {entitiestoUtf16, emojiData} from '@/common/plugins/emoji';
import GoodsInfo from './GoodsInfo.vue';
import OrderInfo from './OrderInfo.vue';
export default {
	components: { UiButton, GoodsInfo, OrderInfo },
	props: {
		orderInfo : {
			type : Object,
			default : () => ({})
		},
		goodsInfo : {
			type : Object,
			default : () => ({})
		}
	},
	data(){
		return {
			goodsShow : true,
			orderShow : true,
			moreShow : false,
			focus : false,
			msgCtx : '',
			MSG_TYPE ,

			emojiShow : false,
			emojiData,
			emojiUtf16 : entitiestoUtf16,
			curEmojiIdx : 0
		}
	},
	computed : {
		simpleGoods (){
			const {
				startingPrice,
				name,
				id,
				pictureList
			} = this.goodsInfo;
			const productImageUrl  = pictureList ? pictureList[0] : '';
			return {startingPrice,name,id, productImageUrl} 
		},
		simpleOrder (){
			const {
				orderId, 
				payTypeDesc, 
				payAmount, 
				orderStatusDesc, 
				orderNo, 
				products
			} = this.orderInfo;
			return {orderId, payTypeDesc, payAmount, orderStatusDesc, orderNo, ...(products ? products[0] : {})};
		}
	},
	watch:{
		simpleOrder(val){
			if(val.orderId){
				this.sendOrder();
			}
		}
	},
	methods:{
		/**
		 * 统一发送函数
		 */
		async send(val, type){
			let payload = {};
			switch(type){
				case MSG_TYPE.CUSTOM :
					payload = JSON.stringify(val)
					break;
				case MSG_TYPE.VIDEO:
				case MSG_TYPE.IMG : 
					payload = {url : val};
					break;
				default:
					payload = {text : val}
					break;
					
			}
			let res = await Im.sendMsg({
				fromId : this.$store.state.userInfo.id,
				content: { 
					toSessionId : this.$Route.query.sessionId,
					payload : payload,
					toId : 1,
					type : type
				}
			})
			this.msgCtx = '';
			this.focus = false;
			this.$nextTick(() => {
				this.focus = true;
			});
		},
		handleAddEmoji (data){
			let str = ' ' + entitiestoUtf16(data) + ' ';
			this.msgCtx += str;
		},
		sendGoods(){
			this.send(this.simpleGoods, MSG_TYPE.CUSTOM);
			this.goodsShow = false;
		},
		sendOrder(){
			this.send(this.simpleOrder, MSG_TYPE.CUSTOM);
			this.orderShow = false;
		},
		uploadImg(val){
			const file = val.file;
			this.uploadFile(file, MSG_TYPE.IMG);
			
		},
		uploadVideo(val){
			const file = val.file;
			this.uploadFile(file, MSG_TYPE.VIDEO);
			
		},
		/**
		 * 获取OSS鉴权信息
		 * configId 自定义文件夹 图片存储的文件夹名称
		 * serviceName 服务名
		 */
		async getOssCon(){
			const {error, result} = await ApiPostGetOssConfig({
				configId : 'im/',
				serviceName : 'uc'
			});
			if(error){
				uni.$u.toast(error.message);
				return false
			}
			return result;
		},
		/**
		 * 上传文件
		 * 1、拿到OSS信息上传，
		 * 2、成功后拼地址传发送消息
		 */
		async uploadFile(file, type){
			const urlArr = file.url.split('/');
			const fileName = file.name || urlArr[urlArr.length - 1];
			const oss = await this.getOssCon();
			uni.uploadFile({
				name : 'file',
				filePath : file.url,
				url : oss.host,
				formData : {
					name : fileName,
					key : `${oss.dir}${'${filename}'}`,
					policy : oss.policy,
					OSSAccessKeyId : oss.accessId,
					success_action_status : 200,
					signature : oss.signature
				},
				 success : async (res)=>{
					const fileUrl = `${oss.host}/${oss.dir}${fileName}`;
					this.send(fileUrl, type);
				}
			})


		}
		
	}
}
</script>
<style lang="scss" scoped>
.footer{
	position: fixed;
	bottom: 0;
	background: #fff;
	left: 0;
	right: 0;
	margin-bottom: constant(safe-area-inset-bottom);
	margin-bottom: env(safe-area-inset-bottom);
	
}
.goods{
	width: 670rpx;
	height: 200rpx;
	position: absolute;
	top: -220rpx;
	left: 30rpx;
}
.operation{
	display: flex;
	height: 100rpx;
	align-items: center;
	padding: 0 40rpx;
	&--input{
		height: 70rpx;
		padding: 18rpx 20rpx 10rpx;
		line-height: 40rpx;
		flex: 1;
		background: #F3F4F6;
		border-radius: 8rpx;
		margin-right: 15rpx;
	}
	&--btns{
		display: flex;
		align-items: center;
	}
	&--more, &--emoji{
		width: 50rpx;
		height: 50rpx;
		margin: 0 15rpx;
	}
	&--send{
		width: 110rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #FF875B;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		border-radius: 8rpx;
		margin: 0 15rpx;
	}
}
.emoji{
	&--icon{
		background: #f8f8f8;
		padding: 10rpx 30rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		height: 320rpx;
		overflow-y: auto;
		&-item{
			margin:20rpx;
		}
	}
	&--tab{
		display: flex;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 30rpx;
		&-item{
			padding: 0 20rpx;
			font-size: $font-size-sm;
			color: #999;
			&__active{
				background: #f8f8f8;
			}
		}
	}
}
.other{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	background: #f8f8f8;
	padding: 30rpx 40rpx;
	.u-upload{
		flex: 0;
	}
	&--btn{
		text-align: center;
		margin-right: 60rpx;
		color: #999;
	}
	&--img{
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
	}
}
</style>