no message

api/shop.js

@@ -0,0 +1,26 @@
+import {request} from '../service/ajax.js'
+
+const newsUrl = '/api/shop/'
+// 获取置顶商家
+export const shopTop = (data) => request(newsUrl + 'top', 'post', { ...data },false)
+
+// 获取商家详情
+export const shopInfo = (data) => request(newsUrl + 'info', 'post', { ...data },false)
+
+// 获取可领优惠卷
+export const shopCoupon = (data) => request(newsUrl + 'coupon', 'post', { ...data },false)
+
+// 获取商家商品分类
+export const shopCategory = (data) => request(newsUrl + 'category', 'post', { ...data },false)
+
+// 获取商家商品列表
+export const shopGoods = (data) => request(newsUrl + 'goods', 'post', { ...data },false)
+
+// 获取商品规格
+export const shopGoodsSpec = (data) => request(newsUrl + 'goodsSpec', 'post', { ...data },false)
+
+// 下单是获取优惠卷
+export const shopOrderCoupon = (data) => request(newsUrl + 'orderCoupon', 'post', { ...data },false)
+
+// 获取评论列表
+export const shopComment = (data) => request(newsUrl + 'comment', 'post', { ...data },false)

pages-takeout/shop-mod/menu.vue

@@ -8,7 +8,6 @@
 					<view class="menu-type-num fc-f" v-show="item.num > 0">{{item.num > 99?'99+':item.num}}</view>
 				</view>
 			</view>
-			
 		</scroll-view>
 		
 		<scroll-view scroll-y="true" :scroll-with-animation='true' :scroll-into-view="idMark" @scroll="menuScroll">

pages-takeout/shop.vue

@@ -1,64 +1,66 @@
 <template>
 	<view class="shop-index iPhone-bottom flex-common-css box-border-box">
-		<image class="bg-img" src="@/static/img/my/lqzx-bg.png" mode="scaleToFill"></image>
-		
+		<image class="bg-img" :src="shopsInfo.shop_logo" mode="aspectFill"></image>
+
 		<view class="nav-box">
 			<Nav :leftShow='false' :customNav='true' bgckgroundBox='transparent'>
 				<template>
 					<view slot="custom" class="">
-						<image class="nav-img" @click="toBack()" src="@/static/img/takeout/bg-back.png" mode="scaleToFill"></image>
+						<image class="nav-img" @click="toBack()" src="@/static/img/takeout/bg-back.png"
+							mode="scaleToFill"></image>
 					</view>
 				</template>
 			</Nav>
 		</view>
-		
+
 		<view class="head-box bgc-f box-border-box plr-24" :style="{height:domHeigjt + 'rpx'}">
 			<view id="shopInfoBox" class="shop-info-box bgc-f box-border-box p-24">
 				<view class="info-box-top flex-justify-space">
 					<view class="box-top-left">
-						<view class="top-left-1 fs-40 fw-600 text-overflow-ellipsis-one">猪油拌猪油拌饭猪油拌猪油拌饭猪油拌饭猪油拌（回兴店）</view>
+						<view class="top-left-1 fs-40 fw-600 text-overflow-ellipsis-one">{{shopsInfo.shop_name}}
+						</view>
 						<view class="align-items-center mb-8">
 							<image class="img-x mr-12" src="@/static/img/my/wdpj.png" mode=""></image>
-							<view class="fs-26 fw-600 fc-FF7F00 mr-12">4.5分</view>
-							<view class="fc-6 fs-24 mr-12">| 预计38分钟 |</view>
-							<view class="fc-6 fs-24 mr-12">855人购买</view>
+							<view class="fs-26 fw-600 fc-FF7F00 mr-12">{{shopsInfo.shop_score}}分</view>
+							<view class="fc-6 fs-24 mr-12">| 预计{{shopsInfo.delivery_time}}分钟 |</view>
+							<view class="fc-6 fs-24 mr-12">{{shopsInfo.shop_sales}}人购买</view>
 						</view>
 					</view>
-					<image class="box-top-right" src="@/static/img/my/bg.png" mode="scaleToFill"></image>
+					<image class="box-top-right" :src="shopsInfo.shop_logo" mode="scaleToFill"></image>
 				</view>
-				<view class="fs-24 fw-400 fc-9 mb-20">
-					公告：公告内容公告内容公告内容公告内容公告内11容公公告内容公告内容公告内容公告内容公告内公告内容公告内容公告内容公告内容公告内
+				<view class="fs-24 fw-400 fc-9 mb-20 text-overflow-ellipsis-one">
+					公告：{{shopsInfo.notice}}
 				</view>
 				<view class="flex-wrap-wrap">
-					<view class="info-box-quan-list" v-for="(item,i) in 4" :key="i" @click="openCoupon">
+					<view class="info-box-quan-list" v-for="(item,i) in couponData" :key="i" @click="openCoupon">
 						<image src="@/static/img/takeout/quan-bg.png" mode=""></image>
 						<view class="quan-list-1 fw-b fs-32 fc-f">
-							<span class="fw-b fs-20 fc-f">￥</span>10</view>
+							<span class="fw-b fs-20 fc-f">￥</span>{{item.money}}
+						</view>
 						<view class="quan-list-2 fw-400 fs-24 fc-f">领</view>
 					</view>
 				</view>
 			</view>
 		</view>
-		
+
 		<view class="head-box-1 bgc-f box-border-box plr-24">
 			<view class="align-items-center shop-type-list">
 				<view class="shop-item fs-32" @click="seletShopType(item)"
-				:class="shopType === item.id?'s-item':'n-item'"
-				v-for="(item,i) in shopTypeList" :key="i">
+					:class="shopType === item.id?'s-item':'n-item'" v-for="(item,i) in shopTypeList" :key="i">
 					{{item.name}}
 					<view v-if="item.id == 2" class="pj-num" :class="shopType === item.id?'s-item':'n-item'">999+</view>
 				</view>
 				<view class="shop-item-bs" :style="{left:shopTypeBsLeft+'rpx'}"></view>
 			</view>
 		</view>
