344 lines
6.4 KiB
Vue
344 lines
6.4 KiB
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: 'pages/news/group/create.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> |