瀏覽代碼

[首页增加搜索框][增加]:[]

tags/富茂链客4.1.0
meo 6 年之前
父節點
當前提交
a8be773096
共有 4 個檔案被更改,包括 375 行新增31 行删除
  1. 二進制
      assets/images/arrow.png
  2. +73
    -19
      pages/index/searchbar/index.js
  3. +27
    -8
      pages/index/searchbar/index.wxml
  4. +275
    -4
      pages/index/searchbar/index.wxss

二進制
assets/images/arrow.png 查看文件

Before After
Width: 46  |  Height: 24  |  Size: 366 B

+ 73
- 19
pages/index/searchbar/index.js 查看文件

@@ -1,7 +1,6 @@
const Http = require("../../../utils/HttpBasics"); const Http = require("../../../utils/HttpBasics");
const imgurl = require("../../../utils/imgurl"); const imgurl = require("../../../utils/imgurl");
const config = require("../../../config/config"); const config = require("../../../config/config");
const QR = require("../../../utils/memberqrcode.js");
let app = getApp(); let app = getApp();
Page({ Page({


@@ -9,14 +8,30 @@ Page({
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
lists: [],
indexId: 0,
teljpgUrl: imgurl.teljpg.url, teljpgUrl: imgurl.teljpg.url,
}, },

// 左侧点击事件
jumpIndex(e) {
let index = e.currentTarget.dataset.menuindex
let that = this
that.setData({
indexId: index
});
},
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad: function (options) { onLoad: function (options) {

var that = this
wx.getSystemInfo({
success: function (res) {
that.setData({
winHeight: res.windowHeight
});
}
});
}, },


/** /**
@@ -30,33 +45,66 @@ Page({
* 生命周期函数--监听页面显示 * 生命周期函数--监听页面显示
*/ */
onShow: function () { onShow: function () {
// merchantList
let that = this; let that = this;
that.getList(10,1)
that.getBussiness();
that.getList(1);
}, },
getList(pageSize,pageNum){
getBussiness:function(){
let that = this;
Http.get({
url: config.api.businessList,
data: {
pageNum: 1,
pageSize: 15,
type: 1
}
}).then(res => {
console.log(res)
let businessObj = [{ id: 0, title: "全部", type: 1 }];
that.setData({
lists: res.data.list.concat(businessObj).sort(compare("id"))
});
console.log(that.data.lists)
})
.catch(err => {
wx.showToast({
title: err.errMsg,
icon: 'none',
duration: 2000,
mask: false
});
})
},
getList: function (pageNum) {
let that = this; let that = this;
Http.get({ Http.get({
url: config.api.merchantList, url: config.api.merchantList,
data: { data: {
pageNum: pageNum, pageNum: pageNum,
pageSize: pageSize
pageSize: 15
} }
}).then(res => { }).then(res => {
console.log(res)
that.setData({ that.setData({
merchantVoList: res.data.list merchantVoList: res.data.list
}) })
console.log(res)
}).catch(err => {
console.log(err)
console.log(that.data.merchantVoList)
}) })
.catch(err => {
wx.showToast({
title: err.errMsg,
icon: 'none',
duration: 2000,
mask: false
});
})
}, },
phone: function (e) { phone: function (e) {
let that = this; let that = this;
if (e.currentTarget.dataset.merchantlinkphone) { if (e.currentTarget.dataset.merchantlinkphone) {
wx.makePhoneCall({ wx.makePhoneCall({
phoneNumber: e.currentTarget.dataset.merchantlinkphone phoneNumber: e.currentTarget.dataset.merchantlinkphone
});
})
} }
}, },
/** /**
@@ -85,12 +133,18 @@ Page({
*/ */
onReachBottom: function () { onReachBottom: function () {


},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

} }
})
})
function compare(pro) {
return function (obj2, obj1) {
var val1 = obj1[pro];
var val2 = obj2[pro];
if (val1 < val2) {
return 1;
} else if (val1 > val2) {
return -1;
} else {
return 0;
}
}
}

+ 27
- 8
pages/index/searchbar/index.wxml 查看文件

