8 changed files with 437 additions and 3 deletions
@ -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() { |
||||
|
|
||||
|
} |
||||
|
}) |
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"usingComponents": {}, |
||||
|
"navigationBarTitleText": "搜索商品" |
||||
|
} |
@ -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> |
@ -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; |
||||
|
} |
||||
|
|
Loading…
Reference in new issue