最近搜索
{{item}}
热门搜索
{{item}}
{{item.name}}
{{item.title}}
月售{{item.number}}
{{item.article}}
{{item.weight}}
￥{{item.price}}
￥{{item.money}}
.app{
padding-top: 120rpx;
}
.start{
position: fixed;
top: 0;
left:0;
width: 100%;
height: 120rpx;
padding: 20rpx;
box-sizing: border-box;
background: #fff;
z-index: 100;
}
.search{
width: 588rpx;
height: 80rpx;
border-radius: 6rpx;
background: #eeeeee;
position: relative;
}
.search-input{
width: 100%;
height: 100%;
border: 0;
background: transparent;
padding: 0 16rpx 0 76rpx;
box-sizing: border-box;
font-size: 28rpx;
color: #313131;
}
.search-input::-webkit-input-placeholder{
color: #b5b5b5;
}
.search-image{
width: 28rpx;
position: absolute;
left: 30rpx;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}
.search-bind{
width: 120rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #313131;
font-size: 32rpx;
}
/* 最近搜索 */
.end-h{
height: 58rpx;
width: 100%;
}
.end-p{
height: 100%;
font-size: 30rpx;
color: #b5b5b5;
}
.end-p image{
width: 28rpx;
margin-right: 14rpx;
}
.del{
width: 24rpx;
}
.end-ul{
margin-top: 15rpx;
}
.end-li{
height: 80rpx;
line-height: 80rpx;
border-radius: 80rpx;
font-size: 30rpx;
color: #313131;
padding: 0 40rpx;
background: #eeeeee;
display: inline-block;
margin-right: 30rpx;
margin-bottom: 25rpx;
}
/* 模糊搜索列表 */
.vague{
width: 100%;
background: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 50;
overflow: hidden;
overflow-y: scroll;
padding-top: 120rpx;
box-sizing: border-box;
}
.vague-list{
width: 100%;
height: 80rpx;
line-height: 80rpx;
border-bottom: 1rpx solid #eee;
box-sizing: border-box;
padding: 0 20rpx;
font-size: 30rpx;
color: #313131;
}
.vague-list:first-child{
border-top: 1rpx solid #eee;
}
/* 搜索结果 */
.list-box{
width: 100%;
background: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 10;
overflow: hidden;
overflow-y: scroll;
padding-top: 120rpx;
box-sizing: border-box;
}
.list{
width: 100%;
height: 198rpx;
overflow: hidden;
padding: 20rpx;
box-sizing: border-box;
box-shadow:2.5rpx 4.33rpx 14.88rpx 1.12rpx rgba(255, 100, 69, 0.22);
margin-top: 20rpx;
background: #fff;
}
.list-img{
width: 158rpx;
height: 158rpx;
overflow: hidden;
}
.list-img image{
width: 100%;
}
.list-r{
width: 490rpx;
}
.list-r-p{
line-height: 30rpx;
}
.list-r-h{
font-size: 28rpx;
color: #333333;
width: 370rpx;
}
.list-r-em{
font-size: 24rpx;
color: #fa361b
}
.list-r-span{
font-size: 24rpx;
color: #888888;
width: 100%;
line-height: 30rpx;
margin-top: 9rpx;
height: 70rpx;
}
.list-r-i{
font-size: 30rpx;
color: #fa361b;
}
.list-r-i view{
font-size: 24rpx;
color: #888888;
}
.list-li{
width: 100%;
background: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 6;
overflow: hidden;
overflow-y: scroll;
padding-top: 120rpx;
box-sizing: border-box;
}
.index-shap{
width: 100%;
height: 296rpx;
position: relative;
padding: 35rpx 0 35rpx;
box-sizing: border-box;
border-bottom: 1rpx solid #eee;
}
.index-shap-l{
width: 240rpx;
height: auto;
overflow: hidden;
}
.index-shap-l image{
width: 180rpx;
}
.shapAdd{
width: 36rpx;
position: absolute;
right: 30rpx;
bottom: 48rpx;
}
.index-shap-r{
width: 470rpx;
}
.h1{
color: #1b1b1b;
font-size: 32rpx;
height: 38rpx;
}
.h1 view{
font-size: 20rpx;
color: #bfbfbf;
}
.h2{
font-size: 24rpx;
color: #a0a0a0;
line-height: 38rpx;
margin-top: 10rpx;
}
.p{
color: #a0a0a0;
font-size: 22rpx;
display: inline-block;
height: 36rpx;
line-height: 36rpx;
background: #eeeeee;
padding: 0 10rpx;
box-sizing: border-box;
margin-top: 9rpx;
}
.span{
color: #ff6e17;
font-size: 30rpx;
height: 38rpx;
margin-top: 38rpx;
}
.em{
display: inline-block;
font-size: 24rpx;
color: #a0a0a0;
text-decoration:line-through;
padding-left: 10rpx;
}
// pages/index/search/index.js
Page({
/**
* 页面的初始数据
*/
data: {
/**最近搜索 */
lately:"",
/**热门搜索 */
hot: "",
/**搜索内容 */
inputValue:"",
/**模糊搜索返回数据 */
vague:"",
/**屏幕高度 */
windowHeight:"",
/**搜索结果 */
list:[],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this,
/**返回最近搜索和热门搜索 */
lately = ['木门', '地板', '窗户', '合金门', '厨具'],
hot = ['木门', '地板', '窗户', '合金门', '木门', '地板', '窗户', '厨具'],
/**获取当前屏幕高度 */
height = wx.getSystemInfoSync().windowHeight;
that.setData({
windowHeight: height,
lately: lately,
hot:hot,
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
/**
* 输入内容，实现模糊查询
*/
inputBind:function(e){
var that = this,
value = e.detail.value;
this.search(value);
that.setData({
inputValue:value,
})
},
search(val){
var that = this;
var vagueList = [""];
if (val) {
vagueList = [
{
name: '精品儿菜',
}, {
name: '精品金针菇',
}, {
name: '精品豇豆',
}, {
name: '精品豆芽',
}, {
name: '精品莲藕',
}];
} else {
vagueList = val;
}
that.setData({
vague: vagueList,
})
},
/**
* 最近搜索和热门搜索
*/
bindSearch:function(e){
var that = this;
var inputValue = e.currentTarget.dataset.name;//搜索框内容
var vague = [];
that.setData({
inputValue: inputValue,
vague: vague,
});
this.formSubmit(inputValue);
},
/**
* 搜索
*/
formSubmit:function(e){
var that = this;
var list = [
{
id: "0",
img: "/imgs/capping.png",
title: "精品菜头",
article: "野生自然 无添加剂",
weight: "100g/份",
price: "9.00",
number:"2000",
money: "10.00",
num: "1"
}, {
id: "1",
img: "/imgs/capping.png",
title: "精品菜头",
article: "野生自然 无添加剂",
weight: "100g/份",
price: "9.00",
number: "2000",
money: "10.00",
num: "1"
}, {
id: "2",
img: "/imgs/capping.png",
title: "精品菜头",
article: "野生自然 无添加剂",
weight: "100g/份",
number: "2000",
price: "9.00",
money: "10.00",
num: "1"
}
];
that.setData({
list:list
})
},
/**
* 添加购物车
*/
bindAdd: function (e) {
var that = this;
wx.showModal({
title: '提示',
content: '是否将本产品加入购物车',
success: function (res) {
if (res.confirm) {
wx.showToast({
title: '添加成功',
icon: 'success',
duration: 1000
})
}
}
})
},
bindDel:function(e){
var that = this;
var lately = this.data.lately;
wx.showModal({
title: '提示',
content: '是否确定删除最近搜索',
success:function(res){
if(res.confirm){
lately = [];
that.setData({
lately: lately
});
wx.showToast({
title: '删除成功',
icon: 'success',
duration: 1000
})
}
}
})
}
})
