initwithout
/
hulimall
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增首页搜索功能

master
杜叶春 2 years ago
parent
e742f65a63
commit
d3fa18c9ef
8 changed files with 437 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      app.json
  2. 5
      pages/index/index.js
  3. 2
      pages/index/index.wxml
  4. 2
      pages/listdetail/listdetail.wxss
  5. 147
      pages/search/search.js
  6. 4
      pages/search/search.json
  7. 63
      pages/search/search.wxml
  8. 214
      pages/search/search.wxss

3
app.json
View File

@ -54,7 +54,8 @@
"pages/aftersales/index",
"pages/aftersales/apply",
"pages/aftersales/asdetail",
"pages/similar/similar"
"pages/similar/similar",
"pages/search/search"
],
"window": {
"backgroundTextStyle": "light",

5
pages/index/index.js
View File

@ -107,6 +107,11 @@ Page({
})
}
},
navToSearch() {
wx.navigateTo({
url: '/pages/search/search'
})
},
searchView: function (e) {
console.log(e);
this.setData({

2
pages/index/index.wxml
View File

@ -64,7 +64,7 @@
<image src="/images/icon_xiahua.png" lazy-load="true"></image>
</view>
<view class="container_top_item_center" bindtap="toUrl('/pagesA/search/search')">
<view class="container_top_item_center" bindtap="navToSearch">
<image src="/images/syss.png" lazy-load="true"></image>
搜索你想要的商品
</view>

2
pages/listdetail/listdetail.wxss
View File

@ -1,6 +1,6 @@
page {
height: 100%;
background: white
background: #f5f5f5
}
.bxs{
display:none;

147
pages/search/search.js
View File

@ -0,0 +1,147 @@
// pages/search/search.js
var app = getApp();
var util = require('../../utils/util.js')
var WXAPI = require('../../utils/server.js');
Page({
/**
* 页面的初始数据
*/
data: {
keyword: '',
shopList: [],
},
searchInput: function(e) {
this.setData({
keyword: e.detail.value
})
},
cleardata() {
console.log('1111')
this.setData({
keyword: ''
})
},
search() {
var that = this;
WXAPI.searchList({
accessId: app.globalData.accessId,
storeId: 239,
storeType: 1,
keyword: that.data.keyword,
num: 1,
type: 0
}).then(res => {
if (res.code == 200) {
var data = res.data
var goods = data.list;
var type = data.type;
if (type == 0) {
that.data.objectId = res.data.cid;
var page = that.data.page;
var shoplist = [];
for (var i = 0; i <= page * 2 - 1; i++) {
if (i == goods.length) {
break;
}
shoplist[i] = goods[i];
}
if (types) {
that.setData({
type: type,
goodslist: goods,
shopList: that.data.shopList.concat(shoplist)
});
} else {
that.setData({
type: type,
shopList: goods
});
}
} else {
that.setData({
type: type,
shopList: goods
});
}
} else {
that.setData({
period: true
});
}
});
// var result_list = []
// var city_list = that.data.city_list
// for (var i = 0; i < city_list.length; i++) {
// city_list[i].filter(item=>{
// if(item.G_CName.includes(that.data.searchKey)) {
// result_list.push(item)
// }
// })
// }
// that.setData({
// filterKey: that.data.searchKey,
// city_list: result_list
// })
},
navToSearch() {
// wx.navigateTo({
// url: '/pages/search/search'
// })
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

4
pages/search/search.json
View File

@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "搜索商品"
}

63
pages/search/search.wxml
View File

@ -0,0 +1,63 @@
<!--pages/search/search.wxml-->
<view class="container">
<view class="searchBox">
<view class="searchBox_left">
<image class='searchImg' src="/images/icon-search.png"></image>
<input type="text" value="{{searchKey}}" placeholder="请输入商品名称" bindinput="searchInput"/>
<view wx:if="{{searchKey}}" bindtap="cleardata">
<image class="cancel" src="/images/delete.png" mode=""></image>
</view>
</view>
<view class="searchBox_btn" bindtap="search">搜索</view>
</view>
<view class="list" wx:if="{{shopList.length > 0}}">
<view class="cont" style='padding-top:10px;'>
<view class="xs">
<navigator class="product xs" url="../product/detail?productId={{item.id}}&size={{item.size}}" hover-class="changestyle" wx:for="{{shopList}}" wx:key="index" data-id="{{item.id}}">
<image class="photo" src="{{item.imgurl}}"></image>
<view class="title">新品 {{item.product_title}}</view>
<view class="gstatus">{{item.s_type_list[0].name}}</view>
<view style="display:flex;line-height:50rpx;color:#999">
<view class="gmxx">¥ {{item.price}}</view>
<view class="ku">已售{{item.volume}}件</view>
</view>
<view style="display:flex;">
<view class="goods_shopBox">
<image class="goods_shop" src="{{logoUrl}}{{item.logo}}"></image>
<text>{{item.mch_name}}</text>
</view>
</view>
</navigator>
</view>
</view>
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}">1</view>
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"></view>
<view class="clear mt10" wx:if="{{period}}" style='border: 0;color: #999;'>-我是有底线的-</view>
<block wx:else>
<!-- 显示加载 -->
<view style="display: flex;" wx:if="{{loading}}">
<view class="spinner" style='margin:20px auto;'>
<view class="spinner-container container1">
<view class="circle1"></view>
<view class="circle2"></view>
<view class="circle3"></view>
<view class="circle4"></view>
</view>
<view class="spinner-container container2">
<view class="circle1"></view>
<view class="circle2"></view>
<view class="circle3"></view>
<view class="circle4"></view>
</view>
<view class="spinner-container container3">
<view class="circle1"></view>
<view class="circle2"></view>
<view class="circle3"></view>
<view class="circle4"></view>
</view>
</view>
</view>
</block>
</view>
</view>

214
pages/search/search.wxss
View File

@ -0,0 +1,214 @@
/* pages/search/search.wxss */
page{
background-color: #F6F6FB;
}
.container{
font-size: 30rpx;
/* height: 100vh;
overflow-x: hidden;
overflow-y: auto; */
}
.searchBox{
display: flex;
width: 100%;
padding: 6rpx 0 17rpx 30rpx;
box-sizing: border-box;
background-color: #fff;
}
.searchBox_btn{
display: flex;
align-items: center;
justify-content: center;
height: 68rpx;
padding: 0 30rpx 0 20rpx;
font-size: 28rpx;
}
.searchBox .searchBox_left {
position: relative;
flex: 1;
display: flex;
align-items: center;
height: 68rpx;
border-radius: 40rpx;
padding-left: 69rpx;
box-sizing: border-box;
background-color: #F4F5F6;
}
.searchBox_left image{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20rpx;
width: 30rpx;
height: 30rpx;
}
.searchBox_left .cancel{
width: 35rpx;
height: 35rpx;
left: 570rpx;
z-index: 10;
}
.searchBox_left input{
width: 100%;
font-size: 28rpx;
color: #020202;
}
.list{
background: #f5f5f5;
width: 100%;
}
.commodity_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.2;
overflow: hidden;
z-index: 1000;
color: #fff;
}
.commodity_attr_box {
width: 100%;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
background: #fff;
padding-top: 20rpx;
}
.mt10{
margin: 0 auto;
text-align: center;
height: 70rpx;
width: 450rpx;
line-height: 70rpx;
border-radius:10rpx;
border: 1px solid #999;
font-size: 30rpx;
margin-top: 30rpx;
}
.cont {
width: 100%;
margin: 0 auto;
}
.cont .product {
margin-bottom:10rpx;
background:#fff;
display:inline-block;
width:46%;
margin-left:22rpx;
font-size:13px;
border-radius: 10rpx;
overflow: hidden;
}
.cont_image {
width: 100%;
height: 285rpx;
}
.cont .title {
font-size: 28rpx;
color: #333;
line-height: 28px;
margin: 0;
max-height: 60rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 20rpx 0 20rpx;
}
.cont .gstatus{
color: #999;
font-size: 21rpx;
margin: 5rpx 20rpx 10rpx 20rpx;
/* border-radius: 40rpx; */
padding: 3rpx 5rpx;
height: 25rpx;
width: 45rpx;
line-height: 25rpx;
text-align: center;
border: 1rpx solid #999;
}
.photo{
height:345rpx;
width:100%;
}
.cont .photo {
background:#fff;
display:inline-block;
}
.co .title {
font-size: 32rpx;
color: #333;
line-height: 20px;
margin: 0;
height: 20px;
padding: 1% 5% 0 5%;
font-weight: 700;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
}
.gmxx {
padding-left:20rpx;
width:74%;
}
.gmx {
text-align: right;
width: 67%;
font-size: 25rpx;
text-decoration:line-through;
color: #999;
margin-right:7px;
}
.gmx .xiaoliang {
font-size: 26rpx;
}
.gmxx button {
border-radius: 0;
background: #dd2727;
text-align: center;
color: #fff;
font-size: 14px;
width: 30%;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
font-family: '\5FAE\8F6F\96C5\9ED1', arial, "\5b8b\4f53";
}
.gmxx{
font-size: 15px;
color: #fa5151;
/*padding-top: 10px; */
}
.ku{
text-align: right;
width: 50%;
font-size: 23rpx;
margin-right:10rpx;
color: #999;
}
.goods_shopBox{
display: flex;
align-items: center;
margin: 15rpx 20rpx 15rpx;
font-size: 20rpx;
color: #1d1313;
}
.goods_shopBox .goods_shop{
width: 30rpx;
height: 30rpx;
border-radius: 50%;
margin-right: 10rpx;
}
Write Preview
Loading…
Cancel
Save