完善美团1小程序的页面
.js
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
top: '',
characteristicList: [{
text: "免配送费"
}, {
text: "0元起送"
}, {
text: "新商家"
}, {
text: "品牌商家"
}, {
text: "跨天预定"
}],
sortList: [{
sort: "综合排序",
image: "",
}, {
sort: "速度最快",
image: "",
}, {
sort: "评分最高",
image: "",
}, {
sort: "起送价最低",
image: "",
}, {
sort: "配送费最低",
image: "",
}],
discountList: [{
icon: "减",
iconColor: "#FF635B",
text: "满减优惠"
}, {
icon: "领",
iconColor: "#FF7298",
text: "进店领券"
}, {
icon: "返",
iconColor: "#FB4343",
text: "满返代金券"
}, {
icon: "折",
iconColor: "#C183E2",
text: "折扣商品"
}, {
icon: "订",
iconColor: "#6FDF64",
text: "提前下单优惠"
}, {
icon: "赠",
iconColor: "#FDC41E",
text: "满赠活动"
}, {
icon: "免",
iconColor: "#43B697",
text: "满免配送"
}],
// 打开搜索页面
newpage: function () {
// 跳转到页面
wx.navigateTo({
url: '../scout/scout',
})
},
// 滚动监听
scrollTopfun: function (e) {
this.setData({
top: e.detail.scrollTop
})
// console.log(e.detail.scrollTop);
},
onLoad: function () {
},
categoryList: {
pageone: [{
name: "美食",
src: "/pages/images/1.png"
}, {
name: "甜点饮品",
src: "/pages/images/2.png"
}, {
name: "美团超市",
src: "/pages/images/3.png"
}, {
name: "正餐精选",
src: "/pages/images/4.png"
}, {
name: "生鲜果蔬",
src: "/pages/images/5.png"
}, {
name: "全部商家",
src: "/pages/images/6.png"
}, {
name: "免配送费",
src: "/pages/images/7.png"
}, {
name: "新商家",
src: "/pages/images/8.png"
}],
pagetwo: [{
name: "美食",
src: "/pages/images/1.png"
}, {
name: "甜点饮品",
src: "/pages/images/2.png"
}, {
name: "美团超市",
src: "/pages/images/3.png"
}, {
name: "正餐精选",
src: "/pages/images/4.png"
}, {
name: "生鲜果蔬",
src: "/pages/images/5.png"
}, {
name: "全部商家",
src: "/pages/images/6.png"
}, {
name: "免配送费",
src: "/pages/images/7.png"
}, {
name: "新商家",
src: "/pages/images/8.png"
}]
},
selected: 0,
mask1Hidden: true,
mask2Hidden: true,
animationData: "",
location: "",
characteristicSelected: [false, false, false, false, false, false, false],
discountSelected: null,
selectedNumb: 0,
sortSelected: "综合排序"
},
finish: function () {
var that = this;
wx.request({
url: "https://www.easy-mock.com/mock/596257bc9adc231f357c4664/restaurant/filter",
method: "GET",
success: function (res) {
that.setData({
restaurant: res.data.data.restaurant,
})
}
});
},
sortSelected: function (e) {
var that = this;
wx.request({
url: "https://www.easy-mock.com/mock/596257bc9adc231f357c4664/restaurant/overAll",
method: "GET",
success: function (res) {
that.setData({
restaurant: res.data.data.restaurant,
sortSelected: that.data.sortList[e.currentTarget.dataset.index].sort
})
}
});
},
clearSelectedNumb: function () {
this.setData({
characteristicSelected: [false],
discountSelected: null,
selectedNumb: 0
})
},
characteristicSelected: function (e) {
var info = this.data.characteristicSelected;
info[e.currentTarget.dataset.index] = !info[e.currentTarget.dataset.index];
this.setData({
characteristicSelected: info,
selectedNumb: this.data.selectedNumb + (info[e.currentTarget.dataset.index] ? 1 : -1)
})
console.log(e.currentTarget.dataset.index);
},
discountSelected: function (e) {
if (this.data.discountSelected != e.currentTarget.dataset.index) {
this.setData({
discountSelected: e.currentTarget.dataset.index,
selectedNumb: this.data.selectedNumb + (this.data.discountSelected == null ? 1 : 0)
})
} else {
this.setData({
discountSelected: null,
selectedNumb: this.data.selectedNumb - 1
})
}
},
onTapTag: function (e) {
this.setData({
selected: e.currentTarget.dataset.index
});
},
mask1Cancel: function () {
this.setData({
mask1Hidden: true
})
},
mask2Cancel: function () {
this.setData({
mask2Hidden: true
})
},
onOverallTag: function () {
this.setData({
mask1Hidden: false
})
},
onFilter: function () {
this.setData({
mask2Hidden: false
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that = this;
wx.request({
url: "https://www.easy-mock.com/mock/596257bc9adc231f357c4664/restaurant/info",
method: "GET",
success: function (res) {
that.setData({
restaurant: res.data.data.restaurant,
location: wx.getStorageSync('location')
})
}
});
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
.wxml
<scroll-view style='height:100%;' scroll-y="true" bindscroll="scrollTopfun">
<!-- location -->
<view class='locat'>
<image src="../../icons/location.png" style="width:30rpx;height:30rpx;"></image>
<text>广东海洋大学 ></text>
</view>
<!-- 搜索 -->
<view class="scout {{top>=20? 'fixed' :'' }}" bindtap="newpage">
<image class='img' src='../../icons/icon.png'></image>
<input class='ipt' placeholder='请输入商家或商品名称' placeholder-class='place' disabled="true"></input>
</view>
<import src = "../common/sort_list.wxml"/>
<view class="mask"
hidden="{{mask1Hidden}}" bindtap="mask1Cancel">
<template is="sort_list" data="{{selected,sortSelected}}"/>
<view class="overall-sort-list">
<block wx:for="{{sortList}}" wx:key="">
<view class="overall-sort" data-index="{{index}}"
bindtap="sortSelected">{{item.sort}}</view>
</block>
</view>
</view>
<view class="mask"
hidden="{{mask2Hidden}}" bindtap="mask2Cancel">
<template is="sort_list" data="{{selected,sortSelected}}"/>
<scroll-view class="filterList" scroll-y="true" >
<view class="filterList-characteristic-title">商家特色</view>
<view class="filterList-characteristic-items">
<block wx:for="{{characteristicList}}" wx:key="">
<view class="filterList-characteristic-item {{characteristicSelected[index]==true?'characteristic-selected':''}}"
catchtap="characteristicSelected" data-index="{{index}}">{{item.text}}</view>
</block>
</view>
<view class="filterList-discount-title">优惠活动(单选)</view>
<view class="filterList-discount-items">
<block wx:for="{{discountList}}" wx:key="">
<view class="filterList-discount-item {{discountSelected==index?'discount-selected':''}}"
catchtap="discountSelected" data-index="{{index}}">
<text class="filterList-discount-item-icon"
style="background:{{item.iconColor}}">{{item.icon}}</text>
{{item.text}}</view>
</block>
</view>
</scroll-view>
<view class="filterList-footer">
<view class="filterList-footer-delect"
catchtap="clearSelectedNumb">清除筛选</view>
<view class="filterList-footer-finish" bindtap="finish">完成
<view class="filterList-footer-finish-number" hidden="{{selectedNumb==0}}">{{selectedNumb}}
</view>
</view>
</view>
</view>
<scroll-view bindscrolltolower="lower"
class="scroll-restaurants-list"
scroll-y="true"
style="height:100%">
<swiper class="categoryList" indicator-dots="true"
indicator-color="rgba(228,228,228,1)"
indicator-active-color="#FECA49">
<block wx:for="{{categoryList}}" wx:key="">
<swiper-item>
<block wx:for="{{item}}" wx:key="">
<view class="category-info">
<image src="{{item.src}}"
class="category-image"></image>
<view class="category-text">{{item.name}}</view>
</view>
</block>
</swiper-item>
</block>
</swiper>
<view class="header-title">附近商家</view>
<template is="sort_list" data="{{selected,sortSelected}}"/>
<view class="restaurantsList">
<block wx:for="{{restaurant}}" wx:key="">
<navigator url="/pages/menu/menu">
<view class="restaurants-list">
<view class="restaurants-info-image">
<image src="{{item.src}}" class="restaurants-image"/>
</view>
<view class="restaurants-info">
<view class="restaurants-info-name">{{item.name}}</view>
<view class="restaurants-info-rating">
<view
class="restaurants-info-rating-stars">★ ★ ★ ★</view>
<view
class="restaurants-info-rating-sales">月售 {{item.sales}}单</view>
</view>
<view class="restaurants-info-price">
起送 {{item.initial_price}}¥ | 配送 {{item.distribution_price}}¥
</view>
</view>
<view class="restaurants-distribution">
<view
class="restaurants-distribution-distance">
{{item.distance}}
</view>
<view
class="restaurants-distribution-time">
{{item.time}} 分钟
</view>
</view>
</view>
</navigator>
</block>
</view>
</scroll-view>
</scroll-view>
.wxss
page{
height: 100%;
}
/* 定位区域 */
.locat{
display: flex;
align-items: center;
padding: 0 20rpx;
}
.locat>text{
margin-left: 10rpx;
color: #999;
font-size: 28rpx;
}
/* 搜索 */
.scout{
background-color: #fff;
display:flex;justify-content:center;
align-items: center;
padding: 20rpx 0;
position: relative;
}
.scout>.img{
width: 40rpx;
height: 40rpx;
position: absolute;
left: 22rpx;
}
.scout>.ipt{
width:90%;
background-color:#f0f5f8;border-radius:15rpx;
padding: 8rpx 0rpx;
padding-left: 50rpx;
}
.place{
font-size: 28rpx;
}
.fixed{
width: 100%;
position: fixed;
top: 0;
z-index: 99;
}
.heard-location-text{
position: absolute;
overflow: hidden;
}
.overall-sort-list,.filterList,.filterList-footer{
background: white;
}
.overall-sort-list{
flex-direction: column;
border-top: 1px solid rgba(0,0,0,0);
display: flex;
}
.overall-sort{
font-size: 25rpx;
height: 70rpx;
line-height: 70rpx;
margin-left: 30rpx;
}
.filterList{
height: 500rpx;
font-size: 27rpx;
overflow: hidden;
}
.filterList-characteristic-title,.filterList-discount-title{
position: relative;
height: 50rpx;
line-height: 50rpx;
background: #FBFBFB;
font-weight: 400;
padding-left: 30rpx;
}
.filterList-characteristic-title::before,
.filterList-discount-title::before{
content: "";
position: absolute;
left: 0;
top: 15rpx;
display: inline-block;
width: 5rpx;
height: 20rpx;
background: #FED161;
}
.filterList-characteristic-items{
height: 200rpx;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: space-around;
}
.filterList-characteristic-item{
text-align: center;
height: 70rpx;
width: 200rpx;
margin: 0 20rpx;
border-radius: 70rpx;
border: 2rpx solid #ECECEC;
line-height: 70rpx;
}
.filterList-discount-item-icon{
padding: 0 4rpx;
color: white;
}
.filterList-discount-item{
margin-left: 30rpx;
height: 80rpx;
line-height: 80rpx;
border-bottom: 1rpx solid #ECECEC;
}
.filterList-footer{
height: 90rpx;
display: flex;
}
.filterList-footer-delect{
flex: 1;
font-size: 25rpx;
line-height: 90rpx;
padding-left: 30rpx;
}
.filterList-footer-finish{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
line-height: 90rpx;
font-size: 35rpx;
width: 210rpx;
background: #FFD161;
position: relative;
}
.filterList-footer-finish-number{
height: 30rpx;
width: 30rpx;
line-height: 31rpx;
font-size: 25rpx;
margin-left: 15rpx;
color: #FFD161;
border-radius: 50%;
background: black;
}
.characteristic-selected{
background: #FFFBF1;
border-color: #FFE9B7;
color: #FFE6B4;
}
.discount-selected{
color: #FFE6B4;
}
.heard{
justify-content: space-around;
display: flex;
width: 100%;
height: 80rpx;
background: #FFC640;
}
.heard-location-icon{
position: absolute;
top: 12rpx;
height: 25rpx;
width: 25rpx;
}
.heard-location-text{
left: 47rpx;
top: 9rpx;
height: 30rpx;
width: 190rpx;
white-space:nowrap;
text-overflow: ellipsis;
}
.heard-location{
position: relative;
font-size: 25rpx;
padding: 5rpx 15rpx;
margin: 10rpx;
width: 250rpx;
height: 40rpx;
background: #B38B2D;
color: white;
border-radius: 20rpx;
}
.heard-location:after{
content: '';
position: absolute;
top: 20rpx;
left: 250rpx;
width: 8rpx;
height: 8rpx;
border: 3rpx solid #fff;
border-bottom: none;
border-left: none;
transform: rotate(45deg);
}
.heard-search{
font-size: 25rpx;
padding: 5rpx 15rpx;
margin: 10rpx;
height: 40rpx;
width: 400rpx;
background: white;
border-radius:20rpx;
line-height: 40rpx;
}
.heard-search-icon{
height: 21rpx;
width: 21rpx;
}
.categoryList{
width: 100%;
height: 350rpx;
border-bottom:20rpx solid #f4f4f4;
}
.category-info{
display: inline-block;
text-align: center;
position: relative;
margin-top: 20rpx;
height: 150rpx;
width: 25%;
}
.category-image{
width: 95rpx;
height: 95rpx;
}
.category-text{
font-size: 25rpx;
width: 100%;
line-height: 30rpx
}
.header-title{
text-align: center;
width: 100%;
height: 80rpx;
line-height: 80rpx;
font-size: 31rpx;
font-weight: 600;
}
.sort-list{
justify-content: space-around;
display: flex;
background: white;
width: 100%;
height: 80rpx;
font-size: 27rpx;
color: #6A6A6A;
align-content: center;
border: 1rpx solid #ECECEC;
}
.sort{
text-align: center;
margin: auto 0;
height: 30rpx;
line-height: 30rpx;
border-right: 1rpx solid #ECECEC;
flex: 1;
}
.sort-active{
color: black;
font-weight: 800;
}
.restaurants-list{
font-size: 25rpx;
display: flex;
width: 100%;
padding: 10rpx 0;
border-bottom: 1rpx solid #ECECEC;
color: #6D6D6D;
justify-content: space-between;
}
.restaurants-info-name{
color: black;
font-size: 30rpx;
margin-bottom: 10rpx;
}
.restaurants-image{
width: 200rpx;
height: 125rpx;
margin: 20rpx;
}
.restaurants-info{
margin: 15rpx;
flex: 1;
}
.restaurants-distribution{
display: flex;
width: 100rpx;
margin-right:20rpx;
}
.restaurants-info-rating{
display: flex;
width: 300rpx;
height: 50rpx;
line-height: 50rpx;
}
.restaurants-info-rating-stars{
color: #FFD161;
width: 130rpx;
height: 50rpx;
}
.restaurants-info-rating-sales{
width: 150rpx;
height: 50rpx;
}
.restaurants-distribution{
flex-direction: column;
text-align: right;
justify-content: center;
}
.mask{
width:100%;
height:100%;
position: fixed;
z-index:999;
background-color:rgba(15, 15, 26, 0.7);
}
扫一扫
9503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
