api/life.js

@@ -0,0 +1,54 @@
+import Request from '../common/request.js';
+let request = new Request().http
+
+// expertId 达人id
+
+// 达人主页
+export function expertHomePage(data) {
+	return request(`/store/life/expertHomePage/${expertId}`, data, 'POST');
+}
+
+// 关注用户
+export function follow(data) {
+	return request(`/store/life/follow/${expertId}`, data, 'POST');
+}
+
+// 内容详情
+export function lifeDetail(data) {
+	return request('/store/life/lifeDetail', data, 'POST');
+}
+
+// 内容列表
+export function lifeList(data) {
+	return request('/store/life/lifeList', data, 'POST');
+}
+
+// 一级评论列表
+export function listRootComments(data) {
+	return request('/store/life/listRootComments', data, 'POST');
+}
+
+//二级评论列表
+export function listSubComments(data) {
+	return request('/store/life/listSubComments', data, 'POST');
+}
+
+//发表评论
+export function postComment(data) {
+	return request('/store/life/postComment', data, 'POST');
+}
+
+//内容分享
+export function share(data) {
+	return request('/store/life/share', data, 'POST');
+}
+
+//内容点赞/取消点赞
+export function toggleLike(data) {
+	return request('/store/life/toggleLike', data, 'POST');
+}
+
+//评论点赞
+export function toggleLikeComments(data) {
+	return request('/store/life/toggleLikeComments', data, 'POST');
+}

components/channel.vue

@@ -13,8 +13,11 @@
 				<!-- 拖拽容器 -->
 				<view class="channel-list" id="channelList">
 					<view v-for="(item, index) in myChannels" :key="item.id" class="channel-item"
-						:style="{ width: itemWidth + 'px' }" @longpress="handleLongPress(index)"
-						@touchmove="(e) => handleMove(e, index)" @touchend="handleEnd" @touchcancel="handleEnd">
+						:style="{ width: itemWidth + 'px' }" 
+						@touchstart="handleTouchStart(index, $event)"
+						@touchmove="(e) => handleMove(e, index)" 
+						@touchend="handleEnd" 
+						@touchcancel="handleEnd">
 						<!-- 拖拽中的元素特殊样式 -->
 						<view class="channel-content" :class="{ 
               'drag-item': isDragging && dragIndex === index 
@@ -23,21 +26,22 @@
                 ? `translate(${dragOffsetX}px, ${dragOffsetY}px) scale(1.05)` 
                 : 'none',
               zIndex: isDragging && dragIndex === index ? 999 : 1,
-              opacity: isDragging && dragIndex === index ? 0.9 : 1, // 提高透明度更自然
-              transition: isDragging && dragIndex === index ? 'none' : 'all 0.15s ease-out' // 拖拽中取消过渡，提升跟随速度
+              opacity: isDragging && dragIndex === index ? 0.9 : 1,
+              transition: isDragging && dragIndex === index ? 'none' : 'all 0.15s ease-out'
             }" @tap="handleChannelTap(item)">
 							<text>{{ item.name }}</text>
+							<!-- 保留删除图标 -->
 							<image v-if="index !== 0" class="delete-icon" src="/static/images/remove_icon.png"
 								@tap.stop="removeFromMyChannels(index)">
 						</view>
 
 						<!-- 拖拽占位符-->
-						<view v-if="isDragging && placeholderIndex === index" class="channel-placeholder"></view>
+						<!-- <view v-if="isDragging && placeholderIndex === index" class="channel-placeholder"></view> -->
 					</view>
 				</view>
 			</view>
 
-			<!-- 全部频道区域-->
+			<!-- 全部频道区域 -->
 			<view class="channel-section">
 				<view class="section-header">
 					<text class="section-title">全部频道</text>
@@ -47,7 +51,7 @@
 						:style="{ width: itemWidth + 'px' }">
 						<view class="channel-content" :class="isChannelInMyList(item.id)?'active':''">
 							<text>{{ item.name }}</text>
-							
+							<!-- 保留添加图标 -->
 							<image v-if="!isChannelInMyList(item.id)" class="add-icon" src="/static/images/add_icon.png"
 								@tap="addToMyChannels(item)">
 							</image>
@@ -89,15 +93,19 @@
 				isDragging: false,
 				dragIndex: -1, // 正在拖拽的索引
 				placeholderIndex: -1, // 占位符索引
-				startX: 0, // 长按初始X
-				startY: 0, // 长按初始Y
+				startX: 0, // 触摸初始X
+				startY: 0, // 触摸初始Y
+				elementLeft: 0, // 元素初始左坐标
+				elementTop: 0, // 元素初始上坐标
 				dragOffsetX: 0, // 拖拽偏移X
 				dragOffsetY: 0, // 拖拽偏移Y
 				itemHeight: 60, // 频道项高度
 				colCount: 0, // 每行显示列数
 				itemRects: [], // 所有频道项的位置信息
-				dragThreshold: 5, // 降低阈值，更灵敏
-				lastSwapTime: 0 // 防抖：记录上次交换时间
+				dragThreshold: 3, // 降低触发阈值，更灵敏
+				lastSwapTime: 0, // 防抖：记录上次交换时间
+				touchStartTime: 0, // 触摸开始时间
+				rectTimer: null // 计算位置的定时器
 			};
 		},
 		watch: {
@@ -122,41 +130,40 @@
 			}
 		},
 		mounted() {
-			// 初始化计算布局
 			this.$nextTick(() => this.calcItemRects());
 		},
 		methods: {
-			// 计算所有频道项的位置信息（适配uni-app）
+			// 计算所有频道项的位置信息（保留原有逻辑，优化计算精度）
 			calcItemRects() {
 				if (!this.myChannels.length) return;
 
 				const query = uni.createSelectorQuery().in(this);
 				query.select('#channelList').boundingClientRect(rect => {
 					if (!rect) return;
-					// 计算每行列数
-					this.colCount = Math.floor(rect.width / this.itemWidth);
+					// 计算每行列数（考虑容器内边距）
+					this.colCount = Math.floor((rect.width - 40) / this.itemWidth);
 					// 预计算每个项的位置
 					this.itemRects = this.myChannels.map((_, index) => {
 						const row = Math.floor(index / this.colCount);
 						const col = index % this.colCount;
 						return {
-							left: rect.left + col * this.itemWidth + 20, // +20是容器padding
-							top: rect.top + row * this.itemHeight + 20,
-							right: rect.left + (col + 1) * this.itemWidth + 20,
-							bottom: rect.top + (row + 1) * this.itemHeight + 20,
-							centerX: rect.left + (col + 0.5) * this.itemWidth + 20,
-							centerY: rect.top + (row + 0.5) * this.itemHeight + 20
+							left: rect.left + 20 + col * this.itemWidth,
+							top: rect.top + 20 + row * this.itemHeight,
+							right: rect.left + 20 + (col + 1) * this.itemWidth,
+							bottom: rect.top + 20 + (row + 1) * this.itemHeight,
+							centerX: rect.left + 20 + (col + 0.5) * this.itemWidth,
+							centerY: rect.top + 20 + (row + 0.5) * this.itemHeight
 						};
 					});
 				}).exec();
 			},
 
-			// 判断频道是否已在我的列表中
+			// 判断频道是否已在我的列表中（保留原有功能）
 			isChannelInMyList(channelId) {
 				return this.myChannels.some(item => item.id === channelId);
 			},
 
-			// 添加频道到我的频道
+			// 添加频道到我的频道（保留原有功能）
 			addToMyChannels(channel) {
 				if (this.isChannelInMyList(channel.id)) return;
 
@@ -168,7 +175,7 @@
 				});
 			},
 