@@ -1,12 +1,31 @@
<view class='posi'>
<view class='posi_logo' wx:for="{{merchantVoList}}" wx:key="index">
<view>
<image src='{{item.merchantImgUrl}}'></image>
<!-- 左侧滚动栏 -->
<view class='under_line'></view>
<view style='float: left' class='left'>
<scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY' style='height: {{winHeight}}px'>
<view class='all clear'>
<block wx:key="lists" wx:for="{{lists}}">
<view bindtap='jumpIndex' data-menuindex='{{index}}'>
<view class='text-style'>
<text class="{{indexId==index?'active1':''}}">{{item.title}}</text>
<text class="{{indexId==index?'active':''}}"></text>
</view>
</view>
</block>
</view> </view>
<view>
<text>{{item.merchantName}}</text>
<text>{{item.addr}}{{item.buildingName}}{{item.floorName}}</text>
</scroll-view>
</view>

<view class='lists'>
<view class='posi'>
<view class='posi_logo' wx:for="{{merchantVoList}}" wx:key="index">
<view>
<image src='{{item.merchantImgUrl}}'></image>
</view>
<view>
<text>{{item.merchantName}}</text>
<text>{{item.addr}}{{item.buildingName}}{{item.floorName}}</text>
</view>
<image bindtap='phone' data-merchantLinkPhone='{{item.merchantLinkPhone}}' class="tel" src="{{teljpgUrl}}" mode="widthFix" />
</view> </view>
<image bindtap='phone' data-merchantLinkPhone='{{item.merchantLinkPhone}}' class="tel" src="{{teljpgUrl}}" mode="widthFix" />
</view> </view>
</view> </view>

+ 275
- 4
pages/index/searchbar/index.wxss 查看文件

@@ -1,7 +1,47 @@
.under_line{
width: 100%;
}
.scrollY {
width: 139rpx;
position: fixed;
left: 0;
top: 0;
border-right: 1rpx solid #efefef;
}
.left {
border-top: 1rpx solid #efefef;
border-right: 1rpx solid #efefef;
}
.text-style {
width: 139rpx;
height: 120rpx;
line-height: 140rpx;
text-align: center;
font-size: 34rpx;
font-family: PingFangSC-Semibold;
color: rgba(51, 51, 51, 1);
}
.active1 {
color: #00c0ff;
}
.active {
display: block;
width: 50rpx;
height: 6rpx;
background: #00c0ff;
position: relative;
left: 43rpx;
bottom: 30rpx;
}

.posi { .posi {
position: relative; position: relative;
width: 92%;
margin: 0 auto;
width: 610rpx;
float: right;
} }


.posi>view:nth-child(2) { .posi>view:nth-child(2) {
@@ -23,11 +63,13 @@
} }


.posi_logo { .posi_logo {
width: 100%;
width: 90%;
display: flex; display: flex;
padding: 20rpx 0; padding: 20rpx 0;
background: #fff; background: #fff;
height: 100rpx; height: 100rpx;
padding-left:5%;
padding-right:5%;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }


@@ -53,17 +95,22 @@
} }


.posi_logo view:nth-child(2) text:nth-child(1) { .posi_logo view:nth-child(2) text:nth-child(1) {
width: 400rpx;
overflow: hidden;
font-size: 32rpx; font-size: 32rpx;
color: #333; color: #333;
letter-spacing: 0; letter-spacing: 0;
height: 40rpx;
line-height: 40rpx;
} }


