Initial Commit
This commit is contained in:
quantulr
357
pages/search_details/search_details.js
Normal file
357
pages/search_details/search_details.js
Normal file
@ -0,0 +1,357 @@
|
||||
|
||||
const app = getApp();
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
statusBarHeight: app.globalData.statusBarHeight,
|
||||
type: ['默认精选', '销量', '最新', '会员折扣', '价格', '分销比例'],
|
||||
goods: [],
|
||||
typeIndex: 0,
|
||||
searchCont: '',
|
||||
bigOrSmall: true, //上ture 下false
|
||||
bigprice: 0, //由大到小 1选择 0不选
|
||||
goodsSales: 0, //销量
|
||||
news: 0, //最新时间
|
||||
smallprice: 0, //由小到大
|
||||
|
||||
isDiscount: 0,//1会员折扣 不选0
|
||||
|
||||
goodsName: '',//搜索名
|
||||
hot: [],
|
||||
|
||||
inputShowed: true,//获取焦点
|
||||
|
||||
page:1,
|
||||
multiIndex: [0, 0],
|
||||
multiArray: [['不限', '0%-5%', '5%-10%', '10%-15%', '15%-20%'], ['不限', '0%-5%', '5%-10%', '10%-15%', '15%-20%']]
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
//三级id
|
||||
if (options.threeTypeId) {
|
||||
console.log(options.threeTypeId)
|
||||
console.log(options.name)
|
||||
this.setData({
|
||||
threeTypeId: options.threeTypeId,
|
||||
searchCont: options.name,
|
||||
goodsName: ''
|
||||
})
|
||||
this.dataList()
|
||||
} else {
|
||||
this.setData({
|
||||
threeTypeId: 0,
|
||||
})
|
||||
}
|
||||
//搜索进入
|
||||
if (options.search) {
|
||||
this.setData({
|
||||
search: true,//搜索
|
||||
inputShowed: true//获取焦点
|
||||
})
|
||||
} else {
|
||||
this.setData({
|
||||
search: false,//搜索
|
||||
inputShowed: false//获取焦点
|
||||
})
|
||||
}
|
||||
|
||||
//获取热门推荐
|
||||
wx.request({
|
||||
url: app.globalData.ip + '/wisdommining/api/goods/getHotGoodsType',
|
||||
method: 'GET',
|
||||
header: {
|
||||
"content-type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
data: {},
|
||||
success: res => {
|
||||
console.log(res)
|
||||
wx.hideLoading()
|
||||
if (res.data.code == 1) {
|
||||
this.setData({
|
||||
hot: res.data.value
|
||||
})
|
||||
} else {
|
||||
wx.showModal({
|
||||
title: '获取数据失败!',
|
||||
content: res.data.message,
|
||||
showCancel: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
//失去焦点
|
||||
bindblurFn() {
|
||||
this.setData({
|
||||
delCont: false,
|
||||
})
|
||||
},
|
||||
//聚焦
|
||||
bindfocusFn() {
|
||||
this.setData({
|
||||
delCont: true,
|
||||
search: true,
|
||||
inputShowed: true,
|
||||
searchCont: '',
|
||||
})
|
||||
},
|
||||
//搜索
|
||||
sear() {
|
||||
if (!this.data.delCont&&this.data.searchCont!='') {
|
||||
this.setData({
|
||||
delCont: true,
|
||||
search: true,
|
||||
inputShowed: true,
|
||||
searchCont: '',
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.data.goodsName == '') {
|
||||
wx.showToast({
|
||||
title: '请先输入搜索内容~',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.setData({
|
||||
search: false,
|
||||
// searchCont:this.data.goodsName,
|
||||
threeTypeId: 0,
|
||||
goods:[],
|
||||
page:1
|
||||
})
|
||||
this.dataList()
|
||||
},
|
||||
//搜索名
|
||||
search_input(e) {
|
||||
this.setData({
|
||||
goodsName: e.detail.value
|
||||
})
|
||||
},
|
||||
//删除搜索名
|
||||
delCont(e) {
|
||||
console.log('delCont')
|
||||
this.setData({
|
||||
goodsName: ''
|
||||
})
|
||||
},
|
||||
//热门推荐
|
||||
hot(e) {
|
||||
let id = e.currentTarget.dataset.id;
|
||||
let name = e.currentTarget.dataset.name;
|
||||
this.setData({
|
||||
search: false,
|
||||
threeTypeId: id,
|
||||
searchCont: name,
|
||||
goodsName: '',
|
||||
goods:[],
|
||||
page:1
|
||||
})
|
||||
this.dataList()
|
||||
},
|
||||
|
||||
bindMultiPickerChange: function (e) {
|
||||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||||
this.setData({
|
||||
multiIndex: e.detail.value,
|
||||
typeIndex: 5,
|
||||
goods:[],
|
||||
page:1
|
||||
})
|
||||
this.dataList()
|
||||
},
|
||||
|
||||
//类型选择
|
||||
type(e) {
|
||||
let index = e.currentTarget.dataset.index;
|
||||
|
||||
if (index == 5) {
|
||||
//分销比例
|
||||
|
||||
} else {
|
||||
this.setData({
|
||||
goods:[],
|
||||
page:1
|
||||
})
|
||||
if (this.data.typeIndex == 4 && index == 4) {
|
||||
this.setData({
|
||||
bigOrSmall: !this.data.bigOrSmall
|
||||
})
|
||||
}
|
||||
this.setData({
|
||||
typeIndex: index
|
||||
})
|
||||
this.dataList()
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//数据
|
||||
dataList: function (e) {
|
||||
let typeIndex = this.data.typeIndex
|
||||
let oneProfitsS = 0;
|
||||
let oneProfitsE = 0;
|
||||
let twoProfitsS = 0;
|
||||
let twoProfitsE = 0;
|
||||
//默认
|
||||
if (typeIndex == 0) {
|
||||
this.setData({
|
||||
bigprice: 0, //由大到小 1选择 0不选
|
||||
goodsSales: 0, //销量
|
||||
news: 0, //最新时间
|
||||
smallprice: 0, //由小到大
|
||||
isDiscount: 0,
|
||||
fx: 0,//分销比例
|
||||
})
|
||||
}
|
||||
//销量
|
||||
if (typeIndex == 1) {
|
||||
this.setData({
|
||||
bigprice: 0, //由大到小 1选择 0不选
|
||||
goodsSales: 1, //销量
|
||||
news: 0, //最新时间
|
||||
smallprice: 0, //由小到大
|
||||
isDiscount: 0,
|
||||
fx: 0,//分销比例
|
||||
})
|
||||
}
|
||||
//价格
|
||||
if (typeIndex == 4) {
|
||||
let smallprice = 0;
|
||||
let bigprice = 0;
|
||||
if (this.data.bigOrSmall) {
|
||||
smallprice = 1
|
||||
} else {
|
||||
bigprice = 1
|
||||
}
|
||||
this.setData({
|
||||
bigprice: bigprice, //由大到小 1选择 0不选
|
||||
goodsSales: 0, //销量
|
||||
news: 0, //最新时间
|
||||
smallprice: smallprice, //由小到大
|
||||
isDiscount: 0,
|
||||
fx: 0,//分销比例
|
||||
})
|
||||
}
|
||||
//最新
|
||||
if (typeIndex == 2) {
|
||||
this.setData({
|
||||
bigprice: 0, //由大到小 1选择 0不选
|
||||
goodsSales: 0, //销量
|
||||
news: 1, //最新时间
|
||||
smallprice: 0, //由小到大
|
||||
isDiscount: 0,
|
||||
fx: 0,//分销比例
|
||||
})
|
||||
}
|
||||
//会员折扣
|
||||
if (typeIndex == 3) {
|
||||
this.setData({
|
||||
bigprice: 0, //由大到小 1选择 0不选
|
||||
goodsSales: 0, //销量
|
||||
news: 0, //最新时间
|
||||
smallprice: 0, //由小到大
|
||||
isDiscount: 1,
|
||||
fx: 0,//分销比例
|
||||
})
|
||||
}
|
||||
//fx
|
||||
if (typeIndex == 5) {
|
||||
let multiIndex = this.data.multiIndex
|
||||
this.setData({
|
||||
bigprice: 0, //由大到小 1选择 0不选
|
||||
goodsSales: 0, //销量
|
||||
news: 0, //最新时间
|
||||
smallprice: 0, //由小到大
|
||||
isDiscount: 0,
|
||||
fx: 1,
|
||||
})
|
||||
oneProfitsS = multiIndex[0] == 1 ? 0 : multiIndex[0] == 2 ? 5 : multiIndex[0] == 3 ? 10 : multiIndex[0] == 4 ? 15 : 0;
|
||||
oneProfitsE = multiIndex[0] == 1 ? 5 : multiIndex[0] == 2 ? 10 : multiIndex[0] == 3 ? 15 : multiIndex[0] == 4 ? 20 : 0;
|
||||
twoProfitsS = multiIndex[1] == 1 ? 0 : multiIndex[1] == 2 ? 5 : multiIndex[1] == 3 ? 10 : multiIndex[1] == 4 ? 15 : 0;
|
||||
twoProfitsE = multiIndex[1] == 1 ? 5 : multiIndex[1] == 2 ? 10 : multiIndex[1] == 3 ? 15 : multiIndex[1] == 4 ? 20 : 0;
|
||||
}
|
||||
wx.showLoading({
|
||||
title: '加载中',
|
||||
mask: true,
|
||||
})
|
||||
wx.request({
|
||||
url: app.globalData.ip + '/wisdommining/api/goods/getGoodsByThreeType',
|
||||
method: 'GET',
|
||||
header: {
|
||||
"content-type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
data: {
|
||||
threeTypeId: this.data.threeTypeId,
|
||||
userId: app.globalData.userId,
|
||||
bigprice: this.data.bigprice, //由大到小
|
||||
goodsSales: this.data.goodsSales, //销量
|
||||
news: this.data.news, //最新时间
|
||||
smallprice: this.data.smallprice, //由小到大
|
||||
goodsName: this.data.goodsName,//搜索名
|
||||
isDiscount: this.data.isDiscount,//会员折扣,
|
||||
|
||||
oneProfitsS: oneProfitsS,
|
||||
oneProfitsE: oneProfitsE,
|
||||
twoProfitsS: twoProfitsS,
|
||||
twoProfitsE: twoProfitsE,
|
||||
page: this.data.page,
|
||||
num: 10
|
||||
},
|
||||
success: res => {
|
||||
console.log(res)
|
||||
wx.hideLoading()
|
||||
if (res.data.code == 1) {
|
||||
let dataList = res.data.value.records;
|
||||
if (dataList.length == 0) {
|
||||
wx.showToast({
|
||||
title: '暂无更多~',
|
||||
icon:'none'
|
||||
})
|
||||
} else {
|
||||
let goods = this.data.goods;
|
||||
for (let i = 0; i < dataList.length; i++) {
|
||||
goods.push(dataList[i])
|
||||
}
|
||||
this.setData({
|
||||
goods: goods,
|
||||
page: this.data.page + 1,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
wx.showModal({
|
||||
title: '获取数据失败!',
|
||||
content: res.data.message,
|
||||
showCancel: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//返回
|
||||
back() {
|
||||
wx.navigateBack()
|
||||
},
|
||||
//商品详情
|
||||
goodsDetails(e) {
|
||||
let id = e.currentTarget.dataset.id;
|
||||
wx.navigateTo({
|
||||
url: '/pages/goodsDetails/goodsDetails?goodsId=' + id,
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
this.dataList()
|
||||
},
|
||||
})
|
||||
4
pages/search_details/search_details.json
Normal file
4
pages/search_details/search_details.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "搜索"
|
||||
}
|
||||
82
pages/search_details/search_details.wxml
Normal file
82
pages/search_details/search_details.wxml
Normal file
@ -0,0 +1,82 @@
|
||||
<!-- 商品 -->
|
||||
|
||||
<!-- <view class="top-all display_J_S display_A_C" style="padding-top:{{statusBarHeight}}px;">
|
||||
<view class="back display_A_C" catchtap="back" style="top:{{statusBarHeight}}px;">
|
||||
<image src="/icon/back.png"></image>
|
||||
</view>
|
||||
<view class="ipt">
|
||||
<input type="text" bindfocus="searchFocus"></input>
|
||||
<view class="search-cont display_A_C">{{searchCont}}
|
||||
<image src="/icon/delete_2.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 搜索 -->
|
||||
|
||||
|
||||
<view class="top">
|
||||
<view class="search">
|
||||
<image src="/icon/search.png"></image>
|
||||
<input placeholder="{{searchCont==''?'搜索您想要的内容':''}}" focus='{{inputShowed}}' value="{{goodsName}}" bindinput="search_input" bindfocus='bindfocusFn' bindblur='bindblurFn'></input>
|
||||
<view class="search-cont display_A_C" wx:if="{{!delCont&&searchCont!=''}}" catchtap="bindfocusFn">{{searchCont}}
|
||||
<image src="/icon/delete_2.png"></image>
|
||||
</view>
|
||||
<!-- <image src="/icon/delete.png" catchtap="delCont" wx:if='{{delCont}}' style="margin-left: 10rpx;"></image> -->
|
||||
</view>
|
||||
<view catchtap='sear' class="sear">搜索</view>
|
||||
</view>
|
||||
|
||||
<!-- 热门推荐 -->
|
||||
<view wx:if='{{search}}' style="background-color: #fff;">
|
||||
<view class="hot">热门推荐</view>
|
||||
<view class="hot-all">
|
||||
<view class="hot-cont" wx:for='{{hot}}' wx:key="index" data-id='{{item.id}}' data-name='{{item.typeName}}'
|
||||
catchtap="hot">{{item.typeName}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索内容 -->
|
||||
<view wx:if='{{!search}}'>
|
||||
<view class="type-all display_J_S display_A_C">
|
||||
<view class="type {{typeIndex==index?'type-active':''}}" wx:for='{{type}}' wx:key='index' catchtap="type"
|
||||
data-index='{{index}}'>
|
||||
<view class="type-name" wx:if='{{index<4}}'>{{item}}</view>
|
||||
|
||||
<picker wx:if='{{index==5}}' mode="multiSelector" bindcolumnchange="bindMultiPickerColumnChange" bindchange="bindMultiPickerChange" value="{{multiIndex}}" range="{{multiArray}}">
|
||||
<view class="type-name">{{item}}</view>
|
||||
</picker>
|
||||
|
||||
<view class="type-name display_J_S display_A_C display_J_C" wx:if='{{index==4}}'>
|
||||
<view>{{item}}</view>
|
||||
<view class="img">
|
||||
<view class="display_A_C display_J_C">
|
||||
<image src="/icon/{{bigOrSmall?'price-up':'price-up2'}}.png"></image>
|
||||
</view>
|
||||
<view class="display_A_C display_J_C">
|
||||
<image src="/icon/{{!bigOrSmall?'price-down':'price-down2'}}.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cont-all">
|
||||
<view class="cont" catchtap="goodsDetails" data-id='{{item.id}}' wx:for='{{goods}}' wx:key='index'>
|
||||
<image class="goods-img" src="{{item.goodsPhoto}}"></image>
|
||||
<view class="goods-name GStitleTwo">{{item.goodsName}}</view>
|
||||
<view class="goods-price display_J_B">
|
||||
<view class="price">
|
||||
<text
|
||||
class="price-text1">￥</text>{{item.wisdGoodsSpecList[0].specBulyPrice==null||item.wisdGoodsSpecList[0].specBulyPrice==0?item.wisdGoodsSpecList[0].specPrice:item.wisdGoodsSpecList[0].specBulyPrice}}
|
||||
<text class="price-text2">￥{{item.wisdGoodsSpecList[0].originalPrice}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-sales">已出售{{item.goodsSales}}件</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="empty" wx:if="{{goods.length==0}}">暂无商品信息~</view>
|
||||
|
||||
</view>
|
||||
225
pages/search_details/search_details.wxss
Normal file
225
pages/search_details/search_details.wxss
Normal file
@ -0,0 +1,225 @@
|
||||
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.top-all{
|
||||
background-color: #ffffff;
|
||||
height: 90rpx;
|
||||
width: 690rpx;
|
||||
padding: 0 30rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.back{
|
||||
height: 90rpx;
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
}
|
||||
.back image{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.ipt{
|
||||
margin-left: 90rpx;
|
||||
width: 380rpx;
|
||||
height: 56rpx;
|
||||
background-color: #f3f4f8;
|
||||
border-radius: 28rpx;
|
||||
position: relative;
|
||||
}
|
||||
.ipt input{
|
||||
height: 56rpx;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 340rpx;
|
||||
padding:0 20rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: left;
|
||||
}
|
||||
.search-cont{
|
||||
height: 38rpx;
|
||||
background-color: #999999;
|
||||
border-radius: 19rpx;
|
||||
line-height: 38rpx;
|
||||
padding: 0 20rpx;
|
||||
position: absolute;
|
||||
left: 80rpx;
|
||||
top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.search-cont image{
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.type-all{
|
||||
padding-left:30rpx;
|
||||
height: 100rpx;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 30rpx;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.type{
|
||||
text-align: center;
|
||||
}
|
||||
.type-name{
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
width: 140rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.type-active .type-name{
|
||||
font-size: 32rpx;
|
||||
color: #ee7b1e;
|
||||
}
|
||||
|
||||
.img image{
|
||||
width: 12rpx;
|
||||
height:12rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.img view{
|
||||
height:12rpx;
|
||||
margin-top:35rpx;
|
||||
}
|
||||
.img view:last-child{
|
||||
margin: 6rpx 0 35rpx 0;
|
||||
}
|
||||
.cont-all{
|
||||
width: 690rpx;
|
||||
margin:0 auto 30rpx;
|
||||
}
|
||||
.cont-all::after{
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
.cont{
|
||||
float: left;
|
||||
width: 330rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
margin: 0 30rpx 30rpx 0;
|
||||
}
|
||||
.cont:nth-child(2n){
|
||||
margin-right: 0;
|
||||
}
|
||||
.goods-img{
|
||||
width: 330rpx;
|
||||
height: 330rpx;
|
||||
}
|
||||
.goods-name{
|
||||
width: 280rpx;
|
||||
padding:0 25rpx;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-top: 25rpx;
|
||||
}
|
||||
.goods-price{
|
||||
margin: 0 auto;
|
||||
padding: 18rpx 10rpx;
|
||||
border-bottom: 1rpx solid #e5e5e5;
|
||||
}
|
||||
.price{
|
||||
font-size: 36rpx;
|
||||
color: #ee7b1e;
|
||||
}
|
||||
.price-text1{
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.price-text2{
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.goods-sales{
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 62rpx;
|
||||
padding:0 25rpx;
|
||||
}
|
||||
|
||||
.empty{
|
||||
text-align: center;
|
||||
margin-top: 300rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 搜索 */
|
||||
.top {
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.top_fi {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.search {
|
||||
font-size: 24rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 40rpx;
|
||||
padding-left: 39rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search>image:first-child{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.search>image:last-child{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
.search input {
|
||||
width: 460rpx;
|
||||
}
|
||||
|
||||
.sear {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.hot{
|
||||
padding: 0 30rpx;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.hot-all{
|
||||
padding: 0 30rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.hot-all::after{
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
.hot-cont{
|
||||
float: left;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
background-color: #f3f4f8;
|
||||
border-radius: 4rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
padding: 0 14rpx;
|
||||
margin:0 24rpx 30rpx 0;
|
||||
}
|
||||
Reference in New Issue
Block a user