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

<template>
  <view class="chat_action_bar">
    <view class="action_row">
      <view
	    class="action_item"
        v-for="item in actionList"
        :key="item.idx"
        @click="actionClick(item)"
        >
        <image :src="item.icon" alt="" srcset="" />
        <text class="action_item_title">{{ item.title }}</text>
      </view>
    </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 { gotoAppPermissionSetting,requestAndroidPermission } from "../../../../../util/permission";

export default {
  components: {},
  data() {
    return {
      actionList: [  
        {
          idx: 0,
          type: ChatingFooterActionTypes.takePhoto,
          title: "拍照",
          icon: "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_action_camera.png",
        },
		{
		  idx: 1,
		  type: ChatingFooterActionTypes.Album,
		  title: "相册",
		  icon: "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_action_image.png",
		},
		{
		  idx: 2,
		  type: ChatingFooterActionTypes.Camera,
		  title: "视频",
		  icon: "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/take-photo.svg",
		},
		{
		  idx: 3,
		  type: ChatingFooterActionTypes.pickCamera,
		  title: "录像",
		  icon: "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/take-video.svg",
		}
		// ,{
		//   idx: 4,
		//   type: ChatingFooterActionTypes.Call,
		//   title: "语音通话",
		//   icon: "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/audio-calling.svg",
		// },
  //       {
  //         idx: 5,
  //         type: ChatingFooterActionTypes.VideoCall,
  //         title: "视频通话",
  //         icon: "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_action_call.png",
  //       },
  //       {
  //         idx: 6,
  //         type: ChatingFooterActionTypes.File,
  //         title: "问诊订单",
  //         icon: "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_action_file.png",
  //       },
        // {
        //   idx: 4,
        //   type: ChatingFooterActionTypes.Card,
        //   title: "名片",
        //   icon: "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_action_card.png",
        // },
        // {
        //   idx: 5,
        //   type: ChatingFooterActionTypes.Location,
        //   title: "位置",
        //   icon:"https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_action_location.png",
        // },
      ],
    };
  },
  computed: {
	  ...mapGetters(["timStore"]),
	 imType() {
	 	return this.timStore?.imType ?? '' ;
	 },
	 orderId() {
	 	return this.timStore?.orderId ?? '' ;
	 },
	 orderType() {
	 	return this.timStore?.orderType ?? '' ;
	 }
  },
  mounted() {
  	 //   if((this.imType==1&&this.orderType==2)||this.imType==2){  //语音通话
			 //   this.actionList.push({
				//    idx: 4,
				//    type: ChatingFooterActionTypes.Call,
				//    title: "语音通话",
				//    icon: "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/audio-calling.svg"
			 //   });
	   // }
	   // if((this.imType==1&&this.orderType==2)||this.imType==2){  //视频通话
				// this.actionList.push({
				//    idx: 5,
				//    type: ChatingFooterActionTypes.VideoCall,
				//    title: "视频通话",
				//    icon: requirestatic/images/chating_action_call.png")
				// });   
	   // }
	   if(this.imType==1){  //问诊订单
	   		this.actionList.push({
	   		   idx: 6,
	   		   type: ChatingFooterActionTypes.Order,
	   		   title: "问诊订单",
	   		   icon: "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_action_file.png"
	   		});   
	   }
	   if(this.imType==2){  //视频通话
	   		this.actionList.push({ 
	   		   idx: 7,
	   		   type: ChatingFooterActionTypes.Follow,
	   		   title: "随访单",
	   		   icon: "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_action_file.png"
	   		});  
			this.actionList.push({
			   idx: 8,
			   type: ChatingFooterActionTypes.StoreOrder,
			   title: "药品订单",
			   icon: "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_action_file.png"
			});   
	   }
  },
  methods: {
    async actionClick(action) {
      switch (action.type) {
		case ChatingFooterActionTypes.takePhoto:
		  this.$emit("prepareMediaMessage", {type:ChatingFooterActionTypes.Camera,index:0 });
		  break;
		case ChatingFooterActionTypes.Album:
		  this.$emit("prepareMediaMessage", {type:ChatingFooterActionTypes.Album,index:0});
		  break;  
        case ChatingFooterActionTypes.Camera:
		  this.$emit("prepareMediaMessage", {type:ChatingFooterActionTypes.Album,index:1});
	      break;
        case ChatingFooterActionTypes.pickCamera:
          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:
		   uni.navigateTo({
			  url: '/pages_order/inquiryOrderDetails?orderId='+this.timStore.orderId
		   }); 
		 break;
		case ChatingFooterActionTypes.Follow:
			uni.navigateTo({
				url: '/pages_user/followDetails?orderId='+this.timStore.followId
			}); 
		 break;
		case ChatingFooterActionTypes.StoreOrder:
		    uni.navigateTo({
		    	url: '/pages_order/storeOrderDetail?orderId='+this.timStore.orderId
		    }); 
		 break;
		case ChatingFooterActionTypes.Card:
          uni.navigateTo({
             url: `/pages_im/pages/common/contactChoose/index?type=${ContactChooseTypes.Card}`,
          });
          break;
        case ChatingFooterActionTypes.File:
          
          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: getPurePath(path),
                fileName,
              },
            );
            this.$emit("sendMessage", message);
          });
          break;
        case ChatingFooterActionTypes.Location:
          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;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.chat_action_bar {
  position: relative;
  background: #f0f2f6;
  padding: 24rpx 36rpx;

  .action_row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 24rpx;
  }

  .action_item {
    @include centerBox();
    flex-direction: column;
    margin-top: 24rpx;
	width: 25%;
    image {
      width: 96rpx;
      height: 96rpx;
    }

    &_title {
      font-size: 24rpx;
      color: #999;
      margin-top: 6rpx;
    }
  }
}
</style>