更改聊天头像大小

pageChat/chat.vue

@@ -5,7 +5,7 @@
 				<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> 
+				<text class="u-m-l-22">（{{ membersRes.user_list.length }}人）</text>
 			</view>
 			<view class="" @click="toMore()">
 				<view class="u-flex u-row-center">
@@ -29,55 +29,33 @@
 			>
 				<view class="scroll-view-box">
 					<view class="talk-list">
-            <view
+						<view :id="'msg-' + index" v-for="(item, index) in chatStore.chatList" :key="index">
-              :id="'msg-' + index"
-              v-for="(item, index) in chatStore.chatList"
-              :key="index"
-            >
 							<!-- 发消息 -->
-              <template
+							<template v-if="item.operate_type == 'sendMsg' || item.is_user_send == 1">
-                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">
+										<view class="u-flex u-row-right name-wrap">
 											<view class="tag">商家</view>
-                      <view class="color-000">{{ shopInfo.shopName }}</view>
+											<view class="name">{{ shopInfo.shopName }}</view>
 										</view>
-                    <view
+										<view class="u-m-t-14 msg" :class="['type' + item.msg_type]">
-                      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">
+										<view class="text-center u-m-t-20" v-if="item.msg_type == 4 && item.hasGet">
-                      <text>{{item.hasGet||0}}人已领取</text>
+											<text>{{ item.hasGet || 0 }}人已领取</text>
 											<text class="color-main">优惠券</text>
 										</view>
 									</view>
-                  <up-avatar
+									<up-avatar size="70rpx" shape="square" bg-color="#fff" :src="shopInfo.logo"></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
+									<up-avatar size="70rpx" :src="item.avatar" shape="square" bg-color="#fff"></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_name }}</view>
+										<view class="u-line-1 name">{{ item.nick_name }}</view>
-                    <view
+										<view class="u-m-t-14 msg u-p-l-30" :class="['type' + item.msg_type]">
-                      class="u-m-t-14 msg u-p-l-30"
-                      :class="['type' + item.msg_type]"
-                    >
 											<chatItem :item="item"></chatItem>
 										</view>
 									</view>
@@ -85,10 +63,7 @@
 							</template>
 						</view>
 					</view>
-          <up-loadmore
+					<up-loadmore v-if="isEnd" :status="isEnd ? 'nomore' : 'loading'"></up-loadmore>
-            v-if="isEnd"
-            :status="isEnd ? 'nomore' : 'loading'"
-          ></up-loadmore>
 				</view>
 			</scroll-view>
 		</view>
@@ -104,29 +79,13 @@
           v-model="msg"
         /> -->
 				<view class="u-flex-1 u-m-r-52 iput">
-          <up-input
+					<up-input v-model="msg" border="none" placeholder="请输入内容"></up-input>
-            v-model="msg"
-            border="none"
-            placeholder="请输入内容"
-          ></up-input>
 				</view>
-        <button class="send-btn" v-if="msg.trim().length > 0" @click="sendText">
+				<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>
-        </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
+				<view v-for="(item, index) in moreBtns" @click="moreBtnsClick(item, index)" class="u-flex-col u-row-center u-col-center">
-          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>
@@ -136,34 +95,16 @@
 		</view>
 
 		<!-- 发送优惠券 -->
-    <Modal
+		<Modal title="发送优惠券" v-model="modalData.show" confirmText="确认发送" @close="closeModal" @confirm="confirmCoupon">
-      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
+				<up-input v-model="modalData.form.title" placeholder="请输入自定义文案" :placeholderStyle="placeholderStyle"></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>
 
-        <up-number-box
+				<up-number-box v-model="modalData.form.giveNum" inputWidth="240rpx" @change="valChange"></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
+				<up-number-box v-model="modalData.form.getLimit" inputWidth="240rpx" @change="valChange"></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>
@@ -171,41 +112,28 @@
 	</view>
 </template>
 <script setup>