-			// 从我的频道中移除
+			// 从我的频道中移除（保留原有功能）
 			removeFromMyChannels(index) {
 				if (index === 0 || this.isDragging) return;
 
@@ -180,109 +187,114 @@
 				});
 			},
 
-			// 点击频道
+			// 点击频道（保留原有功能）
 			handleChannelTap(channel) {
 				if (this.isDragging) return;
 				this.activeChannel = channel.id;
 				this.$emit('channel-tap', channel);
 			},
 
-			// 长按开始拖拽（简化逻辑，提升响应速度）
-			handleLongPress(index) {
-				if (index === 0) return; // 第一个频道不能拖拽
-
-				// 重新计算位置信息
-				this.calcItemRects();
+			// ========== 以下是拖拽功能的核心优化 ==========
+			// 触摸开始：记录初始信息，替代原longpress
+			handleTouchStart(index, e) {
+				// 第一个频道不能拖拽
+				if (index === 0) return;
+				this.touchStartTime = Date.now();
+				const touch = e.touches[0];
+				this.startX = touch.clientX;
+				this.startY = touch.clientY;
 
-				this.isDragging = true;
-				this.dragIndex = index;
-				this.placeholderIndex = index;
-				// 直接初始化，无需等待系统信息，提升响应
-				this.startX = 0;
-				this.startY = 0;
-				this.dragOffsetX = 0;
-				this.dragOffsetY = 0;
-				this.lastSwapTime = Date.now();
+				// 获取当前元素的初始位置
+				const query = uni.createSelectorQuery().in(this);
+				query.selectAll('.channel-item').boundingClientRect(rects => {
+					const currentRect = rects[index];
+					if (currentRect) {
+						this.elementLeft = currentRect.left;
+						this.elementTop = currentRect.top;
+					}
+				}).exec();
 			},
 
-			// 拖拽移动（优化响应速度）
+			// 拖拽移动：优化跟随流畅度和交换逻辑
 			handleMove(e, index) {
-				if (!this.isDragging || this.dragIndex !== index) return;
+				if (index === 0) return;
 
-				// 阻止默认滚动（兼容多端）
-				if (e.preventDefault) {
-					e.preventDefault();
-				} else {
-					e.returnValue = false;
-				}
+				// 阻止页面滚动和默认行为
+				e.stopPropagation();
+				if (e.preventDefault) e.preventDefault();
+				else e.returnValue = false;
 
-				// 获取触摸点（uni-app的touches参数）
 				const touch = e.touches[0];
 				const currentX = touch.clientX;
 				const currentY = touch.clientY;
 
-				// 初始化起始位置
-				if (this.startX === 0 && this.startY === 0) {
-					this.startX = currentX;
-					this.startY = currentY;
-					return;
+				// 未进入拖拽状态：判断是否触发拖拽（移动距离+触摸时间）
+				if (!this.isDragging) {
+					const moveDistance = Math.hypot(currentX - this.startX, currentY - this.startY);
+					const touchTime = Date.now() - this.touchStartTime;
+					// 移动超过阈值+触摸时间>80ms，触发拖拽（避免误触）
+					if (moveDistance >= this.dragThreshold && touchTime > 80) {
+						this.isDragging = true;
+						this.dragIndex = index;
+						this.placeholderIndex = index;
+						this.lastSwapTime = Date.now();
+						// 实时计算位置
+						this.calcItemRects();
+					} else {
+						return;
+					}
 				}
 
-				// 实时计算偏移量（无延迟）
-				this.dragOffsetX = currentX - this.startX;
-				this.dragOffsetY = currentY - this.startY;
+				// 计算偏移量：基于元素初始位置，跟随更丝滑
+				this.dragOffsetX = currentX - this.elementLeft;
+				this.dragOffsetY = currentY - this.elementTop;
 
-				// 防抖：20ms内只交换一次，避免频繁触发卡顿
+				// 防抖交换：15ms内只交换一次，避免卡顿
 				const now = Date.now();
-				if (now - this.lastSwapTime > 20) {
+				if (now - this.lastSwapTime > 15) {
 					this.swapChannelItem(currentX, currentY);
 					this.lastSwapTime = now;
 				}
 			},
 
-			// 交换频道项（简化逻辑，减少计算）
+			// 交换频道项：优化碰撞检测，精准交换
 			swapChannelItem(x, y) {
 				if (this.itemRects.length === 0) return;
 
-				// 找到当前触摸位置对应的频道索引（简化碰撞检测）
+				// 找到当前触摸点对应的目标项
 				let targetIndex = -1;
-				// 只遍历可视区域附近的项，减少计算
-				const minRow = Math.max(0, Math.floor((y - 100) / this.itemHeight));
-				const maxRow = Math.min(Math.ceil(this.myChannels.length / this.colCount), Math.floor((y + 100) / this
-					.itemHeight));
-
 				for (let i = 1; i < this.myChannels.length; i++) {
 					const rect = this.itemRects[i];
-					// 扩大检测区域，更容易触发交换
-					if (x >= rect.left - 10 && x <= rect.right + 10 && y >= rect.top - 10 && y <= rect.bottom + 10) {
+					// 扩大检测范围，更容易触发交换
+					if (x >= rect.left - 5 && x <= rect.right + 5 && y >= rect.top - 5 && y <= rect.bottom + 5) {
 						targetIndex = i;
 						break;
 					}
 				}
 
-				// 交换逻辑（减少不必要的判断）
+				// 交换逻辑：只在目标不同时执行
 				if (targetIndex !== -1 && targetIndex !== this.placeholderIndex) {
-					// 交换数组元素（直接操作，无冗余）
-					[this.myChannels[this.dragIndex], this.myChannels[targetIndex]] = [this.myChannels[targetIndex], this
-						.myChannels[this.dragIndex]
-					];
-
-					// 更新索引
+					// 交换数组元素
+					[this.myChannels[this.dragIndex], this.myChannels[targetIndex]] = [this.myChannels[targetIndex], this.myChannels[this.dragIndex]];
+					// 更新占位符和拖拽索引
 					this.placeholderIndex = targetIndex;
 					this.dragIndex = targetIndex;
+					// 更新元素初始位置，让拖拽跟随更准确
+					this.elementLeft = this.itemRects[targetIndex].left;
+					this.elementTop = this.itemRects[targetIndex].top;
 
-					// 延迟计算位置，避免频繁触发
+					// 延迟计算位置，避免频繁DOM查询
 					if (!this.rectTimer) {
 						this.rectTimer = setTimeout(() => {
 							this.calcItemRects();
 							clearTimeout(this.rectTimer);
 							this.rectTimer = null;
-						}, 50);
+						}, 30);
 					}
 				}
 			},
 
-			// 拖拽结束/取消（清理定时器）
+			// 拖拽结束/取消：重置状态（保留原有逻辑，优化定时器清理）
 			handleEnd() {
 				if (!this.isDragging) return;
 
@@ -292,7 +304,7 @@
 					this.rectTimer = null;
 				}
 
-				// 重置状态
+				// 重置拖拽状态
 				this.isDragging = false;
 				this.dragIndex = -1;
 				this.placeholderIndex = -1;
@@ -300,24 +312,33 @@
 				this.dragOffsetY = 0;
 				this.startX = 0;
 				this.startY = 0;
+				this.elementLeft = 0;
+				this.elementTop = 0;
 
 				// 保存顺序
 				this.saveChannelOrder();
 			},
 
-			// 保存频道顺序
+			// 保存频道顺序（保留原有功能）
 			saveChannelOrder() {
 				this.$emit('order-change', JSON.parse(JSON.stringify(this.myChannels)));
 				this.$emit('channels-change', {
 					myChannels: this.myChannels,
 					allChannels: this.allChannels
 				});
+			},
+
+			// 关闭弹窗（保留原有功能）
+			handleClose() {
+				this.show = false;
+				this.$emit('close');
 			}
 		}
 	};
 </script>
 
 <style scoped lang="scss">