-		
-		
+
+
 		<view class="common-view-css bgc-f" style="overflow: hidden;">
 			<Menu style="height: 100%;" v-if="shopType === 1"></Menu>
 			<Evaluate style="height: 100%;" v-else-if="shopType === 2"></Evaluate>
 			<ShopInfo style="height: 100%;" v-else-if="shopType === 3"></ShopInfo>
 		</view>
-		
+
 		<view class="shop-buttom-money box-border-box" @click="openBuyCrad()">
 			<view class="shop-buttom-money-1 flex-justify-space align-items-center">
 				<image src="@/static/img/takeout/buy-icon.png" mode="scaleToFill"></image>
@@ -75,7 +77,7 @@
 				<!-- <view class="shop-buttom-money-2 text-align-center fc-f fs-32 fw-600">去结算</view> -->
 			</view>
 		</view>
-		
+
 		<uni-popup ref="popupBuy" type="bottom">
 			<view class="buy-card flex-index-css">
 				<view class="buy-card-top box-border-box plr-32 flex-justify-space align-items-center">
@@ -94,9 +96,10 @@
 					<view class="buy-card-item display-flex" v-for="(item,i) in 5" :key="i">
 						<image src="@/static/img/my/bg.png" mode="scaleToFill"></image>
 						<view class="flex-1">
-							<view class="w-514 text-overflow-ellipsis-one fs-34 fw-600 mb-12">[畅销款]奥尔1良烤肉牛油拌饭拌饭[畅销款]奥尔1良烤肉牛油拌饭拌饭</view>
+							<view class="w-514 text-overflow-ellipsis-one fs-34 fw-600 mb-12">
+								[畅销款]奥尔1良烤肉牛油拌饭拌饭[畅销款]奥尔1良烤肉牛油拌饭拌饭</view>
 							<view class="w-514 text-overflow-ellipsis-one fs-24 fw-400 fc-9 mb-18">不辣，加辣</view>
-							
+
 							<view class="flex-justify-space">
 								<view class="">
 									<span class="fs-24 fc-FB3D03 fw-400">￥</span>
@@ -111,7 +114,7 @@
 						</view>
 					</view>
 				</view>
-				
+
 				<view class="shop-buttom-money box-border-box" @click="createOrder()">
 					<view class="shop-buttom-money-1 flex-justify-space align-items-center">
 						<image src="@/static/img/takeout/buy-icon.png" mode="scaleToFill"></image>
@@ -125,20 +128,19 @@
 							<view class="fs-24 fc-ff3939">配送费￥10</view>
 						</view>
 						<!-- <view class="fs-32 fw-600 fc-f mr-30">20元起送</view> -->
-						<view class="shop-buttom-money-2 text-align-center fs-32 fc-f fw-600" @click="toConfirmOrder()">去结算</view>
+						<view class="shop-buttom-money-2 text-align-center fs-32 fc-f fw-600" @click="toConfirmOrder()">
+							去结算</view>
 					</view>
 				</view>
 			</view>
 		</uni-popup>
-		
+
 		<uni-popup ref="popupCoupon" type="bottom">
 			<view class="pop-coupon box-border-box p-24">
 				<view class="text-align-center fs-36 fw-600 box-title mb-32">
 					本店优惠券
 					<uni-icons @click="closeCoupon" class="box-close" type="closeempty" size="20"></uni-icons>
 				</view>
-				<view class="fs-28 fw-400 mb-24">免费领券</view>
-				
 				<view class="scroll-view-css">
 					<view class="item-box display-flex mb-20" v-for="(item,index) in 10" :key="index">
 						<view class="item-right flex-direction flex-justify-center flex-1 bgc-f">
@@ -175,106 +177,155 @@
 	import Menu from './shop-mod/menu.vue';
 	import Evaluate from './shop-mod/evaluate.vue';
 	import ShopInfo from './shop-mod/info.vue';
-	
 	import tools from "@/service/tools";
