ChatingActionBar.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
  1. <template>
  2. <view class="chat_action_bar">
  3. <u-row class="action_row">
  4. <u-col v-for="item in actionList" :key="item.idx" @click="actionClick(item)" span="3">
  5. <view class="action_item">
  6. <image :src="item.icon" alt="" srcset="" />
  7. <text class="action_item_title">{{ item.title }}</text>
  8. </view>
  9. </u-col>
  10. </u-row>
  11. </view>
  12. </template>
  13. <script>
  14. import { mapGetters, mapActions } from 'vuex';
  15. import { ChatingFooterActionTypes, ContactChooseTypes, PageEvents } from '../../../../../constant';
  16. import { AmapWebKey } from '../../../../../common/config';
  17. import IMSDK, { IMMethods } from 'openim-uniapp-polyfill';
  18. import { getPurePath } from '../../../../../util/common';
  19. import { callingModule } from '../../../../../util/imCommon';
  20. import { premissionCheck } from "@/js_sdk/wa-permission/permission.js"
  21. // import { gotoAppPermissionSetting,requestAndroidPermission } from "../../../../../util/permission";
  22. export default {
  23. components: {},
  24. data() {
  25. return {
  26. userID: '',
  27. isUser: false,
  28. isDoctor:false,
  29. readFilePermission:false,
  30. actionList: [
  31. {
  32. idx: 0,
  33. type: ChatingFooterActionTypes.takePhoto,
  34. title: '拍照',
  35. icon: require('../../../../../static/images/new/take_pictures_icon.png')
  36. },
  37. {
  38. idx: 1,
  39. type: ChatingFooterActionTypes.Album,
  40. title: '相册',
  41. icon: require('../../../../../static/images/new/album_icon.png')
  42. },
  43. {
  44. idx: 2,
  45. type: ChatingFooterActionTypes.Camera,
  46. title: '视频',
  47. icon: require('../../../../../static/images/new/video_icon.png')
  48. },
  49. {
  50. idx: 3,
  51. type: ChatingFooterActionTypes.pickCamera,
  52. title: '录像',
  53. icon: require('../../../../../static/images/new/picture_recording_icon.png')
  54. }
  55. ,{
  56. idx: 4,
  57. type: ChatingFooterActionTypes.Call,
  58. title: "语音通话",
  59. icon: require("../../../../../static/images/new/voice_call_icon.png"),
  60. },
  61. {
  62. idx: 5,
  63. type: ChatingFooterActionTypes.VideoCall,
  64. title: "视频通话",
  65. icon: require("../../../../../static/images/new/video_call_icon.png"),
  66. }
  67. //{
  68. // idx: 6,
  69. // type: ChatingFooterActionTypes.File,
  70. // title: "问诊订单",
  71. // icon: require("../../../../../static/images/chating_action_file.png"),
  72. // },
  73. // {
  74. // idx: 4,
  75. // type: ChatingFooterActionTypes.Card,
  76. // title: "名片",
  77. // icon: require("../../../../../static/images/chating_action_card.png"),
  78. // },
  79. // {
  80. // idx: 12,
  81. // type: ChatingFooterActionTypes.Location,
  82. // title: "位置",
  83. // icon: require("../../../../../static/images/chating_action_location.png"),
  84. // }
  85. ]
  86. };
  87. },
  88. computed: {
  89. ...mapGetters(['timStore']),
  90. imType() {
  91. return this.timStore?.imType ?? '';
  92. },
  93. orderId() {
  94. return this.timStore?.orderId ?? '';
  95. },
  96. orderType() {
  97. return this.timStore?.orderType ?? '';
  98. }
  99. },
  100. mounted() {
  101. let userID = this.$store.getters.storeCurrentConversation.userID;
  102. this.userID = userID.substring(1);
  103. this.isUser = userID.indexOf('U') != -1;
  104. this.isDoctor=userID.indexOf('D') != -1;
  105. if (this.$companyUserIsLogin() && this.isUser) {
  106. // this.actionList.push({
  107. // idx: 4,
  108. // type: ChatingFooterActionTypes.Call,
  109. // title: '语音通话',
  110. // icon: require('../../../../../static/images/audio-calling.svg')
  111. // });
  112. // this.actionList.push({
  113. // idx: 5,
  114. // type: ChatingFooterActionTypes.VideoCall,
  115. // title: '视频通话',
  116. // icon: require('../../../../../static/images/chating_action_call.png')
  117. // });
  118. this.actionList.push({
  119. idx: 6,
  120. type: ChatingFooterActionTypes.Order,
  121. title: '问诊订单',
  122. icon: require('../../../../../static/images/new/consultation_order_icon.png')
  123. });
  124. this.actionList.push({
  125. idx: 8,
  126. type: ChatingFooterActionTypes.StoreOrder,
  127. title: '药品订单',
  128. icon: require('../../../../../static/images/new/drug_orders_icon.png')
  129. });
  130. this.actionList.push({
  131. idx: 9,
  132. type: ChatingFooterActionTypes.Package,
  133. title: '疗法',
  134. icon: require('../../../../../static/images/new/therapy_icon.png')
  135. });
  136. this.actionList.push({
  137. idx: 10,
  138. type: ChatingFooterActionTypes.CouponPackage,
  139. title: '私域疗法券',
  140. icon: require('../../../../../static/images/new/therapy_voucher_icon.png')
  141. });
  142. this.actionList.push({
  143. idx: 11,
  144. type: ChatingFooterActionTypes.InquirySelect,
  145. title: '会诊',
  146. icon: require('../../../../../static/images/new/consultation_doctors_icon.png')
  147. });
  148. this.actionList.push({
  149. idx: 12,
  150. type: ChatingFooterActionTypes.Course,
  151. title: '课程',
  152. icon: require('../../../../../static/images/new/course_icon.png')
  153. });
  154. return;
  155. }
  156. //if((this.imType==1&&this.orderType==2)||this.imType==2){ //语音通话
  157. // this.actionList.push({
  158. // idx: 4,
  159. // type: ChatingFooterActionTypes.Call,
  160. // title: '语音通话',
  161. // icon: require('../../../../../static/images/audio-calling.svg')
  162. // });
  163. //}
  164. //if((this.imType==1&&this.orderType==2)||this.imType==2){ //视频通话
  165. // this.actionList.push({
  166. // idx: 5,
  167. // type: ChatingFooterActionTypes.VideoCall,
  168. // title: '视频通话',
  169. // icon: require('../../../../../static/images/chating_action_call.png')
  170. // });
  171. //}
  172. if(this.isDoctor){
  173. if (this.imType == 1) {
  174. //问诊订单
  175. this.actionList.push({
  176. idx: 6,
  177. type: ChatingFooterActionTypes.Order,
  178. title: '问诊订单',
  179. icon: require('../../../../../static/images/new/consultation_order_icon.png')
  180. });
  181. }
  182. if (this.imType == 2) {
  183. //视频通话
  184. this.actionList.push({
  185. idx: 7,
  186. type: ChatingFooterActionTypes.Follow,
  187. title: '随访单',
  188. icon: require('../../../../../static/images/new/consultation_order_icon.png')
  189. });
  190. this.actionList.push({
  191. idx: 8,
  192. type: ChatingFooterActionTypes.StoreOrder,
  193. title: '药品订单',
  194. icon: require('../../../../../static/images/new/drug_orders_icon.png')
  195. });
  196. }
  197. }
  198. },
  199. methods: {
  200. async actionClick(action) {
  201. switch (action.type) {
  202. case ChatingFooterActionTypes.takePhoto:
  203. if (uni.$u.os() != 'ios') {
  204. this.requestPressmition();
  205. if(!this.readFilePermission){
  206. return;
  207. }
  208. }
  209. this.$emit('prepareMediaMessage', { type: ChatingFooterActionTypes.Camera, index: 0 });
  210. break;
  211. case ChatingFooterActionTypes.Album:
  212. if (uni.$u.os() != 'ios') {
  213. this.requestPressmition();
  214. if(!this.readFilePermission){
  215. return;
  216. }
  217. }
  218. this.$emit('prepareMediaMessage', { type: ChatingFooterActionTypes.Album, index: 0 });
  219. break;
  220. case ChatingFooterActionTypes.Camera:
  221. if (uni.$u.os() != 'ios') {
  222. this.requestPressmition();
  223. if(!this.readFilePermission){
  224. return;
  225. }
  226. }
  227. this.$emit('prepareMediaMessage', { type: ChatingFooterActionTypes.Album, index: 1 });
  228. break;
  229. case ChatingFooterActionTypes.pickCamera:
  230. if (uni.$u.os() != 'ios') {
  231. this.requestPressmition();
  232. if(!this.readFilePermission){
  233. return;
  234. }
  235. }
  236. this.$emit('prepareMediaMessage', { type: ChatingFooterActionTypes.Camera, index: 1 });
  237. break;
  238. case ChatingFooterActionTypes.Call:
  239. if (!this.$store.getters.storeCurrentConversation.groupID) {
  240. uni.$emit(PageEvents.RtcCall, 'audio');
  241. return;
  242. }
  243. IMSDK.asyncApi('signalingGetRoomByGroupID', IMSDK.uuid(), this.$store.getters.storeCurrentConversation.groupID).then(({ data }) => {
  244. if (data.invitation) {
  245. uni.showModal({
  246. title: '提示',
  247. content: '群通话进行中,是否直接加入?',
  248. confirmText: '确认',
  249. cancelText: '取消',
  250. success: (res) => {
  251. if (res.confirm) {
  252. callingModule.joinRoomLiveChat(data);
  253. }
  254. }
  255. });
  256. } else {
  257. uni.$emit(PageEvents.RtcCall, 'audio');
  258. }
  259. });
  260. break;
  261. case ChatingFooterActionTypes.VideoCall:
  262. if (!this.$store.getters.storeCurrentConversation.groupID) {
  263. uni.$emit(PageEvents.RtcCall, 'video');
  264. return;
  265. }
  266. IMSDK.asyncApi('signalingGetRoomByGroupID', IMSDK.uuid(), this.$store.getters.storeCurrentConversation.groupID).then(({ data }) => {
  267. if (data.invitation) {
  268. uni.showModal({
  269. title: '提示',
  270. content: '群通话进行中,是否直接加入?',
  271. confirmText: '确认',
  272. cancelText: '取消',
  273. success: (res) => {
  274. if (res.confirm) {
  275. callingModule.joinRoomLiveChat(data);
  276. }
  277. }
  278. });
  279. } else {
  280. uni.$emit(PageEvents.RtcCall, 'video');
  281. }
  282. });
  283. break;
  284. case ChatingFooterActionTypes.Order:
  285. {
  286. if (this.$companyUserIsLogin()) {
  287. uni.navigateTo({
  288. url: '/pages/company/inquiryOrderIMList?userId=' + this.userID
  289. });
  290. } else {
  291. console.log("qxj orderId:", this.timStore.orderId)
  292. uni.navigateTo({
  293. url: '/pages/store/inquiryOrderDetails?orderId=' + this.timStore.orderId
  294. });
  295. }
  296. }
  297. break;
  298. case ChatingFooterActionTypes.Follow:
  299. uni.navigateTo({
  300. url: '/pages/user/followDetails?followId=' + this.timStore.followId
  301. });
  302. break;
  303. case ChatingFooterActionTypes.StoreOrder:
  304. {
  305. if (this.$companyUserIsLogin()) {
  306. uni.navigateTo({
  307. url: '/pages/company/storeOrderList?userId=' + this.userID
  308. });
  309. } else {
  310. uni.navigateTo({
  311. url: '/pages/store/storeOrderDetail?orderId=' + this.timStore.orderId
  312. });
  313. }
  314. }
  315. break;
  316. case ChatingFooterActionTypes.Package: //疗法
  317. {
  318. if (this.$companyUserIsLogin()) {
  319. uni.navigateTo({
  320. url: '/pages/company/packageList?isIM=1'
  321. });
  322. }
  323. }
  324. break;
  325. case ChatingFooterActionTypes.CouponPackage:
  326. {
  327. if (this.$companyUserIsLogin()) {
  328. uni.navigateTo({
  329. url: '/pages/company/couponList?couponType=5&isIM=1'
  330. });
  331. }
  332. }
  333. break;
  334. case ChatingFooterActionTypes.InquirySelect:
  335. {
  336. if (this.$companyUserIsLogin()) {
  337. let companyId=uni.getStorageSync('companyId');
  338. let companyUserId=uni.getStorageSync('companyUserId');
  339. uni.navigateTo({
  340. url: '/pages/store/inquirySelectType?companyId='+companyId+'&companyUserId='+companyUserId+'&isIM=1'
  341. });
  342. }
  343. }
  344. break;
  345. case ChatingFooterActionTypes.Course:
  346. if (this.$companyUserIsLogin()) {
  347. uni.navigateTo({
  348. url: '/pages_im/pages/conversation/course/courseList?userId=' + this.userID
  349. });
  350. }
  351. break;
  352. case ChatingFooterActionTypes.Card:
  353. uni.navigateTo({
  354. url: `/pages_im/pages/common/contactChoose/index?type=${ContactChooseTypes.Card}`
  355. });
  356. break;
  357. case ChatingFooterActionTypes.File:
  358. if (uni.$u.os() != 'ios') {
  359. this.requestPressmition();
  360. if(!this.readFilePermission){
  361. return;
  362. }
  363. }
  364. IMSDK.pickFile().then(async (path) => {
  365. console.log(path);
  366. const idx = path.lastIndexOf('/');
  367. const fileName = path.slice(idx + 1);
  368. const message = await IMSDK.asyncApi(IMMethods.CreateFileMessageFromFullPath, IMSDK.uuid(), {
  369. filePath: getPurePath(path),
  370. fileName
  371. });
  372. this.$emit('sendMessage', message);
  373. });
  374. break;
  375. case ChatingFooterActionTypes.Location:
  376. uni.chooseLocation({
  377. success: async (res) => {
  378. if (res) {
  379. const options = {
  380. name: res.name,
  381. latng: `${res.latitude},${res.longitude}`,
  382. addr: res.address,
  383. city: res.address,
  384. module: 'locationPicker',
  385. latitude: res.latitude,
  386. longitude: res.longitude,
  387. 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}`
  388. };
  389. const message = await IMSDK.asyncApi(IMMethods.CreateLocationMessage, IMSDK.uuid(), {
  390. description: JSON.stringify(options),
  391. longitude: res.longitude,
  392. latitude: res.latitude
  393. });
  394. this.$emit('sendMessage', message);
  395. } else {
  396. uni.$u.toast('获取位置失败');
  397. }
  398. },
  399. fail: ({ errMsg }) => {
  400. if (!errMsg.includes('cancel')) {
  401. uni.$u.toast('获取位置失败');
  402. }
  403. }
  404. });
  405. break;
  406. default:
  407. break;
  408. }
  409. },
  410. async requestPressmition(){
  411. let result = await premissionCheck("EXTERNAL_STORAGE");
  412. console.log("premission result:"+result);
  413. if(result == 1) {
  414. this.readFilePermission=true;
  415. }
  416. }
  417. }
  418. };
  419. </script>
  420. <style lang="scss" scoped>
  421. .chat_action_bar {
  422. position: relative;
  423. background: #f0f2f6;
  424. padding: 24rpx 36rpx;
  425. .action_row {
  426. flex-wrap: wrap;
  427. margin-bottom: 24rpx;
  428. }
  429. .action_item {
  430. @include centerBox();
  431. flex-direction: column;
  432. margin-top: 28rpx;
  433. image {
  434. width: 58rpx;
  435. height: 58rpx;
  436. background-color: #fff;
  437. border-radius: 28rpx;
  438. padding:28rpx;
  439. }
  440. &_title {
  441. font-size: 24rpx;
  442. color: #999;
  443. margin-top: 16rpx;
  444. }
  445. }
  446. }
  447. </style>