图片样式调整

pages/groupbuying/publish_group/index.vue

@@ -642,6 +642,7 @@ export default {
 		margin-bottom: 20rpx;
 
 		image {
+			border-radius: 4rpx;
 			margin: auto;
 			width: 128rpx;
 			height: 128rpx;

pages/groupbuying_details/index.vue

@@ -34,11 +34,17 @@
 						</view>
 
 						<view class="wrapper">
-							<view class="share acea-row row-between row-bottom">
 
-								<!-- <view class="iconfont icon-fenxiang skeleton-rect" @click="listenerActionSheet"></view> -->
+
+							<view class="introduce " >
+								<view class="grouponTitle ">
+									<text class="mainTitle">{{ storeInfo.mainTitle}} </text>
+								</view>
+								<view class="grouponTitle ">
+									<text class="subTitle ">{{ storeInfo.subTitle}} </text>
+								</view>
 							</view>
-							<view class="introduce skeleton-rect" v-text="storeInfo.mainTitle"></view>
+
 							<view class='info-area'>
 								<view class='time '>
 									<image src="http://www.gzzzyd.com/groupon/home_slices/编辑@2x.png" mode="scaleToFill" />
@@ -2204,9 +2210,37 @@ action-sheet-item {
 	height: 26rpx;
 }
 
-.introduce {
-	min-height: 44rpx;
+	.introduce {
+		font-size: 36rpx;
+		font-weight: bolder;
+		color: #111111;
+		display: flex;
+		flex-direction: column;
 }
+	.grouponTitle{
+		display: flex;
+		flex-direction: column;
+		height: 55rpx;
+
+	}
+	.subTitle{
+		font-size: 28rpx;
+		color: #666666;
+		font-weight: 400;
+		line-height: 55rpx;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.mainTitle{
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 
 .limit_good {
 	font-size: 16rpx;
@@ -2526,19 +2560,21 @@ action-sheet-item {
 			image {
 				width: 128rpx;
 				height: 128rpx;
-				margin-right: 20rpx;
+				border-radius: 4rpx;
 			}
 
 			.all-products-item-content {
 				flex-grow: 1;
 				display: flex;
 				flex-direction: column;
+				margin-left: 20rpx;
 
 
 				.all-products-item-content-t {
 					flex: 1;
 					font-size: 24rpx;
 					font-weight: 400;
+					height: 80rpx;
 					color: #333333;
 					line-height: 40rpx;
 					width: 550rpx;
@@ -2552,8 +2588,9 @@ action-sheet-item {
 				.all-products-item-content-b {
 					flex: 1;
 					font-size: 28rpx;
+					height: 48rpx;
 					font-weight: 500;
-					line-height: 80rpx;
+					line-height: 48rpx;
 					display: flex;
 					justify-content: space-between;
 

pages/groupbuying_details/order_details_confirm/index.vue

@@ -6,7 +6,7 @@
 					:src="item.goodsCover"
 					mode="scaleToFill" />
 
-				<view class="all-products-item-content">
+				<view class="all-products-item-content ">
 					<view class="all-products-item-content-t">
 						{{item.goodsName}}
 					</view>
@@ -1893,23 +1893,23 @@ export default {
 		image {
 			width: 128rpx;
 			height: 128rpx;
-			margin-right: 20rpx;
-			border: 2rpx solid #FFFFFF;
+			margin-left: 10rpx;
+			border-radius: 4rpx;
 		}
 
 		.all-products-item-content {
 			flex-grow: 1;
 			display: flex;
 			flex-direction: column;
-
+			margin-left: 20rpx;
 
 			.all-products-item-content-t {
-				flex: 1;
 				font-size: 24rpx;
 				font-weight: 400;
 				color: #333333;
 				line-height: 40rpx;
-				width: 570rpx;
+				height: 80rpx;
+				width: 560rpx;
 				display: -webkit-box;
 				-webkit-box-orient: vertical;
 				-webkit-line-clamp: 2;
@@ -1920,8 +1920,9 @@ export default {
 			.all-products-item-content-b {
 				flex: 1;
 				font-size: 28rpx;
+				height: 48rpx;
 				font-weight: 500;
-				line-height: 80rpx;
+				line-height: 48rpx;
 				display: flex;
 				justify-content: space-between;
 

pages/groupbuying_details/order_details_list/index.vue

@@ -2,10 +2,13 @@
 	<view :style="colorStyle">
 		<view class="wait_panel">
 			<view class="w1">
-				<image v-if="orderDetail.orderState == 5" src="http://www.gzzzyd.com/groupon/home_slices/取消订单小@2x.png" mode="scaleToFill" />
-				<image v-else-if="orderDetail.orderState == 4" src="http://www.gzzzyd.com/groupon/home_slices/已完成@2x.png" mode="scaleToFill" />
-				<image v-else-if="orderDetail.orderState == 6 || orderDetail.orderState == 7" src="http://www.gzzzyd.com/groupon/home_slices/退款中@2x.png" mode="scaleToFill" />
-				<image v-else src="http://www.gzzzyd.com/groupon/home_slices/倒计时@2x.png" mode="scaleToFill" />
+				<view class="imageView">
+					<image v-if="orderDetail.orderState == 5" src="http://www.gzzzyd.com/groupon/home_slices/取消订单小@2x.png" mode="scaleToFill" />
+					<image v-else-if="orderDetail.orderState == 4" src="http://www.gzzzyd.com/groupon/home_slices/已完成@2x.png" mode="scaleToFill" />
+					<image v-else-if="orderDetail.orderState == 6 || orderDetail.orderState == 7" src="http://www.gzzzyd.com/groupon/home_slices/退款中@2x.png" mode="scaleToFill" />
+					<image v-else src="http://www.gzzzyd.com/groupon/home_slices/倒计时@2x.png" mode="scaleToFill" />
+				</view>
+
 				<text v-if="orderDetail.orderState == 4" class="success_status">{{orderDetail.orderStateDesc}}</text>
 				<text v-else-if="orderDetail.orderState > 4" class="refund_status">{{orderDetail.orderStateDesc}}</text>
 				<text v-else class="status">{{orderDetail.orderStateDesc}}</text>
@@ -30,7 +33,7 @@
 			</view>
 		</view>
 		<view class="all-products-body" v-for="(item, index) in orderDetail.goodsList" :key="index">
-			<view class="all-products-item" @click="addGoodPopupShow = true">
+			<view class="all-products-item " @click="addGoodPopupShow = true">
 				<image
 					:src="item.goodsImage"
 					mode="scaleToFill" />
@@ -764,7 +767,7 @@ export default {
 		image {
 			width: 128rpx;
 			height: 128rpx;
-			border: 2rpx solid #FFFFFF;
+			border-radius: 4rpx;
 		}
 
 		.all-products-item-content {
@@ -780,14 +783,22 @@ export default {
 				font-size: 24rpx;
 				font-weight: 400;
 				color: #333333;
+				height: 80rpx;
 				line-height: 40rpx;
+				width: 550rpx;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 2;
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
 
 			.all-products-item-content-b {
 				flex: 1;
 				font-size: 28rpx;
 				font-weight: 500;
-				line-height: 80rpx;
+				height: 48rpx;
+				line-height: 48rpx;
 				display: flex;
 				justify-content: space-between;
 
@@ -997,16 +1008,25 @@ export default {
 	background: white;
 
 	.w1 {
-		height: 44rpx;
-		font-size: 32rpx;
-		font-weight: 500;
-		color: #FEA800;
-		line-height: 44rpx;
-		margin: 20rpx 0;
-
-		image {
-			width: 40rpx;
-			height: 40rpx;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		.imageView{
+			width: 32rpx;
+			height: 32rpx;
+			margin-top: 6rpx;
+			image {
+				width: 32rpx;
+				height: 32rpx;
+			}
+		}
+		text{
+			height: 44rpx;
+			font-size: 32rpx;
+			font-weight: 500;
+			color: #FEA800;
+			line-height: 44rpx;
+			margin-left: 15rpx;
 		}
 	}
 

pages/index/diy/components/latestGroupBuying.vue

@@ -33,12 +33,18 @@
 					</view>
 				</view>
 				<view class="introduce" @click="goToDetail(e)">
-					<view>
-						{{ e.mainTitle || '测试名字' }}
+					<view class="grouponTitle ">
+						<text class="mainTitle">{{ e.mainTitle}}</text>
 					</view>
+
 					<image src="http://www.gzzzyd.com/groupon/home_slices/进入箭头2小@2x.png" mode="scaleToFill" />
 
 				</view>
+				<view class="introduce" @click="goToDetail(e)">
+					<view class="grouponTitle ">
+						<text class="subTitle">{{ e.subTitle}}</text>
+					</view>
+				</view>
 
 				<view class="countdown flex-row">
 					<view class="countdown-l " hover-class="none" hover-stop-propagation="false">
@@ -203,6 +209,32 @@ export default {
 </script>
 
 <style lang="scss">
+	.grouponTitle{
+		display: flex;
+		flex-direction: column;
+		width: 630rpx;
+		height: 55rpx;
+
+	}
+	.subTitle{
+		font-size: 28rpx;
+		color: #666666;
+		font-weight: 400;
+		line-height: 44rpx;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+.mainTitle{
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .list-box {
 	background: white;
 
@@ -408,14 +440,14 @@ export default {
 	font-weight: bolder;
 	color: #111111;
 	line-height: 44rpx;
-	margin: 20rpx 0;
+	margin: 10rpx 0;
 	display: flex;
 	justify-content: space-between;
 
 	image {
 		width: 36rpx;
 		height: 36rpx;
-		vertical-align: middle;
+		margin-top: 8rpx;
 	}
 }
 

pages/order/index.vue

@@ -22,13 +22,16 @@
 				<view class="list" >
 					<view class="myclient_list" @click="goOrderDetails(item.orderId)">
 						<view class="myclient_list_name">
-							<view class="nl">
+							<view class="nl ">
 								{{item.mainTitle}}
 							</view>
 							<view v-if="item.orderState == 4" class="success_status">{{item.orderStateDesc}}</view>
 							<view v-else-if="item.orderState == 8" class="after_sales_status">{{item.orderStateDesc}}</view>
 							<view v-else class="status">{{item.orderStateDesc}}</view>
 						</view>
+						<view class="grouponTitle ">
+							<text class="subTitle ">{{ item.subTitle}} </text>
+						</view>
 						<view class="myclient_list_content">
               <view class="phone">
                 <image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/日期@2x.png" />
@@ -708,18 +711,24 @@ export default {
 	.myclient_list_name {
 		display: flex;
     	justify-content: space-between;
-		margin-bottom: 15rpx;
 		min-height: 44rpx;
 		font-size: 28rpx;
 		font-weight: 500;
 		color: #111111;
 		line-height: 44rpx;
 
+
 		.nv {
 			flex-grow: 1;
 		}
 		.nl {
+			width: 550rpx;
 			font-weight: bold;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 1;
+			overflow: hidden;
+			text-overflow: ellipsis;
 		}
 
 		.status {
@@ -785,32 +794,30 @@ export default {
 		margin-bottom: 20rpx;
 
 		image {
-			margin: auto;
-			width: 128rpx;
-			height: 128rpx;
-			margin-right: 20rpx;
-			border: 2rpx solid #FFFFFF;
+			width: 132rpx;
+			height: 132rpx;
+			border-radius: 4px;
 		}
 
 		.all-products-item-content {
 			display: flex;
 			flex-direction: column;
-			width: calc(100% - 128rpx);
+			margin-left: 20rpx;
+			width: calc(100% - 132rpx);
 
 			.all-products-item-content-t {
-				flex: 1;
 				font-size: 24rpx;
 				font-weight: 400;
 				margin-right: 30rpx;
+				height: 80rpx;
 				color: #333333;
 				line-height: 40rpx;
 			}
 
 			.all-products-item-content-b {
-				flex: 1;
 				font-size: 28rpx;
 				font-weight: 500;
-				line-height: 80rpx;
+				line-height: 52rpx;
 				display: flex;
 				justify-content: space-between;
 
@@ -1040,5 +1047,24 @@ line-height: 32rpx;
 	margin-left: 5%;
 	background-color: white;
 }
+	.bord{
+		border: 1px solid red;
+	}
+.grouponTitle{
+	display: flex;
+	flex-direction: column;
+	height: 44rpx;
 
+}
+.subTitle{
+	font-size: 28rpx;
+	color: #666666;
+	font-weight: 400;
+	line-height: 44rpx;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 </style>

uni_modules/mescroll-uni/hooks/useMescroll.js

@@ -0,0 +1,66 @@
+// 小程序无法在hook中使用页面级别生命周期,需单独传入: https://ask.dcloud.net.cn/question/161173
+// import { onPageScroll, onReachBottom, onPullDownRefresh} from '@dcloudio/uni-app';
+
+/** 
+ * 初始化mescroll, 相当于vue2的mescroll-mixins.js文件 (mescroll-body 和 mescroll-uni 通用) 
+ * mescroll-body需传入onPageScroll, onReachBottom
+ * mescroll-uni无需传onPageScroll, onReachBottom
+ * 当down.native为true时,需传入onPullDownRefresh
+ */ 
+function useMescroll(onPageScroll, onReachBottom, onPullDownRefresh){
+	// mescroll实例对象
+	let mescroll = null;
+	
+	// mescroll组件初始化的回调,可获取到mescroll对象
+	const mescrollInit = (e)=> {
+		mescroll = e;
+	}
+	
+	// 获取mescroll对象, mescrollInit执行之后会有值, 生命周期created中会有值
+	const getMescroll = ()=>{
+		return mescroll
+	}
+	
+	// 下拉刷新的回调 (mixin默认resetUpScroll)
+	const downCallback = ()=> {
+		if(mescroll.optUp.use){
+			mescroll.resetUpScroll()
+		}else{
+			setTimeout(()=>{
+				mescroll.endSuccess();
+			}, 500)
+		}
+	}
+	
+	// 上拉加载的回调
+	const upCallback = ()=> {
+		// mixin默认延时500自动结束加载
+		setTimeout(()=>{
+			mescroll.endErr();
+		}, 500)
+	}
+	
+	// 注册系统自带的下拉刷新 (配置down.native为true时生效, 还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
+	onPullDownRefresh && onPullDownRefresh(() => {
+	  mescroll && mescroll.onPullDownRefresh();
+	})
+	
+	// 注册列表滚动事件,用于判定在顶部可下拉刷新,在指定位置可显示隐藏回到顶部按钮 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
+	onPageScroll && onPageScroll(e=>{
+		mescroll && mescroll.onPageScroll(e);
+	})
+	
+	// 注册滚动到底部的事件,用于上拉加载 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
+	onReachBottom && onReachBottom(()=>{
+		mescroll && mescroll.onReachBottom();
+	}) 
+	
+	return {
+		getMescroll,
+		mescrollInit,
+		downCallback,
+		upCallback
+	}
+}
+
+export default useMescroll

uni_modules/mescroll-uni/hooks/useMescrollComp.js

@@ -0,0 +1,56 @@
+import { ref } from 'vue';
+
+// 小程序无法在hook中使用页面级别生命周期,需单独传入: https://ask.dcloud.net.cn/question/161173
+// import { onPageScroll, onReachBottom, onPullDownRefresh} from '@dcloudio/uni-app';
+
+/** 
+ * mescroll-body写在子组件时,需通过useMescrollComp补充子组件缺少的生命周期, 相当于vue2的mescroll-comp.js文件
+ * 必须传入onPageScroll, onReachBottom
+ * 当down.native为true时,需传入onPullDownRefresh
+ */ 
+function useMescrollComp(onPageScroll, onReachBottom, onPullDownRefresh){
+	// 因为子组件无onPageScroll和onReachBottom的页面生命周期，需在页面传递进到子组件
+	onPageScroll(e=>{
+		handlePageScroll(e)
+	})
+	
+	onReachBottom(()=>{
+		handleReachBottom()
+	})
+	
+	// 当down的native: true时, 还需传递此方法进到子组件
+	onPullDownRefresh && onPullDownRefresh(()=>{
+		handlePullDownRefresh()
+	})
+	
+	const mescrollItem = ref(null)
+	
+	const handlePageScroll = (e)=>{
+		const mescroll = getMescroll()
+		mescroll && mescroll.onPageScroll(e);
+	}
+	
+	const handleReachBottom = ()=>{
+		const mescroll = getMescroll()
+		mescroll && mescroll.onReachBottom();
+	}
+	
+	const handlePullDownRefresh = ()=>{
+		const mescroll = getMescroll()
+		mescroll && mescroll.onPullDownRefresh();
+	}
+	
+	const getMescroll = ()=>{
+		if(mescrollItem.value && mescrollItem.value.getMescroll){
+			return mescrollItem.value.getMescroll()
+		}
+		return null
+	}
+	
+	return {
+		mescrollItem,
+		getMescroll
+	}
+}
+
+export default useMescrollComp

uni_modules/mescroll-uni/hooks/useMescrollMore.js

@@ -0,0 +1,69 @@
+import { ref  } from 'vue';
+
+// 小程序无法在hook中使用页面级别生命周期,需单独传入: https://ask.dcloud.net.cn/question/161173
+// import { onPageScroll, onReachBottom, onPullDownRefresh} from '@dcloudio/uni-app';
+
+/** mescroll-more示例写在子组件时,需通过useMescrollMore补充子组件缺少的生命周期, 相当于vue2的mescroll-more.js文件 */ 
+function useMescrollMore(mescrollItems, onPageScroll, onReachBottom, onPullDownRefresh){
+	// 当前tab下标
+	const tabIndex = ref(0) 
+	
+	// 因为子组件无onPageScroll和onReachBottom的页面生命周期，需在页面传递进到子组件
+	onPageScroll && onPageScroll(e=>{
+		handlePageScroll(e)
+	})
+	
+	onReachBottom && onReachBottom(()=>{
+		handleReachBottom()
+	})
+	
+	// 当down的native: true时, 还需传递此方法进到子组件
+	onPullDownRefresh && onPullDownRefresh(()=>{
+		handlePullDownRefresh()
+	})
+	
+	const handlePageScroll = (e)=>{
+		let mescroll = getMescroll(tabIndex.value);
+		mescroll && mescroll.onPageScroll(e);
+	}
+	const handleReachBottom = ()=>{
+		let mescroll = getMescroll(tabIndex.value);
+		mescroll && mescroll.onReachBottom();
+	}
+		
+	const handlePullDownRefresh = ()=>{
+		let mescroll = getMescroll(tabIndex.value);
+		mescroll && mescroll.onPullDownRefresh();
+	}
+	
+	// 根据下标获取对应子组件的mescroll
+	const getMescroll = (i)=>{
+		if (mescrollItems && mescrollItems[i]) {
+			return mescrollItems[i].value.getMescroll()
+		} else{
+			return null
+		}
+	}
+	
+	// 切换tab,恢复滚动条位置
+	const scrollToLastY = ()=>{
+		let mescroll = getMescroll(tabIndex.value);
+		if(mescroll){
+			// 恢复上次滚动条的位置
+			let y = mescroll.getScrollTop()
+			mescroll.scrollTo(y, 0)
+			// 再次恢复上次滚动条的位置, 确保元素已渲染
+			setTimeout(()=>{
+				mescroll.scrollTo(y, 0)
+			},20)
+		}
+	}
+	
+	return {
+		tabIndex,
+		getMescroll,
+		scrollToLastY
+	}
+}
+
+export default useMescrollMore