rtim/pages_im/pages/conversation/chating/components/ChatingFooter/ChatingActionBar.vue

<template>
	<view class="chat_action_bar">
		<scroll-view :scroll-y="true" :show-scrollbar="false" class="action_scroll_view">
			<view class="action_row">
				<view v-for="item in actionList" :key="item.idx" @click="actionClick(item)" class="action_col">
					<view class="action_item">
						<image :src="item.icon" class="action_icon" mode="aspectFit" />
						<text class="action_item_title">{{ item.title }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import { ChatingFooterActionTypes, ContactChooseTypes, PageEvents } from '../../../../../constant';
import { AmapWebKey } from '../../../../../common/config';
import IMSDK, { IMMethods } from 'openim-uniapp-polyfill';
// import { getPurePath } from '../../../../../util/common';
import { callingModule } from '../../../../../util/imCommon';
import { premissionCheck } from "@/js_sdk/wa-permission/permission.js"


export default {
	components: {},
	data() {
		return {
			userID: '',
			isUser: false,
			readFilePermission:false,
			actionList: [
				{
					idx: 0,
					type: ChatingFooterActionTypes.takePhoto,
					title: '拍照',
					icon: '/pages_im/static/images/new/take_pictures_icon.png'
				},
				{
					idx: 1,
					type: ChatingFooterActionTypes.Album,
					title: '相册',
					icon: '/pages_im/static/images/new/album_icon.png'
				},
				{
					idx: 2,
					type: ChatingFooterActionTypes.Camera,
					title: '视频',
					icon: '/pages_im/static/images/new/video_icon.png'
				},
				{
					idx: 3,
					type: ChatingFooterActionTypes.pickCamera,
					title: '录像',
					icon: '/pages_im/static/images/new/picture_recording_icon.png'
				}
				,{
				  idx: 4,
				  type: ChatingFooterActionTypes.Call,
				  title: "语音通话",
				  icon: "/pages_im/static/images/new/voice_call_icon.png",
				},
				{
					idx: 5,
					type: ChatingFooterActionTypes.VideoCall,
					title: "视频通话",
					icon: "/pages_im/static/images/new/video_call_icon.png",
				 }
				//{
				//         idx: 6,
				//         type: ChatingFooterActionTypes.File,
				//         title: "问诊订单",
				//         icon: require("../../../../../static/images/news/consultation_order_icon.png"),
				// },
				// {
				//   idx: 4,
				//   type: ChatingFooterActionTypes.Card,
				//   title: "名片",
				//   icon: require("../../../../../static/images/chating_action_card.png"),
				// },
				// {
				//   idx: 12,
				//   type: ChatingFooterActionTypes.Location,
				//   title: "位置",
				//   icon: require("../../../../../static/images/chating_action_location.png"),
				// }
			]
		};
	},
	computed: {
		...mapGetters(['timStore']),
		imType() {
			return this.timStore?.imType ?? '';
		},
		orderId() {
			return this.timStore?.orderId ?? '';
		},
		orderType() {
			return this.timStore?.orderType ?? '';
		}
	},
	mounted() {
		let conversation = this.$store.getters.storeCurrentConversation;
		let userID = (conversation && conversation.userID) ? conversation.userID : '';
		if (userID) {
			this.userID = userID.substring(1);
			this.isUser = userID.indexOf('U') != -1;
		}
		
		if (this.$companyUserIsLogin() && this.isUser) {
			// this.actionList.push({
			// 	idx: 4,
			// 	type: ChatingFooterActionTypes.Call,
			// 	title: '语音通话',
			// 	icon: require('../../../../../static/images/audio-calling.svg')
			// });
			// this.actionList.push({
			// 	idx: 5,
			// 	type: ChatingFooterActionTypes.VideoCall,
			// 	title: '视频通话',
			// 	icon: require('../../../../../static/images/chating_action_call.png')
			// });
			this.actionList.push({
				idx: 6,
				type: ChatingFooterActionTypes.Order,
				title: '问诊订单',
				icon: '/pages_im/static/images/new/consultation_order_icon.png'
			});
			this.actionList.push({
				idx: 8,
				type: ChatingFooterActionTypes.StoreOrder,
				title: '药品订单',
				icon: '/pages_im/static/images/new/drug_orders_icon.png'
			});
			this.actionList.push({
				idx: 9,
				type: ChatingFooterActionTypes.Package,
				title: '疗法',
				icon: '/pages_im/static/images/new/therapy_icon.png'
			});
			
			this.actionList.push({
				idx: 10,
				type: ChatingFooterActionTypes.CouponPackage,
				title: '私域疗法券',
				icon: '/pages_im/static/images/new/therapy_voucher_icon.png'
			});
			
			this.actionList.push({ 
				idx: 11,
				type: ChatingFooterActionTypes.InquirySelect,
				title: '会诊',
				icon: '/pages_im/static/images/new/consultation_doctors_icon.png'
			});
			
			return;
		}

		//if((this.imType==1&&this.orderType==2)||this.imType==2){  //语音通话
			// this.actionList.push({
			// 	idx: 4,
			// 	type: ChatingFooterActionTypes.Call,
			// 	title: '语音通话',
			// 	icon: require('../../../../../static/images/audio-calling.svg')
			// });
		//}
		//if((this.imType==1&&this.orderType==2)||this.imType==2){  //视频通话
			// this.actionList.push({
			// 	idx: 5,
			// 	type: ChatingFooterActionTypes.VideoCall,
			// 	title: '视频通话',
			// 	icon: require('../../../../../static/images/chating_action_call.png')
			// });
		//}
		
		if (this.imType == 1) {
			//问诊订单
			this.actionList.push({
				idx: 6,
				type: ChatingFooterActionTypes.Order,
				title: '问诊订单',
				icon: '/pages_im/static/images/new/consultation_order_icon.png'
			});
		}
		if (this.imType == 2) {
			//视频通话
			this.actionList.push({
				idx: 7,
				type: ChatingFooterActionTypes.Follow,
				title: '随访单',
				icon: '/pages_im/static/images/chating_action_file.png'
			});
			this.actionList.push({
				idx: 8,
				type: ChatingFooterActionTypes.StoreOrder,
				title: '药品订单',
				icon: '/pages_im/static/image/new/drug_orders_icon.png'
			});
		}
		
	},

	methods: {
		async actionClick(action) {
			switch (action.type) {
				case ChatingFooterActionTypes.takePhoto:
				    if (uni.$u.os() != 'ios') {
				    	this.requestPressmition();
				    	if(!this.readFilePermission){
				    		return;
				    	}
				    }
					this.$emit('prepareMediaMessage', { type: ChatingFooterActionTypes.Camera, index: 0 });
					break;
				case ChatingFooterActionTypes.Album:
				    if (uni.$u.os() != 'ios') {
				    	this.requestPressmition();
				    	if(!this.readFilePermission){
				    		return;
				    	}
				    }
					this.$emit('prepareMediaMessage', { type: ChatingFooterActionTypes.Album, index: 0 });
					break;
				case ChatingFooterActionTypes.Camera:
				    if (uni.$u.os() != 'ios') {
				    	this.requestPressmition();
				    	if(!this.readFilePermission){
				    		return;
				    	}
				    }
					this.$emit('prepareMediaMessage', { type: ChatingFooterActionTypes.Album, index: 1 });
					break;
				case ChatingFooterActionTypes.pickCamera:
					if (uni.$u.os() != 'ios') {
						this.requestPressmition();
						if(!this.readFilePermission){
							return;
						}
					}
					this.$emit('prepareMediaMessage', { type: ChatingFooterActionTypes.Camera, index: 1 });
					break;
				case ChatingFooterActionTypes.Call:
					if (!this.$store.getters.storeCurrentConversation.groupID) {
						uni.$emit(PageEvents.RtcCall, 'audio');
						return;
					}
					IMSDK.asyncApi('signalingGetRoomByGroupID', IMSDK.uuid(), this.$store.getters.storeCurrentConversation.groupID).then(({ data }) => {
						if (data.invitation) {
							uni.showModal({
								title: '提示',
								content: '群通话进行中，是否直接加入？',
								confirmText: '确认',
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										callingModule.joinRoomLiveChat(data);
									}
								}
							});
						} else {
							uni.$emit(PageEvents.RtcCall, 'audio');
						}
					});
					break;
				case ChatingFooterActionTypes.VideoCall:
					if (!this.$store.getters.storeCurrentConversation.groupID) {
						uni.$emit(PageEvents.RtcCall, 'video');
						return;
					}
					IMSDK.asyncApi('signalingGetRoomByGroupID', IMSDK.uuid(), this.$store.getters.storeCurrentConversation.groupID).then(({ data }) => {
						if (data.invitation) {
							uni.showModal({
								title: '提示',
								content: '群通话进行中，是否直接加入？',
								confirmText: '确认',
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										callingModule.joinRoomLiveChat(data);
									}
								}
							});
						} else {
							uni.$emit(PageEvents.RtcCall, 'video');
						}
					});
					break;

				case ChatingFooterActionTypes.Order:
					this.$emit('enterSubPage');
					{
						if (this.$companyUserIsLogin()) {
							uni.navigateTo({
								url: '/pages/company/inquiryOrderIMList?userId=' + this.userID
							});
						} else {
							uni.navigateTo({
								url: '/pages/store/inquiryOrderDetails?orderId=' + this.timStore.orderId
							});
						}
					}
					break;
				case ChatingFooterActionTypes.Follow:
					this.$emit('enterSubPage');
					uni.navigateTo({
						url: '/pages/user/followDetails?followId=' + this.timStore.followId
					});
					break;
				case ChatingFooterActionTypes.StoreOrder:
					{
						if (this.$companyUserIsLogin()) {
							uni.navigateTo({
								url: '/pages/company/storeOrderList?userId=' + this.userID
							});
						} else {
							uni.navigateTo({
								url: '/pages/store/storeOrderDetail?orderId=' + this.timStore.orderId
							});
						}
					}
					break;

				case ChatingFooterActionTypes.Package:  //疗法
					{
						if (this.$companyUserIsLogin()) {
							uni.navigateTo({
								url: '/pages/company/packageList?isIM=1'
							});
						}
					}
				break;
					
				case ChatingFooterActionTypes.CouponPackage:
					{
						if (this.$companyUserIsLogin()) {
							uni.navigateTo({
								url: '/pages/company/couponList?couponType=5&isIM=1'
							});
						}
					}
				break;
					
				case ChatingFooterActionTypes.InquirySelect:
					{
						if (this.$companyUserIsLogin()) {
							let companyId=uni.getStorageSync('companyId');
							let companyUserId=uni.getStorageSync('companyUserId');	
							uni.navigateTo({
								url: '/pages/store/inquirySelectType?companyId='+companyId+'&companyUserId='+companyUserId+'&isIM=1'
							});
						}
					}
				break;

				case ChatingFooterActionTypes.Card:
					uni.navigateTo({
						url: `/pages_im/pages/common/contactChoose/index?type=${ContactChooseTypes.Card}`
					});
					break;

				case ChatingFooterActionTypes.File:
					if (uni.$u.os() != 'ios') {
						this.requestPressmition();
						if(!this.readFilePermission){
							return;
						}
					}
					IMSDK.pickFile().then(async (path) => {
						console.log(path);
						const idx = path.lastIndexOf('/');
						const fileName = path.slice(idx + 1);
						const message = await IMSDK.asyncApi(IMMethods.CreateFileMessageFromFullPath, IMSDK.uuid(), {
							filePath: this.getPurePath(path),
							fileName
						});
						this.$emit('sendMessage', message);
					});
					break;
				case ChatingFooterActionTypes.Location:
					this.$emit('enterSubPage');
					uni.chooseLocation({
						success: async (res) => {
							if (res) {
								const options = {
									name: res.name,
									latng: `${res.latitude},${res.longitude}`,
									addr: res.address,
									city: res.address,
									module: 'locationPicker',
									latitude: res.latitude,
									longitude: res.longitude,
									url: `https://restapi.amap.com/v3/staticmap?size=600*300&markers=-1,https://cache.amap.com/lbs/static/cuntom_marker1.png,0:${res.longitude},${res.latitude}&key=${AmapWebKey}`
								};
								const message = await IMSDK.asyncApi(IMMethods.CreateLocationMessage, IMSDK.uuid(), {
									description: JSON.stringify(options),
									longitude: res.longitude,
									latitude: res.latitude
								});
								this.$emit('sendMessage', message);
							} else {
								uni.$u.toast('获取位置失败');
							}
						},
						fail: ({ errMsg }) => {
							if (!errMsg.includes('cancel')) {
								uni.$u.toast('获取位置失败');
							}
						}
					});
					break;
				default:
					break;
			}
		},
	
	    async requestPressmition(){
	    	let result = await premissionCheck("EXTERNAL_STORAGE");
	    	console.log("premission result:"+result);
	    	if(result == 1) {
	    		this.readFilePermission=true;
	    	}
	    },
		getPurePath(path){
			  const prefix = "file://";
			  const relativeRrefix = "_doc/";
			  if (path.includes(prefix)) {
				path = path.replace(prefix, "");
			  }
			  if (path.includes(relativeRrefix)) {
				path = plus.io.convertLocalFileSystemURL(path);
			  }
			  return path;
		}
	
	}
};
</script>

<style scoped>
.chat_action_bar {
	width: 750rpx;
	height: 550rpx;
	background-color: #F5F7FA;
	border-top-width: 1px;
	border-top-color: #EAEBED;
}

.action_scroll_view {
	width: 750rpx;
	flex-direction: column;
	padding: 24rpx 0;
}

.action_row {
	flex-direction: row;
	flex-wrap: wrap;
	width: 750rpx;
}

.action_col {
	width: 187rpx;
	align-items: center;
	justify-content: center;
	margin-bottom: 24rpx;
	
}

.action_item {
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 10px;
	width: 130rpx;
	padding:8px 0;
	margin:5px 0;
}

.action_icon {
	width: 50rpx;
	height: 50rpx;
	margin-bottom: 10rpx;
}

.action_item_title {
	font-size: 24rpx;
	color: #666666;
}
</style>