+	// 保留你所有的样式，仅优化拖拽相关的样式
 	.channel-container {
 		border-radius: 32rpx 32rpx 0rpx 0rpx;
 		padding: 24rpx;
@@ -363,7 +384,6 @@
 
 				.channel-item {
 					position: relative;
-					// padding: 10rpx;
 					box-sizing: border-box;
 					margin-bottom: 10rpx;
 					margin-right: 18rpx;
@@ -388,14 +408,17 @@
 							color: #999999;
 						}
 
-						// 拖拽中的元素
+						// 拖拽中的元素 - 优化阴影和透明度
 						&.drag-item {
 							position: relative;
-							box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
-							background-color: inherit;
+							// 增强阴影效果：增大阴影范围、提高不透明度，让阴影更明显
+							box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
+							// 降低透明度，让拖拽元素有半透明效果（0.8比0.9更明显）
+							opacity: 0.8;
+							background-color: #fff; // 增加白色背景，让半透明效果更自然
 						}
 
-						// 图标样式
+						// 图标样式 - 完全保留
 						.add-icon,
 						.delete-icon,
 						.added-mark {
@@ -412,8 +435,6 @@
 						}
 
 						.add-icon {
-							// background-color: #52c41a;
-
 							.icon-plus {
 								font-size: 30rpx;
 								color: #fff;
@@ -422,8 +443,6 @@
 						}
 
 						.delete-icon {
-							// background-color: #ff4d4f;
-
 							.icon-minus {
 								font-size: 36rpx;
 								color: #fff;
@@ -444,13 +463,14 @@
 						}
 					}
 
-					// 拖拽占位符
-					.channel-placeholder {
-						width: 100%;
-						height: 60rpx;
-						border-radius: 30rpx;
-						box-sizing: border-box;
-					}
+					// 拖拽占位符 - 优化背景色，更贴近UI
+					// .channel-placeholder {
+					// 	width: 100%;
+					// 	height: 60rpx;
+					// 	border-radius: 30rpx;
+					// 	box-sizing: border-box;
+					// 	background-color: #E8EBF0;
+					// }
 				}
 			}
 		}
@@ -467,4 +487,12 @@
 			text-align: center;
 		}
 	}
-</style>
+
+	.w40 {
+		width: 40rpx;
+	}
+
+	.h40 {
+		height: 40rpx;
+	}
+</style>

pages_shopping/live/components/task.vue → components/task.vue

@@ -1,12 +1,13 @@
 <template>
-	<u-popup :show="showTask" @close="handleClose" @open="handleOpen" round="32rpx" bgColor="#ffffff" zIndex="10077">
+	<u-popup :show="show" @close="handleClose" @open="handleOpen" round="32rpx" bgColor="#ffffff" zIndex="10077">
 		<view class="content">
 			<!-- 头部 -->
 			<view class="header">
 				<view class="row bg">
 					<image class="w40 h40" src="/static/images/answer_icon.png"></image>
 					<image class="w428 h64" src="/static/images/collecting_coins_title.png"></image>
-					<image class="w40 h40" src="/static/images/pop_close_icon.png" @click="showTask=false"></image>
+					<!-- 修改这里：改为调用 handleClose 方法 -->
+					<image class="w40 h40" src="/static/images/pop_close_icon.png" @click="handleClose"></image>
 				</view>
 				<!-- 积分信息 -->
 				<view class="row mtb48 plr24">
@@ -24,7 +25,7 @@
 
 			<!-- 可滚动列表区域 -->
 			<scroll-view scroll-y class="list" :style="{ height: scrollHeight + 'px' }" @scroll="handleScroll">
-				<!-- 列表项 - 这里应该用 v-for 循环，简化代码 -->
+				<!-- 列表项 -->
 				<view v-for="(item, index) in taskList" :key="index" class="list-item">
 					<view class="row">
 						<view class="left">