+	import {
+		shopInfo,
+		shopCoupon
+	} from "@/api/shop.js"
 	export default {
-		components:{Menu,Evaluate,ShopInfo},
-		data(){
-			return{
-				domHeigjt:224,
-				shopTypeList:[{name:"点菜",id:1},{name:"评价",id:2},{name:"店铺",id:3},],
-				shopType:1,//组件类型
-				shopTypeBsLeft:12,
+		components: {
+			Menu,
+			Evaluate,
+			ShopInfo
+		},
+		data() {
+			return {
+				domHeigjt: 224,
+				shopTypeList: [{
+					name: "点菜",
+					id: 1
+				}, {
+					name: "评价",
+					id: 2
+				}, {
+					name: "店铺",
+					id: 3
+				}, ],
+				shopType: 1, //组件类型
+				shopTypeBsLeft: 12,
+				shop_id: '',
+				shopsInfo: {},
+				couponData: [] // 可领优惠卷
 			}
 		},
 		onLoad(e) {
-			
+			if (e) {
+				this.shop_id = e.shop_id
+				this.shopInfo()
+			}
 		},
 		mounted() {
 			this.getDomH();
+			this.shopCoupon()
 		},
-		methods:{
-			toBack(){
+		methods: {
+			toBack() {
 				tools.leftClick()
 			},
-			getDomH(){
+			getDomH() {
 				let info = uni.createSelectorQuery().select('#shopInfoBox');
-				info.boundingClientRect((data)=>{
+				info.boundingClientRect((data) => {
 					this.domHeigjt = data.height * 2 - 34
 				}).exec()
 			},
-			
-			scrolltolower(){
+
+			scrolltolower() {
 				console.log('触底');
 			},
-			seletShopType(item){
-				if(this.shopType!=item.id){
+			seletShopType(item) {
+				if (this.shopType != item.id) {
 					this.shopType = item.id;
-					if(this.shopType == 1){
+					if (this.shopType == 1) {
 						this.shopTypeBsLeft = 12
-					}else if(this.shopType == 2){
+					} else if (this.shopType == 2) {
 						this.shopTypeBsLeft = 166
-					}else{
-						this.shopTypeBsLeft = 160*2
+					} else {
+						this.shopTypeBsLeft = 160 * 2
 					}
 				}
 			},
-			openBuyCrad(){
+			openBuyCrad() {
 				this.$refs.popupBuy.open()
 			},
-			createOrder(){
-				
+			createOrder() {
+
 			},
-			
-			openCoupon(){
+
+			openCoupon() {
 				this.$refs.popupCoupon.open()
 			},
-			closeCoupon(){
+			closeCoupon() {
 				this.$refs.popupCoupon.close()
 			},
-			toConfirmOrder(){
+			toConfirmOrder() {
 				uni.navigateTo({
-					url:'/pages-takeout/confirm-order'
+					url: '/pages-takeout/confirm-order'
 				})
 			},
+			shopInfo() {
+				const operate_id = uni.getStorageSync('operate_id')
+				shopInfo({
+					operate_id: operate_id,
+					shop_id: this.shop_id
+				}).then((res) => {
+					if (res.code == 1) {
+						this.shopsInfo = res.data
+					}
+				})
+			},
+			shopCoupon() {
+				const operate_id = uni.getStorageSync('operate_id')
+				shopCoupon({
+					operate_id: operate_id,
+					shop_id: this.shop_id
+				}).then((res) => {
+					if (res.code == 1) {
+						this.couponData = res.data
+					}
+				})
+			}
 		},
 	}
 </script>
 
 <style scoped lang="scss">
-	.pop-coupon{
+	.pop-coupon {
 		width: 100%;
-		height: 40vh;
+		height: 42vh;
 		background-color: #F5F4F9;
 		border-radius: 24rpx 24rpx 0rpx 0rpx;
 		padding-top: 32rpx !important;
 		display: flex;
 		flex-direction: column;
-		.box-title{
+
+		.box-title {
 			position: relative;
-			.box-close{
+
+			.box-close {
 				position: absolute;
 				right: 22rpx;
 			}
 		}
+
 		.item-right {
 			padding: 24rpx;
 			box-sizing: border-box;
 			border-radius: 20rpx 0 0 20rpx;
 			position: relative;
 		}
+
 		.item-hr {
 			width: 0px;
 			height: auto;
 			border-right: 1rpx dashed #FB7850;
 		}
-		
+
 		.item-hr-two {
 			width: 0px;
 			height: auto;
 			border-right: 1rpx dashed #999;
 		}
-		
+
 		.item-left {
 			width: 200rpx;
 			height: auto;
@@ -283,6 +334,7 @@
 			position: relative;
 			border-radius: 0 20rpx 20rpx 0;
 		}
+
 		.but-box {
 			width: 152rpx;
 			height: 52rpx;
@@ -291,6 +343,7 @@
 			background: linear-gradient(225deg, #FB3D03 0%, #FF6901 100%);
 			border-radius: 200rpx;
 		}
+
 		.ball {
 			width: 24rpx;
 			height: 24rpx;
@@ -301,7 +354,7 @@
 			background: #F5F5F5;
 			z-index: 2;
 		}
-		
+
 		.ball-two {
 			width: 24rpx;
 			height: 24rpx;
@@ -313,11 +366,12 @@
 			left: -12rpx;
 		}
 	}
-	
-	
-	.shop-index{
+
+
+	.shop-index {
 		position: relative;
-		.right-only-right-red{
+
+		.right-only-right-red {
 			width: 44rpx;
 			height: 44rpx;
 			line-height: 40rpx;
@@ -325,20 +379,24 @@
 			border: 1rpx solid #41ABF5;
 			color: #41ABF5;
 		}
-		.right-only-right-add{
+
+		.right-only-right-add {
 			width: 44rpx;
 			height: 44rpx;
 			line-height: 40rpx;
-			background: linear-gradient( 117deg, #57CAFF 0%, #41ABF5 100%);
+			background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
 			border-radius: 12rpx;
 		}
-		.right-only-right-2{
+
+		.right-only-right-2 {
 			min-width: 50rpx;
 		}
-		.w-514{
+
+		.w-514 {
 			width: 514rpx;
 		}
-		.bg-img{
+
+		.bg-img {
 			position: absolute;
 			top: 0;
 			left: 0;
@@ -346,20 +404,23 @@
 			height: 280rpx;
 			z-index: -1;
 		}
-		.nav-box{
+
+		.nav-box {
 			margin-bottom: 110rpx;
-			.nav-img{
+
+			.nav-img {
 				width: 56rpx;
 				height: 56rpx;
 			}
 		}
-		
-		.shop-buttom-money{
+
+		.shop-buttom-money {
 			width: 100%;
 			height: 140rpx;
-			background: rgba(255,255,255,0.8);
+			background: rgba(255, 255, 255, 0.8);
 			padding: 20rpx 24rpx;
-			.shop-buttom-money-1{
+
+			.shop-buttom-money-1 {
 				width: 100%;
 				height: 100%;
 				background: #333333;
@@ -368,14 +429,16 @@
 				padding-left: 136rpx;
 				// padding-right: 32rpx;
 				position: relative;
-				image{
+
+				image {
 					position: absolute;
 					bottom: 0;
 					left: 8rpx;
 					width: 128rpx;
 					height: 128rpx;
 				}
-				.shop-buttom-num{
+
+				.shop-buttom-num {
 					width: 32rpx;
 					height: 32rpx;
 					line-height: 32rpx;
@@ -385,7 +448,8 @@
 					top: 36rpx;
 					left: 82rpx;
 				}
-				.shop-buttom-money-2{
+
+				.shop-buttom-money-2 {
 					width: 200rpx;
 					height: 100rpx;
 					line-height: 100rpx;
@@ -394,72 +458,83 @@
 				}
 			}
 		}
-		
-		
-		.head-box{
+
+
+		.head-box {
 			width: 100%;
 			position: relative;
-			.shop-info-box{
+
+			.shop-info-box {
 				position: absolute;
 				top: -50rpx;
 				left: 24rpx;
 				width: 702rpx;
 				min-height: 258rpx;
 				border-radius: 20rpx;
-				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.1);
-				.info-box-top{
-					.box-top-left{
-						.top-left-1{
+				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
+
+				.info-box-top {
+					.box-top-left {
+						.top-left-1 {
 							width: 480rpx;
 							margin-bottom: 8rpx;
 						}
-						.img-x{
+
+						.img-x {
 							width: 24rpx;
 							height: 24rpx;
 						}
 					}
-					.box-top-right{
+
+					.box-top-right {
 						width: 100rpx;
 						height: 100rpx;
 						border-radius: 12rpx;
 					}
 				}
-				.info-box-quan-list{
-					width: 124rpx;
+
+				.info-box-quan-list {
+					width: 164rpx;
 					height: 48rpx;
 					margin: 0 8rpx 8rpx 0;
 					position: relative;
-					image{
-						width: 124rpx;
+
+					image {
+						width: 164rpx;
 						height: 48rpx;
 						position: absolute;
 						top: 0;
 						left: 0;
 						z-index: 1;
 					}
-					.quan-list-1{
+
+					.quan-list-1 {
 						position: absolute;
 						top: 3rpx;
 						left: 8rpx;
 						z-index: 2;
 					}
-					.quan-list-2{
+
+					.quan-list-2 {
 						position: absolute;
 						top: 8rpx;
-						right: 12rpx;
+						right: 22rpx;
 						z-index: 2;
 					}
 				}
 			}
 		}
-		.head-box-1{
+
+		.head-box-1 {
 			width: 100%;
 			height: 88rpx;
 			border-bottom: 1rpx solid #eee;
-			.shop-type-list{
+
+			.shop-type-list {
 				height: 88rpx;
 				position: relative;
-				.shop-item-bs{
+
+				.shop-item-bs {
 					position: absolute;
 					bottom: 0;
 					width: 40rpx;
@@ -468,10 +543,12 @@
 					background-color: #41ABF5;
 					transition: left 0.5s;
 				}
-				.shop-item{
+
+				.shop-item {
 					margin-right: 90rpx;
 					position: relative;
-					.pj-num{
+
+					.pj-num {
 						position: absolute;
 						right: -80rpx;
 						top: 0;
@@ -479,30 +556,37 @@
 						width: 80rpx;
 					}
 				}
-				.s-item{
+
+				.s-item {
 					font-weight: 600;
+					color: 333;
 				}
-				.n-item{
+
+				.n-item {
 					font-weight: 400;
-					color: #666666;
+					color: #999;
 				}
 			}
 		}
-		.buy-card{
+
+		.buy-card {
 			height: 828rpx;
 			background-color: #fff;
 			border-radius: 24rpx 24rpx 0rpx 0rpx;
-			.buy-card-top{
+
+			.buy-card-top {
 				width: 100%;
 				height: 92rpx;
 				background: #FCF5DB;
 				border-radius: 24rpx 24rpx 0rpx 0rpx;
 			}
-			.buy-card-item{
+
+			.buy-card-item {
 				width: 100%;
 				height: 176rpx;
 				margin-bottom: 32rpx;
-				image{
+
+				image {
 					width: 152rpx;
 					height: 152rpx;
 					border-radius: 12rpx;
@@ -510,6 +594,6 @@
 				}
 			}
 		}
-		
+
 	}
 </style>

pages-takeout/takeout.vue

@@ -1,374 +1,492 @@
-<template>
-	<view class="takeout-index iPhone-bottom flex-common-css box-border-box">
-		<view class="bg-index"></view>
-		
-		<view class="">
-			<Nav :leftShow='false' :customNav='true' :bgckgroundBox='bgckgroundBox'>
-				<template>
-					<view slot="custom" class="">
-						<view class="align-items-center mb-28 s-input-f">
-							<uni-icons @click="toBack()" type="left" size="20"></uni-icons>
-							<view v-if="!isScroll" class="fs-40 ml-10 fw-600">外卖</view>
-							<view v-else class="s-input s-input-c" :class="isScroll?'w-454':'w-100100'">
-								<view class="input-icon s-left">
-									<uni-icons type="search" size="22" color="#999"></uni-icons>
-								</view>
-								<input v-model="search" type="text" placeholder="请输入商家或者商品名称">
-							</view>
-						</view>
-					</view>
-				</template>
-			</Nav>
-		</view>
-		
-		<scroll-view scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower" @scroll="scrollFun">
-			<view class="">
-				<view class="s-input box-border-box plr-24">
-					<view class="input-icon">
-						<uni-icons type="search" size="22" color="#999"></uni-icons>
-					</view>
-					<input v-model="search" type="text" placeholder="请输入商家或者商品名称">
-				</view>
-				
-				<view class="box-border-box plr-24">
-					<view class="shop-box mb-32 box-border-box p-16">
-						<image class="shop-box-bg" src="@/static/img/takeout/bg.png" mode="scaleToFill"></image>
-						
-						<swiper class="swiper-tj" :circular='false' 
-						indicator-active-color='#FF7F00' indicator-color='#FDC583'
-						:indicator-dots="false" :current='BanenerCurrent' @change="onSwiperChange"
-						:autoplay="true" :interval="3000" :duration="300">
-							<swiper-item v-for="(item,i) in 4" :key="i" @click="toShop(item)">
-								<view class="swiper-item display-flex">
-									<image class="left-img" src="@/static/img/my/bg.png" mode="scaleToFill"></image>
-									<view class="right-box flex-1">
-										<view class="align-items-center mb-8">
-											<view class="right-box-title fs-32 fw-600 text-overflow-ellipsis-one">蜜雪冰城（重工页店）122332323232323232323232</view>
-											<image class="right-box-title-img" src="@/static/img/toRight.png" mode=""></image>
-										</view>
-										<view class="align-items-center mb-12">
-											<image class="img-x mr-12" src="@/static/img/my/wdpj.png" mode=""></image>
-											<view class="fs-26 fw-600 fc-FF7F00 mr-12">4.5分</view>
-											<view class="fc-6 fs-24 mr-12">| 预计{{BanenerCurrent}}分钟 |</view>
-											<view class="fc-6 fs-24 mr-12">855人购买</view>
-										</view>
-										<view class="align-items-center flex-wrap-wrap">
-											<view class="quan-list display-flex mr-12 mb-12" v-for="(item,i) in 3" :key="i">
-												<view class="quan-list-1 fs-24 fc-f">券</view>
-												<view class="quan-list-2 fs-24 fc-FB3D03">10元</view>
-											</view>
-										</view>
-									</view>
-								</view>
-							</swiper-item>
-						</swiper>
-						<view class="align-items-center dot-f">
-							<view :class="BanenerCurrent === i?'dot-box-s':'dot-box'" v-for="(item,i) in 4" :key="i"></view>
-						</view>
-					</view>
-				</view>
-				
-				<view class="box-border-box plr-24 nav-type-box-f" :class="isScroll?'nav-bg':''">
-					<view class="nav-type-box" >
-						<view class="nav-type-list">
-							<image src="@/static/img/takeout/all.png" mode=""></image>
-							<view class="fs-24 fw-400 text-align-center">全部</view>
-						</view>
-						<view class="nav-type-list" v-for="(item,i) in navList" :key="i">
-							<image :src="item.img" mode=""></image>
-							<view class="fs-24 fw-400">{{item.name}}</view>
-						</view>
-					</view>
-				</view>
-				
-				
-				
-				<view class="box-border-box plr-24 mt-24">
-					<view class="goos-list-box box-border-box p-24 display-flex" v-for="(item,i) in 10">
-						<image class="left-img" src="@/static/img/my/bg.png" mode="scaleToFill"></image>
-						<view class="flex-1">
-							<view class="align-items-center mb-8">
-								<view class="right-box-title fs-32 fw-600 text-overflow-ellipsis-one">蜜雪冰城（重工页店）122332323232323232323232</view>
-								<image class="right-box-title-img" src="@/static/img/toRight.png" mode=""></image>
-							</view>
-							<view class="align-items-center mb-8">
-								<image class="img-x mr-12" src="@/static/img/my/wdpj.png" mode=""></image>
-								<view class="fs-26 fw-600 fc-FF7F00 mr-12">4.5分</view>
-								<view class="fc-6 fs-24 mr-12">| 预计38分钟 |</view>
-								<view class="fc-6 fs-24 mr-12">855人购买</view>
-							</view>
-							<view class="align-items-center flex-wrap-wrap">
-								<view class="quan-list display-flex mr-12 mb-12" v-for="(item,i) in 3" :key="i">
-									<view class="quan-list-1 fs-24 fc-f">券</view>
-									<view class="quan-list-2 fs-24 fc-FB3D03">10元</view>
-								</view>
-							</view>
-							<view class="goods-items-list display-flex">
-								<view class="goods-items-list-box" v-for="(info,i) in 10">
-									<image class="mb-12" src="@/static/img/my/bg.png" mode=""></image>
-									<view class="mb-8 fw-600 text-overflow-ellipsis-one fs-26">AAAAAAAAAAAAAA</view>
-									<view class="">
-										<span class="fs-24 fc-FB3D03">￥</span>
-										<span class="fs-32 fc-FB3D03 fw-b">3.99</span>
-									</view>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-				
-			</view>
-		</scroll-view>
-	</view>
-</template>
-
-<script>
-	import tools from "@/service/tools";
-	export default {
-		data(){
-			return{
-				bgckgroundBox:'transparent',
-				BanenerCurrent:0,
-				search:'',
-				isScroll:false,
-				navList:[{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
-				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
-				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
-				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
-				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
-				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
-				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
-				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},
-				{name:"汉堡薯条",img:require('@/static/img/index/index-wm.png')},],
-			}
-		},
-		onShow() {
-			
-		},
-		methods:{
-			toBack(){
-				tools.leftClick()
-			},
-			onSwiperChange(e){
-				this.BanenerCurrent = e.detail.current;
-			},
-			scrollFun(e){
-				if(e.target.scrollTop>50){
-					this.isScroll = true;
-				}else{
-					this.isScroll = false;
-				}
-			},
-			scrolltolower(){
-				console.log('触底');
-			},
-			toShop(item){
-				uni.navigateTo({
-					url:'/pages-takeout/shop'
-				})
-			},
-		},
-	}
-</script>
-
-<style scoped lang="scss">
-	.takeout-index{
-		position: relative;
-		
-		.s-input-f{
-			position: relative;
-			.s-input-c{
-				position: absolute;
-				top: -16rpx;
-				left: 50rpx;
-			}
-		}
-		
-		.bg-index{
-			width: 100%;
-			height: 272rpx;
-			position: absolute;
-			top: 0;
-			left: 0;
-			background-image: linear-gradient(#E0F6FB,#F5F4F9);
-			z-index: -1;
-		}
-		
-		.w-100100{
-			width: 100%;
-		}
-		.w-454{
-			width: 454rpx;
-		}
-		
-		.s-input{
-			margin-bottom: 24rpx;
-			height: 72rpx;
-			box-sizing: border-box;
-			position: relative;
-			
-			.s-left{
-				left: 24rpx !important;
-			}
-			
-			.input-icon{
-				position: absolute;
-				left: 44rpx;
-				top: 16rpx;
-			}
-			input{
-				font-size: 32rpx;
-				width: 100%;
-				height: 72rpx;
-				background: #FFFFFF;
-				border-radius: 200rpx;
-				box-sizing: border-box;
-				padding: 0 20rpx 0 78rpx;
-				border: 1rpx solid #41ABF5;
-			}
-		}
-		.shop-box{
-			width: 100%;
-			height: 242rpx;
-			position: relative;
-			
-			.shop-box-bg{
-				width: 100%;
-				height: 242rpx;
-				position: absolute;
-				top: 0;
-				left: 0;
-				z-index: -1;
-			}
-			.swiper-tj{
-				width: 100%;
-				height: 172rpx;
-				border-radius: 20rpx;
-				.swiper-item{
-					width: 100%;
-					height: 100%;
-					border-radius: 20rpx;
-					background-color: #fff;
-					box-sizing: border-box;
-					padding: 16rpx;
-					.left-img{
-						width: 140rpx;
-						height: 140rpx;
-						border-radius: 14rpx
-					}
-					.right-box{
-						
-					}
-				}
-			}
-			.dot-f{
-				margin: 20rpx auto;
-				justify-content: center;
-				.dot-box{
-					width: 8rpx;
-					height: 6rpx;
-					background: #FEC683;
-					border-radius: 200rpx;
-					margin: 0 6rpx;
-				}
-				.dot-box-s{
-					width: 16rpx;
-					height: 6rpx;
-					background: #FF7F00;
-					border-radius: 200rpx;
-					margin: 0 6rpx;
-				}
-			}
-			
-		}
-		
-		.nav-bg{
-			background-image: linear-gradient(#F0F4FA,#FFFFFF);
-			padding: 24rpx !important;
-		}
-		.nav-type-box-f{
-			position: sticky;
-			top: 0;
-			left: 0;
-			
-			.nav-type-box{
-				width: 100%;
-				height: 120rpx;
-				display: flex;
-				overflow: scroll;
-				.nav-type-list{
-					height: 120rpx;
-					width: 96rpx !important;
-					text-align: center;
-					margin-right: 44rpx;
-					image{
-						display: block;
-						width: 80rpx;
-						height: 80rpx;
-						margin: 0 8rpx 12rpx 8rpx;
-					}
-				}
-			}
-		}
-		
-		
-		.goos-list-box{
-			width: 100%;
-			min-height: 428rpx;
-			background: #FFFFFF;
-			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51,51,51,0.1);
-			border-radius: 20rpx;
-			margin-bottom: 20rpx;
-			.goods-items-list{
-				width: 530rpx;
-				overflow-y: scroll;
-				.goods-items-list-box{
-					width: 140rpx;
-					margin-right: 16rpx;
-					image{
-						width: 140rpx;
-						height: 140rpx;
-						border-radius: 12rpx
-					}
-				}
-			}
-			
-		}
-		
-		.left-img{
-			width: 100rpx;
-			height: 100rpx;
-			border-radius: 12rpx;
-			margin-right: 16rpx;
-		}
-		.img-x{
-			width: 24rpx;
-			height: 24rpx;
-		}
-		.right-box-title{
-			width: 438rpx;
-		}
-		.right-box-title-img{
-			width: 32rpx;
-			height: 32rpx;
-			margin-left: auto;
-		}
-		.quan-list{
-			.quan-list-1{
-				width: 32rpx;
-				height: 34rpx;
-				background: #FB3D03;
-				border-radius: 5rpx 0rpx 0rpx 5rpx;
-				text-align: center;
-			}
-			.quan-list-2{
-				box-sizing: border-box;
-				padding: 0 2rpx;
-				height: 34rpx;
-				border-radius: 0 5rpx 5rpx 0;
-				border: 1rpx solid #FB3D03;
-				text-align: center;
-			}
-		}
-	}
+<template>
+	<view class="takeout-index iPhone-bottom flex-common-css box-border-box">
+		<view class="bg-index"></view>
+
+		<view class="">
+			<Nav :leftShow='false' :customNav='true' :bgckgroundBox='bgckgroundBox'>
+				<template>
+					<view slot="custom" class="">
+						<view class="align-items-center mb-28 s-input-f">
+							<uni-icons @click="toBack()" type="left" size="20"></uni-icons>
+							<view v-if="!isScroll" class="fs-40 ml-10 fw-600">外卖</view>
+							<view v-else class="s-input s-input-c" :class="isScroll?'w-454':'w-100100'">
+								<view class="input-icon s-left">
+									<uni-icons type="search" size="22" color="#999"></uni-icons>
+								</view>
+								<input v-model="search" type="text" placeholder="请输入商家或者商品名称">
+							</view>
+						</view>
+					</view>
+				</template>
+			</Nav>
+		</view>
+
+		<scroll-view scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower" @scroll="scrollFun">
+			<view class="">
+				<view class="s-input box-border-box plr-24">
+					<view class="input-icon">
+						<uni-icons type="search" size="22" color="#999"></uni-icons>
+					</view>
+					<input v-model="search" type="text" placeholder="请输入商家或者商品名称">
+					<view class="fs-28 fc-f index-search-box-buttom">搜索</view>
+				</view>
+				<!-- 			<view class="p-24 box-border-box">
+					<view class="index-search-box box-border-box align-items-center">
+						<uni-icons type="search" size="22" color="#999"></uni-icons>
+						<view class="fs-28 fc-9 ml-10">搜索店铺名称或者商品名称</view>
+						<view class="fs-28 fc-f index-search-box-buttom">搜索</view>
+					</view>
+				</view> -->
+
+				<view class="box-border-box plr-24">
+					<view class="shop-box mb-32 box-border-box p-16">
+						<image class="shop-box-bg" src="@/static/img/takeout/bg.png" mode="scaleToFill"></image>
+
+						<swiper class="swiper-tj" :circular='false' indicator-active-color='#FF7F00'
+							indicator-color='#FDC583' :indicator-dots="false" :current='BanenerCurrent'
+							@change="onSwiperChange" :autoplay="true" :interval="3000" :duration="300">
+							<swiper-item v-for="(item,i) in topShopData" :key="i" @click="toShop(item)">
+								<view class="swiper-item display-flex">
+									<image class="left-img" :src="item.shop_logo" mode="scaleToFill"></image>
+									<view class="right-box flex-1">
+										<view class="align-items-center mb-8">
+											<view class="right-box-title fs-32 fw-600 text-overflow-ellipsis-one">
+												{{item.shop_name}}</view>
+											<image class="right-box-title-img" src="@/static/img/toRight.png" mode="">
+											</image>
+										</view>
+										<view class="align-items-center mb-12">
+											<image class="img-x mr-12" src="@/static/img/my/wdpj.png" mode=""></image>
+											<view class="fs-26 fw-600 fc-FF7F00 mr-12">{{item.shop_score}}分</view>
+											<view class="fc-6 fs-24 mr-12">| 预计{{item.delivery_time}}分钟 |</view>
+											<view class="fc-6 fs-24 mr-12">{{item.shop_sales}}人购买</view>
+										</view>
+										<view class="align-items-center flex-wrap-wrap">
+											<view class="quan-list display-flex mr-12 mb-12" v-for="(itemCoupon,iCoupon) in item.coupon"
+												:key="i">
+												<view class="quan-list-1 fs-24 fc-f">券</view>
+												<view class="quan-list-2 fs-24 fc-FB3D03">{{itemCoupon.money}}元</view>
+											</view>
+										</view>
+									</view>
+								</view>
+							</swiper-item>
+						</swiper>
+						<view class="align-items-center dot-f">
+							<view :class="BanenerCurrent === i?'dot-box-s':'dot-box'" v-for="(item,i) in topShopData" :key="i">
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<view class="box-border-box plr-24 nav-type-box-f" :class="isScroll?'nav-bg':''">
+					<view class="nav-type-box">
+						<view class="nav-type-list" @click="clickClass(0)">
+							<image src="@/static/img/takeout/all.png" mode=""></image>
+							<view :class="category_id == 0?'fc-41ABF5':''" class="fs-24 fw-400 text-align-center">全部
+							</view>
+						</view>
+						<view class="nav-type-list" v-for="(item,i) in navList" :key="i" @click="clickClass(item.id)">
+							<image :src="item.img" mode=""></image>
+							<view class="fs-24 fw-400" :class="category_id == item.id?'fc-41ABF5':''">{{item.name}}
+							</view>
+						</view>
+					</view>
+				</view>
+
+
+
+				<view class="box-border-box plr-24 mt-24">
+					<view class="goos-list-box box-border-box p-24 display-flex" v-for="(item,i) in listData">
+						<image class="left-img" :src="item.shop_logo" mode="scaleToFill"></image>
+						<view class="flex-1">
+							<view class="align-items-center mb-8">
+								<view class="right-box-title fs-32 fw-600 text-overflow-ellipsis-one">
+									{{item.shop_name}}
+								</view>
+								<image class="right-box-title-img" src="@/static/img/toRight.png" mode=""></image>
+							</view>
+							<view class="align-items-center mb-8">
+								<image class="img-x mr-12" src="@/static/img/my/wdpj.png" mode=""></image>
+								<view class="fs-26 fw-600 fc-FF7F00 mr-12">{{item.shop_score}}分</view>
+								<view class="fc-6 fs-24 mr-12">| 预计{{item.delivery_time}}分钟 |</view>
+								<view class="fc-6 fs-24 mr-12">{{item.shop_sales}}人购买</view>
+							</view>
+							<view class="align-items-center flex-wrap-wrap">
+								<view class="quan-list display-flex mr-12 mb-12"
+									v-for="(itemCoupon,iCoupon) in item.coupon" :key="i">
+									<view class="quan-list-1 fs-24 fc-f">券</view>
+									<view class="quan-list-2 fs-24 fc-FB3D03">{{itemCoupon.money}}元</view>
+								</view>
+							</view>
+
+							<view class="goods-items-list display-flex view-nowrap">
+								<view class="goods-items-list-box" v-for="(info,iGoods) in item.goods">
+									<image class="mb-12" :src="info.goods_image" mode=""></image>
+									<view class="mb-8 fw-600 text-overflow-ellipsis-one fs-26">{{info.goods_name}}
+									</view>
+									<view class="">
+										<span class="fs-24 fc-FB3D03">￥</span>
+										<span class="fs-32 fc-FB3D03 fw-b">{{info.price}}</span>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import {
+		shopTop
+	} from "@/api/shop.js"
+	import {
+		getGoodsList
+	} from "@/api/goods.js"
+	import {
+		getTakeaway
+	} from "@/api/category.js"
+	import tools from "@/service/tools";
+	export default {
+		data() {
+			return {
+				bgckgroundBox: 'transparent',
+				BanenerCurrent: 0,
+				search: '',
+				category_id: 0,
+				isScroll: false,
+				topShopData: [],
+				page: 1,
+				listData: [],
+				navList: []
+			}
+		},
+		onShow() {
+
+		},
+		mounted() {
+			this.shopTop()
+			this.getGoodsList()
+			this.getTakeaway()
+		},
+		methods: {
+			clickClass(id) {
+				if (this.category_id == id) {
+					return
+				}
+				this.category_id = id
+				this.listData = []
+				this.getGoodsList()
+			},
+			toBack() {
+				tools.leftClick()
+			},
+			onSwiperChange(e) {
+				this.BanenerCurrent = e.detail.current;
+			},
+			scrollFun(e) {
+				if (e.target.scrollTop > 50) {
+					this.isScroll = true;
+				} else {
+					this.isScroll = false;
+				}
+			},
+			scrolltolower() {
+				console.log('触底');
+			},
+			toShop(item) {
+				uni.navigateTo({
+					url: `/pages-takeout/shop?shop_id=` + item.shop_id
+				})
+			},
+			shopTop() {
+				const operate_id = uni.getStorageSync('operate_id')
+				shopTop({
+					operate_id: operate_id
+				}).then((res) => {
+					if (res.code == 1) {
+						this.topShopData = res.data
+					}
+				})
+			},
+			getGoodsList() {
+				const operate_id = uni.getStorageSync('operate_id')
+				getGoodsList({
+					operate_id: operate_id,
+					category_id: this.category_id,
+					search: this.search,
+					page: this.page
+				}).then((res) => {
+					if (res.code == 1) {
+						if (res.data.items.length > 0) {
+							this.listData.push(...res.data.items)
+						}
+					}
+				})
+			},
+			getTakeaway() {
+				getTakeaway().then((res) => {
+					if (res.code == 1) {
+						this.navList = res.data
+					}
+				})
+			}
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+	.index-search-box-buttom {
+		width: 120rpx;
+		height: 60rpx;
+		position: absolute;
+		right: 30rpx;
+		top: 6rpx;
+		background: linear-gradient(90deg, #57CAFF 0%, #41ABF5 100%);
+		border-radius: 200rpx;
+		margin-left: auto;
+		line-height: 60rpx;
+		text-align: center;
+	}
+
+	.takeout-index {
+		position: relative;
+
+		.s-input-f {
+			position: relative;
+
+			.s-input-c {
+				position: absolute;
+				top: -16rpx;
+				left: 50rpx;
+			}
+		}
+
+		.bg-index {
+			width: 100%;
+			height: 272rpx;
+			position: absolute;
+			top: 0;
+			left: 0;
+			background-image: linear-gradient(#E0F6FB, #F5F4F9);
+			z-index: -1;
+		}
+
+		.w-100100 {
+			width: 100%;
+		}
+
+		.w-454 {
+			width: 454rpx;
+		}
+
+		.s-input {
+			margin-bottom: 24rpx;
+			height: 72rpx;
+			box-sizing: border-box;
+			position: relative;
+
+			.s-left {
+				left: 24rpx !important;
+			}
+
+			.input-icon {
+				position: absolute;
+				left: 44rpx;
+				top: 16rpx;
+			}
+
+			input {
+				font-size: 32rpx;
+				width: 100%;
+				height: 72rpx;
+				background: #FFFFFF;
+				border-radius: 200rpx;
+				box-sizing: border-box;
+				padding: 0 20rpx 0 78rpx;
+				border: 1rpx solid #41ABF5;
+			}
+		}
+
+		.shop-box {
+			width: 100%;
+			height: 242rpx;
+			position: relative;
+
+			.shop-box-bg {
+				width: 100%;
+				height: 242rpx;
+				position: absolute;
+				top: 0;
+				left: 0;
+				z-index: -1;
+			}
+
+			.swiper-tj {
+				width: 100%;
+				height: 172rpx;
+				border-radius: 20rpx;
+
+				.swiper-item {
+					width: 100%;
+					height: 100%;
+					border-radius: 20rpx;
+					background-color: #fff;
+					box-sizing: border-box;
+					padding: 16rpx;
+
+					.left-img {
+						width: 140rpx;
+						height: 140rpx;
+						border-radius: 14rpx
+					}
+
+					.right-box {}
+				}
+			}
+
+			.dot-f {
+				margin: 20rpx auto;
+				justify-content: center;
+
+				.dot-box {
+					width: 8rpx;
+					height: 6rpx;
+					background: #FEC683;
+					border-radius: 200rpx;
+					margin: 0 6rpx;
+				}
+
+				.dot-box-s {
+					width: 16rpx;
+					height: 6rpx;
+					background: #FF7F00;
+					border-radius: 200rpx;
+					margin: 0 6rpx;
+				}
+			}
+
+		}
+
+		.nav-bg {
+			background-image: linear-gradient(#F0F4FA, #FFFFFF);
+			padding: 24rpx !important;
+		}
+
+		.nav-type-box-f {
+			position: sticky;
+			top: 0;
+			left: 0;
+
+			.nav-type-box {
+				width: 100%;
+				height: 120rpx;
+				display: flex;
+				overflow: scroll;
+
+				.nav-type-list {
+					height: 120rpx;
+					width: 96rpx !important;
+					text-align: center;
+					margin-right: 44rpx;
+
+					image {
+						display: block;
+						width: 80rpx;
+						height: 80rpx;
+						margin: 0 8rpx 12rpx 8rpx;
+					}
+				}
+			}
+		}
+
+
+		.goos-list-box {
+			width: 100%;
+			min-height: 428rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
+			border-radius: 20rpx;
+			margin-bottom: 20rpx;
+
+			.goods-items-list {
+				width: 530rpx;
+				overflow-y: scroll;
+
+				.goods-items-list-box {
+					width: 140rpx;
+					margin-right: 16rpx;
+
+					image {
+						width: 140rpx;
+						height: 140rpx;
+						border-radius: 12rpx
+					}
+				}
+			}
+
+		}
+
+		.left-img {
+			width: 100rpx;
+			height: 100rpx;
+			border-radius: 12rpx;
+			margin-right: 16rpx;
+		}
+
+		.img-x {
+			width: 24rpx;
+			height: 24rpx;
+		}
+
+		.right-box-title {
+			width: 438rpx;
+		}
+
+		.right-box-title-img {
+			width: 32rpx;
+			height: 32rpx;
+			margin-left: auto;
+		}
+
+		.quan-list {
+			.quan-list-1 {
+				width: 32rpx;
+				height: 34rpx;
+				background: #FB3D03;
+				border-radius: 5rpx 0rpx 0rpx 5rpx;
+				text-align: center;
+			}
+
+			.quan-list-2 {
+				box-sizing: border-box;
+				padding: 0 2rpx;
+				height: 34rpx;
+				border-radius: 0 5rpx 5rpx 0;
+				border: 1rpx solid #FB3D03;
+				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

@@ -368,7 +368,7 @@
 		"current": 0,
 		"list": [{
 			"name": "列表调试",
-			"path": "pages-my/my-appraise",
+			"path": "pages-takeout/takeout",
 			"query": ""
 		}]
 	}