wtq/zsw-jx-store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
wtq
2025-11-13 10:16:36 +08:00
commit cbdb6758a0
394 changed files with 57767 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

373
src/subPages/messageChild/msgChat/msgChatChild/chat-item.vue Normal file
View File

@@ -0,0 +1,373 @@
<template>
<view class="chat-item">
<view
:class="{
'chat-container': true,
'chat-location-me': item.msg_source == 1,
}"
>
<!-- 头像 -->
<view class="chat-icon-container">
<image class="chat-icon" :src="avatar" mode="aspectFill" />
</view>
<!-- 聊天内容 -->
<view class="chat-content-container">
<!-- 名字 -->
<text
:class="{
'chat-user-name': true,
'chat-location-me': item.msg_source == 1,
}"
@tap="jumpOrderDetail(item.order_id)"
>
{{
item.msg_source == 2
? (item.order_id ? item.sendType.toUpperCase() + '客户(' + item.order_id + ')':item.sendType.toUpperCase() + '客户')
: getStorage('storeName')
}}
</text>
<!-- 内容 -->
<view
:style="{
'display':'flex',
'justify-content':item.msg_source === 1?'flex-end':'flex-start',
'margin-right':item.msg_source === 1?'20rpx':'0rpx'
}" >
<!-- emoji -->
<view
:class="{
'chat-text-container': true,
'chat-text-container-me': item.msg_source == 1
}"
v-if="item.msg_type === 1 || item.msg_type == 11"
class="emoji-box"
>
<template v-for="(i, index) in item.msg_content" :key="index">
<text
v-if="i.type === 'text'"
:class="{ 'char-text': true, 'char-text-me': item.msg_source == 1 }"
user-select
selectable
>
{{ i.text }}
</text>
<text
v-else-if="i.type === 'emoji' && i.emoji.includes('unknown:')"
:class="{ 'char-text': true, 'char-text-me': item.msg_source == 1 }"
user-select
selectable
>
{{ i.emoji.substring(8) }}
</text>
<image v-else :src="`https://www.jxc4.com/emoji/${i.emoji}.png`" alt="" style="width:20px;height:20px;"></image>
</template>
</view>
<!-- 图片 -->
<view
:class="{
'chat-text-container-img': true,
'chat-text-container-me-img': item.msg_source == 1,
}"
v-else-if="item.msg_type == 2 || item.msg_type == 12"
>
<image
@tap="previewImage(item.msg_content)"
:src="item.msg_content"
mode="widthFix"
/>
</view>
<!-- 语音 -->
<view
class="chat-text-container yuyin"
:class="{ isVoice: isVoice }"
v-else-if="item.msg_type == 3 || item.msg_type == 13"
@tap="playVoice(item.msg_content)"
>
<jx-icon icon="yuyin" :size="42" />
</view>
<!-- 商品卡片 -->
<view class="chat-text-container" v-else-if="item.msg_type == 4 || item.msg_type == 14" @tap="copyInfo(item.msg_content)">
<!--【暂不支持查看商品-请让客户发送图片】 -->
skuid:{{ item.msg_content }} <text style="color:rgb(64, 158, 255);text-decoration: underline;" @tap.stop="viewSku(item.msg_content)">查看商品</text>
</view>
<!-- 订单卡片 -->
<view
class="chat-text-container order-car"
v-else-if="item.msg_type == 5 && item.msg_content"
@tap="orderDetail(JSON.parse(item.msg_content).order_view_id, '1')"
>
<view class="top">{{ JSON.parse(item.msg_content).food_desc }}</view>
<view class="bottom">
<view class="status">{{
JSON.parse(item.msg_content).status_desc
}}</view>
<view>订单详情<jx-icon icon="gengduo" color="#6e6e6e" /></view>
</view>
</view>
<!-- 兜底 -->
<view class="chat-text-container" v-else> 【未知信息】 </view>
</view>
</view>
</view>
<!-- 商品弹框 -->
<uni-popup ref="popup" type="center">
<view class="jx-popup-update">
<view class="text">查看商品信息</view>
<view>
<image :src="goodCard.img" />
</view>
<view class="goodCard_name">{{ goodCard.name }}</view>
<jx-price v-if="goodCard.unitPrice" :price="goodCard.skus[0].mtwmPrice" color="#ef5757" />
<view class="btn-root">
<view class="btn-ok" @tap="popup.close()">关闭</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script lang="ts" setup >
import useGlobalFunc from '@/composables/useGlobalFunc'
import useOrderInfo from '@/composables/useOrderInfo'
import { getStorage } from '@/utils/storage'
import toast from '@/utils/toast'
import { computed, ref } from 'vue'
import order from '@/api/https/order'
import merchant from '@/api/https/merchant'
const { previewImage } = useGlobalFunc()
const { orderDetail } = useOrderInfo()
/*************************************************
* 接收数据
*/
interface PropsType {
item: any
}
const props = defineProps<PropsType>()
const avatar = computed(() => {
if (props.item.msg_source == 1) {
return 'https://image.jxc4.com/image/70143fcf48aefe74537533f35a0a8153.jpg'
} else {
if (props.item.sendType == 'mt') {
return 'https://image.jxc4.com/image/75654ab606494a0efdb0cf7d7ad060d9.png'
} else {
return 'https://image.jxc4.com/image/6c2f1dfd95890df8ef5e27bde15c4e7f.png'
}
}
})
const popup = ref<any>(null) // 弹窗实例
const goodCard = ref({ // 商品卡片
img:'https://image.jxc4.com/image/5c506c8db41719fe4c433979498eb1e7.png',
name:'三方平台创建商品',
unit: '',
unitPrice: '',
skus: [
{
id:'',
mtwmPrice:''
}
]
})
/*************************************************
* 播放语音
*/
const isVoice = ref<boolean>(false)
const voice = uni.createInnerAudioContext()
function playVoice(playUrl: string) {
if (uni.getSystemInfoSync().platform != 'android')
return toast('ios系统不支持')
toast('正在播放音频')
isVoice.value = true
voice.src = playUrl
voice.stop()
voice.play()
voice.onEnded(() => {
isVoice.value = false
})
}
/**
* 跳转到订单详情页
*/
async function jumpOrderDetail(orderId: string) {
if(!orderId) return
let res = await order.get_orders({ vendorOrderID: orderId })
if (res.code === '0') orderDetail(res.data.data[0].vendorOrderID, res.data.data[0].vendorID)
}
/*************************************************
* 查看商品
*/
async function viewSku(skuid: string) {
console.log(skuid,'skuid',goodCard.value)
if(skuid == goodCard.value.skus[0].id) return popup.value.open()
let data = {
storeIDs: JSON.stringify([getStorage('storeID')]),
isFocus: true,
skuIDs: JSON.stringify([+skuid])
}
let res = await merchant.get_stores_skus(data)
console.log('走到下面了吗',res)
if(res.code === '0' && res.data.totalCount === 1) goodCard.value = res.data.skuNames[0]
popup.value.open()
}
/*************************************************
* 复制商品shuid
*/
function copyInfo(data:string) {
uni.setClipboardData({
data: data,
success() {
toast('复制成功', 1)
},
fail() {
toast('复制失败')
}
})
}
</script>
<style lang="scss" scoped>
@import './index.scss';
.chat-item {
display: flex;
flex-direction: column;
padding: 20rpx;
box-sizing: border-box;
}
.chat-time {
padding: 4rpx 0rpx;
text-align: center;
font-size: 22rpx;
color: #aaaaaa;
}
.chat-container {
display: flex;
flex-direction: row;
}
.chat-location-me {
flex-direction: row-reverse;
text-align: right;
}
.chat-icon-container {
margin-top: 12rpx;
}
.chat-icon {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
background-color: #eeeeee;
}
.chat-content-container {
margin: 0rpx 15rpx;
}
.chat-user-name {
font-size: 28rpx;
color: #888888;
}
.chat-text-container {
background-color: #ffffff;
border-radius: 8rpx;
padding: 10rpx 15rpx;
margin-top: 10rpx;
/* #ifndef APP-NVUE */
max-width: 500rpx;
/* #endif */
width: fit-content;
}
.chat-text-container-img {
border-radius: 8rpx;
margin-top: 10rpx;
/* #ifndef APP-NVUE */
max-width: 280rpx;
/* #endif */
image {
width: 280rpx;
border-radius: 8rpx;
}
}
.yuyin {
text-align: center;
}
// 订单卡片
.order-car {
font-size: 28rpx;
.top {
width: 400rpx;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-decoration: underline;
color: #0867e3;
margin-bottom: 10rpx;
}
.bottom {
display: flex;
justify-content: space-between;
border-top: 1rpx solid #e6e6e6;
padding-top: 8rpx;
color: #6e6e6e;
.status {
color: #6e6e6e;
}
}
}
.chat-text-container-me {
background-color: #95eb6c;
text-align: left;
}
.chat-text-container-me-img {
text-align: left;
}
.char-text {
font-size: 32rpx;
/* #ifndef APP-NVUE */
word-break: break-all;
/* #endif */
/* #ifdef APP-NVUE */
max-width: 500rpx;
/* #endif */
}
.char-text-me {
color: #000;
}
.isVoice {
animation: Gradient 2s linear infinite;
}
@keyframes Gradient {
0% {
background: linear-gradient(0deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
}
100% {
background: linear-gradient(180deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
}
}
</style>

594
src/subPages/messageChild/msgChat/msgChatChild/index.scss Normal file
View File

@@ -0,0 +1,594 @@
.chat-input-bar {
display: flex;
flex-direction: row;
align-items: center;
background-color: #f8f8f8;
padding: 0 15rpx;
height: 110rpx;
border-top: 2rpx solid rgb(221, 221, 221);
box-sizing: border-box;
justify-content: space-between;
width: 750rpx;
}
.xc-icon {
width: 70rpx;
margin-right: 10rpx;
}
.chat-input-root {
padding: 10rpx;
background-color: rgb(255, 255, 255);
box-sizing: border-box;
border-radius: 10rpx;
}
.chat-input {
width: 416rpx;
// max-height: 300rpx;
box-sizing: border-box;
}
.chat-emoji-border,
.chat-input-send {
margin: 10rpx 10rpx 10rpx 20rpx;
border-radius: 10rpx;
padding: 10rpx 0rpx;
width: 60rpx;
}
.chat-emoji-border {
display: flex;
}
.chat-input-send {
background-color: #05c160;
padding: 10rpx 30rpx;
width: 100rpx;
text-align: center;
}
.chat-emoji {
width: 50rpx;
height: 50rpx;
}
.chat-input-send-text {
color: white;
font-size: 26rpx;
}
.jx-popup-update {
box-sizing: border-box;
padding: 20rpx;
background-color: #fff;
border-radius:15rpx;
width: 94vw;
.text {
display: block;
width: 100%;
text-align: center;
margin-bottom: 25rpx;
padding-bottom: 10rpx;
border-bottom: 2rpx solid rgb(209, 209, 209);
}
.goodCard_name{
margin:20rpx 0
}
.btn-root {
text-align: center;
margin: 40rpx 0 0rpx 0;
.btn-ok {
text-align: center;
width: 100%;
padding: 15rpx 0;
border-radius: 10rpx;
border: 2rpx solid $jx-primary;
color: $jx-primary;
}
.btn-ok {
background-color: $jx-primary;
color: #fff;
}
}
}
/*************************************************
* emoji表情配置
*/
.emoji-select,.emoji-box{
display: flex;
flex-wrap: wrap;
}
.emoji-select{
justify-content: space-around;
overflow: hidden;
height:400rpx;
overflow-y: auto;
background-color: #f8f8f8;
}
.emoji-select::after{
content: '';
width: 100rpx;
border:2rpx solid transparent;
}
.emoji-border{
width: 100rpx;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
}
// .emoji-display{
// width:50px;
// height:50px;
// background-size: 490px 730px; //设置背景图片的大小，相当于图片实际宽高等比例饿缩放的
// }
.emoji-display,.emoji-img{
width:30px;
height:30px;
background-size: 245px 365px; //设置背景图片的大小，相当于图片实际宽高等比例饿缩放的
}
.emoji-display,.emoji-img{
// background-image: url(https://image.jxc4.com/image/2321c0f65268145cef711cf3b8195b9b.jpg);
background-image: url(https://image.jxc4.com/image/2aa6a9355bbb5c9fd60418d7b53e4227.tem.png);
background-repeat: no-repeat;
background-color: transparent;
}
// 微笑
.emoji-smile{
background-position: 0px 0px;
}
// 撇嘴
.emoji-pieMouth{
background-position: -30px 0px;
}
// 色
.emoji-tity{
background-position: -60px 0px;
}
// 发呆
.emoji-asleep{
background-position: -90px 0px;
}
// 得意
.emoji-complacent{
background-position: -120px 0px;
}
// 流泪
.emoji-shedTears{
background-position: -150px 0px;
}
// 害羞
.emoji-shy{
background-position: -180px 0px;
}
// 闭嘴
.emoji-shutUp{
background-position: -210px 0px;
}
// 睡
.emoji-sleep{
background-position: 0px -30px;
}
// 大哭
.emoji-bigCry{
background-position: -30px -30px;
}
// 尴尬
.emoji-awkward{
background-position: -60px -30px;
}
// 发怒
.emoji-flareUp{
background-position: -90px -30px;
}
// 调皮
.emoji-naughty{
background-position: -120px -30px;
}
// 呲牙
.emoji-bareTeeth{
background-position: -150px -30px;
}
// 惊讶
.emoji-amazed{
background-position: -180px -30px;
}
// 难过
.emoji-feelSorry{
background-position: -210px -30px;
}
// 酷
.emoji-cool{
background-position: 0px -60px;
}
// 囧
.emoji-orz{
background-position: -30px -60px;
}
// 抓狂
.emoji-crazy{
background-position: -60px -60px;
}
// 吐
.emoji-vomit{
background-position: -90px -60px;
}
// 偷笑
.emoji-titter{
background-position: -120px -60px;
}
// 愉快
.emoji-happy{
background-position: -150px -60px;
}
// 白眼
.emoji-whiteEye{
background-position: -180px -60px;
}
// 傲慢
.emoji-arrogance{
background-position: -210px -60px;
}
// 饥饿
.emoji-hunger{
background-position: -0px -90px;
}
// 困
.emoji-tired{
background-position: -30px -90px;
}
// 惊恐
.emoji-terrified{
background-position: -60px -90px;
}
// 流汗
.emoji-sweat{
background-position: -90px -90px;
}
// 憨笑
.emoji-smileFatuously{
background-position: -120px -90px;
}
// 悠闲
.emoji-easy{
background-position: -150px -90px;
}
// 奋斗
.emoji-struggle{
background-position: -180px -90px;
}
// 咒骂
.emoji-swear{
background-position: -210px -90px;
}
// 疑问
.emoji-query{
background-position: -0px -120px;
}
// 嘘
.emoji-hiss{
background-position: -30px -120px;
}
// 晕
.emoji-giddy{
background-position: -60px -120px;
}
// 疯了
.emoji-insane{
background-position: -90px -120px;
}
// 衰
.emoji-decline{
background-position: -120px -120px;
}
// 骷髅
.emoji-skull{
background-position: -150px -120px;
}
// 敲打
.emoji-beat{
background-position: -180px -120px;
}
// 再见
.emoji-goodbye{
background-position: -210px -120px;
}
// 擦汗
.emoji-wipePerspiration{
background-position: -0px -150px;
}
// 抠鼻
.emoji-pickNose{
background-position: -30px -150px;
}
// 鼓掌
.emoji-applaud{
background-position: -60px -150px;
}
// 糗大了
.emoji-embarrassed{
background-position: -90px -150px;
}
// 坏笑
.emoji-snicker{
background-position: -120px -150px;
}
// 左哼哼
.emoji-leftHum{
background-position: -150px -150px;
}
// 右哼哼
.emoji-rightHum{
background-position: -180px -150px;
}
// 哈欠
.emoji-yawn{
background-position: -210px -150px;
}
// 鄙视
.emoji-disdain{
background-position: 0px -180px;
}
// 委屈
.emoji-grievance{
background-position: -30px -180px;
}
// 快哭了
.emoji-cring{
background-position: -60px -180px;
}
// 阴险
.emoji-cattiness{
background-position: -90px -180px;
}
// 亲亲
.emoji-kiss{
background-position: -120px -180px;
}
// 吓
.emoji-threaten{
background-position: -150px -180px;
}
// 可怜
.emoji-pitiful{
background-position: -180px -180px;
}
// 菜刀
.emoji-kitchenKnife{
background-position: -210px -180px;
}
// 西瓜
.emoji-watermelon{
background-position: 0px -210px;
}
// 啤酒
.emoji-beer{
background-position: -30px -210px;
}
// 篮球
.emoji-basketball{
background-position: -60px -210px;
}
// 乒乓
.emoji-ping-pong{
background-position: -90px -210px;
}
// 咖啡
.emoji-coffee{
background-position: -120px -210px;
}
// 饭
.emoji-rice{
background-position: -150px -210px;
}
// 猪头
.emoji-pigHead{
background-position: -180px -210px;
}
// 玫瑰
.emoji-rose{
background-position: -210px -210px;
}
// 凋谢
.emoji-fade{
background-position: 0px -240px;
}
// 嘴唇
.emoji-lip{
background-position: -30px -240px;
}
// 爱心
.emoji-love{
background-position: -60px -240px;
}
// 心碎
.emoji-heartbreak{
background-position: -90px -240px;
}
// 蛋糕
.emoji-cake{
background-position: -120px -240px;
}
// 闪电
.emoji-lightning{
background-position: -150px -240px;
}
// 炸弹
.emoji-bombs{
background-position: -180px -240px;
}
// 刀
.emoji-knife{
background-position: -210px -240px;
}
// 足球
.emoji-soccer{
background-position: 0px -270px;
}
// 瓢虫
.emoji-ladybird{
background-position: -30px -270px;
}
// 便便
.emoji-excrement{
background-position: -60px -270px;
}
// 月亮
.emoji-moon{
background-position: -90px -270px;
}
// 太阳
.emoji-sun{
background-position: -120px -270px;
}
// 礼物
.emoji-gift{
background-position: -150px -270px;
}
// 拥抱
.emoji-embrace{
background-position: -180px -270px;
}
// 强
.emoji-strong{
background-position: -210px -270px;
}
// 弱
.emoji-weak{
background-position: 0px -300px;
}
// 握手
.emoji-handshake{
background-position: -30px -300px;
}
// 胜利
.emoji-victory{
background-position: -60px -300px;
}
// 抱拳
.emoji-holdFist{
background-position: -90px -300px;
}
// 勾引
.emoji-seduce{
background-position: -120px -300px;
}
// 拳头
.emoji-fist{
background-position: -150px -300px;
}
// 差劲
.emoji-bad{
background-position: -180px -300px;
}
// 爱你
.emoji-loveYou{
background-position: -210px -300px;
}
// NO
.emoji-no{
background-position: 0px -330px;
}
// OK
.emoji-ok{
background-position: -30px -330px;
}