@@ -50,74 +51,63 @@
 
 <script>
 	export default {
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			}
+		},
 		data() {
 			return {
-				showTask: true,
-				scrollHeight: 400, // 根据实际情况调整
-				taskList: [{
-						title: '点赞内容',
-						current: 0,
-						total: 1,
-						points: 1,
-						desc: '最多1条得芳华币',
-						buttonText: '去完成'
-					}, {
-						title: '点赞内容',
-						current: 0,
-						total: 1,
-						points: 1,
-						desc: '最多1条得芳华币',
-						buttonText: '去完成'
-					}, {
-						title: '点赞内容',
-						current: 0,
-						total: 1,
-						points: 1,
-						desc: '最多1条得芳华币',
-						buttonText: '去完成'
-					}, {
+				scrollHeight: 400,
+				scrollTop: 0,
+				showBackTop: false,
+				loadingMore: false,
+				hasMore: true,
+				taskList: [
+					{
 						title: '点赞内容',
 						current: 0,
 						total: 1,
 						points: 1,
 						desc: '最多1条得芳华币',
 						buttonText: '去完成'
-					}, {
+					},	{
 						title: '点赞内容',
 						current: 0,
 						total: 1,
 						points: 1,
 						desc: '最多1条得芳华币',
 						buttonText: '去完成'
-					}, {
+					},	{
 						title: '点赞内容',
 						current: 0,
 						total: 1,
 						points: 1,
 						desc: '最多1条得芳华币',
 						buttonText: '去完成'
-					}, {
+					},	{
 						title: '点赞内容',
 						current: 0,
 						total: 1,
 						points: 1,
 						desc: '最多1条得芳华币',
 						buttonText: '去完成'
-					}, {
+					},	{
 						title: '点赞内容',
 						current: 0,
 						total: 1,
 						points: 1,
 						desc: '最多1条得芳华币',
 						buttonText: '去完成'
-					}, {
+					},	{
 						title: '点赞内容',
 						current: 0,
 						total: 1,
 						points: 1,
 						desc: '最多1条得芳华币',
 						buttonText: '去完成'
-					}, {
+					},	{
 						title: '点赞内容',
 						current: 0,
 						total: 1,
@@ -125,7 +115,7 @@
 						desc: '最多1条得芳华币',
 						buttonText: '去完成'
 					},
-
+					// ... 其他数据项
 				]
 			}
 		},
@@ -133,34 +123,59 @@
 			this.calcScrollHeight();
 		},
 		methods: {
+			handleClose() {
+				// 通知父组件关闭弹窗
+				console.log("关闭弹窗");
+				this.$emit('close');
+			},
+			
+			handleOpen() {
+				// 弹窗打开时的逻辑
+				console.log("弹窗打开");
+			},
+			
 			handleScroll(event) {
 				// 更新当前滚动位置
 				this.scrollTop = event.detail.scrollTop;
-
+				
 				// 判断是否显示返回顶部按钮
 				this.showBackTop = this.scrollTop > 300;
-
+				
 				// 判断是否滚动到底部（需要加载更多）
 				if (!this.loadingMore && this.hasMore) {
-					const {
-						scrollHeight
-					} = event.detail;
-					const scrollViewHeight = this.scrollHeight; // scroll-view 的高度
-
+					const { scrollHeight } = event.detail;
+					const scrollViewHeight = this.scrollHeight;
+					
 					// 距离底部50rpx时触发加载
 					if (scrollHeight - this.scrollTop - scrollViewHeight < 50) {
 						this.loadMoreData();
 					}
 				}
 			},
-
+			
 			async loadMoreData() {
 				if (this.loadingMore || !this.hasMore) return;
-
+				
 				this.loadingMore = true;
 				try {
 					// 调用API加载更多数据
-					const newData = await this.fetchMoreTasks();
+					// const newData = await this.fetchMoreTasks();
+					// 这里模拟加载数据
+					const newData = await new Promise(resolve => {
+						setTimeout(() => {
+							resolve([
+								{
+									title: '新任务',
+									current: 0,
+									total: 1,
+									points: 2,
+									desc: '新增任务',
+									buttonText: '去完成'
+								}
+							]);
+						}, 1000);
+					});
+					
 					if (newData.length > 0) {
 						this.taskList.push(...newData);
 					} else {
@@ -172,25 +187,21 @@
 					this.loadingMore = false;
 				}
 			},
-
+			
 			calcScrollHeight() {
 				// 计算屏幕可用高度
 				const systemInfo = uni.getSystemInfoSync();
-				// 根据实际情况计算，这里减去头部高度
-				this.scrollHeight = systemInfo.windowHeight * 0.6; // 示例值
+				// 弹窗高度设置为屏幕高度的70%
+				this.scrollHeight = systemInfo.windowHeight * 0.7;
 			},
 			
 			handleTaskClick(item) {
 				console.log('点击任务:', item);
 				// 处理任务点击逻辑
-			},
-			handleClose() {
-				console.log("关闭")
-				// 关闭弹窗
-			},
-
-			handleOpen() {
-				// 打开弹窗
+				uni.showToast({
+					title: `点击了${item.title}`,
+					icon: 'none'
+				});
 			}
 		}
 	}
@@ -215,6 +226,32 @@
 			justify-content: space-between;
 			align-items: center;
 		}
+		
+		.mtb48 {
+			margin-top: 48rpx;
+			margin-bottom: 48rpx;
+		}
+		
+		.plr24 {
+			padding-left: 24rpx;
+			padding-right: 24rpx;
+		}
+		
+		.mr24 {
+			margin-right: 24rpx;
+		}
+		
+		.mr4 {
+			margin-right: 4rpx;
+		}
+		
+		.ml8 {
+			margin-left: 8rpx;
+		}
+		
+		.mb8 {
+			margin-bottom: 8rpx;
+		}
 
 		.points {
 			font-weight: 400;
@@ -227,7 +264,6 @@
 				color: #222426;
 				margin-left: 4rpx;
 			}
-
 		}
 
 		.shop {
@@ -249,7 +285,6 @@
 			overflow: hidden;
 
 			.list-item {
-
 				width: 100%;
 				margin-bottom: 32rpx;
 
@@ -287,5 +322,17 @@
 				}
 			}
 		}
+		
+		// 添加图标尺寸类
+		.w40 { width: 40rpx; }
+		.h40 { height: 40rpx; }
+		.w428 { width: 428rpx; }
+		.h64 { height: 64rpx; }
+		.w48 { width: 48rpx; }
+		.h48 { height: 48rpx; }
+		.w24 { width: 24rpx; }
+		.h24 { height: 24rpx; }
+		.w88 { width: 88rpx; }
+		.h88 { height: 88rpx; }
 	}
 </style>

pages.json

@@ -20,6 +20,30 @@
 				"navigationStyle": "custom"
 			}
 
+		}, {
+			// 生活号
+			"path": "pages/life/life",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom",
+				"scrollIndicator": "none",
+				"navigationBarTextStyle": "black",
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		}, {
+			// 直播
+			"path": "pages/live/list",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom",
+				"scrollIndicator": "none",
+				"navigationBarTextStyle": "black",
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
 		},
 		{
 			"path": "pages/home/index",
@@ -574,7 +598,7 @@
 							"titleNView": false
 						}
 					}
-				},{
+				}, {
 					"path": "shareLive",
 					"style": {
 						"navigationBarTitleText": "分享直播间",
@@ -821,10 +845,10 @@
 					"style": {
 						"navigationStyle": "custom",
 						"enablePullDownRefresh": false
-						
+
 					}
 
-				},{
+				}, {
 					"path": "live/complaint",
 					"style": {
 						"navigationBarTitleText": "我的反馈",
@@ -834,7 +858,7 @@
 						}
 					}
 				},
-{
+				{
 					"path": "live/complaintList",
 					"style": {
 						"navigationBarTitleText": "反馈与投诉",
@@ -851,7 +875,7 @@
 						"enablePullDownRefresh": false
 					}
 
-				},{
+				}, {
 					"path": "live/integral",
 					"style": {
 						"navigationBarTitleText": "芳华币",
@@ -905,7 +929,7 @@
 						"enablePullDownRefresh": false
 					}
 
-				},{
+				}, {
 					"path": "live/storeOrderDelivery",
 					"style": {
 						"navigationBarTitleText": "物流信息",
@@ -923,7 +947,7 @@
 						"navigationBarTextStyle": "black"
 					}
 				},
-				
+
 				{
 					"path": "live/storeOrderRefundSubmit",
 					"style": {
@@ -965,7 +989,7 @@
 					}
 				},
 				{
-					"path" : "live/expert",
+					"path": "live/expert",
 					"style": {
 						"navigationBarTitleText": "",
 						"navigationStyle": "custom",
@@ -976,33 +1000,22 @@
 						}
 					}
 				},