.posi_logo view:nth-child(2) text:nth-child(2) { .posi_logo view:nth-child(2) text:nth-child(2) {
width: 400rpx;
font-size: 24rpx; font-size: 24rpx;
color: #b8b8b8; color: #b8b8b8;
padding-top: 3rpx; padding-top: 3rpx;
width: 450rpx;
height: 36rpx; height: 36rpx;
line-height: 36rpx;
overflow: hidden; overflow: hidden;
} }
.tel { .tel {
@@ -73,4 +120,228 @@
margin: auto; margin: auto;
width: 50rpx; width: 50rpx;
height: 50rpx; height: 50rpx;
}
page {
padding: 0 0 30rpx;
}
.tabTit {
height: 90rpx;
line-height: 82rpx;
position: fixed;
top: 0;
width: 750rpx;
z-index: 1;
}

.tabTit > view:nth-of-type(1) {
border-left: 0;
}

.tabTit > view:nth-of-type(4) {
border-right: 0;
}


.tabTit .active image {
transform: rotate(180deg);
background: none;
}

.tabTit image {
width: 18rpx;
height: 9rpx;
vertical-align: middle;
margin-left: 5px;
}

.tabLayer {
width: 750rpx;
overflow: hidden;
position: fixed;
top: 90rpx;
z-index: 1;
background: #fff;
padding-bottom: 26rpx;
box-shadow:2px 9px 10px rgba(0, 0, 0, 0.05);
bottom: 0;
border-top:1px solid #eee;
}

.tabLayer a {
float: left;
width: 210rpx;
height: 80rpx;
line-height: 80rpx;
margin: 30rpx 0 0 26rpx;
text-align: center;
color: #888;
font-size: 30rpx;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(234, 234, 234, 1);
border-radius: 10rpx;
}

.tabLayer .active {
text-align: center;
height: 80rpx;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(101, 158, 246, 1);
border-radius: 10rpx;
color: #659ef6;
}
.tabTit .active {
background: #fff;
font-size: 32prx;
font-weight: 500;
color: rgba(101, 158, 246, 1);
}
/*弹性盒模型*/

.box {
background: #fff;
border-bottom:1px solid #eee;
}

.flex1 {
overflow: hidden;
width: 25%;
display: block;
text-align: center;
}

.flex1 text,.text {
font-size: 30rpx;
}
.text{
display: block;
width: 25%;
text-align: center;
}
/* 日期选择 */

.picker_group {
height: 85rpx;
line-height: 85rpx;
justify-content: center;
display: flex;
align-items: center;
font-size: 30rpx;
color: #888;
}

.picker_group picker {
height: 55rpx;
line-height: 55rpx;
margin: 0 2%;
padding: 2% 5%;
border-bottom: 1px solid #eee;
}

.view view:nth-of-type(1) {
font-size: 28rpx;
color: #888;
}

.list {
width: 644rpx;
border-radius: 16rpx;
padding: 32rpx;
margin: 40rpx auto;
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

.list >view {
height: 60rpx;
line-height: 60rpx;
font-size: 30rpx;
}

.txt1 {
font-size: 32rpx;
font-weight: 500;
color: rgba(85, 85, 85, 1);
}

.txt2 {
font-size: 28rpx;
font-weight: 500;
color: rgba(255, 106, 106, 1);
}

.money {
font-weight: 500;
color: rgba(85, 85, 85, 1);
font-size: 26rpx;
/* width: 123rpx; */
padding-right: 20rpx;
}

.time {
font-size: 28rpx;
font-weight: 500;
color: rgba(125, 125, 125, 1);
}

.status1 {
color: #659ef6;
}

.status2 {
color: #eea959;
}

.status3 {
color: #ff6a6a;
}

.status4 {
color: #8aaa6b;
}

.btn {
float: right;
height: 52rpx;
line-height: 52rpx;
background: rgba(101, 158, 246, 1);
border-radius: 10rpx;
font-size: 28rpx;
font-weight: 500;
padding: 0 25rpx;
color: rgba(255, 255, 255, 1);
}

/* .active1 {
opacity: 0.6;
} */

.btns {
width:137rpx;
margin-top: 21rpx;
background: #52a0fd;
border-radius: 8rpx;
color: #fff;
font-size: 26rpx;
height: 64rpx;
line-height: 64rpx;
}
.active2{
border: 1px solid #52a0fd!important;
color: #52a0fd!important;
}
.recond{
text-align: center;
font-size: 30rpx;
margin-top: 60rpx;
}
.active3{
color: #659ef6;
}
.loading{
text-align: center;
font-size: 28rpx;
color: #999;
/* padding: 20rpx 0 40rpx; */
}
.mr{
margin-top: 200rpx!important;
} }

Loading…
取消
儲存