czg_team/cashier_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'ymf' of https://newgitea.sxczgkj.cn/czg_team/cashier_app into new_gyq

Browse Source
This commit is contained in:
gyq
2025-12-06 17:14:19 +08:00
parent 80b003effd a65b0e83b1
commit e4cfd9db26
7 changed files with 726 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
http/api/market/chat.js
View File

@@ -43,3 +43,13 @@ export function chatCouponRecord(params) {
params,
});
}
export function deleteRecord(params) {
return request({
url: urlType + `/admin/coupon/deleteRecord?id=`+params.id,
method: "delete",
params,
});
}

7
http/php/chat.js
View File

@@ -84,4 +84,9 @@ export const messageSessionList = (data) => {
export const groupDoNotDisturb = (data) => {
return request(prveUrl + "group/do-not-disturb", "POST", data, true);
};
};
export const groupEditTitle = (data) => {
return request(prveUrl + "group/editTitle", "POST", data, true);
};

614
pageChat/chat.vue
View File

@@ -1,72 +1,104 @@
<template>
<view class="min-page bg-f7 u-font-28 color-333" :style="pageHeight">
<view class="top u-flex u-row-between">
<view>
<text style="max-width: 286rpx" class="u-line-1 u-font-32">
{{ groupInfo.name }}
</text>
<text class="u-m-l-22">（{{ membersRes.user_list.length }}人）</text>
</view>
<view class="" @click="toMore()">
<view class="u-flex u-row-center">
<up-icon name="more-dot-fill" color="#333" size="14"></up-icon>
</view>
<view class="color-666">更多</view>
</view>
</view>
<view class="box-1">
<!-- @refresherrefresh="refresherrefresh" -->
<view class="min-page bg-f7 u-font-28 color-333" :style="pageHeight">
<view class="top u-flex u-row-between">
<view>
<text style="max-width: 286rpx" class="u-line-1 u-font-32">
{{ groupInfo.name }}
</text>
<text class="u-m-l-22">（{{ membersRes.user_list.length }}人）</text>
</view>
<view class="" @click="toMore()">
<view class="u-flex u-row-center">
<up-icon name="more-dot-fill" color="#333" size="14"></up-icon>
</view>
<view class="color-666">更多</view>
</view>
</view>
<view class="box-1">
<!-- @refresherrefresh="refresherrefresh" -->
<scroll-view
scroll-y
refresher-background="transparent"
style="height: 100%"
@scrolltoupper="refresherrefresh"
:refresher-enabled="false"
:scroll-with-animation="false"
:refresher-triggered="scrollView.refresherTriggered"
:scroll-into-view="scrollView.intoView"
>
<view class="scroll-view-box">
<view class="talk-list">
<view :id="'msg-' + index" v-for="(item, index) in chatStore.chatList" :key="index">
<!-- 发消息 -->
<template v-if="item.operate_type == 'sendMsg' || item.is_user_send == 1">
<view class="shop u-flex u-row-right">
<view class="u-p-r-18">
<view class="u-flex u-row-right name-wrap">
<view class="tag">商家</view>
<view class="name">{{ shopInfo.shopName }}</view>
</view>
<view class="u-m-t-14 msg" :class="['type' + item.msg_type]">
<chatItem :item="item"></chatItem>
</view>
<view class="text-center u-m-t-20" v-if="item.msg_type == 4 && item.hasGet">
<text>{{ item.hasGet || 0 }}人已领取</text>
<text class="color-main">优惠券</text>
</view>
</view>
<up-avatar size="70rpx" shape="square" bg-color="#fff" :src="shopInfo.logo"></up-avatar>
</view>
</template>
<!-- 收消息 -->
<template v-else>
<view class="user u-flex">
<up-avatar size="70rpx" :src="item.avatar" shape="square" bg-color="#fff"></up-avatar>
<view class="u-p-l-18">
<view class="u-line-1 name">{{ item.nick_name }}</view>
<view class="u-m-t-14 msg u-p-l-30" :class="['type' + item.msg_type]">
<chatItem :item="item"></chatItem>
</view>
</view>
</view>
</template>
</view>
</view>
<up-loadmore v-if="isEnd" :status="isEnd ? 'nomore' : 'loading'"></up-loadmore>
</view>
</scroll-view>
</view>
<scroll-view
scroll-y
refresher-background="transparent"
style="height: 100%"
@scrolltoupper="refresherrefresh"
:refresher-enabled="false"
:scroll-with-animation="false"
:refresher-triggered="scrollView.refresherTriggered"
:scroll-into-view="scrollView.intoView"
>
<view class="scroll-view-box">
<view class="talk-list">
<view
:id="'msg-' + index"
v-for="(item, index) in chatStore.chatList"
:key="index"
>
<!-- 发消息 -->
<template
v-if="
item.operate_type == 'sendMsg' ||
item.is_user_send == 1 ||
item.from_id == shopInfo.id
"
>
<view class="shop u-flex u-row-right">
<view class="u-p-r-18">
<view class="u-flex u-row-right">
<view class="tag">商家</view>
<view class="color-000">{{ shopInfo.shopName }}</view>
</view>
<view
class="u-m-t-14 msg"
:class="['type' + item.msg_type]"
>
<chatItem :item="item"></chatItem>
</view>
<view
class="text-center u-m-t-20"
v-if="item.msg_type == 4 && item.hasGet"
>
<text>{{ item.hasGet || 0 }}人已领取</text>
<text class="color-main">优惠券</text>
</view>
</view>
<up-avatar
size="122rpx"
shape="square"
bg-color="#fff"
:src="shopInfo.logo"
></up-avatar>
</view>
</template>
<!-- 收消息 -->
<template v-else>
<view class="user u-flex">
<up-avatar
size="122rpx"
:src="item.avatar"
shape="square"
bg-color="#fff"
></up-avatar>
<view class="u-p-l-18">
<view class="color-000 u-line-1">{{ item.nick }}</view>
<view
class="u-m-t-14 msg u-p-l-30"
:class="['type' + item.msg_type]"
>
<chatItem :item="item"></chatItem>
</view>
</view>
</view>
</template>
</view>
</view>
<up-loadmore
v-if="isEnd"
:status="isEnd ? 'nomore' : 'loading'"
></up-loadmore>
</view>
</scroll-view>
</view>
<!-- <view :style="bottomSlotHeight"></view> -->
@@ -78,65 +110,111 @@
placeholder="请输入内容"
v-model="msg"
/> -->
<view class="u-flex-1 u-m-r-52 iput">
<up-input v-model="msg" border="none" placeholder="请输入内容"></up-input>
</view>
<button class="send-btn" v-if="msg.trim().length > 0" @click="sendText">发送</button>
<up-icon name="plus-circle" color="#666" size="40rpx" @click="showMoreBtnToggle" v-else></up-icon>
</view>
<view class="more-btn" v-if="showMoreBtn">
<view v-for="(item, index) in moreBtns" @click="moreBtnsClick(item, index)" class="u-flex-col u-row-center u-col-center">
<view class="u-flex icon">
<image :src="item.icon" class="img" mode="aspectFill"></image>
</view>
<view class="u-m-t-8">{{ item.title }}</view>
</view>
</view>
</view>
<view class="u-flex-1 u-m-r-52 iput">
<up-input
v-model="msg"
border="none"
placeholder="请输入内容"
></up-input>
</view>
<button class="send-btn" v-if="msg.trim().length > 0" @click="sendText">
发送
</button>
<up-icon
name="plus-circle"
color="#666"
size="60rpx"
@click="showMoreBtnToggle"
v-else
></up-icon>
</view>
<view class="more-btn" v-if="showMoreBtn">
<view
v-for="(item, index) in moreBtns"
@click="moreBtnsClick(item, index)"
class="u-flex-col u-row-center u-col-center"
>
<view class="u-flex icon">
<image :src="item.icon" class="img" mode="aspectFill"></image>
</view>
<view class="u-m-t-8">{{ item.title }}</view>
</view>
</view>
</view>
<!-- 发送优惠券 -->
<Modal title="发送优惠券" v-model="modalData.show" confirmText="确认发送" @close="closeModal" @confirm="confirmCoupon">
<view class="u-p-30">
<view class="font-bold u-m-b-16">自定义文案</view>
<up-input v-model="modalData.form.title" placeholder="请输入自定义文案" :placeholderStyle="placeholderStyle"></up-input>
<view class="font-bold u-m-b-16 u-m-t-32">发放数量(张)</view>
<!-- 发送优惠券 -->
<Modal
title="发送优惠券"
v-model="modalData.show"
confirmText="确认发送"
@close="closeModal"
@confirm="confirmCoupon"
>
<view class="u-p-30">
<view class="font-bold u-m-b-16">自定义文案</view>
<up-input
v-model="modalData.form.title"
placeholder="请输入自定义文案"
:placeholderStyle="placeholderStyle"
maxlength="12"
></up-input>
<view class="font-bold u-m-b-16 u-m-t-32">发放数量(张)</view>
<up-number-box v-model="modalData.form.giveNum" inputWidth="240rpx" @change="valChange"></up-number-box>
<view class="font-bold u-m-b-16 u-m-t-32">每人限领量(张)</view>
<up-number-box v-model="modalData.form.getLimit" inputWidth="240rpx" @change="valChange"></up-number-box>
<view class="font-bold u-m-b-16 u-m-t-32">选择优惠券</view>
<chooseCoupon v-model="modalData.form.couponId"></chooseCoupon>
</view>
</Modal>
</view>
<view class="font-bold u-m-b-16 u-m-t-32">每人限领量(张)</view>
<up-number-box
v-model="modalData.form.getLimit"
:max="modalData.form.giveNum"
inputWidth="240rpx"
@change="valChange"
></up-number-box>
<view class="font-bold u-m-b-16 u-m-t-32">选择优惠券</view>
<chooseCoupon v-model="modalData.form.couponId"></chooseCoupon>
</view>
</Modal>
</view>
</template>
<script setup>
import { onReady, onReachBottom, onLoad, onShow, onPageScroll } from '@dcloudio/uni-app';
import { ref, inject, onMounted, nextTick, reactive, watch, computed } from 'vue';
import { useChatStore } from '@/store/chat';
import * as chatApi from '@/http/php/chat';
import * as chatCouponApi from '@/http/api/market/chat';
import { uploadFile } from '@/http/api/index.js';
import go from '@/commons/utils/go.js';
import Modal from './components/modal.vue';
import chooseCoupon from './components/coupon.vue';
import chatItem from './components/chat-item.vue';
import {
onReady,
onReachBottom,
onLoad,
onShow,
onPageScroll,
} from "@dcloudio/uni-app";
import {
ref,
inject,
onMounted,
onUnmounted,
nextTick,
reactive,
watch,
computed,
} from "vue";
import { useChatStore } from "@/store/chat";
import * as chatApi from "@/http/php/chat";
import * as chatCouponApi from "@/http/api/market/chat";
import { uploadFile } from "@/http/api/index.js";
import go from "@/commons/utils/go.js";
import Modal from "./components/modal.vue";
import chooseCoupon from "./components/coupon.vue";
import chatItem from "./components/chat-item.vue";
const placeholderStyle = {
color: '#999',
fontSize: '28rpx'
};
function refresherrefresh() {
console.log('refresherrefresh');
// 关键：同时判断「正在加载」和「无更多数据」，只要一个为真就关闭刷新
if (isLoading.value || isEnd.value) {
scrollView.refresherTriggered = false; // 立即关闭刷新状态
if (isEnd.value) {
uni.showToast({ title: '没有更多了', icon: 'none' });
}
return; // 终止后续逻辑
}
console.log("refresherrefresh");
// 关键：同时判断「正在加载」和「无更多数据」，只要一个为真就关闭刷新
if (isLoading.value || isEnd.value) {
scrollView.refresherTriggered = false; // 立即关闭刷新状态
if (isEnd.value) {
}
return; // 终止后续逻辑
}
query.page++;
getMsgList();
@@ -165,12 +243,16 @@ const modalData = reactive({
});
const chatStore = useChatStore();
chatStore.onReceiveMsg = (msg) => {
nextTick(() => {
scrollView.intoView = 'msg-0';
});
const handleReceiveMsg = (msg) => {
nextTick(() => {
scrollView.intoView = "msg-0";
});
};
const msg = ref('');
// 注册消息回调
chatStore.registerReceiveMsgCallback(handleReceiveMsg);
const msg = ref("");
const shopInfo = uni.getStorageSync('shopInfo');
@@ -207,19 +289,18 @@ function moreBtnsClick(item, index) {
function videoErrorCallback(e) {
console.error('视频播放失败', e);
}
// 图片选择与发送优化
async function sendImg() {
try {
// 1. 调用图片选择API，添加fail回调
const res = await new Promise((resolve, reject) => {
uni.chooseImage({
count: 3,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: resolve,
fail: reject // 捕获选择失败（含权限拒绝）
});
});
try {
// 1. 调用图片选择API，添加fail回调
const res = await new Promise((resolve, reject) => {
uni.chooseImage({
count: 3,
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"],
success: resolve,
fail: reject, // 捕获选择失败（含权限拒绝）
});
});
uni.showLoading({ title: '发送中' });
console.log('选择图片成功', res);
@@ -246,17 +327,17 @@ async function sendImg() {
// 视频选择与发送优化
async function sendVideo() {
try {
// 1. 调用视频选择API，添加fail回调
const res = await new Promise((resolve, reject) => {
uni.chooseVideo({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: resolve,
fail: reject // 捕获选择失败（含权限拒绝）
});
});
try {
// 1. 调用视频选择API，添加fail回调
const res = await new Promise((resolve, reject) => {
uni.chooseVideo({
count: 1,
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"],
success: resolve,
fail: reject, // 捕获选择失败（含权限拒绝）
});
});
uni.showLoading({ title: '发送中' });
console.log('选择视频成功', res);
@@ -286,48 +367,61 @@ async function sendVideo() {
// 通用权限错误处理函数
function handlePermissionError(err, mediaType) {
const errMsg = err.errMsg || '';
// 识别权限拒绝关键词（兼容不同平台）
const isAuthDenied = ['auth deny', 'permission denied', 'auth denied', '用户拒绝'].some((keyword) => errMsg.includes(keyword));
const errMsg = err.errMsg || "";
// 识别权限拒绝关键词（兼容不同平台）
const isAuthDenied = [
"auth deny",
"permission denied",
"auth denied",
"用户拒绝",
].some((keyword) => errMsg.includes(keyword));
if (isAuthDenied) {
// 弹窗提示用户，并引导至设置页
uni.showModal({
title: '权限提示',
content: `需要${mediaType}权限才能使用该功能，请前往设置开启`,
confirmText: '去设置',
cancelText: '取消',
success: (modalRes) => {
if (modalRes.confirm) {
// 跳转到小程序设置页
uni.openSetting({
success: (settingRes) => {
console.log('设置页返回结果', settingRes);
// 可根据需要添加权限开启后的回调逻辑
}
});
}
}
});
} else {
// 其他错误（如取消选择），仅轻提示
if (!errMsg.includes('cancel')) {
uni.showToast({
title: `${mediaType}选择失败`,
icon: 'none'
});
}
}
if (isAuthDenied) {
// 弹窗提示用户，并引导至设置页
uni.showModal({
title: "权限提示",
content: `需要${mediaType}权限才能使用该功能，请前往设置开启`,
confirmText: "去设置",
cancelText: "取消",
success: (modalRes) => {
if (modalRes.confirm) {
// 跳转到小程序设置页
uni.openSetting({
success: (settingRes) => {
console.log("设置页返回结果", settingRes);
// 可根据需要添加权限开启后的回调逻辑
},
});
}
},
});
} else {
// 其他错误（如取消选择），仅轻提示
if (!errMsg.includes("cancel")) {
uni.showToast({
title: `${mediaType}选择失败`,
icon: "none",
});
}
}
}
const groupInfo = ref({});
async function init() {
const res = await chatApi.groupInfo({
group_id: options.group_id
});
console.log(res);
groupInfo.value = res || {};
getMsgList();
const res = await chatApi.groupInfo({
group_id: options.group_id,
});
console.log(res);
groupInfo.value = res || {};
if (res) {
chatStore.connectSocket();
// 确保状态监听已初始化
if (!chatStore._listenersInitialized) {
chatStore.initStateListeners();
chatStore._listenersInitialized = true;
}
}
getMsgList();
}
const query = reactive({
page: 1,
@@ -381,34 +475,32 @@ async function getMsgList() {
const options = reactive({});
const membersRes = reactive({
user_list: []
user_list: [],
});
onLoad((opt) => {
Object.assign(options, opt);
init();
chatApi.messageMarkReadAll({
session_ids: options.session_id
});
chatApi.groupMembers({ group_id: options.group_id }).then((res) => {
console.log(res);
membersRes.user_list = res.user_list || [];
});
// #ifdef H5
scrollView.safeAreaHeight = uni.getSystemInfoSync().safeArea.height;
// #endif
Object.assign(options, opt);
init();
chatApi.messageMarkReadAll({
session_ids: options.group_id,
});
chatStore.group_id = options.group_id;
chatApi.groupMembers({ group_id: options.group_id }).then((res) => {
console.log(res);
membersRes.user_list = res.user_list || [];
});
// #ifdef H5
scrollView.safeAreaHeight = uni.getSystemInfoSync().safeArea.height;
// #endif
});
onMounted(() => {
chatStore.connectSocket();
// 确保状态监听已初始化
if (!chatStore._listenersInitialized) {
chatStore.initStateListeners();
chatStore._listenersInitialized = true;
}
onShow(() => {
// 页面显示时，检查连接状态
if (!chatStore.isConnect || !chatStore.socketTask) {
console.log("聊天页显示，检查Socket连接");
chatStore.forceReconnect();
}
});
onShow(() => {});
function toMore() {
go.to('PAGES_CHAT_GROUP_INFO', {
group_id: groupInfo.value.id,
@@ -422,16 +514,16 @@ function sendText() {
}
function sendMsg(msg) {
chatStore.sendMessage({
to_id: groupInfo.value.id,
to_user_type: groupInfo.value.id,
chat_type: 2,
content: msg.value,
image_url: '',
order_id: '',
session_id: groupInfo.value.session_id || options.session_id,
...msg
});
chatStore.sendMessage({
to_id: groupInfo.value.id,
to_user_type: groupInfo.value.id,
chat_type: 2,
content: msg.value,
image_url: "",
order_id: "",
session_id: groupInfo.value.session_id || options.session_id,
...msg,
});
}
function closeModal() {
modalData.form = {
@@ -442,52 +534,57 @@ function closeModal() {
};
}
function confirmCoupon() {
console.log(modalData.form);
if (!modalData.form.title) {
uni.showToast({
title: '请输入自定义文案',
icon: 'none'
});
return;
}
if (!modalData.form.couponId) {
uni.showToast({
title: '请选择优惠券',
icon: 'none'
});
return;
}
if (!modalData.form.giveNum) {
uni.showToast({
title: '请输入发放数量',
icon: 'none'
});
return;
}
if (!modalData.form.getLimit) {
uni.showToast({
title: '请输入每人限领量',
icon: 'none'
});
return;
}
console.log(modalData.form);
// if (!modalData.form.title) {
// uni.showToast({
// title: "请输入自定义文案",
// icon: "none",
// });
// return;
// }
if (!modalData.form.couponId) {
uni.showToast({
title: "请选择优惠券",
icon: "none",
});
return;
}
if (!modalData.form.giveNum) {
uni.showToast({
title: "请输入发放数量",
icon: "none",
});
return;
}
if (!modalData.form.getLimit) {
uni.showToast({
title: "请输入每人限领量",
icon: "none",
});
return;
}
chatCouponApi.chatCouponCreate(modalData.form).then((res) => {
if (res) {
modalData.show = false;
const couponJson = JSON.parse(res.couponJson);
sendMsg({
coupon: { ...couponJson, title: modalData.form.title, activity_id: res.id },
chat_coupon_id: res.id,
msg_type: 4
});
} else {
uni.showToast({
title: '发送失败',
icon: 'none'
});
}
});
chatCouponApi.chatCouponCreate(modalData.form).then((res) => {
if (res) {
modalData.show = false;
const couponJson = JSON.parse(res.couponJson);
sendMsg({
coupon: {
...couponJson,
title: modalData.form.title,
activity_id: res.id,
},
chat_coupon_id: res.id,
msg_type: 4,
});
closeModal();
} else {
uni.showToast({
title: "发送失败",
icon: "none",
});
}
});
}
function previewImage(url) {
@@ -528,6 +625,11 @@ const pageHeight = computed(() => {
}
return '';
});
onUnmounted(() => {
// 组件卸载时，移除消息回调
chatStore.removeReceiveMsgCallback(handleReceiveMsg);
});
</script>
<style lang="scss" scoped>
.top {

106
pageChat/coupon-activity/detail.vue
View File

@@ -41,20 +41,29 @@
</view>
<view class="u-m-t-32 table bg-fff">
<view class="header">
<view class="header">
<view class="user">用户</view>
<view class="gettime">领取时间</view>
<view class="usetime">使用时间</view>
<view class="status">状态</view>
<view class="operation">操作</view>
</view>
<view class="body">
<view class="item" v-for="(item,index) in 10" :key="index">
<view class="user">用户昵称（40239）</view>
<view class="gettime">2025/06/27 20:07:18）</view>
<view class="usetime">2025/01/15 08:02:38</view>
<view class="status">已使用</view>
<view class="operation status3">失效</view>
<view class="body">
<view class="item" v-for="(item, index) in list" :key="index">
<view class="user">
<view>
{{ item.nickName }}
</view>
<view> ({{ item.shopUserId }}) </view>
</view>
<view class="gettime">{{ item.createTime }}</view>
<view class="usetime">{{ item.useTime }}</view>
<view class="status">{{ returnStatus(item.status) }}</view>
<view class="operation status3">
<text v-if="item.status == 0" @click="deleteRecord(item)"
>失效</text
></view
>
</view>
</view>
</view>
@@ -70,12 +79,49 @@ import { reactive, ref, watch } from "vue";
import { onShow } from "@dcloudio/uni-app";
import go from "@/commons/utils/go.js";
import * as chatCouponApi from "@/http/api/market/chat";
function deleteRecord(item) {
uni
.showModal({
title: "提示",
content: "确定要让该记录失效吗？",
})
.then((res) => {
if (res.confirm) {
chatCouponApi
.deleteRecord({
id: item.id,
})
.then((res) => {
uni.showToast({
title: "操作成功",
icon: "none",
});
setTimeout(() => {
refresh();
}, 1000);
});
}
});
}
const statusOptions = ref([
{ label: "全部", value: "" },
{ label: "未使用", value: 0 },
{ label: "已使用", value: 1 },
{ label: "已过期", value: 2 },
]);
function returnStatus(status) {
if (status == 0) {
return "未使用";
}
if (status == 1) {
return "已使用";
}
if (status == 2) {
return "已过期";
}
}
const selStatus = ref("");
const query = reactive({
page: 1,
@@ -146,39 +192,39 @@ onLoad((opt) => {
display: flex;
justify-content: space-between;
}
.table{
.user{
.table {
.user {
width: 142rpx;
}
.gettime{
.gettime {
width: 172rpx;
}
.usetime{
.usetime {
width: 158rpx;
}
.status{
.status {
width: 84rpx;
}
.operation{
.operation {
width: 56rpx;
&.status3{
color: #FF383C;
&.status3 {
color: #ff383c;
}
}
.header{
display: flex;
justify-content: space-between;
padding: 32rpx 16rpx;
color: #666;
border-bottom: 1px solid #E5E5E5;
}
.body{
.item{
display: flex;
justify-content: space-between;
padding: 24rpx 16rpx;
border-bottom: 1px solid #E5E5E5;
}
.header {
display: flex;
justify-content: space-between;
padding: 32rpx 16rpx;
color: #666;
border-bottom: 1px solid #e5e5e5;
}
.body {
.item {
display: flex;
justify-content: space-between;
padding: 24rpx 16rpx;
border-bottom: 1px solid #e5e5e5;
}
}
}
</style>

74
pageChat/group-info/index.vue
View File

@@ -2,7 +2,7 @@
<view class="min-page bg-f7 u-font-28">
<view class="user-list bg-fff">
<view class="u-flex u-row-between u-col-center">
<text class="color-000">群成员（{{allUser.length}}人）</text>
<text class="color-000">群成员（{{ allUser.length }}人）</text>
<text class="color-red" @click="showRemove = !showRemove">移除</text>
</view>
<view class="list u-m-t-26">
@@ -17,7 +17,9 @@
:src="item.avatar"
round="8rpx"
></up-avatar>
<view class="u-m-t-8 color-000 u-line-1" style="max-width: 104rpx;">{{ item.nick_name }}</view>
<view class="u-m-t-8 color-000 u-line-1" style="max-width: 104rpx">{{
item.nick_name
}}</view>
<view
class="remove u-absolute"
v-if="showRemove && item.role != 1"
@@ -40,7 +42,10 @@
</view>
<view class="bottom">
<view class="u-flex u-row-between default-padding bg-fff border-bottom">
<view
class="u-flex u-row-between default-padding bg-fff border-bottom"
@click="toEditTitle"
>
<text>群聊名称</text>
<view class="u-flex color-666">
<text>{{ groupInfo.name }}</text>
@@ -77,6 +82,17 @@
</view>
</view>
</view>
<Modal v-model="modalData.show" title="修改群名称" @confirm="modalConfirm">
<view class="u-p-40">
<view class="font-bold u-m-b-16">群名称</view>
<up-input
v-model="modalData.form.title"
placeholder="请输入群名称"
maxlength="20"
></up-input>
</view>
</Modal>
</view>
</template>
<script setup>
@@ -84,10 +100,50 @@ import go from "@/commons/utils/go.js";
import * as chatApi from "@/http/php/chat";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { reactive, toRefs, computed, watch, onMounted, ref } from "vue";
import Modal from "@/pageChat/components/modal.vue";
const options = reactive({});
const groupInfo = ref({});
onLoad((opt) => {
Object.assign(options, opt);
const modalData = reactive({
show: false,
form: {
title: "",
},
key: "editTitle",
});
function toEditTitle() {
modalData.show = true;
modalData.form.title = groupInfo.value.name || "";
}
function modalConfirm(e) {
if (modalData.key == "editTitle") {
if (!modalData.form.title.trim().length) {
uni.showToast({
title: "请输入群名称",
icon: "none",
});
return;
}
chatApi
.groupEditTitle({
group_id: options.group_id,
title: modalData.form.title,
})
.then((res) => {
if (res) {
groupInfo.value.name = modalData.form.title;
modalData.show = false;
uni.showToast({
title: "修改成功",
icon: "none",
});
}
});
}
}
function getGroupInfo() {
chatApi
.groupInfo({
group_id: options.group_id,
@@ -95,6 +151,10 @@ onLoad((opt) => {
.then((res) => {
groupInfo.value = res || {};
});
}
onLoad((opt) => {
Object.assign(options, opt);
getGroupInfo();
});
function groupMuteChange(e) {
if (e) {
@@ -137,8 +197,8 @@ function getMembers() {
});
}
function loadMore() {
userLists.value=allUser.value
function loadMore() {
userLists.value = allUser.value;
}
onShow(() => {
getMembers();

131
pageChat/index.vue
View File

@@ -19,36 +19,37 @@
</up-sticky>
<view class="list">
<up-swipe-action>
<up-swipe-action-item
:options="options1"
v-for="(item, index) in list"
v-model:show="item.showOptions"
@click="optionsClick($event, item, index)"
:key="item.id"
>
<view class="item u-flex" @click="toDetail(item)">
<view class="u-flex avatar">
<up-avatar
size="118rpx"
:src="item.avatar"
shape="square"
round="8rpx"
></up-avatar>
<view class="bandage" v-if="item.unread_count > 0">{{
item.unread_count >= 99 ? "99" : item.unread_count
}}</view>
</view>
<view class="u-flex-1 u-flex u-row-between u-p-l-14">
<view style="max-width: 364rpx">
<view class="color-000 u-line-1">{{ item.name }}</view>
<view class="u-m-t-28 u-line-1 u-font-24 color-999">{{
item.msg
<template v-for="(item, index) in list" :key="item.id">
<up-swipe-action-item
:options="options1"
v-model:show="item.showOptions"
@click="optionsClick($event, item, index)"
>
<view class="item u-flex" @click="toDetail(item)">
<view class="u-flex avatar">
<up-avatar
size="118rpx"
:src="item.avatar"
shape="square"
round="8rpx"
></up-avatar>
<view class="bandage" v-if="item.unread_count > 0">{{
item.unread_count >= 99 ? "99" : item.unread_count
}}</view>
</view>
<view class="color-333 u-font-24">{{ item.send_time }}</view>
<view class="u-flex-1 u-flex u-row-between u-p-l-14">
<view style="max-width: 364rpx">
<view class="color-000 u-line-1">{{ item.name }}</view>
<view class="u-m-t-28 u-line-1 u-font-24 color-999">{{
item.msg
}}</view>
</view>
<view class="color-333 u-font-24">{{ item.send_time }}</view>
</view>
</view>
</view>
</up-swipe-action-item>
</up-swipe-action-item>
<view style="height: 16rpx" class="bg-f7"></view>
</template>
</up-swipe-action>
</view>
</view>
@@ -56,45 +57,49 @@
<script setup>
import * as chatApi from "@/http/php/chat";
import { ref, reactive, inject, onMounted,onUnmounted } from "vue";
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { useChatStore } from "@/store/chat";
import dayjs from "dayjs";
const chatStore = useChatStore();
onMounted(() => {
chatStore.connectSocket();
// 确保状态监听已初始化
if (!chatStore._listenersInitialized) {
chatStore.initStateListeners();
chatStore._listenersInitialized = true;
const originalOnReceiveMsg = chatStore.onReceiveMsg;
// 定义消息回调函数
const handleReceiveMsg = (msg) => {
// 先执行原始回调（如果有）
if (typeof originalOnReceiveMsg === "function") {
originalOnReceiveMsg(msg);
}
});
const startReciveMsg=ref(true)
onUnmounted(() => {
startReciveMsg.value=false
})
chatStore.onReceiveMsg = (msg) => {
if(!startReciveMsg.value){
return
}
if (msg.operate_type == "receive_msg" && msg.chat_type == 2) {
const index = allList.value.findIndex((v) => v.group_id == msg.group_id);
if (index != -1) {
allList.value[index].unread_count += 1;
allList.value[index].msg = returnMsg(msg);
allList.value[index].send_time = msg.send_time;
allList.value[index].send_time_origin = msg.send_time_origin;
allList.value = listSort(allList.value);
}
const index1 = list.value.findIndex((v) => v.group_id == msg.group_id);
if (index1 != -1) {
list.value[index1].unread_count += 1;
list.value[index1].msg = returnMsg(msg);
list.value[index1].send_time = msg.send_time;
list.value[index1].send_time_origin = msg.send_time_origin;
list.value = listSort(list.value);
}
}
};
onMounted(() => {
chatStore.registerReceiveMsgCallback(handleReceiveMsg);
});
onUnmounted(() => {
// 移除消息回调，避免内存泄漏
chatStore.removeReceiveMsgCallback(handleReceiveMsg);
});
function returnMsg(msg) {
if (msg.msg_type == 1) {
return msg.nick + "：" + msg.content;
@@ -168,7 +173,7 @@ function throttle(fn, delay) {
//使用节流函数
const throttleSearch = throttle(search, 500);
function search() {
list.value = allList.value
const arr = allList.value
.filter((v) => v.name.includes(query.key.trim()))
.map((v) => {
return {
@@ -176,10 +181,20 @@ function search() {
showOptions: false,
};
});
list.value = listSort(arr);
}
function listSort(arr) {
return arr.sort((a, b) => {
return dayjs(b.send_time_origin).unix() - dayjs(a.send_time_origin).unix();
});
}
async function getList() {
const res = await chatApi.messageSessionList({});
allList.value = (res.list || []).filter((v) => !v.is_del);
const arr = (res.list || []).filter((v) => !v.is_del);
allList.value = listSort(arr);
search();
}
@@ -190,7 +205,7 @@ async function clearAllmsg() {
success: async (res) => {
if (res.confirm) {
const res = await chatApi.messageMarkReadAll({
session_ids: list.value.map((v) => v.session_id).join(","),
session_ids: list.value.map((v) => v.group_id).join(","),
});
if (res) {
uni.showToast({
@@ -224,8 +239,16 @@ function toDetail(item) {
const messageUnreadCount = ref(0);
onShow(() => {
startReciveMsg.value=true
getList();
// 检查连接状态，确保连接活跃
if (!chatStore.isConnect || !chatStore.socketTask) {
console.log("列表页显示，检查Socket连接");
chatStore.forceReconnect();
} else {
chatStore.shop_id = "";
chatStore.init();
}
// 获取未读消息总数
chatApi.messageUnreadCount({}).then((res) => {
console.log(res);
@@ -245,13 +268,11 @@ onShow(() => {
}
.list {
padding: 36rpx 28rpx;
.item {
padding: 32rpx 28rpx;
background-color: #fff;
border-radius: 16rpx;
display: flex;
flex-direction: column;
gap: 16rpx;
.avatar {
position: relative;
.bandage {
@@ -273,4 +294,10 @@ onShow(() => {
}
}
}
:deep(.u-swipe-action-item__content) {
background-color: transparent;
}
:deep(.u-swipe-action-item) {
border-radius: 16rpx;
}
</style>

159
store/chat.js
View File

@@ -16,10 +16,13 @@ export const useChatStore = defineStore("chat", {
socketTask: null,
onReceiveMsg: () => {},
chatList: [],
shop_id: uni.getStorageSync("shopId"),
token: uni.getStorageSync("iToken").tokenValue || "",
group_id:'',
isManualClose: false, // 是否主动关闭（true：不重连；false：自动重连）
heartbeatTimer: null, // 心跳定时器
reconnectTimer: null, // 重连定时器
connectionMonitorTimer: null, // 连接状态监控定时器
reconnectCount: 0, // 当前重连次数
maxReconnectCount: 5, // 最大重连次数（避免无限重连）
reconnectDelay: 1000, // 初始重连延迟（ms）
@@ -28,6 +31,7 @@ export const useChatStore = defineStore("chat", {
isAppActive: true, // 应用是否在前台
lastHeartbeatTime: 0, // 上次心跳时间戳
lastConnectTime: 0, // 上次连接时间（防止短时间内频繁连接）
// ========== 新增：修复未定义的状态 ==========
_listenersInitialized: false, // 状态监听器是否已初始化
@@ -39,6 +43,9 @@ export const useChatStore = defineStore("chat", {
recentMessages: new Map(), // 最近处理的消息映射表：key=消息特征哈希，value=处理时间戳
deduplicationWindow: 5000, // 去重时间窗口（5秒内相同消息只处理一次）
maxRecentMessages: 100, // 最近消息缓存最大数量
// ========== 新增：多页面消息监听支持 ==========
receiveMsgCallbacks: [], // 消息接收回调队列，支持多页面同时监听
};
},
@@ -91,6 +98,7 @@ export const useChatStore = defineStore("chat", {
// 2. 重置重连状态
this.reconnectCount = 0;
this.stopHeartbeat();
this.stopConnectionMonitor();
// 3. 立即重新连接
setTimeout(() => {
@@ -128,13 +136,14 @@ export const useChatStore = defineStore("chat", {
{
type: "OnbocChat",
operate_type: "init",
shop_id: uni.getStorageSync("shopId"),
token: uni.getStorageSync("iToken").tokenValue || "",
shop_id: this.shop_id,
token: this.token,
},
false
);
},
// ========== 增强发送消息容错性 ==========
sendMessage(msg, isAutoAppend = true) {
// 1. 主动关闭状态：提示用户
if (this.isManualClose) {
@@ -144,13 +153,14 @@ export const useChatStore = defineStore("chat", {
});
}
// 2. 连接未建立：尝试重连后发送
if (!this.isConnect) {
// 2. 连接未建立或SocketTask失效：尝试重连后发送
if (!this.isConnect || !this.socketTask) {
console.warn("Socket连接未建立，尝试重连...");
this.reconnect();
// 延迟发送，确保重连成功
// 延长延迟时间，确保重连完成
setTimeout(() => {
this.sendMessage(msg, isAutoAppend);
}, this.reconnectDelay);
}, 1500);
return;
}
@@ -166,25 +176,41 @@ export const useChatStore = defineStore("chat", {
}
: msg;
this.socketTask.send({
data: JSON.stringify(message),
success: (res) => {
console.log("发送成功", res);
},
fail: (error) => {
console.log("发送失败", error);
// 发送失败可能是连接断开，触发重连
if (!this.isManualClose) {
this.reconnect();
}
},
});
try {
this.socketTask.send({
data: JSON.stringify(message),
success: (res) => {
console.log("发送成功", res);
},
fail: (error) => {
console.error("发送失败，触发重连", error);
// 发送失败可能是连接断开，触发重连
if (!this.isManualClose) {
this.forceReconnect();
// 重连后重试发送
setTimeout(() => {
this.sendMessage(msg, isAutoAppend);
}, 1500);
}
},
});
} catch (error) {
console.error("发送消息异常，触发重连", error);
// 捕获异常，立即重连
if (!this.isManualClose) {
this.forceReconnect();
// 重连后重试发送
setTimeout(() => {
this.sendMessage(msg, isAutoAppend);
}, 1500);
}
}
},
// ========== 发送心跳包 ==========
sendHeartbeat() {
// 应用在后台时可调整心跳策略（如降低频率）
if (!this.isConnect || this.isManualClose) return;
if (!this.isConnect || this.isManualClose || !this.socketTask) return;
const now = Date.now();
// 记录心跳时间
@@ -196,7 +222,7 @@ export const useChatStore = defineStore("chat", {
}),
fail: (error) => {
console.log("心跳发送失败，触发重连", error);
this.reconnect();
this.forceReconnect();
},
});
},
@@ -224,6 +250,31 @@ export const useChatStore = defineStore("chat", {
this.heartbeatTimer = null;
}
},
// ========== 新增：启动连接状态监控 ==========
startConnectionMonitor() {
// 清除旧定时器
if (this.connectionMonitorTimer) {
clearInterval(this.connectionMonitorTimer);
}
// 每30秒检查一次连接状态
this.connectionMonitorTimer = setInterval(() => {
// 如果应该连接但实际未连接，触发重连
if (!this.isManualClose && this.isConnect && !this.socketTask) {
console.warn("连接监控：发现连接状态异常，强制重置");
this.forceReconnect();
}
}, 30000);
},
// ========== 新增：停止连接状态监控 ==========
stopConnectionMonitor() {
if (this.connectionMonitorTimer) {
clearInterval(this.connectionMonitorTimer);
this.connectionMonitorTimer = null;
}
},
// ========== 智能重连逻辑 ==========
reconnect() {
@@ -235,19 +286,26 @@ export const useChatStore = defineStore("chat", {
console.log("正在建立连接中，跳过重连");
return;
}
// 3. 短时间内已尝试连接：不重连（防止频繁连接）
const now = Date.now();
if (now - this.lastConnectTime < 1000) {
console.log("短时间内已尝试连接，跳过重连");
return;
}
// 3. 超过最大重连次数：停止重连
// 4. 超过最大重连次数：停止重连
if (this.reconnectCount >= this.maxReconnectCount) {
console.log("已达最大重连次数，停止重连");
return;
}
// 4. 清除旧重连定时器
// 5. 清除旧重连定时器
if (this.reconnectTimer) {
clearTimeout(this.reconnectTimer);
}
// 5. 计算重连延迟（退避算法：1s → 2s → 4s → 8s → 8s...）
// 6. 计算重连延迟（退避算法：1s → 2s → 4s → 8s → 8s...）
const delay = Math.min(
this.reconnectDelay * Math.pow(2, this.reconnectCount),
this.maxReconnectDelay
@@ -255,7 +313,7 @@ export const useChatStore = defineStore("chat", {
console.log(`第${this.reconnectCount + 1}次重连，延迟${delay}ms`);
// 6. 延迟执行重连
// 7. 延迟执行重连
this.reconnectTimer = setTimeout(() => {
this.connectSocket();
this.reconnectCount++;
@@ -271,11 +329,18 @@ export const useChatStore = defineStore("chat", {
isConnecting: this.isConnecting,
isManualClose: this.isManualClose
});
// 关键：如果 socketTask 已失效但 isConnect 为 true，强制重置状态
if (this.isConnect && !this.socketTask) {
console.warn("Socket连接状态异常，强制重置");
this.isConnect = false;
this.forceReconnect();
}
return;
}
// 2. 设置连接中状态
this.isConnecting = true;
this.lastConnectTime = Date.now();
// 3. 重置主动关闭标记
this.isManualClose = false;
@@ -309,6 +374,7 @@ export const useChatStore = defineStore("chat", {
// 缩短心跳间隔到15s（更频繁的心跳维持连接活跃）
this.heartbeatInterval = 15000;
this.startHeartbeat();
this.startConnectionMonitor(); // 启动连接状态监控
// 初始化状态监听（仅在首次连接时执行）
if (!this._listenersInitialized) {
@@ -357,7 +423,7 @@ export const useChatStore = defineStore("chat", {
this.isConnect = false;
this.isConnecting = false;
// 错误触发重连
this.reconnect();
this.forceReconnect();
});
// 8. 连接关闭回调（区分主动/意外关闭）
@@ -367,6 +433,7 @@ export const useChatStore = defineStore("chat", {
this.isConnect = false;
this.isConnecting = false;
this.stopHeartbeat(); // 停止心跳
this.stopConnectionMonitor(); // 停止连接状态监控
// 只有非主动关闭时才重连
if (!this.isManualClose) {
@@ -410,8 +477,41 @@ export const useChatStore = defineStore("chat", {
}
// 5. 正常处理消息
this.chatList.unshift(msg);
this.onReceiveMsg(msg);
if(this.group_id==msg.to_id){
this.chatList.unshift(msg);
}
// 触发所有消息回调（支持多页面同时监听）
this.triggerReceiveMsgCallbacks(msg);
},
// ========== 新增：触发消息回调 ==========
triggerReceiveMsgCallbacks(msg) {
// 调用旧的单个回调（兼容原有代码）
if (typeof this.onReceiveMsg === 'function') {
this.onReceiveMsg(msg);
}
// 调用所有注册的回调
this.receiveMsgCallbacks.forEach(callback => {
if (typeof callback === 'function') {
callback(msg);
}
});
},
// ========== 新增：注册消息回调 ==========
registerReceiveMsgCallback(callback) {
if (typeof callback === 'function' && !this.receiveMsgCallbacks.includes(callback)) {
this.receiveMsgCallbacks.push(callback);
}
},
// ========== 新增：移除消息回调 ==========
removeReceiveMsgCallback(callback) {
const index = this.receiveMsgCallbacks.indexOf(callback);
if (index > -1) {
this.receiveMsgCallbacks.splice(index, 1);
}
},
// ========== 新增：生成消息特征哈希 ==========
@@ -468,6 +568,7 @@ export const useChatStore = defineStore("chat", {
// 2. 停止所有定时器，清理资源
this.stopHeartbeat();
this.stopConnectionMonitor();
if (this.reconnectTimer) {
clearTimeout(this.reconnectTimer);
this.reconnectTimer = null;