+				// {
+				// 	// 直播预告和直播中列表
+				// 	"path": "live/list",
+				// 	"style": {
+				// 		"navigationBarTitleText": "",
+				// 		"navigationStyle": "custom",
+				// 		"scrollIndicator": "none",
+				// 		"navigationBarTextStyle": "black",
+				// 		"app-plus": {
+				// 			"bounce": "none"
+				// 		}
+				// 	}
+				// }, 
 				{
-					// 直播预告和直播中列表
-					"path" : "live/list",
-					"style": {
-						"navigationBarTitleText": "",
-						"navigationStyle": "custom",
-						"scrollIndicator": "none",
-						"navigationBarTextStyle": "black",
-						"app-plus": {
-							"bounce": "none"
-						}
-					}
-				},{
 					// 实时销售榜
-					"path" : "live/salesRanking",
-					"style": {
-						"navigationBarTitleText": "",
-						"navigationStyle": "custom",
-						"scrollIndicator": "none",
-						"navigationBarTextStyle": "black",
-						"app-plus": {
-							"bounce": "none"
-						}
-					}
-				},{
-					// 生活号
-					"path" : "live/life",
+					"path": "live/salesRanking",
 					"style": {
 						"navigationBarTitleText": "",
 						"navigationStyle": "custom",
@@ -1012,8 +1025,23 @@
 							"bounce": "none"
 						}
 					}
-				},{
-					"path" : "live/trailer",
+				},
+				// {
+				// 	// 生活号
+				// 	"path": "live/life",
+				// 	"style": {
+				// 		"navigationBarTitleText": "",
+				// 		"navigationStyle": "custom",
+				// 		"scrollIndicator": "none",
+				// 		"navigationBarTextStyle": "black",
+				// 		"app-plus": {
+				// 			"bounce": "none"
+				// 		}
+				// 	}
+				// },
+
+				{
+					"path": "live/trailer",
 					"style": {
 						"navigationBarTitleText": "直播预告",
 						"navigationBarTextStyle": "black",
@@ -1024,7 +1052,7 @@
 				},
 				{
 					// 生活号文章
-					"path" : "live/article",
+					"path": "live/article",
 					"style": {
 						"navigationBarTitleText": "",
 						"navigationStyle": "custom",
@@ -1034,7 +1062,7 @@
 							"bounce": "none"
 						}
 					}
-				},{
+				}, {
 					// 店铺
 					"path": "live/shop",
 					"style": {
@@ -1047,7 +1075,7 @@
 						}
 					}
 				}
-				
+
 
 			]
 		},
@@ -1167,8 +1195,8 @@
 		"backgroundColor": "#FFFFFF"
 	},
 	"tabBar": {
-		"color": "#666666",
-		"selectedColor": "#2BC7B9",
+		"color": "#333333",
+		"selectedColor": "#02B176",
 		"borderStyle": "white",
 		"backgroundColor": "#ffffff",
 		"height": "64px",
@@ -1181,35 +1209,47 @@
 				"selectedIconPath": "/static/images/home_sel.png",
 				"text": "首页"
 			},
+			{
+				"pagePath": "pages/life/life",
+				"iconPath": "/static/images/life.png",
+				"selectedIconPath": "/static/images/life_sel.png",
+				"text": "生活号"
+			},{
+				"pagePath": "pages/live/list",
+				"iconPath": "/static/images/live.png",
+				"selectedIconPath": "/static/images/live_sel.png",
+				"text": "直播"
+			},
+			
 			// {
 			// 	"pagePath": "pages/home/companyInfo",
 			// 	"iconPath": "/static/images/health.png",
 			// 	"selectedIconPath": "/static/images/health_sel.png",
 			// 	"text": "企业理念"
 			// },
-			{
-				"pagePath": "pages/shopping/cart",
-				"iconPath": "/static/images/cart.png",
-				"selectedIconPath": "/static/images/cart_sel.png",
-				"text": "购物车"
-			},
+			// {
+			// 	"pagePath": "pages/shopping/cart",
+			// 	"iconPath": "/static/images/cart.png",
+			// 	"selectedIconPath": "/static/images/cart_sel.png",
+			// 	"text": "购物车"
+			// },
 			// {
 			// 	"pagePath": "pages/doctor/index",
 			// 	"iconPath": "/static/images/see_doctor.png",
 			// 	"selectedIconPath": "/static/images/see_doctor_sel.png",
 			// 	"text": "问诊"
 			// },
-			{
-				"pagePath": "pages/shopping/index",
-				"iconPath": "/static/images/shop_mall.png",
-				"selectedIconPath": "/static/images/shop_mall_sel.png",
-				"text": "健康商城"
-			},
+			// {
+			// 	"pagePath": "pages/shopping/index",
+			// 	"iconPath": "/static/images/shop_mall.png",
+			// 	"selectedIconPath": "/static/images/shop_mall_sel.png",
+			// 	"text": "健康商城"
+			// },
 			{
 				"pagePath": "pages/user/index",
 				"iconPath": "/static/images/my.png",
 				"selectedIconPath": "/static/images/my_sel.png",
-				"text": "会员中心"
+				"text": "个人中心"
 			}
 		]
 	}

pages/home/index.vue

