本文给大家带来的是微信小程序门店福利搜索功能样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<import src="../../components/widget/rating.wxml"/>
<view class="container">
<view class="search_bar">
<input placeholder="搜索门店/福利" auto-focus class="search_bar_txt" bindblur="searchName"/>
<text class="search_btn" bindtap="searchWelfare">搜索</text>
</view>
<navigator wx:for="{{merchantList}}" wx:key="" class="hot-item-box" url="../merchant_detail/detail?id={{item.serviceuserid}}">
<view class="hot-item-top">
<view class="hot-img">
<image mode="aspectFill" src="{{item.servicepicurl}}"></image>
</view>
<view class="hot-item-top-right">
<text class="hot-item-title">{{item.shopname}}</text>
<view class="rating" class="item-title">
<template is="m-rating" data="{{count: item.pjStar, size: 's'}}"/>
<view class="hot-item-price">{{item.pjStar}}分</view>
</view>
<view class="hot-item-No-time-box">
<text class="hot-item-time">商家地址:{{item.shopaddress}}</text>
</view>
</view>
</view>
<view class="hot-item-btm">
<view class="service-container" wx:for="{{item.welfarelist}}" wx:for-item="cell">
<text class="service-name">{{cell.servicename}}</text>
<text class="hot-item-btn">{{cell.discountprice}}元</text>
</view>
</view>
</navigator>
</view>
|
二、wxss样式文件代码如下:
.search_bar{
background: #fff;
padding: 10rpx 0;
width: 100%;
height: 60rpx;
}
.search_bar_txt{
background: #f2f2f2;
font-size: 28rpx;
padding: 6rpx 28rpx;
margin: 0 30rpx 0 40rpx;
float:left;
width:500rpx;
border-radius:30px;
}
.search_btn{
font-size: 28rpx;
background: #479de6;
color:white;
padding: 6rpx 20rpx;
border-radius: 10px;
float:right;
line-height: 48rpx;
margin-right:30rpx;
}
.hot-item-box {
margin-top: 20rpx;
}
.hot-item-top {
display: flex;
width: 100%;
height: 204rpx;
padding: 30rpx 30rpx 20rpx 30rpx;
box-sizing: border-box;
overflow: hidden;
background-color: rgb(255,255,255);
}
.hot-img, .hot-img image {
width: 160rpx;
height: 140rpx;
}
.hot-item-top-right {
width: 506rpx;
height: 160rpx;
margin-left: 24rpx;
}
.hot-item-title {
display: block;
width: 100%;
height: 40rpx;
margin: -4rpx 0 16rpx 0;
line-height: 40rpx;
font-size: 32rpx;
color: #444;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.hot-item-price {
margin-bottom: 16rpx;
font-size: 28rpx;
color: #fb5d5d;
line-height: 44rpx;
float:left;
margin-left:20rpx;
}
.hot-item-No-time-box {
display: flex;
width: 100%;
height: 36rpx;
line-height: 36rpx;
font-size: 24rpx;
color: #999;
}
.text-red {
color: #fb5d5d;
}
.hot-item-time {
float: right;
text-align: right;
}
.hot-item-btm {
width: 100%;
padding: 20rpx 30rpx;
box-sizing: border-box;
background-color: rgba(255,255,255,.7);
}
.hot-item-btn {
display: block;
width: 110rpx;
height: 48rpx;
line-height: 48rpx;
font-size: 28rpx;
color: #fb5d5d;
text-align: center;
border: 1rpx solid #fb5d5d;
border-radius: 4rpx;
box-sizing: border-box;
float:right;
}
.service-container{
width:100%;
height:50rpx;
}
.service-name{
color:#444;
line-height: 48rpx;
}
.m-rating{
margin-top:5rpx;
}
.m-rating image{
width: 36rpx;
height: 36rpx;
float: left;
position: relative;
top: 6rpx;
margin-right: 8rpx;
}
.rating .count{
float: left;
margin-left: 10rpx;
font-size: 18rpx;
color: rgba(255, 255, 255, .6);
text-shadow: 2rpx 4rpx rgba(0, 0, 0, .12);
}
|
三、js页面代码如下:
var app = getApp()
var api = require('../../utils/api');
var util = require('../../utils/util');
Page({
data: {
merchantList:[],
pageNum:1,
isNextPage:true,
name: ""
},
/*
* 首页banner
*/
searchWelfare: function (isClean) {
if(isClean) {
this.data.pageNum = 1;
if (this.data.merchantList.length > 0) {
this.data.merchantList.splice(0, this.data.merchantList.length);
};
} else {
this.data.pageNum += 1;
}
let that = this;
api.searchWelfare({
data: {
startpage: that.data.pageNum,
pagesize: 20,
searchname: that.data.name,
latitude: 0,
longitude: 0
},
success: (res) => {
that.data.merchantList = that.data.merchantList.concat(res.data.result);
that.data.isNextPage = res.data.isNextPage;
that.setData(that.data);
},
});
},
searchName: function(e) {
this.data.name = e.detail.value
},
onReachBottom: function() {
if (this.isNextPage) {
this.searchWelfare(false)
};
},
onShareAppMessage: function() {
return {
title:'搜索',
path:'pages/search/search'
}
},
/**
* 入口
*/
onLoad: function (option) {
}
});
|