no message

manifest.json

@@ -99,8 +99,8 @@
             "https" : false,
             "proxy" : {
                 "/api" : {
-                    "target" : "https://test-userapi.sjzkeji.com",
-					// "target" : "https://userapi.sjzkeji.com",
+                    // "target" : "https://test-userapi.sjzkeji.com",
+					"target" : "https://userapi.sjzkeji.com",
                     "changeOrigin" : true,
                     "secure" : false,
                     "pathRewrite" : {

pages-buy/group.vue

@@ -1,46 +1,38 @@
 <template>
 	<view class="group-box iPhone-bottom box-border-box flex-common-css">
-		<Nav class="nav-b" title='团购专区'></Nav>
-		<scroll-view :scroll-y="true" class="scroll-view-box" @scroll='scroll' @scrolltolower="scrolltolower"
-			:scroll-top='scroll_top' :scroll-with-animation="false">
-			<view class="">
-				<view class="p-12-24 box-border-box class-b">
-					<view class="display-flex p-24 box-border-box nav-list bgc-f b-rad-16 mb-12">
-						<view class="text-align-center nav-item" v-for="(item,i) in navList" :key="i"
-							@click="selectType(item.id)">
-							<image class="nav-img" :src="item.img" mode="scaleToFill"></image>
-							<view class="fs-24 w-96" :class="navId == item.id?'fw-600 fc-41ABF5':'fw-400'">{{item.name}}
-							</view>
-						</view>
+		<Nav title='团购专区'></Nav>
+		<scroll-view :scroll-y="true" class="scroll-view-css">
+			<image class="head-img" src="@/static/img/buy/group-bg.png" mode="scaleToFill"></image>
+			<view class="box-border-box content-b">
+				<view class="box-card box-border-box mb-20" v-for="(item,i) in list" :key="i" @click="todet(item)">
+					<image class="goods-img mb-16" :src="item.cover_img" mode="aspectFill"></image>
+					<view class="text-overflow-ellipsis fs-32 fw-600 mb-20 w-100100">
+						{{item.title}}
 					</view>
-				</view>
-				<view class="p-12-24 box-border-box sift-box align-items-center" :class="siftType?'bgc-f':''">
-					<view class="mr-20 sift-item align-items-center flex-justify-center"
-						:class="[{'bgc-F5F5F6':siftType},{'bgc-f':!siftType},{'siftClass':siftClassID === 1}]"
-						@click="siftClick(1)">
-						<view class="" :class="[{'fc-41ABF5':siftClassID === 1}]">
-							{{siftDistance}}
+					<view class="mb-40 flex-justify-space align-items-center">
+						<view class="jd-f">
+							<view class="jd-1"></view>
+							<view class="jd-2" :style="{width:setWidth(item.number,item.sales)+'rpx'}"></view>
 						</view>
-					</view>
-					<view class="mr-12 sift-item align-items-center flex-justify-center"
-						:class="[{'bgc-F5F5F6':siftType},{'bgc-f':!siftType},{'siftClass':siftClassID === 2}]"
-						@click="siftClick(2)">
-						<view class="" :class="[{'fc-41ABF5':siftClassID === 2}]">
-							{{siftSort}}
+						<view class="">
+							<span class="fs-24 fc-9">已团</span>
+							<span class="fs-24 ">{{item.sales}}件</span>
+							<span class="fs-24 fc-9">/剩</span>
+							<span class="fs-24 ">{{item.number - item.sales}}</span>
 						</view>
 					</view>
 
-				</view>
-				<view class="pop-box" :style="[{'top': pop_top + 'px'}]" :class="[{'pop-box-z':pop_type}]">
-					<view class="pop-content" :class="pop_type?'pop-box-true':'pop-box-false'">
-						<view class="">
-							1111111111111111111000000000000000000000000000000000000000000000000000000000
+					<view class="info-box display-flex">
+						<view class="flex-1">
+							<span class="fs-28 fc-FB3D03 fw-400">团购价￥</span>
+							<span class="fs-40 fc-FB3D03 fw-600">{{item.price}}</span>
+						</view>
+						<view class="info-box-qiang">
+							<image class="qiang-img" src="@/static/img/buy/qiang.png" mode="scaleToFill"></image>
+							<view class="jiang-box fc-65420c fs-24 fw-600">直降</view>
+							<view class="jiang-box-1 fs-24 fc-65420c fw-600">￥{{item.line_price - item.price}}</view>
+							<image class="jiang-img" src="@/static/img/buy/x-jt.png" mode="scaleToFill"></image>
 						</view>
-					</view>
-					<view v-show="pop_type" class="pop-mask" @click="pop_type = !pop_type"></view>
-				</view>
-				<view class="p-12-24 box-border-box">
-					<view class="h-200" v-for="(item,index) in 10">
 					</view>
 				</view>
 			</view>
@@ -54,34 +46,15 @@
 	} from '@/api/groupOrder.js';
 	import tools from "@/service/tools";
 	import EnBlank from "@/components/en-utils/en-blank/en-blank";
-	import {
-		getGroup
-	} from "@/api/category.js"
 	export default {
 		components: {
 			EnBlank
 		},
 		data() {
 			return {
-				navId: 0,
-				navList: [{
-					name: "全部",
-					id: 0,
-					img: require('@/static/img/buy/t-all.png')
-				}],
-				siftType: false, // 粘性状态
-				siftClassID: 0, // 粘性样式Id
-				scrollTopNum: 0, //当前滚动条高度
-				scroll_top: 0, //滚动条高度
-				pop_top: 0, // pop距头部距离
-				pop_type: false,
-				pop_type_two: false,
-				navListHeight: '', //头部模块高度
-				siftDistance: '附近', //距离筛选
-				siftSort: '距离优先', //排序筛选
 				page: 1,
 				total: 0,
-				list: []
+				list: [],
 			}
 		},
 		onReachBottom() {
@@ -91,81 +64,12 @@
 			}
 		},
 		onShow() {
-			this.getGroup()
 			this.page = 1;
 			this.list = [];
 			this.getList();
 		},
-		onLoad() {},
-		mounted() {
-			this.getHeight()
-		},
+		mounted() {},
 		methods: {
-			siftClick(num) {
-				this.scroll_top = this.scrollTopNum
-				this.$nextTick(function() {
-					this.scroll_top = this.navListHeight
-				});
-				setTimeout(() => {
-					this.siftClassID = num
-					this.pop_type = true
-				}, 400)
-			},
-			scroll(e) {
-				this.scrollTopNum = e.detail.scrollTop
-				if (e.detail.scrollTop > (this.navListHeight - 1)) {
-					this.siftType = true
-				} else {
-					this.siftType = false
-				}
-			},
-			getHeight() {
-				const query = uni.createSelectorQuery().in(this);
-				query.select('.class-b').boundingClientRect(data => {
-					if (data) {
-						// data.height 就是元素的高度
-						this.navListHeight = data.height
-					}
-				}).exec()
-				let Hone = 0
-				uni.getSystemInfo({
-					success: (e) => {
-						let statusBarH = e.statusBarHeight + 10
-						let custom = 0;
-						custom = wx.getMenuButtonBoundingClientRect()
-						let customBarH = custom.height;
-						Hone = statusBarH + customBarH;
-					}
-				})
-				let HTwo = 0
-				const navT = uni.createSelectorQuery().in(this);
-				navT.select('.sift-box').boundingClientRect(data => {
-					if (data) {
-						// data.height 就是元素的高度
-						HTwo = data.height
-						console.log(HTwo, '222222222');
-					}
-				}).exec();
-				setTimeout(() => {
-					this.pop_top = Number(Hone) + Number(HTwo)
-					console.log(this.pop_top, '-----------');
-				}, 500)
-			},
-			scrolltolower(e) {
-				console.log(e);
-			},
-			getGroup() {
-				let operate_id = uni.getStorageSync('operate_id');
-				let school_id = uni.getStorageSync('school_id');
-				getGroup({
-					operate_id: operate_id,
-					school_id: school_id
-				}).then((res) => {
-					if (res.code === 1) {
-						this.navList = [...this.navList, ...res.data]
-					}
-				})
-			},
 			getList() {
 				let school_id = uni.getStorageSync('school_id');
 				groupList({
@@ -178,131 +82,127 @@
 					}
 				})
 			},
+
+			setWidth(total, num) {
+				let w = 0
+				let tH = 434;
+				w = (tH / total * num).toFixed(0)
+				console.log(w);
+				return w
+			},
 			todet(item) {
 				uni.navigateTo({
 					url: '/pages-buy/group-det?id=' + item.id
 				})
-			}
+			},
 		},
 	}
 </script>
 
 <style scoped lang="scss">