@@ -122,6 +122,89 @@ export default {
 		onSearch(keyword) {
 
 		},
+<<<<<<< HEAD
+		data() {
+			return {
+				activeChannelId: 1,
+				myChannels: [{
+						id: 1,
+						name: '推荐'
+					},
+					{
+						id: 2,
+						name: '热点'
+					},{
+						id: 2,
+						name: '热点'
+					},{
+						id: 2,
+						name: '热点'
+					},{
+						id: 2,
+						name: '热点'
+					},
+					{
+						id: 3,
+						name: '科技'
+					},
+					{
+						id: 4,
+						name: '体育'
+					}
+				],
+				allChannels: [{
+						id: 5,
+						name: '财经'
+					},
+					{
+						id: 6,
+						name: '娱乐'
+					},
+					{
+						id: 7,
+						name: '时尚'
+					},
+					{
+						id: 8,
+						name: '汽车'
+					},
+					{
+						id: 9,
+						name: '游戏'
+					},
+					{
+						id: 10,
+						name: '旅游'
+					}
+				],
+				statusBarHeight: 0,
+				tabsData: [{
+						name: '精选'
+					},
+					{
+						name: '健康新品'
+					},
+					{
+						name: '营养保健'
+					},
+					{
+						name: '健康滋补'
+					},
+				],
+				tabCurrentIndex: 0,
+				menusData: [],
+				tabsProduct: [{
+						name: '今日主推'
+					},
+					{
+						name: '健康新品'
+					},
+					{
+						name: '营养保健'
+					},
+				],
+				tabsProductIndex: 0,
+=======
 		// 分类tab切换
 		tabChange(index) {
 			this.tabCurrentIndex = index;
@@ -140,6 +223,7 @@ export default {
 					title: msg,
 					icon: 'none'
 				})
+>>>>>>> a69c58106356dc627f1c67ecaa9a3e612b4bdd41
 			}
 		},
 		// 下拉刷新

pages/home/productSearch.vue

@@ -3,13 +3,16 @@
 		<view class="status_bar" :style="{height: statusBarHeight}"></view>
 		<!-- 搜索框 -->
 		<view class="search-cont">
-			<image class="w64 h64" src="/static/images/back_black.png"></image>
+			<image @click="goBack" class="w64 h64" src="/static/images/back_black.png"></image>
 			<view class="inner">
-				<!-- <image class="icon-search" src="../../static/images/search.png" mode=""></image> -->
-				<input type="text" value="" placeholder="城口腊肉/香肠" confirm-type="搜索" @confirm="goSearch"
-					:focus='setFocus' placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
+				<input v-model="searchValue" type="text" value="" placeholder="城口腊肉/香肠" confirm-type="搜索"
+					@confirm="handleSearch" @input="handleInput" :focus='setFocus'
+					placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
+				<image @click="clearInput" v-if="searchValue" class="w32 h32"
+					src="/static/images/search_close_gray.png">
+				</image>
 				<view class="line"></view>
-				<view class="search">搜索</view>
+				<view class="search" @click="handleSearch">搜索</view>
 			</view>
 		</view>
 		<!-- 搜索历史 -->
@@ -103,6 +106,7 @@
 	export default {
 		data() {
 			return {
+				searchValue: '',
 				// 状态栏的高度
 				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
 				setFocus: false,
@@ -120,7 +124,25 @@
 				this.topSearch = JSON.parse(config).hotSearch.split(',');
 			}
 		},
+		onHide() {
+			// 页面隐藏时重置聚焦状态
+			this.setFocus = false;
+		},
 		methods: {
+			goBack() {
+				uni.navigateBack({
+					delta: 1 // 返回的页面数，1表示返回上一页
+				});
+			},
+			// 处理输入
+			handleInput(e) {
+				this.searchValue = e.detail.value;
+			},
+			// 清除输入内容
+			clearInput() {
+				this.searchValue = '';
+				this.setFocus = true; // 清除后重新聚焦
+			},
 			// 清空历史搜索数据
 			clearHistory() {
 				this.utils.clearHisSearch();
@@ -131,14 +153,23 @@
 					url: './productList?key=' + item
 				})
 			},
-			goSearch(e) {
-				if (e.detail.value != null && e.detail.value != "") {
-					this.utils.addHisSearch(e.detail.value);
+			handleSearch() {
+				if (!this.searchValue.trim()) {
+					uni.showToast({
+						title: '请输入搜索内容',
+						icon: 'none'
+					});
+					return;
 				}
+
+				// 保存搜索历史
+				this.utils.addHisSearch(this.searchValue);
+
+				// 跳转到搜索结果页
 				uni.navigateTo({
-					url: './productList?key=' + e.detail.value
-				})
-			}
+					url: './productList?key=' + encodeURIComponent(this.searchValue)
+				});
+			},
 		}
 	}
 </script>
@@ -164,6 +195,14 @@
 				align-items: center;
 				padding: 0 24rpx;
 
+				image {
+					padding: 16rpx;
+					/* 增加点击区域 */
+					margin: -16rpx;
+					/* 负边距抵消padding对布局的影响 */
+					box-sizing: content-box;
+				}
+
 				.search {
 					font-weight: 500;
 					font-size: 28rpx;
@@ -257,7 +296,8 @@
 				border-radius: 24rpx 24rpx 24rpx 24rpx;
 				position: relative;
 				z-index: 0;
-				.card-bg{
+
+				.card-bg {
 					width: 100%;
 					height: 96rpx;
 					position: absolute;
@@ -266,6 +306,7 @@
 					border-radius: 24rpx 24rpx 0 0;
 					z-index: -1;
 				}
+
 				.card-title {
 					display: flex;
 					align-items: center;
@@ -371,11 +412,13 @@
 					}
 				}
 			}
-			.border1{
-				border: 1rpx solid rgba(241,89,38,0.5);
+
+			.border1 {
+				border: 1rpx solid rgba(241, 89, 38, 0.5);
 			}
-			.border2{
-				border: 1rpx solid rgba(244,160,7,0.5);
+
+			.border2 {
+				border: 1rpx solid rgba(244, 160, 7, 0.5);
 			}
 		}
 	}

pages_shopping/live/life.vue → pages/life/life.vue

@@ -33,7 +33,7 @@
 
 				<!-- 专区 -->
 				<view class="zone-box">
-					<view class="zone-item green-bg">
+					<view class="zone-item green-bg" >
 						<view class="title-item">
 							<image class="icon" src="/static/images/hdzx_icon.png" mode=""></image>
 							<image class="title" src="/static/images/hdzx_title.png" mode=""></image>
@@ -66,7 +66,7 @@
 						<view class="list-item" @click="goLive(item)" v-for="(item,index) in list" :key="index">
 							<image class="img" v-if="item.liveImgUrl" :src="item.liveImgUrl" mode="widthFix"></image>
 							<image class="video-icon" src="/static/images/video_icon.png"></image>
-							<image class="suspension-icon" src="/static/images/suspension.png"></image>
+							<image class="suspension-icon" @click="onTask" src="/static/images/suspension.png"></image>
 							<view class="info-block">
 								<view class="title">冰乳绿豆糕 冰冰凉凉谁吃谁迷糊! 谁懂，...</view>
 								<view class="item">
@@ -91,14 +91,17 @@
 					</view>
 				</mescroll-body>
 			</view>
-			<Task></Task>
+			<Task :show="showTask" @close="handleCloseTask"></Task>
 
 		</view>
 	</view>
 </template>
 
 <script>
-	import Task from '@/pages_shopping/live/components/task.vue'
+	import Task from '@/components/task.vue'
+	import {
+		// liveList
+	} from '@/api/life.js'
 	import {
 		liveList
 	} from '@/api/living.js'