-import {
+import { onReady, onReachBottom, onLoad, onShow, onPageScroll } from '@dcloudio/uni-app';
-  onReady,
+import { ref, inject, onMounted, nextTick, reactive, watch, computed } from 'vue';
-  onReachBottom,
+import { useChatStore } from '@/store/chat';
-  onLoad,onShow,
+import * as chatApi from '@/http/php/chat';
-  onPageScroll,
+import * as chatCouponApi from '@/http/api/market/chat';
-} from "@dcloudio/uni-app";
+import { uploadFile } from '@/http/api/index.js';
-import {
+import go from '@/commons/utils/go.js';
-  ref,
+import Modal from './components/modal.vue';
-  inject,
+import chooseCoupon from './components/coupon.vue';
-  onMounted,
+import chatItem from './components/chat-item.vue';
-  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",
+	color: '#999',
-  fontSize: "28rpx",
+	fontSize: '28rpx'
 };
 
 function refresherrefresh() {
-  console.log("refresherrefresh");
+	console.log('refresherrefresh');
 	// 关键：同时判断「正在加载」和「无更多数据」，只要一个为真就关闭刷新
 	if (isLoading.value || isEnd.value) {
 		scrollView.refresherTriggered = false; // 立即关闭刷新状态
 		if (isEnd.value) {
-      uni.showToast({ title: "没有更多了", icon: "none" });
+			uni.showToast({ title: '没有更多了', icon: 'none' });
 		}
 		return; // 终止后续逻辑
 	}
@@ -216,8 +144,8 @@ function refresherrefresh() {
 
 const scrollView = reactive({
 	refresherTriggered: false,
-  intoView: "",
+	intoView: '',
-  safeAreaHeight: 0,
+	safeAreaHeight: 0
 });
 
 const showMoreBtn = ref(false);
@@ -229,56 +157,55 @@ function showMoreBtnToggle() {
 const modalData = reactive({
 	show: false,
 	form: {
-    title: "",
+		title: '',
 		getLimit: 1,
 		giveNum: 1,
-    couponId: "",
+		couponId: ''
-  },
+	}
 });
 
-
 const chatStore = useChatStore();
 chatStore.onReceiveMsg = (msg) => {
 	nextTick(() => {
-    scrollView.intoView = "msg-0";
+		scrollView.intoView = 'msg-0';
 	});
 };
-const msg = ref("");
+const msg = ref('');
 
-const shopInfo = uni.getStorageSync("shopInfo");
+const shopInfo = uni.getStorageSync('shopInfo');
 
 const moreBtns = ref([
 	{
-    icon: "/pageChat/static/pic.png",
+		icon: '/pageChat/static/pic.png',
-    title: "发送照片",
+		title: '发送照片',
-    value: "pic",
+		value: 'pic'
 	},
 	{
-    icon: "/pageChat/static/video.png",
+		icon: '/pageChat/static/video.png',
-    title: "发送视频",
+		title: '发送视频',
-    value: "video",
+		value: 'video'
 	},
 	{
-    icon: "/pageChat/static/coupon.png",
+		icon: '/pageChat/static/coupon.png',
-    title: "发送优惠券",
+		title: '发送优惠券',
-    value: "coupon",
+		value: 'coupon'
-  },
+	}
 ]);
 
 function moreBtnsClick(item, index) {
-  if (item.value == "coupon") {
+	if (item.value == 'coupon') {
 		modalData.show = true;
 		return;
 	}
-  if (item.value == "pic") {
+	if (item.value == 'pic') {
 		sendImg();
 	}
-  if (item.value == "video") {
+	if (item.value == 'video') {
 		sendVideo();
 	}
 }
 function videoErrorCallback(e) {
-  console.error("视频播放失败", e);
+	console.error('视频播放失败', e);
 }
 // 图片选择与发送优化
 async function sendImg() {
@@ -287,15 +214,15 @@ async function sendImg() {
 		const res = await new Promise((resolve, reject) => {
 			uni.chooseImage({
 				count: 3,
-        sizeType: ["original", "compressed"],
+				sizeType: ['original', 'compressed'],
-        sourceType: ["album", "camera"],
+				sourceType: ['album', 'camera'],
 				success: resolve,
 				fail: reject // 捕获选择失败（含权限拒绝）
 			});
 		});
 
-    uni.showLoading({ title: "发送中" });
+		uni.showLoading({ title: '发送中' });
-    console.log("选择图片成功", res);
+		console.log('选择图片成功', res);
 
 		// 2. 批量上传图片（保持原有逻辑）
 		for (let i = 0; i < res.tempFiles.length; i++) {
@@ -303,14 +230,14 @@ async function sendImg() {
 			if (fileRes) {
 				sendMsg({
 					image_url: fileRes,
-          msg_type: 2,
+					msg_type: 2
 				});
 			}
 		}
 	} catch (err) {
-    console.error("图片选择/发送失败", err);
+		console.error('图片选择/发送失败', err);
 		// 3. 处理权限拒绝场景
-    handlePermissionError(err, "图片");
+		handlePermissionError(err, '图片');
 	} finally {
 		// 4. 确保加载弹窗关闭（无论成功/失败）
 		uni.hideLoading();
@@ -324,33 +251,33 @@ async function sendVideo() {
 		const res = await new Promise((resolve, reject) => {
 			uni.chooseVideo({
 				count: 1,
-        sizeType: ["original", "compressed"],
+				sizeType: ['original', 'compressed'],
-        sourceType: ["album", "camera"],
+				sourceType: ['album', 'camera'],
 				success: resolve,
 				fail: reject // 捕获选择失败（含权限拒绝）
 			});
 		});
 
-    uni.showLoading({ title: "发送中" });
+		uni.showLoading({ title: '发送中' });
-    console.log("选择视频成功", res);
+		console.log('选择视频成功', res);
 
 		// 2. 上传视频（保持原有逻辑）
 		const fileRes = await uploadFile({ path: res.tempFilePath });
 		if (fileRes) {
 			sendMsg({
 				image_url: fileRes,
-        msg_type: 5,
+				msg_type: 5
 			});
 		} else {
 			uni.showToast({
-        title: "视频发送失败",
+				title: '视频发送失败',
-        icon: "none",
+				icon: 'none'
 			});
 		}
 	} catch (err) {
-    console.error("视频选择/发送失败", err);
+		console.error('视频选择/发送失败', err);
 		// 3. 处理权限拒绝场景
-    handlePermissionError(err, "视频");
+		handlePermissionError(err, '视频');
 	} finally {
 		// 4. 确保加载弹窗关闭（无论成功/失败）
 		uni.hideLoading();
@@ -359,28 +286,23 @@ async function sendVideo() {
 
 // 通用权限错误处理函数
 function handlePermissionError(err, mediaType) {
-  const errMsg = err.errMsg || "";
+	const errMsg = err.errMsg || '';
 	// 识别权限拒绝关键词（兼容不同平台）
-  const isAuthDenied = [
+	const isAuthDenied = ['auth deny', 'permission denied', 'auth denied', '用户拒绝'].some((keyword) => errMsg.includes(keyword));
-    "auth deny",
-    "permission denied",
-    "auth denied",
-    "用户拒绝"
-  ].some(keyword => errMsg.includes(keyword));
 
 	if (isAuthDenied) {
 		// 弹窗提示用户，并引导至设置页
 		uni.showModal({
-      title: "权限提示",
+			title: '权限提示',
 			content: `需要${mediaType}权限才能使用该功能，请前往设置开启`,
-      confirmText: "去设置",
+			confirmText: '去设置',
-      cancelText: "取消",
+			cancelText: '取消',
 			success: (modalRes) => {
 				if (modalRes.confirm) {
 					// 跳转到小程序设置页
 					uni.openSetting({
 						success: (settingRes) => {
-              console.log("设置页返回结果", settingRes);
+							console.log('设置页返回结果', settingRes);
 							// 可根据需要添加权限开启后的回调逻辑
 						}
 					});
@@ -389,10 +311,10 @@ function handlePermissionError(err, mediaType) {
 		});
 	} else {
 		// 其他错误（如取消选择），仅轻提示
-    if (!errMsg.includes("cancel")) {
+		if (!errMsg.includes('cancel')) {
 			uni.showToast({
 				title: `${mediaType}选择失败`,
-        icon: "none"
+				icon: 'none'
 			});
 		}
 	}
@@ -401,7 +323,7 @@ function handlePermissionError(err, mediaType) {
 const groupInfo = ref({});
 async function init() {
 	const res = await chatApi.groupInfo({
-    group_id: options.group_id,
+		group_id: options.group_id
 	});
 	console.log(res);
 	groupInfo.value = res || {};
@@ -409,14 +331,14 @@ async function init() {
 }
 const query = reactive({
 	page: 1,
-  size: 10,
+	size: 10
 });
 async function getMsgList() {
 	// 提前拦截：已无更多数据，直接关闭状态
 	if (isEnd.value) {
 		scrollView.refresherTriggered = false;
 		isLoading.value = false;
-    uni.showToast({ title: "没有更多了", icon: "none" });
+		uni.showToast({ title: '没有更多了', icon: 'none' });
 		return;
 	}
 
@@ -424,11 +346,11 @@ async function getMsgList() {
 	try {
 		const msgRes = await chatApi.messageHistory({
 			...query,
-      chat_type: "2",
+			chat_type: '2',
 			session_id: options.session_id,
 			to_id: options.group_id,
 			shop_id: options.group_id,
-      group_id: options.group_id,
+			group_id: options.group_id
 		});
 		const data = msgRes.list || [];
 		const selector = `msg-${query.page == 1 ? 0 : chatStore.chatList.length}`;
@@ -445,11 +367,11 @@ async function getMsgList() {
 			console.log(selector);
 		});
 	} catch (err) {
-    console.error("加载历史消息异常", err);
+		console.error('加载历史消息异常', err);
 		// 加载失败回退页码，避免页码错乱
 		if (query.page > 1) query.page--;
 	} finally {
-    console.log("scrollView", scrollView);
+		console.log('scrollView', scrollView);
 		setTimeout(() => {
 			scrollView.refresherTriggered = false;
 			isLoading.value = false;
@@ -458,19 +380,19 @@ async function getMsgList() {
 }
 
 const options = reactive({});
-const membersRes=reactive({
+const membersRes = reactive({
-  user_list:[]
+	user_list: []
-})
+});
 onLoad((opt) => {
 	Object.assign(options, opt);
 	init();
 	chatApi.messageMarkReadAll({
-    session_ids: options.session_id,
+		session_ids: options.session_id
 	});
 	chatApi.groupMembers({ group_id: options.group_id }).then((res) => {
 		console.log(res);
-    membersRes.user_list=res.user_list||[]
+		membersRes.user_list = res.user_list || [];
-  })
+	});
 	// #ifdef H5
 	scrollView.safeAreaHeight = uni.getSystemInfoSync().safeArea.height;
 	// #endif
@@ -485,19 +407,18 @@ onMounted(() => {
 	}
 });
 
-onShow(() => { 
+onShow(() => {});
-});
 
 function toMore() {
-  go.to("PAGES_CHAT_GROUP_INFO", {
+	go.to('PAGES_CHAT_GROUP_INFO', {
 		group_id: groupInfo.value.id,
-    session_id: options.session_id,
+		session_id: options.session_id
 	});
 }
 function sendText() {
 	if (!msg.value.trim().length) return;
 	sendMsg({ content: msg.value, msg_type: 1 });
-  msg.value = "";
+	msg.value = '';
 }
 
 function sendMsg(msg) {
@@ -506,47 +427,47 @@ function sendMsg(msg) {
 		to_user_type: groupInfo.value.id,
 		chat_type: 2,
 		content: msg.value,
-    image_url: "",
+		image_url: '',
-    order_id: "",
+		order_id: '',
-    session_id: groupInfo.value.session_id||options.session_id,
+		session_id: groupInfo.value.session_id || options.session_id,
-    ...msg,
+		...msg
 	});
 }
 function closeModal() {
 	modalData.form = {
-    title: "",
+		title: '',
 		getLimit: 1,
 		giveNum: 1,
-    couponId: "",
+		couponId: ''
 	};
 }
 function confirmCoupon() {
 	console.log(modalData.form);
 	if (!modalData.form.title) {
 		uni.showToast({
-      title: "请输入自定义文案",
+			title: '请输入自定义文案',
-      icon: "none",
+			icon: 'none'
 		});
 		return;
 	}
 	if (!modalData.form.couponId) {
 		uni.showToast({
-      title: "请选择优惠券",
+			title: '请选择优惠券',
-      icon: "none",
+			icon: 'none'
 		});
 		return;
 	}
 	if (!modalData.form.giveNum) {
 		uni.showToast({
-      title: "请输入发放数量",
+			title: '请输入发放数量',
-      icon: "none",
+			icon: 'none'
 		});
 		return;
 	}
 	if (!modalData.form.getLimit) {
 		uni.showToast({
-      title: "请输入每人限领量",
+			title: '请输入每人限领量',
-      icon: "none",
+			icon: 'none'
 		});
 		return;
 	}
@@ -556,14 +477,14 @@ function confirmCoupon() {
 			modalData.show = false;
 			const couponJson = JSON.parse(res.couponJson);
 			sendMsg({
-        coupon: { ...couponJson, title: modalData.form.title,activity_id:res.id },
+				coupon: { ...couponJson, title: modalData.form.title, activity_id: res.id },
-        chat_coupon_id:res.id,
+				chat_coupon_id: res.id,
-        msg_type: 4,
+				msg_type: 4
 			});
 		} else {
 			uni.showToast({
-        title: "发送失败",
+				title: '发送失败',
-        icon: "none",
+				icon: 'none'
 			});
 		}
 	});
@@ -571,7 +492,7 @@ function confirmCoupon() {
 
 function previewImage(url) {
 	uni.previewImage({
-    urls: [url],
+		urls: [url]
 	});
 }
 
@@ -591,11 +512,11 @@ watch(
 const bottomSlotHeight = computed(() => {
 	if (showMoreBtn.value) {
 		return {
-      height: "180px",
+			height: '180px'
 		};
 	} else {
 		return {
-      height: "88px",
+			height: '88px'
 		};
 	}
 });
@@ -605,7 +526,7 @@ const pageHeight = computed(() => {
 	if (safeAreaHeight > 0) {
 		return `height: calc(${safeAreaHeight}px - var(--window-top));`;
 	}
-  return "";
+	return '';
 });
 </script>
 <style lang="scss" scoped>
@@ -632,7 +553,7 @@ const pageHeight = computed(() => {
 	align-items: stretch;
 	// 添加弹性容器，让内容自动在顶部
 	&::before {
-    content: ".";
+		content: '.';
 		display: inline;
 		visibility: hidden;
 		line-height: 0;
@@ -649,6 +570,11 @@ const pageHeight = computed(() => {
 }
 .user {
 	margin-bottom: 88rpx;
+	align-items: flex-start;
+	.name {
+		margin-top: -8upx;
+		color: #999;
+	}
 	.msg {
 		padding: 16rpx 20rpx;
 		background-color: #fff;
@@ -657,6 +583,7 @@ const pageHeight = computed(() => {
 }
 .shop {
 	margin-bottom: 88rpx;
+	align-items: flex-start;
 	.tag {
 		margin-right: 32rpx;
 		padding: 8rpx 20rpx;
@@ -665,6 +592,12 @@ const pageHeight = computed(() => {
 		font-size: 24rpx;
 		color: #666;
 	}
+	.name-wrap {
+		margin-top: -12upx;
+	}
+	.name {
+		color: #999;
+	}
 	.msg {
 		padding: 16rpx 20rpx;
 		border-radius: 8rpx;