-	.pop-box {
-		width: 100%;
-		// height: 100vh;
-		height: 84rpx;
-		position: fixed;
-		left: 0;
-		top: 0;
-		overflow: hidden;
-		// z-index: -1;
-		// transition: all 0.3s ease-in-out;
-	}
-	// .pop-box-z {
-	// 	z-index: 2;
-	// 	transition: all 0.3s ease-in-out;
-	// }
-	.pop-box-true {
-		// display: block;
-		// transition: all .3s inherit;
-		/* 定义过渡效果 */
-		transition: transform 0.3s ease-in-out;
-		transform: translateY(0);
-	}
-
-	.pop-box-false {
-		// display: none;
-		transition: transform 0.3s ease-in-out;
-		transform: translateY(-100%);
-	}
-
-	.pop-content {
-		width: 100%;
-		height: 500rpx;
-		background: #fff;
-		border-radius: 0 0 20rpx 20rpx;
-		position: absolute;
-		left: 0;
-		// top: var(--pop_top)px;
-		z-index: 10;
-		// transition: all .3s inherit;
-		/* 定义过渡效果 */
-		/* 初始平移状态 */
-	}
-
-	.pop-mask {
-		width: 100%;
-		height: 100%;
-		background: rgba(0, 0, 0, .5);
-		position: absolute;
-		left: 0;
-		// top: 0;
-	}
-
-	.siftClass {
-		color: #41ABF5;
-		border: 1rpx solid #41ABF5;
-		background: #deeffb;
-		box-sizing: border-box;
-	}
-
-	.h-200 {
-		width: 100%;
-		height: 200px;
-		margin-bottom: 20px;
-		background: rebeccapurple;
-	}
-
-	.scroll-view-box {
-		overflow: auto;
-	}
-
-	.sift-box {
-		position: sticky;
-		top: 0;
-		left: 0;
-		z-index: 200;
-		overflow-x: scroll;
-	}
-
-	.sift-content-box {
-		width: 100%;
-		height: 300rpx;
-		position: absolute;
-		top: 74rpx;
-		left: 0;
-	}
-
-	.sift-item {
-		min-width: 150rpx;
-		max-width: 280rpx;
-		height: 60rpx;
-		line-height: 60rpx;
-		border-radius: 8rpx;
-		transition: all .5s ease;
-	}
-
-	.group-box {}
+	.content-b {
+		padding: 0 24rpx 24rpx;
+	}
+
+	.jd-f {
+		position: relative;
+		width: 434rpx;
+		height: 18rpx;
+
+		.jd-1 {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 434rpx;
+			height: 18rpx;
+			background: #FEE0E0;
+			border-radius: 200rpx 200rpx 200rpx 200rpx;
+			z-index: 10;
+		}
+
+		.jd-2 {
+			position: absolute;
+			top: 0;
+			left: 0;
+			height: 18rpx;
+			background: linear-gradient(90deg, #FF545D 0%, #FF4B84 100%);
+			// background-color: #FF2652;
+			border-radius: 200rpx 200rpx 200rpx 200rpx;
+			z-index: 12;
+		}
+	}
+
+
+	.group-box {
+		background-color: #EF2864;
+		height: 100vh;
+
+		.head-img {
+			width: 100%;
+			height: 422rpx;
+		}
+
+		.box-card {
+			width: 100%;
+			min-height: 100rpx;
+			background: #FFFFFF;
+			padding: 16rpx;
+			box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(51, 51, 51, 0.1);
+			border-radius: 20rpx;
+
+			.goods-img {
+				width: 100%;
+				height: 452rpx;
+				border-radius: 20rpx;
+				// margin-top: 24rpx;
+			}
 
-	.nav-list {
-		overflow-x: scroll;
-	}
+			.info-box {
+				width: 100%;
+				height: 72rpx;
+				background: #FEE0E0;
+				border-radius: 20rpx;
+				line-height: 72rpx;
+				padding-left: 14rpx;
+				box-sizing: border-box;
+
+				.info-box-qiang {
+					width: 148rpx;
+					height: 72rpx;
+					background: #F63E36;
+					border-radius: 0rpx 20rpx 20rpx 0rpx;
+					position: relative;
+
+					.qiang-img {
+						width: 60rpx;
+						height: 60rpx;
+						margin: 6rpx 22rpx 0 auto;
+					}
 
-	.nav-item {
-		width: 96rpx;
-		height: 126rpx;
-		margin-right: 48rpx;
-	}
+					.jiang-box {
+						position: absolute;
+						top: -30rpx;
+						left: -22rpx;
+						z-index: 20;
+					}
 
-	.nav-img {
-		width: 80rpx;
-		height: 80rpx;
-		border-radius: 5px;
-		margin: 0 auto 12rpx auto;
-	}
+					.jiang-box-1 {
+						position: absolute;
+						top: 0rpx;
+						left: -30rpx;
+						z-index: 20;
+					}
 
-	.w-96 {
-		// width: 96rpx;
+					.jiang-img {
+						position: absolute;
+						width: 120rpx;
+						height: 90rpx;
+						left: -60rpx;
+						bottom: 0;
+						z-index: 11;
+					}
+				}
+			}
+		}
 	}
 </style>