@@ -110,6 +113,7 @@
 		},
 		data() {
 			return {
+				showTask: false,
 				status: '',
 				orderStatus: [{
 						name: "推荐",
@@ -161,10 +165,18 @@
 		onUnload() {
 
 		},
-		methods: { // 顶部搜索
+		methods: {
+			onTask() {
+				this.showTask = true;
+			},
+			handleCloseTask() {
+				this.showTask = false;
+			},
+			// 顶部搜索
 			toSearch() {
+				console.log("跳转")
 				uni.navigateTo({
-					url: 'pages/home/productSearch'
+					url: '/pages/home/productSearch'
 				})
 			},
 			orderStatusChange(item) {

pages/shopping/index.vue

@@ -59,7 +59,7 @@
 						:class="selectIndex == item.value?'item active':'item'" @click="onSelect(item)">
 						<view class="text">
 							<text>{{ item.name }}</text>
-							<image v-if="item.value==2" class="tab-bg" src="/static/images/shaixuan_moren.png" mode="">
+							<image v-if="item.value==2" class="tab-bg" :src=`/static/images/shaixuan_moren${number}.png` mode="">
 							</image>
 						</view>
 					</view>
@@ -137,6 +137,7 @@
 	export default {
 		data() {
 			return {
+				number:0,
 				selectIndex: 0,
 				selectList: [{
 					name: '综合',
@@ -247,6 +248,13 @@
 			onSelect(item) {
 				console.log("item", item)
 				this.selectIndex = item.value
+				if(item.value==2){
+					if(number<2){
+						this.number++
+					}else{
+						this.number=0
+					}
+				}
 			},
 			splitPrice(price) {
 				const priceStr = parseFloat(price).toFixed(2).toString();

pages_shopping/live/article.vue

@@ -53,6 +53,7 @@
 				</view>
 			</view>
 
+
 			<!-- 消息 -->
 			<view class="message">
 				<view class="message-item">
@@ -140,8 +141,6 @@
 						<view class="">20</view>
 					</view>
 				</view>
-
-
 			</view>
 		</view>
 
@@ -153,11 +152,13 @@
 			</view>
 			<view class="icon-container">
 				<view class="icon-item">
-					<image class="icon" src="/static/images/comment.png" />
+					<image v-if="isLike" class="icon" src="/static/images/like_red_icon.png" />
+					<image v-else class="icon" src="/static/images/like_icon.png" />
 					<text>8</text>
 				</view>
 				<view class="icon-item">
-					<image class="icon" src="/static/images/comment.png" />
+					<image v-if="isLike" class="icon" src="/static/images/collection_yellow.png" />
+					<image v-else class="icon" src="/static/images/collection.png" />
 					<text>10</text>
 				</view>
 				<view class="icon-item">
@@ -171,13 +172,18 @@
 </template>
 
 <script>
-	import Task from '@/pages_shopping/live/components/task.vue'
+	import Task from '@/components/task.vue'
 	import {
-		liveList
-	} from '@/api/living.js'
+		listRootComments, // 一级评论列表
+		listSubComments, //二级评论列表
+		toggleLike, //内容点赞/取消点赞
+		toggleLikeComments, //评论点赞
+		share //内容分享
+	} from '@/api/life.js'
 	export default {
 		data() {
 			return {
+				resourceId: null,
 				// 状态栏的高度
 				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
 				isLike: false
@@ -185,7 +191,7 @@
 			}
 		},
 		onLoad() {
-
+			this.getListRootComments();
 		},
 		onUnload() {
 
@@ -193,7 +199,116 @@
 		methods: {
 			onLike() {
 				this.isLike = !this.isLike;
-			}
+			},
+
+			// 一级评论列表
+			getListRootComments() {
+				if (!this.resourceId) return;
+				let data = {
+					page: 1,
+					pageSize: 10,
+					resourceId: this.resourceId
+				}
+				listRootComments(data).then(res => {
+					if (res.code == 200) {
+						console.log("一级评论列表", res)
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				}).catch(err => {});
+			},
+			// 二级评论列表
+			getListSubComments() {
+				if (!this.resourceId) return;
+				let data = {
+					page: 1,
+					pageSize: 10,
+					resourceId: this.resourceId
+				}
+				listSubComments(data).then(res => {
+					if (res.code == 200) {
+						console.log("二级评论列表", res)
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				}).catch(err => {});
+			},
+			// 内容点赞/取消点赞
+			toggleLike() {
+				if (!this.resourceId) return;
+				let data = {
+					action: LIKE, //LIKE / UNLIKE
+					resourceId: this.resourceId
+				}
+				toggleLike(data).then(res => {
+					if (res.code == 200) {
+						console.log("内容点赞/取消点赞", res)
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				}).catch(err => {});
+			},
+			// 内容分享
+			share() {
+				if (!this.resourceId) return;
+				let data = {
+					resourceId: this.resourceId
+				}
+				share(data).then(res => {
+					if (res.code == 200) {
+						console.log("内容分享", res)
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				}).catch(err => {});
+			},
+			 // 评论点赞
+			toggleLikeComments() {
+				if (!this.resourceId) return;
+				let data = {
+					resourceId: this.resourceId
+				}
+				toggleLikeComments(data).then(res => {
+					if (res.code == 200) {
+						console.log("内容分享", res)
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				}).catch(err => {});
+			},
+			// 发表评论
+			getPostComment() {
+				let data = {
+					content: this.content,
+					parentId: this.parentId || '', //父评论ID(回复必填，一级不填)
+					resourceId: this.resourceId //业务ID (文章ID / 视频ID )
+				}
+				postComment(data).then(res => {
+					if (res.code == 200) {
+						console.log("发表评论", res)
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				}).catch(err => {});
+			},
 		}
 	}
 </script>
@@ -394,6 +509,7 @@
 				.message-item {
 					display: flex;
 					justify-content: space-between;
+					margin-bottom: 40rpx;
 
 					.left {
 						display: flex;
@@ -494,6 +610,7 @@
 			bottom: 0;
 			background-color: #ffffff;
 			border-top: 1rpx solid #EEEEEE;
+
 			.input-container {
 				background: #F5F7FA;
 				height: 68rpx;

pages_shopping/live/expert.vue

@@ -8,15 +8,15 @@
 				<image class="img" src="/static/images/back_white_icon.png"></image>
 			</view>
 			<view class="info-block">
-				<image class="head" src="/static/images/img.png"></image>
+				<image class="head" :src="expert.avatar"></image>
 				<view class="right">
 					<view class="user">
-						<text class="name">健康达人</text>
+						<text class="name">{{expert.nickname}}</text>
 						<view class="level">
 							<image class="icon" src="/static/images/intelligent_icon.png"></image>LV.2
 						</view>
 					</view>
-					<view class="txt">人生没有白走的路，每一步都算数。</view>
+					<view class="txt">{{expert.introduction}}</view>
 					<view class="card">
 						<view class="card-item">
 							<image class="img" src="/static/images/jinbang_font.png"></image>
@@ -29,21 +29,22 @@
 			<view class="data-block">
 				<view class="number-block">
 					<view class="item">
-						<text class="number-item">6.2万</text>
+						<text class="number-item">{{expert.fansNum}}</text>
 						<text class="txt-item">粉丝</text>
 					</view>
 					<view class="item">
-						<text class="number-item">6.2万</text>
-						<text class="txt-item">粉丝</text>
+						<text class="number-item">{{expert.followNum}}</text>
+						<text class="txt-item">关注</text>
 					</view>
 					<view class="item">
-						<text class="number-item">6.2万</text>
-						<text class="txt-item">粉丝</text>
+						<text class="number-item">{{expert.likes}}</text>
+						<text class="txt-item">获赞</text>
 					</view>
 				</view>
 				<!-- 关注 -->
-				<view class="button">
-					<image class="icon" src="/static/images/guanzhu_green_icon.png"></image><text>关注</text>
+				<view class="button" :class="isFollow ? 'follow' : ''" @click="toFollow">
+					<image v-if="!isFollow" class="icon" src="/static/images/guanzhu_green_icon.png" />
+					<text>{{ isFollow ? '已关注' : '关注' }}</text>
 				</view>
 			</view>
 		</view>
@@ -69,7 +70,7 @@
 					<view class="list-item" @click="goLive(item)" v-for="(item,index) in list" :key="index">
 						<image class="img" v-if="item.liveImgUrl" :src="item.liveImgUrl" mode="widthFix"></image>
 						<image class="video-icon" src="/static/images/video_icon.png"></image>
-						<image class="suspension-icon" src="/static/images/suspension.png"></image>
+						<image class="suspension-icon" @click="onTask" src="/static/images/suspension.png"></image>
 						<view class="info-block">
 							<view class="title">冰乳绿豆糕 冰冰凉凉谁吃谁迷糊! 谁懂，...</view>
 							<view class="item">
@@ -91,25 +92,37 @@
 							</view>
 						</view>
 					</view>
-					
-					
+
+
 				</view>
 			</mescroll-body>
 		</view>
-
+		<Task :show="showTask" @close="handleCloseTask"></Task>
 
 	</view>
 </template>
 
 <script>
+	import Task from '@/components/task.vue'
+	import {
+		expertHomePage, // 达人主页
+		follow, // 关注用户
+	} from '@/api/life.js'
 	import {
 		liveList
 	} from '@/api/living.js'
 	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
 	export default {
+		components: {
+			Task
+		},
 		mixins: [MescrollMixin],
 		data() {
 			return {
+				expert:{},//达人的数据
+				showTask: false,
+				isFollow: false,
+				expertId: null, //达人id
 				activeTab: 0,
 				// 状态栏的高度
 				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
@@ -141,6 +154,42 @@
 
 		},
 		methods: {
+			// 达人主页
+			getExpertHomePage() {
+				expertHomePage(this.expertId).then(res => {
+					if (res.code == 200) {
+						console.log("达人主页", res)
+						this.expert=res.data
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				}).catch(err => {});
+			},
+			// 关注用户
+			toFollow() {
+				this.isFollow = !this.isFollow;
+				// follow(this.expertId).then(res => {
+				// 	if (res.code == 200) {
+				// 		this.isFollow=true;
+				// 		console.log("关注用户", res)
+				// 	} else {
+				// 		uni.showToast({
+				// 			title: res.msg,
+				// 			icon: 'none'
+				// 		});
+				// 	}
+				// }).catch(err => {});
+			},
+			onTask() {
+				this.showTask = true;
+			},
+			handleCloseTask() {
+				this.showTask = false;
+			},
+
 			switchTab(tab) {
 				if (this.activeTab === tab) return;
 				this.activeTab = tab;
@@ -364,6 +413,11 @@
 					font-size: 24rpx;
 					color: #02B176;
 
+					&.follow {
+						background: #F0F0F0;
+						color: #666666;
+					}
+
 					.icon {
 						width: 24rpx;
 						height: 24rpx;
@@ -464,7 +518,8 @@
 						top: 20rpx;
 						right: 20rpx;
 					}
-					.suspension-icon{
+
+					.suspension-icon {
 						width: 144rpx;
 						height: 144rpx;
 						position: absolute;
@@ -506,7 +561,8 @@
 								height: 32rpx;
 								margin-right: 4rpx;
 							}
-							.head{
+
+							.head {
 								width: 32rpx;
 								height: 32rpx;
 								border-radius: 50%;

pages_shopping/shopping/productList.vue

@@ -4,14 +4,16 @@
 			<view class="status_bar" :style="{height: statusBarHeight}"></view>
 
 			<view class="search-cont">
-				<image class="w64 h64" src="/static/images/back_black.png"></image>
+				<image @click="goBack" class="w64 h64" src="/static/images/back_black.png"></image>
 				<view class="inner">
-					<!-- <image class="icon-search" src="../../static/images/search.png" mode=""></image> -->
-					<input type="text" value="" placeholder="城口腊肉/香肠" confirm-type="搜索" @confirm="goSearch"
-						:focus='setFocus' placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
-					<image class="w32 h32" src="/static/images/search_close_gray.png"></image>
+					<input v-model="searchValue" type="text" value="" placeholder="城口腊肉/香肠" confirm-type="搜索"
+						@confirm="handleSearch" @input="handleInput" :focus='setFocus'
+						placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
+					<image @click="clearInput" v-if="searchValue" class="w32 h32"
+						src="/static/images/search_close_gray.png">
+					</image>
 					<view class="line"></view>
-					<view class="search">搜索</view>
+					<view class="search" @click="handleSearch">搜索</view>
 				</view>
 			</view>
 
@@ -132,6 +134,8 @@
 		},
 		data() {
 			return {
+				setFocus: false,
+				searchValue: '',
 				activeIndex: 0,
 				// 状态栏的高度
 				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
@@ -182,7 +186,24 @@
 			this.getProductCateByPid();
 
 		},
-		methods: {
+		onHide() {
+			// 页面隐藏时重置聚焦状态
+			this.setFocus = false;
+		},
+		methods: { // 处理输入
+			handleInput(e) {
+				this.searchValue = e.detail.value;
+			},
+			// 清除输入内容
+			clearInput() {
+				this.searchValue = '';
+				this.setFocus = true; // 清除后重新聚焦
+			},
+			goBack() {
+				uni.navigateBack({
+					delta: 1 // 返回的页面数，1表示返回上一页
+				});
+			},
 			splitPrice(price) {
 				const priceStr = parseFloat(price).toFixed(2).toString();
 				return {
@@ -190,7 +211,7 @@
 					decimal: priceStr.split('.')[1]
 				};
 			},
-			goSearch(e) {
+			handleSearch(e) {
 				this.searchValue = e.detail.value;
 				this.mescroll.resetUpScroll();
 			},
@@ -648,20 +669,28 @@
 			display: flex;
 			align-items: center;
 			padding: 0 24rpx;
-
+		
+			image {
+				padding: 16rpx;
+				/* 增加点击区域 */
+				margin: -16rpx;
+				/* 负边距抵消padding对布局的影响 */
+				box-sizing: content-box;
+			}
+		
 			.search {
 				font-weight: 500;
 				font-size: 28rpx;
 				color: #333333;
 			}
-
+		
 			.line {
 				width: 2rpx;
 				height: 24rpx;
 				background: #999999;
 				margin: 0 26rpx;
 			}
-
+		
 			input {
 				height: 60rpx;
 				line-height: 60rpx;