jiuyiUniapp/jiuyi2/pages/news/chat/jy-plus.vue

<script setup>
	// + 页面
	// 腾讯云聊天
	import TencentCloudChat from '@tencentcloud/chat';
	import {
		ref,
		reactive,
		nextTick,
		computed,
	} from 'vue'
	import {
		screenHeight
	} from '@/components/public/Mixins'
	import JyCommodityInformation from '@/components/public/jy-commodity-information'
	// 工具库
	import util from '@/common/js/util.js'
	// 
	const props = defineProps({
		msg: {
			type: Object,
		},
	})

	// 调用父级方法
	const emit = defineEmits(['plusClick', 'send'])
	// 加号菜单
	const plusList = computed(() => {
		let result = [
			// {
			// 	type: 'order.png',
			// 	label: '订单',
			// 	value: 'chooseOrder'
			// }, {
			// 	type: 'shop.png',
			// 	label: '商品',
			// 	value: 'chooseShop'
			// },
			{
				type: 'picture.png',
				label: '照片',
				value: 'chooseImage'
			}, {
				type: 'photograph.png',
				label: '拍摄',
				value: 'takePhoto'
			}, {
				type: 'red-envelope.png',
				label: '红包',
				value: 'redEnvelope'
			}
		]
		// 单聊
		if (props.msg.type == 'C2C') result.push({
			type: 'news-voice.png',
			label: '音视频',
			value: 'voice'
		})
		return result
	})

	const popupRef = ref(null)
	const popupRE = ref(null)
	const formData = reactive({
		name: ''
	})
	const popupData = reactive({
		show: false,
		title: '选择订单'
	})

	// 加号方法对象
	const plusClickObj = {
		voice: () => {
			// 菜单
			const menu = [{
					name: '语音通话',
					type: 1,
				},
				{
					nanme: '视频通话',
					type: 2,
				}
			]

			uni.showActionSheet({
				itemList: ['语音通话', '视频通话'],
				success: rs => {
					uni.$TUICallKit.call({
						userID: props.msg.id,
						callMediaType: menu[rs.tapIndex].type,
						// callParams: {
						// 	roomID: 234,
						// 	strRoomID: '2323423',
						// 	timeout: 30
						// },
					}, res => {
						console.log('[TUICallKit] call params: ', JSON.stringify(res));
					});
				}
			})
		},

		// 选择订单
		chooseOrder: () => {
			nextTick().then(() => {
				popupRef.value.open()
			});
		},

		// 选择商品
		chooseShop: () => {
			// checkLink('pages/mine/browsed/index')
		},

		// 发送红包
		redEnvelope() {
			uni.navigateTo({
				url: util.setUrl('/pages/news/redPacket', {
					// 聊天对象
					msgId: props.msg.id,
					// 发送方式
					sendType: {
						'C2C': 1,
						'GROUP': 2,
					} [props.msg.type],
					num: props.msg.num,
				})
			})
			// popupRE.value.open()
		},

		//拍照
		takePhoto: () => {
			console.log('takePhoto')
			sendMsgImg({
				sourceType: ['album'],
			})
		},

		//选择图片
		chooseImage: () => {
			console.log('chooseImage')
			sendMsgImg({
				sourceType: ['album'],
			})
		}
	}

	// 发送图片消息
	function sendMsgImg(option) {
		util.upload_image({
			count: 1,
			type: 1,
			success: rs => {
				emit('send', {
					query: {
						toUserId: props.msg.id,
						msgType: TencentCloudChat.TYPES.MSG_IMAGE,
					},
					data: {
						imgUrl: rs.value
					},
				})
			}
		})
		return
		// 选择图片
		uni.chooseImage({
			count: 1,
			sourceType: option.sourceType, // 从相册选择
			success: (res) => {
				let message = uni.$chat.createImageMessage({
					to: props.msg.id,
					conversationType: props.msg.type,
					payload: {
						file: res
					},
					onProgress: function(event) {
						console.log('file uploading:', event)
					}
				})
				return
			}
		});
	}

	// 咨询订单
	const consult = (content) => {
		let obj = {
			content,
			type: 'order'
		}
		popupRef.value.close()
	}
</script>

<template>
	<view class="jy-plus">
		<view class="NewsPlus ptb20" style="background: #F6F6F6;">
			<view class="df fdc aic" v-for="(item, index) in plusList" :key="index" @click="plusClickObj[item.value]">
				<view class="imageBox fmid wh100">
					<image class="image wh50" :src="`/static/new-${item.type}`" mode="aspectFit" />
				</view>
				<text class="mt20">{{ item.label }}</text>
			</view>
		</view>
	</view>

	<!-- 咨询订单的弹窗 -->
	<uni-popup ref="popupRef" type="bottom">
		<view class="jy-popup bfff" :style="{ height: `${screenHeight(true) * 0.7}px` }">
			<view class="title">
				<text>咨询订单</text>
			</view>
			<view class="close-btn" @click="popupRef.close()">×</view>
			<view class="input-view">
				<uni-easyinput class="easyinput" placeholder="搜索你要查询的订单">
					<template v-slot:left>
						<uni-icons class="ml20" type="search" size="20"></uni-icons>
					</template>
				</uni-easyinput>
			</view>
			<scroll-view scroll-y scroll-with-animation>
				<view v-for="(item, index) in 2">
					<view class="time">
						下单时间：2024-07-28 22:45:25
					</view>
					<JyCommodityInformation :showType="4" @consult="consult"></JyCommodityInformation>
				</view>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<style scoped lang="scss">
	.NewsPlus {
		// 一行四个 
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 20rpx;

		.imageBox {
			background-color: #fff;
			border-radius: 20rpx;
		}
	}

	.jy-popup {
		width: 100%;
		border-radius: 20px 20px 0px 0px;

		.title {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;
			// 底部边框显示
			color: #3D3D3D;
			font-size: 32rpx;
		}

		.close-btn {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
			height: 52rpx;
			line-height: 52rpx;
			width: 52rpx;
			background: #D8D8D8;
			color: #999999;
			font-size: 30rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			transform: translate(50%, -50%);
		}

		.input-view {
			// 只显示上下边框不显示左右
			border-top: 1px solid #E5E5E5;
			border-bottom: 1px solid #E5E5E5;
			padding: 20rpx;
		}

		.easyinput {
			flex: 1;
		}

		.time {
			padding: 24rpx 20rpx 0 20rpx;
			font-size: 22rpx;
			color: #3D3D3D;
		}
	}
</style>