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'
// api
import api from '@/api/index.js'
// 工具库
import util from '@/common/js/util.js'
import { inject } from 'vue'

const { checkLink } = inject('util');
// 
const props = defineProps({
	msg: {
		type: Object,
	},
})

// 调用父级方法
const emit = defineEmits(['plusClick', 'send'])
// 加号菜单
const plusList = computed(() => {
	let result = [
		{
			type: 'picture.png',
			label: '照片',
			value: 'chooseImage',
		}, {
			type: 'photograph.png',
			label: '拍摄',
			value: 'takePhoto',
		}, {
			type: 'red-envelope.png',
			label: '红包',
			value: 'redEnvelope',
		}
	]

	const isCustomer = props.msg.isCustomer;

	// 单聊
	if (props.msg.type == 'C2C' && !isCustomer) result.push({
		type: 'news-voice.png',
		label: '音视频',
		value: 'voice'
	})
	// 客服
	if (isCustomer) result.unshift({
		type: 'order.png',
		label: '订单',
		value: 'chooseOrder',
	}, {
		type: 'shop.png',
		label: '商品',
		value: 'chooseShop',
	})
	return result
})

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

// 订单列表
const list = reactive([])

// 加号方法对象
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: () => {
		let param = {
			pageSize: 10,
			pageNum: 1,
			merId: props.msg.id,
		}
		api.shop.getShopOrderList(param).then(rs => {
			if (rs.code == 200) {
				list.length = 0
				list.push(...rs.rows.map(item => {
					// 状态
					item.status = Number(item.status)
					// 编辑订单状态文字
					item.status_text = {
						'0': '待支付',
						'1': '待发货',
						'4': '待收货',
						'5': '已收货',
						'6': '已完成',
						'9': '已取消',
					}[item.status]
					return item
				}))


				nextTick().then(() => {
					popupRef.value.open()
				});
				return
			}

			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})

	},

	// 选择商品
	chooseShop: () => {
		uni.navigateTo({
			url: `/pages/news/goodsList/index?merId=${props.msg.id}`
		});
	},

	// 发送红包
	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 list" :key="index">
					<view class="time">
						下单时间：{{ item.createTime }}
					</view>
					<JyCommodityInformation :showType="4" :orderInfo="item" @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>