no message

api/group.js

@@ -8,7 +8,7 @@ export const groupShopInfo = (data) => request(newsUrl + 'shop_info', 'post', {
 // 获取团购商品列表
 export const groupList = (data) => request(newsUrl + 'list', 'post', { ...data },false)
 // 获取团购商品详情
-export const groupInfo = (data) => request(newsUrl + 'info', 'post', { ...data },false)
+export const groupInfo = (data) => request(newsUrl + 'info', 'post', { ...data },true)
 // 下单
 export const groupCreate = (data) => request(newsUrl + 'create', 'post', { ...data },false)
 // 获取顶部团购商品列表

common/css/common.css

@@ -176,7 +176,9 @@ image {
 .letter-spacing-6 {
 	letter-spacing: 6rpx;
 }
-
+.letter-spacing-3 {
+	letter-spacing: 3rpx;
+}
 .flex-1 {
 	flex: 1;
 }

pages-buy/group-goods-info.vue

@@ -1,17 +1,132 @@
 <template>
-	<view class="">
+	<view class="flex-common-css iPhone-bottom">
 		<Nav :title="shop_name" :bgckgroundBox='"transparent"' leftIconColor="#333" titleColor="#333"></Nav>
 		<view class="sift-box p-12-24 box-border-box align-items-center">
-			<view class="flex-1 align-items-center">
-				<view class="max-w-200">
-					
+			<scroll-view scroll-x="true" scroll-with-animation :scroll-left="scrollLeft" class="flex-1 tab-scroll">
+				<view class="max-w-200 text-overflow-ellipsis-one tab-scroll_item fs-28"
+					v-for="(item,index) in sift_data" :key="index" :class="{'active':isActive==index}"
+					@click="chenked(index)">
+					{{item.title}}
 				</view>
-			</view>
-			<uni-icons type="bars" size="22"></uni-icons>
+			</scroll-view>
+			<uni-icons class="flex-shrink0 ml-16" type="bars" size="22"></uni-icons>
 		</view>
-		<scroll-view :scroll-y="true" class="flex-common-css">
-			
-		</scroll-view>
+		<swiper @change="change" :current="isActive" class="swiper-content scroll-view-css">
+			<swiper-item class="swiperitem-content scroll-view-css" v-for="(item,index) in swiper_data" :key="index">
+				<scroll-view :scroll-y="true" class="scroll-view-css p-12-24 box-border-box">
+					<view class="item-goods-box b-rad-20 bgc-f p-24 box-border-box mb-32">
+						<view class="fs-36 fw-600 fc-3 letter-spacing-3 mb-18">
+							{{item.title}}
+						</view>
+						<view class="p-b-20 mb-20 b-b-F9F9F9">
+							<swiper class="swiper-goods">
+								<swiper-item class="swiper-item-goods" v-for="(goods_item, goods_index) in item.image"
+									:key="goods_index">
+									<image class="goods-img" :src="goods_item" mode="aspectFill"></image>
+								</swiper-item>
+							</swiper>
+						</view>
+						<view class="align-items-flex-start mb-16"
+							v-show="item.is_quota != 0 && item.restricted_num != 1">
+							<view class="mr-18 fs-26">
+								限制
+							</view>
+							<view class="align-items-center">
+								<view class="mr-8 fs-26" v-show="item.is_quota === 1">
+									每人限购{{item.quota_num}}张,
+								</view>
+								<view class="fs-26" v-show="item.restricted === 2">
+									每张卷限{{item.restricted_num}}人使用
+								</view>
+								<view class="fs-26" v-show="item.restricted === 3">
+									每桌限用{{item.restricted_num}}张
+								</view>
+							</view>
+						</view>
+						<view class="align-items-flex-start mb-16">
+							<view class="mr-18 fs-26">
+								须知
+							</view>
+							<view class="fs-26" v-show="item.usable_time == 1">
+								24小时可用
+							</view>
+							<view class="" v-show="item.usable_time == 2">
+								{{item.timeData}}
+							</view>
+						</view>
+						<view class="align-items-flex-start">
+							<view class="mr-18 fs-26">
+								保障
+							</view>
+							<view class="">
+								随时退，过期自动退
+							</view>
+						</view>
+					</view>
+					<view class="fs-34 fc-3 mb-18">
+						团购详情
+					</view>
+					<view class="item-goods-box b-rad-20 bgc-f p-24 box-border-box mb-32">
+						<view class="item-info" v-for="(item_item,item_index) in item.item" :key="item_index">
+							<view class="align-items-center mb-10">
+								<view class="d"></view>
+								<view class="fs-32">
+									{{item_item.name}}
+								</view>
+							</view>
+							<view class="align-items-center flex-justify-space goods-info" v-for="(goods_item,goods_index) in item_item.goods" :key="goods_index">
+								<view class="">
+									{{goods_item.name}}
+								</view>
+								<view class="">
+									{{goods_item.number}}{{goods_item.unit}}
+								</view>
+							</view>
+						</view>
+						<view class="item-info">
+							<view class="align-items-center mb-10">
+								<view class="d"></view>
+								<view class="fs-32">
+									备注
+								</view>
+							</view>
+							<view class="fs-24">
+								温馨提示：套餐用餐前请提前验券
+							</view>
+						</view>
+					</view>
+					<view class="fs-34 fc-3 mb-18">
+						购买须知
+					</view>
+					<view class="item-goods-box b-rad-20 bgc-f p-24 box-border-box mb-32">
+						<view class="mb-10 fs-30 fw-600 fc-3">
+							有效期
+						</view>
+						<view class="b-b-F9F9F9 pb-10 mb-10" v-if="item.time_type === 1">
+							{{item.start_time}} 至 {{item.end_time}}
+						</view>
+						<view class="b-b-F9F9F9 pb-10 mb-10" v-else>
+							购买后{{item.valid_day}}天
+						</view>
+						<view class="mb-10 fs-30 fw-600 fc-3">
+							使用时间
+						</view>
+						<view class="b-b-F9F9F9 pb-10 mb-10">
+							{{item.usable_time == 1?'24小时可用':item.timeData}}
+						</view>
+						<view class="mb-10 fs-30 fw-600 fc-3">
+							使用规则
+						</view>
+						<view class="align-items-center mb-10" v-for="(use_message_item,use_message_index) in item.use_message" :key="use_message_index">
+							<view class="d"></view>
+							<view class="">
+								{{use_message_item.notice}}
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
 	</view>
 </template>
 
@@ -25,39 +140,135 @@
 		data() {
 			return {
 				shop_id: '',
-				gooods_id: '',
+				goods_id: '',
 				shop_name: '',
-				goods_info: {},
 				sift_data: [],
-				sift_id: 0
+				sift_id: 0,
+				currentindex: 0,
+				contentScrollW: 0, // 导航区宽度
+				scrollLeft: 0, // 横向滚动条位置
+				isActive: 0,
+				swiper_data: []
 			};
 		},
 		onLoad(data) {
 			if (data) {
 				this.shop_id = data.shop_id
-				this.gooods_id = data.gooods_id
+				this.goods_id = data.goods_id
 				this.shop_name = data.shop_name
-				this.groupInfo()
+				// this.groupInfo()
 				this.groupIndexGoods()
 			}
 			// console.log(data);
 		},
-		mounted() {},
+		watch: {
+			// swiper与上面选项卡联动
+			currentindex(newval) {
+				this.isActive = newval;
+				this.scrollLeft = 0;
+				// 滑动swiper后，每个选项距离其父元素最左侧的距离
+				console.log(newval);
+				if (newval === 0) {
+					this.scrollLeft = this.sift_data[newval].left - 60
+				} else {
+					this.scrollLeft = (this.sift_data[newval].left - ((this.sift_data[(newval - 1)].width) / 2)) - 60
+				}
+				// for (let i = 0; i < newval - 1; i++) {
+				// 	this.scrollLeft += (this.sift_data[i].width + (this.sift_data[i].left))
+				console.log(this.scrollLeft);
+				// };
+			},
+		},
+		mounted() {
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this.getScrollW()
+				}, 500)
+			})
+		},
 		methods: {
+			setTimeData(timeData) {
+				let time = ''
+				let array = ''
+				timeData.forEach((v, k) => {
+					v.forEach((i, j) => {
+						let timeTwo = ''
+						if (j == 0 || j == 3) {
+							timeTwo = i + '-'
+						} else {
+							timeTwo = i
+						}
+						array = array + timeTwo
+					})
+					if (timeData.length === k + 1) {
+						time = time + array + '可用'
+					} else {
+						time = time + array + '可用' + ','
+					}
+					array = ''
+				})
+				console.log(time);
+				return time
+			},
+			change(e) {
+				const {
+					current
+				} = e.detail;
+				console.log(current);
+				this.currentindex = current;
+			},
+			getScrollW() {
+				const query = uni.createSelectorQuery().in(this);
+				query.select('.tab-scroll').boundingClientRect(data => {
+					// 拿到 scroll-view 组件宽度
+					this.contentScrollW = data.width
+					// console.log(data, '00000000000000');
+				}).exec();
+				query.selectAll('.tab-scroll_item').boundingClientRect(data => {
+					let dataLen = data.length;
+					// console.log(data, '11111111111111111111');
+					for (let i = 0; i < dataLen; i++) {
+						//  scroll-view 子元素组件距离左边栏的距离
+						this.sift_data[i].left = data[i].left;
+						//  scroll-view 子元素组件宽度
+						this.sift_data[i].width = data[i].width
+						// console.log(this.sift_data);
+					}
+				}).exec()
+			},
+			chenked(index) {
+				this.isActive = index;
+				this.scrollLeft = 0;
+				console.log(this.scrollLeft);
+				for (let i = 0; i < index - 1; i++) {
+					this.scrollLeft += this.sift_data[i].width
+					console.log(this.scrollLeft);
+				};
+			},
 			groupIndexGoods() {
-				groupIndexGoods({shop_id: this.shop_id}).then((res) => {
-					if(res.code === 1) {
+				groupIndexGoods({
+					goods_id: this.goods_id,
+					shop_id: this.shop_id
+				}).then((res) => {
+					if (res.code === 1) {
 						this.sift_data = res.data
+						this.swiper_data = []
+						this.sift_data.forEach((v, k) => {
+							this.groupInfo(v.id)
+						})
 					}
 				})
 			},
-			groupInfo() {
+			groupInfo(goodsId) {
 				groupInfo({
-					shop_id: this.shop_id,
-					id: this.gooods_id
+					id: goodsId,
+					shop_id: this.shop_id
 				}).then((res) => {
 					if (res.code === 1) {
-						this.goods_info = res.data
+						if (res.data.usable_time === 2) {
+							res.data.timeData = this.setTimeData(res.data.usable_time_arr)
+						}
+						this.swiper_data.push(res.data)
 					}
 				})
 			}
@@ -66,14 +277,65 @@
 </script>
 
 <style lang="scss" scoped>
-.box-b{
-	width: 100%;
-	height: 100vh;
-	background: orangered;
-}
-.max-w-200{
-	max-width: 200rpx;
-	background: rebeccapurple;
-	margin-right: 15rpx;
-}
+	.d{
+		width: 10rpx;
+		height: 10rpx;
+		border-radius: 50%;
+		background: #ccc;
+		margin-right: 20rpx;
+	}
+	.swiper-goods {
+		width: 100%;
+		height: 470rpx;
+		border-radius: 20rpx;
+	}
+
+	.swiper-item-goods {
+		display: block;
+		height: 470rpx;
+		border-radius: 20rpx;
+	}
+
+	.goods-img {
+		width: 100%;
+		height: 100%;
+		border-radius: 20rpx;
+	}
+
+	.active {
+		position: relative;
+		color: #57CAFF;
+		font-weight: 600;
+	}
+
+	.tab-scroll {
+		width: calc(100% - 62rpx);
+		white-space: nowrap;
+	}
+
+	.box-b {
+		width: 100%;
+		height: 100vh;
+		background: orangered;
+	}
+
+	.max-w-200 {
+		max-width: 310rpx;
+		// min-width: 200rpx;
+		text-align: center;
+		margin-right: 60rpx;
+		display: inline-block;
+	}
+
+	.max-w-200:last-child {
+		margin-right: 0;
+	}
+	.goods-info{
+		margin-bottom: 10rpx;
+	}
+	.goods-info:last-child{
+		padding-bottom: 10rpx;
+		margin-bottom: 10rpx;
+		border-bottom: 1rpx solid #F9F9F9;
+	}
 </style>

pages-buy/group-mod/shop-list.vue

@@ -14,7 +14,7 @@
 			</view>
 			<view class="item-right flex-1">
 				<view class="w-240 fs-34 fc-3 fw-600 mb-8 text-overflow-ellipsis-one">
-					{{item.shop_name}}电饭锅发的鬼地方东方闪电
+					{{item.shop_name}}
 				</view>
 				<view class="align-items-center flex-justify-space mb-4">
 					<view class="fs-24 fc-9 w-150 text-overflow-ellipsis">
@@ -41,8 +41,8 @@
 					<view class="mr-8 fc-9 fs-24 flex-shrink0 line-price">
 						￥{{goodsItem.line_price}}
 					</view>
-					<view class="fs-26 text-overflow-ellipsis-one">
-						{{goodsItem.title}}距离距离距离距离
+					<view class="fs-26 max-w-130 text-overflow-ellipsis-one">
+						{{goodsItem.title}}
 					</view>
 				</view>
 			</view>
@@ -93,6 +93,9 @@
 </script>
 
 <style lang="scss" scoped>
+	.max-w-130{
+		width: 200rpx;
+	}
 	.line-price{
 		text-decoration: line-through;
 	}

pages-buy/group-shop.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="flex-common-css">
+	<view class="flex-common-css iPhone-bottom">
 		<Nav :leftShow='false' :customNav='true' :bgckgroundBox='scrollTopNum>30?"#fff":"transparent"' class="nav-box">
 			<template>
 				<view slot="custom" class="align-items-center" @click="leftClick">
@@ -60,7 +60,7 @@
 						<view class="flex-1">
 							<view class="align-items-center mb-10">
 								<view class="fs-32 fs-32 flex-1 mr-16 text-overflow-ellipsis-one w-380">
-									{{item.title}}营业时间营业时间营业时间营业时间营业时间营业时间营业时间
+									{{item.title}}
 								</view>
 								<uni-icons type="right" size="16"></uni-icons>
 							</view>
@@ -145,7 +145,7 @@
 		methods: {
 			goToUrl(item) {
 				uni.navigateTo({
-					url: '/pages-buy/group-goods-info?shop_id=' + item.shop_id + '&gooods_id=' + item.id + '&shop_name=' + this.shopInfo.shop_name
+					url: '/pages-buy/group-goods-info?shop_id=' + item.shop_id + '&goods_id=' + item.id + '&shop_name=' + this.shopInfo.shop_name
 				});
 			},
 			leftClick() {

pages-takeout/takeout.vue

@@ -26,7 +26,7 @@
 					<view class="input-icon">
 						<uni-icons type="search" size="22" color="#999"></uni-icons>
 					</view>
-					<input v-model="search" type="text" @confirm='searchClick' confirm-type="search"
+					<input class="input-box" v-model="search" type="text" @confirm='searchClick' confirm-type="search"
 						placeholder="请输入商家或者商品名称">
 					<view class="fs-28 fc-f index-search-box-buttom" @click="searchClick">搜索</view>
 				</view>
@@ -352,7 +352,7 @@
 				background: #FFFFFF;
 				border-radius: 200rpx;
 				box-sizing: border-box;
-				padding: 0 20rpx 0 78rpx;
+				padding: 0 120rpx 0 78rpx;
 				border: 1rpx solid #41ABF5;
 			}
 		}
@@ -558,21 +558,21 @@
 		}
 	}
 
-	.index-search-box {
-		width: 100%;
-		height: 72rpx;
-		padding: 0 6rpx 0 24rpx;
-		border-radius: 200rpx;
-		border: 2rpx solid #4FB3EF;
-
-		.index-search-box-buttom {
-			width: 120rpx;
-			height: 60rpx;
-			background: linear-gradient(90deg, #57CAFF 0%, #41ABF5 100%);
-			border-radius: 200rpx;
-			margin-left: auto;
-			line-height: 60rpx;
-			text-align: center;
-		}
-	}
+	// .index-search-box {
+	// 	width: 100%;
+	// 	height: 72rpx;
+	// 	padding: 0 6rpx 0 24rpx;
+	// 	border-radius: 200rpx;
+	// 	border: 2rpx solid #4FB3EF;
+
+	// 	.index-search-box-buttom {
+	// 		width: 120rpx;
+	// 		height: 60rpx;
+	// 		background: linear-gradient(90deg, #57CAFF 0%, #41ABF5 100%);
+	// 		border-radius: 200rpx;
+	// 		margin-left: auto;
+	// 		line-height: 60rpx;
+	// 		text-align: center;
+	// 	}
+	// }
 </style>

pages.json

@@ -438,7 +438,7 @@
 		"list": [{
 				"name": "列表调试",
 				"path": "pages-buy/group-goods-info",
-				"query": "shop_id=23&gooods_id=7&shop_name=冒菜冒菜"
+				"query": "shop_id=23&goods_id=7&shop_name=冒菜冒菜"
 			},
 			{
 				"name": "店铺详情",