新增聊天系统

App.vue

@@ -3,6 +3,8 @@
 	// 多语言引入并初始化
 	import i18n from './locale/index';
 	const env = process.env.NODE_ENV;
+
+	import socket from '@/utils/socket';
 	export default {
 		globalData: {
 			data: {
@@ -3107,6 +3109,12 @@
 		onLaunch(params) {
 			//隐藏系统tabbar
 			this.globalData.system_hide_tabbar();
+
+			const userInfo = uni.getStorageSync('cache_shop_user_info_key');
+			if (userInfo.id) {
+				// 应用启动时连接socket
+				socket.connectSocket();
+			}
 		},
 
 		// 启动，或从后台进入前台显示

components/diy/footer.vue

@@ -95,6 +95,7 @@
                         // 角标链接定义
                         let badge_arr = {
                             '/pages/cart/cart': 'cart',
+                            '/pages/user/user': 'user',
                             '/pages/cart-page/cart-page': 'cart',
                         };
                         for (var i in nav_content) {

pages.json

@@ -12,6 +12,14 @@
 				"enablePullDownRefresh": true,
 				"navigationBarTitleText": ""
 			}
+		}, {
+			"path": "pages/contact/contact",
+			"style": {
+				// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP
+				"navigationStyle": "custom",
+				// #endif
+				"enablePullDownRefresh": true
+			}
 		},
 		{
 			"path": "pages/goods-category/goods-category",

pages/contact/contact.vue

@@ -0,0 +1,441 @@
+<template>
+	<view class="container">
+		<!-- #ifdef H5 -->
+		<view class="header-wrap">
+			<view class="header">
+				<view class="item" @click="back()">
+					<uni-icons type="left" color="#111" size="22"></uni-icons>
+				</view>
+				<view class="title">
+					<text class="t">咨询</text>
+				</view>
+				<view class="item"></view>
+			</view>
+		</view>
+		<!-- #endif -->
+		<view class="message-wrap" id="message-wrap">
+			<view class="more" v-if="list.length >= 10">
+				<text class="t" v-if="!finish">下拉加载更多历史消息</text>
+				<text class="t" v-else>没有更多消息了~</text>
+			</view>
+			<view class="more" v-if="status">
+				<text class="t">{{ contactInfo }}</text>
+			</view>
+			<view class="item" :class="[`item${item.user_type}`]" v-for="item in list" :key="item.id">
+				<image class="avatar" src="/static/icon_contact_avatar.svg" mode="aspectFill" v-if="item.user_type == 2"></image>
+				<view class="msg-wrap">
+					<view class="msg" v-if="item.type == 1">
+						<text class="t">{{ item.content }}</text>
+					</view>
+					<image class="img" :src="item.content" mode="heightFix" @click="previewImageHandle([item.content])" v-else></image>
+					<view class="time-wrap">
+						<text class="t">{{ item.add_time | formatTime }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="focus-wrap" v-if="iosFocus"></view>
+		<view class="footer-wrap" :class="{ focus: iosFocus }">
+			<view class="footer">
+				<view class="item" @click="selectImg">
+					<uni-icons type="image-filled" size="30" color="#666"></uni-icons>
+				</view>
+				<view class="input-wrap">
+					<input :focus="focus" adjust-position class="input" type="text" placeholder="输入消息..." v-model.trim="messageValue" @confirm="sendMessageHandle" @focus="inputFocus" @blur="inputBlur" />
+				</view>
+				<view class="item" style="transform: rotate(280deg)" @click="sendMessageHandle">
+					<uni-icons type="paperplane-filled" size="30" color="#5C6BC0"></uni-icons>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	const app = getApp();
+	import dayjs from 'dayjs';
+	import socket from '@/utils/socket';
+	import { uploadImage, previewImage } from '@/utils/uploadFile.js';
+
+	export default {
+		mixins: [socket.createSocketMixin()],
+		data() {
+			return {
+				iosFocus: false,
+				focus: false,
+				messageValue: '',
+				userInfo: '',
+				status: 0,
+				contactInfo: '',
+				finish: false,
+				page: 1,
+				list: [],
+				platform: '',
+			};
+		},
+		filters: {
+			formatTime(timeStr) {
+				const now = dayjs(); // 当前时间
+				const targetTime = dayjs(timeStr); // 目标时间
+
+				// 获取日期部分（忽略时分秒）
+				const nowDate = now.startOf('day');
+				const targetDate = targetTime.startOf('day');
+
+				// 计算日期差（按天计算）
+				const diffDays = nowDate.diff(targetDate, 'day');
+
+				// 星期几的中文映射
+				const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+				const targetWeekDay = weekDays[targetTime.day()];
+
+				// 获取当前周的第一天（周日）
+				const firstDayOfWeek = now.startOf('week');
+
+				// 根据天数差判断格式化规则
+				if (diffDays === 0) {
+					// 今天
+					return targetTime.format('HH:mm');
+				} else if (diffDays === 1) {
+					// 昨天
+					return '昨天 ' + targetTime.format('HH:mm');
+				} else if (targetDate.isSame(firstDayOfWeek, 'week')) {
+					// 本周内（但不是今天和昨天）
+					return targetWeekDay + ' ' + targetTime.format('HH:mm');
+				} else {
+					// 更早之前
+					return targetTime.format('YYYY年M月D日 HH:mm');
+				}
+			},
+		},
+		onLoad() {
+			this.userInfo = uni.getStorageSync('cache_shop_user_info_key');
+
+			if (this.userInfo.id) {
+				// 自动管理生命周期的消息监听
+				this.socketOnMessage((data) => {
+					this.messageListener(data);
+				});
+				socket.sendMessage({
+					operate_type: 'chat_list',
+					type: 'user_msg',
+					user_id: this.userInfo.id,
+				});
+			}
+
+			// 获取系统信息
+			const systemInfo = uni.getSystemInfoSync();
+			this.platform = systemInfo.platform;
+		},
+		onPullDownRefresh() {
+			this.page++;
+			this.getHistoryMessage();
+		},
+		methods: {
+			// 发消息
+			sendMessageHandle() {
+				if (this.messageValue) {
+					this.sendMessageSocket(this.messageValue);
+					this.messageValue = '';
+
+					setTimeout(() => {
+						this.focus = true;
+					}, 10);
+				}
+			},
+			// 发送消息 1文本 2图文
+			sendMessageSocket(content = '', type = 1) {
+				socket.sendMessage({
+					operate_type: 'send_msg',
+					type: 'user_msg',
+					user_id: this.userInfo.id,
+					content: content,
+					content_type: type,
+				});
+			},
+			// 监听消息
+			messageListener(data) {
+				// console.log('监听消息===', data);
+				if (data.operate_type == 'chat_list' && this.page == 1) {
+					this.list = data.data.chat_list.reverse();
+					this.status = 1;
+					this.contactInfo = data.service;
+
+					this.$nextTick(() => {
+						this.scrollToBottom();
+					});
+				}
+				if (data.operate_type == 'chat_list' && this.page != 1) {
+					if (data.data.chat_list.length) {
+						this.list.unshift(...data.data.chat_list.reverse());
+
+						uni.showToast({
+							title: '获取成功',
+							icon: 'none',
+						});
+					} else {
+						this.finish = true;
+					}
+
+					setTimeout(() => {
+						uni.stopPullDownRefresh();
+					}, 300);
+
+					// this.$nextTick(() => {
+					// 	uni.pageScrollTo({
+					// 		scrollTop: 0, // 滚动到页面顶部
+					// 		duration: 100, // 滚动动画时长（毫秒）
+					// 	});
+					// });
+				}
+				if (data.operate_type == 'service_msg') {
+					this.list.push(data.data);
+
+					this.$nextTick(() => {
+						this.scrollToBottom();
+					});
+				}
+
+				if (data.operate_type == 'user_msg') {
+					this.list.push(data.data[0]);
+
+					this.$nextTick(() => {
+						this.scrollToBottom();
+					});
+				}
+
+				if (data.operate_type == 'error') {
+					uni.showModal({
+						title: '注意',
+						content: data.msg,
+						showCancel: false,
+						success: (res) => {
+							if (res.confirm) {
+								uni.navigateBack();
+							}
+						},
+					});
+				}
+			},
+			// 获取历史消息
+			getHistoryMessage() {
+				socket.sendMessage({
+					operate_type: 'chat_list',
+					type: 'user_msg',
+					user_id: this.userInfo.id,
+					page: this.page,
+				});
+			},
+			// 上传图片
+			async selectImg() {
+				try {
+					const [url] = await uploadImage(1, true);
+					console.log('selectImg===', url);
+					this.sendMessageSocket(url, 2);
+				} catch (error) {
+					console.log(error);
+				}
+			},
+			// 预览图片
+			previewImageHandle(urls) {
+				previewImage(urls);
+			},
+			// 返回上一页
+			back() {
+				uni.navigateBack();
+			},
+			inputBlur() {
+				this.focus = false;
+				this.iosFocus = false;
+			},
+			inputFocus() {
+				if (this.platform == 'ios') {
+					this.iosFocus = true;
+				}
+
+				this.scrollToBottom();
+			},
+			// 滚动到页面底部
+			scrollToBottom() {
+				// 创建节点查询器
+				const query = uni.createSelectorQuery();
+
+				// 获取底部元素的位置（相对于页面顶部的距离）
+				query.select('#message-wrap').boundingClientRect();
+				query.exec((res) => {
+					console.log('scrollToBottom===', res);
+					if (res && res[0]) {
+						const bottomHeight = res[0].height; // 元素顶部距离页面顶部的距离
+
+						// 滚动到指定位置（注意：不同平台参数可能不同）
+						uni.pageScrollTo({
+							scrollTop: bottomHeight + 1000, // 滚动距离（单位：px）
+							duration: 100, // 滚动动画时长（可选）
+						});
+					}
+				});
+			},
+		},
+	};
+</script>
+
+<style scoped lang="scss">
+	.container {
+		--header-height: 44px;
+		--footer-height: 60px;
+		$height: 40px;
+		/* #ifdef H5 */
+		padding: calc(var(--header-height) + var(--status-bar-height)) 0 calc(var(--footer-height) + env(safe-area-inset-bottom)) 0;
+		/* #endif */
+		/* #ifdef MP-ALIPAY */
+		padding: 28upx 0 calc(var(--footer-height) + env(safe-area-inset-bottom)) 0;
+		/* #endif */
+		position: relative;
+
+		.header-wrap {
+			width: 100%;
+			padding-top: var(--status-bar-height);
+			position: fixed;
+			left: 0;
+			top: 0;
+			z-index: 99;
+			background-color: #fff;
+			.header {
+				height: var(--header-height);
+				display: flex;
+				align-items: center;
+
+				.item {
+					width: var(--header-height);
+					height: var(--header-height);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+				.title {
+					flex: 1;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					.t {
+						font-size: 32upx;
+						font-weight: bold;
+						color: #333;
+					}
+				}
+			}
+		}
+		.message-wrap {
+			padding: 28upx;
+			.more {
+				display: flex;
+				justify-content: center;
+				padding-bottom: 28upx;
+				.t {
+					font-size: 24upx;
+					color: #999;
+				}
+			}
+			.item {
+				display: flex;
+				gap: 20upx;
+				padding-bottom: 36upx;
+				&.item1 {
+					flex-direction: row-reverse;
+					.msg-wrap {
+						.msg {
+							background-color: #8e99f3;
+							.t {
+								color: #fff;
+							}
+						}
+					}
+				}
+				&.item2 {
+					.msg-wrap {
+						.time-wrap {
+							justify-content: flex-start;
+						}
+					}
+				}
+				.avatar {
+					$size: 80upx;
+					width: $size;
+					height: $size;
+					margin-top: 7upx;
+					flex-shrink: 0;
+				}
+				.msg-wrap {
+					.msg {
+						padding: 28upx;
+						border-radius: 28upx;
+						background-color: #fff;
+						.t {
+							display: block;
+							max-width: 450upx;
+							font-size: 28upx;
+							color: #333;
+							word-break: break-all;
+						}
+					}
+					.img {
+						display: block;
+						max-width: 500upx;
+						max-height: 200upx;
+						border-radius: 12upx;
+						background-color: #fefefe;
+					}
+					.time-wrap {
+						display: flex;
+						justify-content: flex-end;
+						padding-top: 12upx;
+						.t {
+							font-size: 24upx;
+							color: #999;
+						}
+					}
+				}
+			}
+		}
+		.focus-wrap {
+			height: calc(var(--footer-height) + env(safe-area-inset-bottom));
+		}
+		.footer-wrap {
+			width: 100%;
+			position: fixed;
+			left: 0;
+			bottom: 0;
+			z-index: 99;
+			padding-bottom: env(safe-area-inset-bottom);
+			background-color: #fcfcfc;
+			transform: translateY(0);
+			&.focus {
+				transform: translateY(-100%);
+			}
+			.footer {
+				height: var(--footer-height);
+				display: flex;
+				align-items: center;
+				.item {
+					width: $height + 20px;
+					height: $height;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+				.input-wrap {
+					flex: 1;
+					.input {
+						box-sizing: border-box;
+						width: 100%;
+						height: $height;
+						border-radius: $height;
+						background-color: #efefef;
+						padding-left: 20px;
+						overflow: hidden;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/goods-detail/goods-detail.vue

@@ -452,6 +452,10 @@
 											</block>
 										</block>
 									</block>
+									<view class="cp" hover-class="none" data-value="/pages/contact/contact" @tap="url_event">
+										<image src="/static/icon_contact.svg" mode="scaleToFill" class="image" style="filter: invert(80%)"></image>
+										<text class="dis-block text-size-xs cr-grey">客服</text>
+									</view>
 									<!-- 购物车 -->
 									<view v-if="is_opt_cart == 1" class="cp pr" data-value="/pages/cart-page/cart-page" @tap="url_event">
 										<view class="badge-icon">
@@ -1460,7 +1464,24 @@
 
 			// url事件
 			url_event(e) {
-				app.globalData.url_event(e);
+				var login = e.currentTarget.dataset.login;
+				if (login === undefined || login == 1) {
+					if (this.is_login()) {
+						app.globalData.url_event(e);
+					}
+				} else {
+					app.globalData.url_event(e);
+				}
+			},
+
+			// 是否登录
+			is_login() {
+				const user = app.globalData.get_user_cache_info() || null;
+				if ((user || null) == null) {
+					app.globalData.url_open('/pages/login/login?event_callback=init');
+					return false;
+				}
+				return true;
 			},
 
 			// 底部导航操作返回事件

pages/login/login.vue

@@ -15,9 +15,7 @@
 									<iconfont name="icon-login-down-arrow" size="16rpx"></iconfont>
 								</view>
 							</view> -->
-							<view style="height: 100upx;">
+							<view style="height: 100upx"> </view>
-								
-							</view>
 						</view>
 
 						<!-- 绑定手机 -->
@@ -415,6 +413,7 @@
 </template>
 <script>
 	const app = getApp();
+	import socket from '@/utils/socket';
 	import base64 from '@/common/js/lib/base64.js';
 	import componentCommon from '@/components/common/common';
 	import componentPopup from '@/components/popup/popup';
@@ -1369,6 +1368,7 @@
 				app.globalData.showToast(msg, 'success');
 				var event_callback = this.params.event_callback || null;
 				setTimeout(function () {
+					socket.connectSocket();
 					var pages = getCurrentPages();
 					if (pages.length > 1) {
 						// 触发回调函数

pages/user-order-detail/user-order-detail.vue

@@ -44,7 +44,13 @@
 
 				<!-- 商品列表 -->
 				<view class="goods bg-white padding-main" style="border-radius: 8px 8px 0 0">
-					<view class="br-b padding-bottom-main fw-b text-size">{{ $t('user-order-detail.user-order-detail.7f8p26') }}</view>
+					<view class="br-b padding-bottom-main fw-b text-size" style="display: flex; justify-content: space-between; align-items: center">
+						<text>{{ $t('user-order-detail.user-order-detail.7f8p26') }}</text>
+						<view style="color: #555; font-size: 28upx;display: flex;align-items: center;gap: 4upx;" data-value="/pages/contact/contact" @click="url_event">
+							<uni-icons type="chat" size="18" color="#666"></uni-icons>
+							联系客服
+						</view>
+					</view>
 					<view v-for="(item, index) in detail.items" :key="index" class="goods-item br-b-dashed oh padding-main">
 						<view :data-value="item.goods_url" @tap="url_event" class="cp">
 							<image class="goods-image fl radius" :src="item.images" mode="aspectFill"></image>

pages/user-order/user-order.vue

@@ -53,6 +53,7 @@
 							>
 						</view>
 						<view v-if="item.operate_data.is_cancel + item.operate_data.is_pay + item.operate_data.is_collect + item.operate_data.is_comments + item.operate_data.is_delete + (item.plugins_is_order_allot_button || 0) + (item.plugins_is_order_batch_button || 0) + (item.plugins_is_order_frequencycard_button || 0) + (item.plugins_delivery_data || 0) + (item.plugins_ordergoodsform_data || 0) + (item.plugins_orderresources_data || 0) > 0 || (item.status == 2 && item.order_model != 2) || ((item.plugins_express_data || 0) == 1 && (item.express_data || null) != null) || ((item.plugins_intellectstools_data || null) != null && (item.plugins_intellectstools_data.continue_buy_data || null) != null && item.plugins_intellectstools_data.continue_buy_data.length > 0)" class="item-operation tr br-t padding-top-main">
+							<button class="round bg-white cr-green br-green margin-bottom-main" type="default" size="mini" data-value="/pages/contact/contact" @tap="url_event" hover-class="none">客服</button>
 							<button v-if="item.operate_data.is_cancel == 1" class="round bg-white cr-yellow br-yellow margin-bottom-main" type="default" size="mini" @tap="cancel_event" :data-value="item.id" :data-index="index" hover-class="none">{{ $t('common.cancel') }}</button>
 							<button v-if="item.operate_data.is_pay == 1" class="round bg-white cr-green br-green margin-bottom-main" type="default" size="mini" @tap="pay_event" :data-value="item.id" :data-index="index" :data-price="item.total_price" :data-payment="item.payment_id" :data-currency-symbol="item.currency_data.currency_symbol" hover-class="none">{{ $t('order.order.1i873j') }}</button>
 							<button v-if="item.operate_data.is_collect == 1" class="round bg-white cr-green br-green margin-bottom-main" type="default" size="mini" @tap="collect_event" :data-transactionid="item.weixin_collect_data || ''" :data-value="item.id" :data-index="index" hover-class="none">{{ $t('orderallot-list.orderallot-list.w2w2w4') }}</button>

static/icon_contact_avatar.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749535935276" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7562" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M326.66 531.22v56.42a16.9 16.9 0 0 0 16.9 16.92h5.62v-90.28h-5.62a16.92 16.92 0 0 0-16.9 16.94zM704.14 514.28h-5.62v90.28h5.62a16.9 16.9 0 0 0 16.9-16.92v-56.42a16.92 16.92 0 0 0-16.9-16.94z" p-id="7563" fill="#dbdbdb"></path><path d="M512 32C246.9 32 32 246.9 32 512s214.9 480 480 480 480-214.9 480-480S777.1 32 512 32z m-73.04 492.84a23.72 23.72 0 0 1 32.48-7.76c33.38 20.22 62.2 20.22 90.96 0.66a23.76 23.76 0 0 1 32.84 6 23.32 23.32 0 0 1-6.12 32.58c-44.52 30.3-93.46 30.3-142.32 0.66a23.3 23.3 0 0 1-7.84-32.14z m327.16 62.8a62 62 0 0 1-62 62h-16.92a174.84 174.84 0 0 1-125.04 108.64q-31.82 9.24-80.56 14l-6.3 0.62 1.04-60 61.04-10.3 14 11.86a129.82 129.82 0 0 0 102.12-126.88v-112.8a129.6 129.6 0 1 0-259.18 0v158a16.9 16.9 0 0 1-16.9 16.92h-33.8a62 62 0 0 1-62-62v-56.48a62 62 0 0 1 62-62h5.72a174.66 174.66 0 0 1 349.14 0h5.72a62 62 0 0 1 62 62z" p-id="7564" fill="#dbdbdb"></path></svg>

utils/socket.js

@@ -0,0 +1,547 @@
+// socket.js - 优化后的全局唯一socket管理模块（支付宝小程序兼容版）
+
+// 事件总线实现
+class EventEmitter {
+	constructor() {
+		this.events = {};
+	}
+
+	on(event, callback) {
+		if (!this.events[event]) {
+			this.events[event] = [];
+		}
+		this.events[event].push(callback);
+		return () => this.off(event, callback);
+	}
+
+	off(event, callback) {
+		if (!this.events[event]) return;
+
+		if (callback) {
+			this.events[event] = this.events[event].filter(cb => cb !== callback);
+		} else {
+			this.events[event] = [];
+		}
+	}
+
+	emit(event, data) {
+		if (!this.events[event]) return;
+		this.events[event].forEach(callback => callback(data));
+	}
+}
+
+// 创建全局事件总线
+const eventBus = new EventEmitter();
+
+// 唯一的socket实例
+let socketTask = null;
+let connectTimer = null;
+let heartbeatTimer = null;
+let reconnectCount = 0;
+let isConnected = false;
+let lastUrl = '';
+let isConnecting = false;
+let isAlipayMiniProgram = false;
+
+// 支付宝小程序特有状态
+let globalEventHandlersRegistered = false;
+
+// 初始化时检测环境
+(function detectEnvironment() {
+	try {
+		const systemInfo = uni.getSystemInfoSync();
+		isAlipayMiniProgram = systemInfo.platform === 'alipay' || systemInfo.environment === 'alipay' || systemInfo
+			.app == 'alipay';
+		console.log('当前运行平台===', systemInfo);
+		console.log(`当前运行环境: ${isAlipayMiniProgram ? '支付宝小程序' : '其他平台'}`);
+	} catch (e) {
+		console.error('检测运行环境失败:', e);
+		isAlipayMiniProgram = false;
+	}
+})();
+
+const MAX_RECONNECT_COUNT = 5;
+const RECONNECT_DELAY = 3000; // 3秒重连间隔
+const HEARTBEAT_INTERVAL = 10000; // 10秒心跳间隔
+
+// 连接socket
+function connectSocket(url = 'wss://store.sxczgkj.com/shopser') {
+	// 如果已经连接到相同URL，直接返回
+	if (isConnected && lastUrl === url) {
+		console.log('socket已连接到:', url);
+		return Promise.resolve();
+	}
+
+	// 如果正在连接中，返回pending状态的Promise
+	if (isConnecting) {
+		console.log('socket连接中，等待连接完成...');
+		return new Promise((resolve, reject) => {
+			const unsubscribeConnected = eventBus.on('connected', () => {
+				unsubscribeConnected();
+				unsubscribeError();
+				resolve();
+			});
+
+			const unsubscribeError = eventBus.on('error', (err) => {
+				unsubscribeConnected();
+				unsubscribeError();
+				reject(err);
+			});
+		});
+	}
+
+	// 如果已有不同URL的连接，先关闭
+	if ((socketTask || globalEventHandlersRegistered) && lastUrl !== url) {
+		console.log('关闭旧连接，准备连接新URL:', url);
+		closeSocket();
+	}
+
+	// 记录当前URL
+	lastUrl = url;
+	isConnecting = true;
+	reconnectCount = 0; // 重置重连计数
+
+	console.log('开始连接socket:', url);
+
+	return new Promise((resolve, reject) => {
+		// 支付宝小程序特殊处理
+		if (isAlipayMiniProgram) {
+			// 确保只注册一次全局事件处理程序
+			if (!globalEventHandlersRegistered) {
+				registerGlobalEventHandlers();
+				globalEventHandlersRegistered = true;
+			}
+
+			// 调用连接方法
+			uni.connectSocket({
+				url,
+				success: () => {
+					console.log('socket连接请求已发送');
+				},
+				fail: (err) => {
+					console.error('socket连接失败:', err);
+					isConnecting = false;
+
+					// 特殊处理：如果是"WebSocket已存在"错误，尝试重用现有连接
+					if (err.errMsg.includes('WebSocket 已存在')) {
+						console.warn('检测到重复连接，尝试重用现有连接');
+						// 触发已连接事件（模拟连接成功）
+						handleSocketOpen(null);
+						resolve();
+						return;
+					}
+
+					eventBus.emit('error', err);
+					handleReconnect(url);
+					reject(err);
+				}
+			});
+		} else {
+			// H5和其他平台使用socketTask对象方法
+			socketTask = uni.connectSocket({
+				url,
+				success: () => {
+					console.log('socket连接请求已发送');
+				},
+				fail: (err) => {
+					console.error('socket连接失败:', err);
+					isConnecting = false;
+					eventBus.emit('error', err);
+					handleReconnect(url);
+					reject(err);
+				}
+			});
+
+			// 检查socketTask是否正确返回
+			if (!socketTask) {
+				console.error('uni.connectSocket() 未返回 socketTask 对象');
+				isConnecting = false;
+				eventBus.emit('error', new Error('无法创建socket连接'));
+				handleReconnect(url);
+				reject(new Error('无法创建socket连接'));
+				return;
+			}
+
+			// 监听socket连接成功
+			if (socketTask.onOpen) {
+				socketTask.onOpen((res) => {
+					handleSocketOpen(res, resolve);
+				});
+			} else {
+				console.error('socketTask对象缺少onOpen方法');
+				isConnecting = false;
+				eventBus.emit('error', new Error('socketTask对象不完整'));
+				handleReconnect(url);
+				reject(new Error('socketTask对象不完整'));
+			}
+
+			// 监听socket消息
+			if (socketTask.onMessage) {
+				socketTask.onMessage((res) => {
+					handleSocketMessage(res);
+				});
+			}
+
+			// 监听socket关闭
+			if (socketTask.onClose) {
+				socketTask.onClose((res) => {
+					handleSocketClose(res);
+				});
+			}
+
+			// 监听socket错误
+			if (socketTask.onError) {
+				socketTask.onError((err) => {
+					handleSocketError(err, reject);
+				});
+			}
+		}
+	});
+}
+
+// 注册支付宝小程序全局事件监听
+function registerGlobalEventHandlers() {
+	console.log('注册支付宝小程序全局socket事件监听');
+
+	// 连接成功
+	uni.onSocketOpen((res) => {
+		console.log('支付宝小程序: socket连接成功');
+		handleSocketOpen(res);
+	});
+
+	// 接收消息
+	uni.onSocketMessage((res) => {
+		handleSocketMessage(res);
+	});
+
+	// 连接关闭
+	uni.onSocketClose((res) => {
+		handleSocketClose(res);
+	});
+
+	// 连接错误
+	uni.onSocketError((err) => {
+		handleSocketError(err);
+	});
+}
+
+// 处理socket连接成功
+function handleSocketOpen(res, resolve) {
+	console.log('socket连接成功:', res);
+	reconnectCount = 0;
+	isConnected = true;
+	isConnecting = false;
+
+	// 标记socket已创建（支付宝小程序无socketTask对象）
+	if (isAlipayMiniProgram) {
+		socketTask = true; // 使用布尔值标记连接状态
+	}
+
+	eventBus.emit('connected');
+
+
+	const userInfo = uni.getStorageSync('cache_shop_user_info_key');
+	if (userInfo.id) {
+		sendMessage({
+			operate_type: 'init',
+			type: 'user_msg',
+			user_id: userInfo.id,
+		});
+	}
+
+	startHeartbeat();
+
+	if (resolve) {
+		resolve();
+	}
+}
+
+// 处理socket消息
+function handleSocketMessage(res) {
+	try {
+		let data = JSON.parse(res.data);
+		console.log('收到socket消息:', data);
+		eventBus.emit('message', data);
+	} catch (e) {
+		console.error('解析socket消息失败:', e);
+		eventBus.emit('error', e);
+	}
+}
+
+// 处理socket关闭
+function handleSocketClose(res) {
+	console.log('socket已关闭:', res);
+	isConnected = false;
+	eventBus.emit('closed', res);
+	stopHeartbeat();
+
+	// 仅在非支付宝小程序环境下重置socketTask
+	if (!isAlipayMiniProgram) {
+		socketTask = null;
+	}
+
+	handleReconnect(lastUrl);
+}
+
+// 处理socket错误
+function handleSocketError(err, reject) {
+	console.error('socket发生错误:', err);
+	isConnected = false;
+	isConnecting = false;
+	eventBus.emit('error', err);
+	stopHeartbeat();
+
+	// 仅在非支付宝小程序环境下重置socketTask
+	if (!isAlipayMiniProgram) {
+		socketTask = null;
+	}
+
+	handleReconnect(lastUrl);
+
+	if (reject) {
+		reject(err);
+	}
+}
+
+// 发送消息
+function sendMessage(data) {
+	if (!isConnected) {
+		console.error('socket未连接，无法发送消息');
+		// 尝试重连
+		connectSocket().then(() => {
+			sendMessage(data);
+		}).catch(err => {
+			console.error('重连失败，无法发送消息:', err);
+		});
+		return;
+	}
+
+	try {
+		const messageData = JSON.stringify(data);
+
+		if (isAlipayMiniProgram) {
+			uni.sendSocketMessage({
+				data: messageData,
+				success: () => {
+					console.log('消息发送成功');
+				},
+				fail: (err) => {
+					console.error('消息发送失败:', err);
+					eventBus.emit('error', err);
+				}
+			});
+		} else {
+			if (!socketTask) {
+				console.error('socketTask不存在，无法发送消息');
+				return;
+			}
+
+			// 检查socketTask是否有send方法
+			if (socketTask.send) {
+				socketTask.send({
+					data: messageData,
+					success: () => {
+						console.log('消息发送成功');
+					},
+					fail: (err) => {
+						console.error('消息发送失败:', err);
+						eventBus.emit('error', err);
+					}
+				});
+			} else {
+				console.error('socketTask缺少send方法');
+				eventBus.emit('error', new Error('socketTask对象不完整'));
+			}
+		}
+	} catch (e) {
+		console.error('消息序列化失败:', e);
+		eventBus.emit('error', e);
+	}
+}
+
+// 发送心跳
+function sendHeartbeat() {
+	sendMessage({
+		type: 'ping_interval'
+	});
+}
+
+// 开始心跳
+function startHeartbeat() {
+	stopHeartbeat();
+	heartbeatTimer = setInterval(sendHeartbeat, HEARTBEAT_INTERVAL);
+}
+
+// 停止心跳
+function stopHeartbeat() {
+	if (heartbeatTimer) {
+		clearInterval(heartbeatTimer);
+		heartbeatTimer = null;
+	}
+}
+
+// 处理重连
+function handleReconnect(url) {
+	if (reconnectCount >= MAX_RECONNECT_COUNT) {
+		console.error('达到最大重连次数，停止重连');
+		return;
+	}
+
+	// 检查是否需要重连（避免重复触发连接）
+	if (isConnecting || isConnected) {
+		return;
+	}
+
+	reconnectCount++;
+	console.log(`准备第${reconnectCount}次重连，${RECONNECT_DELAY/1000}秒后...`);
+
+	if (connectTimer) {
+		clearTimeout(connectTimer);
+	}
+
+	connectTimer = setTimeout(() => {
+		connectSocket(url);
+	}, RECONNECT_DELAY);
+}
+
+// 关闭socket
+function closeSocket() {
+	console.log('正在关闭socket连接...');
+
+	try {
+		if (isAlipayMiniProgram) {
+			uni.closeSocket({
+				success: () => {
+					console.log('主动关闭socket成功');
+				},
+				fail: (err) => {
+					console.error('主动关闭socket失败:', err);
+				}
+			});
+		} else {
+			if (!socketTask) return;
+
+			if (socketTask.close) {
+				socketTask.close({
+					success: () => {
+						console.log('主动关闭socket成功');
+					},
+					fail: (err) => {
+						console.error('主动关闭socket失败:', err);
+					}
+				});
+			} else {
+				console.error('socketTask缺少close方法');
+				isConnected = false;
+			}
+		}
+	} catch (e) {
+		console.error('关闭socket时发生异常:', e);
+		isConnected = false;
+	}
+
+	stopHeartbeat();
+	if (connectTimer) {
+		clearTimeout(connectTimer);
+		connectTimer = null;
+	}
+
+	isConnected = false;
+	isConnecting = false;
+
+	// 仅在非支付宝小程序环境下重置socketTask
+	if (!isAlipayMiniProgram) {
+		socketTask = null;
+	}
+
+	// 重置支付宝小程序的全局事件标记
+	globalEventHandlersRegistered = false;
+}
+
+// 监听消息
+function onMessage(callback) {
+	return eventBus.on('message', callback);
+}
+
+// 监听连接状态
+function onConnected(callback) {
+	return eventBus.on('connected', callback);
+}
+
+// 监听断开状态
+function onClosed(callback) {
+	return eventBus.on('closed', callback);
+}
+
+// 监听错误
+function onError(callback) {
+	return eventBus.on('error', callback);
+}
+
+// 提供一个自动管理生命周期的组件选项
+function createSocketMixin() {
+	return {
+		data() {
+			return {
+				socketUnsubscribes: []
+			};
+		},
+		beforeDestroy() {
+			// 自动取消所有订阅
+			this.socketUnsubscribes.forEach(unsubscribe => unsubscribe());
+			this.socketUnsubscribes = [];
+		},
+		methods: {
+			// 订阅消息并自动管理生命周期
+			socketOnMessage(callback) {
+				const unsubscribe = onMessage(callback);
+				this.socketUnsubscribes.push(unsubscribe);
+				return unsubscribe;
+			},
+			socketOnConnected(callback) {
+				const unsubscribe = onConnected(callback);
+				this.socketUnsubscribes.push(unsubscribe);
+				return unsubscribe;
+			},
+			socketOnClosed(callback) {
+				const unsubscribe = onClosed(callback);
+				this.socketUnsubscribes.push(unsubscribe);
+				return unsubscribe;
+			},
+			socketOnError(callback) {
+				const unsubscribe = onError(callback);
+				this.socketUnsubscribes.push(unsubscribe);
+				return unsubscribe;
+			}
+		}
+	};
+}
+
+// 导出状态检查函数
+function isSocketConnected() {
+	return isConnected;
+}
+
+// 导出连接状态
+function getConnectionStatus() {
+	return {
+		isConnected,
+		isConnecting,
+		lastUrl,
+		reconnectCount,
+		platform: isAlipayMiniProgram ? 'alipay' : 'other'
+	};
+}
+
+export default {
+	connectSocket,
+	sendMessage,
+	closeSocket,
+	onMessage,
+	onConnected,
+	onClosed,
+	onError,
+	createSocketMixin,
+	isSocketConnected,
+	getConnectionStatus
+};

utils/uploadFile.js

@@ -0,0 +1,83 @@
+const app = getApp();
+
+/**
+ * 选择并上传图片
+ * @param {number} count - 最多选择的图片数量
+ * @param {boolean} compressed - 是否压缩图片
+ * @returns {Promise} - 返回上传成功后的图片URL数组
+ */
+export function uploadImage(count = 1, compressed = true) {
+	return new Promise((resolve, reject) => {
+		// 选择图片
+		uni.chooseImage({
+			count,
+			sizeType: compressed ? ['compressed'] : ['original'],
+			sourceType: ['album', 'camera'],
+			success: (res) => {
+				const tempFilePaths = res.tempFilePaths;
+				const uploadPromises = tempFilePaths.map((tempFilePath) =>
+					uploadSingleImage(tempFilePath)
+				);
+
+				// 并行上传所有图片
+				Promise.all(uploadPromises)
+					.then(results => resolve(results))
+					.catch(error => reject(error));
+			},
+			fail: (err) => {
+				console.error('选择图片失败:', err);
+				reject(err);
+			}
+		});
+	});
+}
+
+/**
+ * 上传单张图片
+ * @param {string} filePath - 本地图片路径
+ * @returns {Promise} - 返回上传成功后的图片URL
+ */
+function uploadSingleImage(filePath) {
+	return new Promise((resolve, reject) => {
+		uni.uploadFile({
+			url: app.globalData.get_request_url('excel', 'xo'), // 上传地址
+			filePath,
+			name: 'file', // 服务器接收的文件字段名
+			success: (res) => {
+				if (res.statusCode === 200) {
+					try {
+						const data = JSON.parse(res.data);
+						if (data.code === 0) { // 根据实际接口返回格式调整
+							resolve(data.data.url); // 返回图片URL
+						} else {
+							reject(new Error(data.message || '上传失败'));
+						}
+					} catch (e) {
+						reject(new Error('解析响应数据失败'));
+					}
+				} else {
+					reject(new Error(`服务器响应错误: ${res.statusCode}`));
+				}
+			},
+			fail: (err) => {
+				console.error('上传图片失败:', err);
+				reject(err);
+			}
+		});
+	});
+}
+
+/**
+ * 预览图片
+ * @param {Array} urls - 图片URL数组
+ * @param {number} current - 当前预览的图片索引
+ */
+export function previewImage(urls, current = 0) {
+	uni.previewImage({
+		urls,
+		current,
+		fail: (err) => {
+			console.error('预览图片失败:', err);
+		}
+	});
+}