Skip to content

W
wxapp
Commit 4fa27123 by YangChengYuan
Options

UI整体修改

parent cf89ec9c
Showing with 88 additions and 72 deletions
components/catalog-filter/index.wxml
<!--components/search-filter/index.wxml--> <!--components/search-filter/index.wxml-->
<wxs src="../../pages/common.wxs" module="common"></wxs> <wxs src="../../pages/common.wxs" module="common"></wxs>
<view class='filter-wrapper' catchtouchmove="true"> <view class='filter-wrapper' catchtouchmove="true">
<i-row i-class='row-filter'> <i-row i-class='row-filter'>
<!-- 地区筛选 --> <!-- 地区筛选 -->
<i-col span="11" i-class="col-class"> <i-col span="12" i-class="col-class">
<view class="filter-item"> <view class="filter-item">
<text class="{{filter_idx==1?'active':''}}" catchtap='filterTap' data-idx="1">{{selected_titles.region}}</text> <text class="{{filter_idx==1?'active':''}}" catchtap='filterTap' data-idx="1">{{selected_titles.region}}</text>
<image class="search-icon" src="/images/icon-down-select{{filter_idx==1?'ed':''}}.png"></image> <image class="search-icon" src="/images/icon-down-select{{filter_idx==1?'ed':''}}.png"></image>
</view> </view>
</i-col> </i-col>
<i-col span="2" i-class="col-class">
<view class="vdivider">
</view>
</i-col>
<!-- 排序筛选 --> <!-- 排序筛选 -->
<i-col span="11" i-class="col-class"> <i-col span="12" i-class="col-class">
<view class="filter-item"> <view class="filter-item" style='position:relative;'>
<view class='vdivider'></view>
<text class="{{filter_idx==2?'active':''}}" catchtap='filterTap' data-idx="2">{{selected_titles.order}}</text> <text class="{{filter_idx==2?'active':''}}" catchtap='filterTap' data-idx="2">{{selected_titles.order}}</text>
<image class="search-icon" src="/images/icon-down-select{{filter_idx==2?'ed':''}}.png"></image> <image class="search-icon" src="/images/icon-down-select{{filter_idx==2?'ed':''}}.png"></image>
</view> </view>
</i-col> </i-col>
</i-row> </i-row>
<view catchtap='closeFilter' class='filter-content-wrapper' wx:if="{{filter_idx>0}}" catchtouchmove='true'> <view catchtap='closeFilter' class='filter-content-wrapper' wx:if="{{filter_idx>0}}" catchtouchmove='true'>
<view class="row-content" catchtap='preventEvent'> <view class="row-content" catchtap='preventEvent'>
<scroll-view class="scroll-view" scroll-y="true" style="width: 100%;height: 100%;"> <scroll-view class="scroll-view" scroll-y="true" style="width: 100%;height: 100%;">
......
components/catalog-filter/index.wxss
...@@ -192,8 +192,9 @@ ...@@ -192,8 +192,9 @@
} }
.vdivider{ .vdivider{
margin-top: 30rpx;
height: 60rpx; height: 60rpx;
background: #ccc;
width: 1px; width: 1px;
background:#ccc; position: absolute;
left: 0px;
} }
\ No newline at end of file
pages/guide/index.js
...@@ -2,6 +2,9 @@ ...@@ -2,6 +2,9 @@
import api from '../../utils/Api.js' import api from '../../utils/Api.js'
import Config from '../../utils/Config.js' import Config from '../../utils/Config.js'
import Schedule from '../../utils/Schedule.js' import Schedule from '../../utils/Schedule.js'
const {
$Toast
} = require('../../iview/base/index');
Page({ Page({
...@@ -10,12 +13,13 @@ Page({ ...@@ -10,12 +13,13 @@ Page({
*/ */
data: { data: {
guides: [], guides: [],
iptValue: '', i_clear_show: 'none',
recover: 'none', recover: 'none',
currentPage: 1, currentPage: 1,
loading: true, loading: true,
hasMore: true, hasMore: true,
i: 0 i: 0,
keyword: ''
}, },
/** /**
...@@ -54,7 +58,7 @@ Page({ ...@@ -54,7 +58,7 @@ Page({
wx.showLoading({ wx.showLoading({
title: '加载中...', title: '加载中...',
}) })
new Schedule().task(this.getListData).delay(1600).task(() => { new Schedule().task(this.getListData).delay(800).task(() => {
wx.hideNavigationBarLoading() wx.hideNavigationBarLoading()
wx.stopPullDownRefresh() wx.stopPullDownRefresh()
wx.hideLoading() wx.hideLoading()
...@@ -75,7 +79,7 @@ Page({ ...@@ -75,7 +79,7 @@ Page({
loading: true, loading: true,
currentPage: page currentPage: page
}) })
}).delay(1000).task(that.getListData) }).delay(800).task(that.getListData)
} }
}, },
...@@ -100,12 +104,14 @@ Page({ ...@@ -100,12 +104,14 @@ Page({
url: '/pages/webview/index?url=' + url + '&t=攻略详情', url: '/pages/webview/index?url=' + url + '&t=攻略详情',
}) })
}, },
// 请求接口
getListData: function(callback) { getListData: function(callback) {
const p = this.data.currentPage const p = this.data.currentPage
api.guide.list({ let params = {
p p: p,
}).then(res => { title: this.data.keyword
}
api.guide.list(params).then(res => {
if (res.code) { if (res.code) {
this.setData({ this.setData({
hasMore: false, hasMore: false,
...@@ -122,61 +128,57 @@ Page({ ...@@ -122,61 +128,57 @@ Page({
} }
}) })
}, },
/* 美行攻略 的 重置input框的文本*/ /* 美行攻略 的 重置input框的文本*/
clearContent: function () { clearContent: function () {
this.setData({ this.setData({
iptValue: '' keyword: ''
}) })
// 开始请求接口
// wx.startPullDownRefresh()
}, },
/* 美行攻略 的 搜索请求*/ /* 美行攻略 的 搜索请求*/
searchFun: function (e,callback) { searchFun: function (e, callback) {
// 显示“取消”按钮 // 显示“取消”按钮
this.setData({ recover: "block"}) this.setData({ recover: "block"})
// 开始请求 // 开始请求
const p = this.data.currentPage const p = this.data.currentPage
let title = e.detail.value let title = e.detail.value
api.guide.list({ if (title.trim() == '' || title.trim().length <= 0){
title, p $Toast({
}).then(res => { content: '关键词不能为空',
if (res.code) { type: 'error'
this.setData({ })
hasMore: false, return
loading: false }
}) this.setData({
} else { keyword: title
this.setData({
guides: this.data.guides = res.data,
loading: false,
hasMore: res.data && res.data.length > 0 ? true : false,
currentPage: res.data && res.data.length > 0 ? p : (p - 1)
})
typeof callback == "function" && callback()
}
}) })
// 开始请求接口
wx.startPullDownRefresh()
}, },
recoverListData: function (callback){
this.setData({ recover: "none" }) // 当搜索框内有内容时，显示输入框的 XX 按钮
// 同时删除搜索框的内容 iconShow: function(e){
this.clearContent() if(e.detail.value == ""){
// 开始重新渲染数据 this.setData({ i_clear_show: "none"})
const p = this.data.currentPage }else{
api.guide.list({ this.setData({ i_clear_show: "block"})
p }
}).then(res => { },
if (res.code) {
this.setData({ recoverListData: function(){
hasMore: false, // 点击取消按钮
loading: false this.setData({
}) guides: [],
} else { keyword: '',
this.setData({ recover: "none",
guides: this.data.guides = res.data, loading: false,
loading: false, hasMore: true,
hasMore: res.data && res.data.length > 0 ? true : false, currentPage: 1
currentPage: res.data && res.data.length > 0 ? p : (p - 1)
})
typeof callback == "function" && callback()
}
}) })
// 开始请求接口
this.getListData()
} }
}) })
\ No newline at end of file
pages/guide/index.json
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
"enablePullDownRefresh": true, "enablePullDownRefresh": true,
"usingComponents": { "usingComponents": {
"i-cell": "/iview/cell/index", "i-cell": "/iview/cell/index",
"i-toast": "/iview/toast/index",
"more": "/components/more/index" "more": "/components/more/index"
} }
} }
\ No newline at end of file
pages/guide/index.wxml
...@@ -3,19 +3,20 @@ ...@@ -3,19 +3,20 @@
<form> <form>
<view class="search_out"> <view class="search_out">
<view class='input_box'> <view class='input_box'>
<icon class='icon-search' type='search' size='14'></icon> <icon class='icon-search' type='search' size='14' color="rgb(66, 66, 66)"></icon>
<input <input
class="iptSearch" class="iptSearch"
placeholder="关键词如地名、游泳等" placeholder="关键词如地名、游泳等"
value='{{iptValue}}' value='{{keyword}}'
confirm-type="搜索" confirm-type="搜索"
type='text' type='text'
bindconfirm="searchFun" bindconfirm="searchFun"
bindinput='getIptValue' bindinput='getIptValue'
bindinput='iconShow'
/> />
<icon class='icon-clear' type='clear' size='14' bindtap='clearContent'></icon> <icon class='icon-clear' type='clear' style="display: {{i_clear_show}}" size='14' bindtap='clearContent'></icon>
</view> </view>
<button class='recoverBnt' style="display: {{recover}};" bindtap='recoverListData'>取消</button> <text class='recoverBnt' style="display: {{recover}};" bindtap='recoverListData'>取消</text>
</view> </view>
</form> </form>
...@@ -33,4 +34,5 @@ ...@@ -33,4 +34,5 @@
</view> </view>
</view> </view>
<more hasMore="{{hasMore}}" loading="{{loading}}" page="{{currentPage}}" /> <more hasMore="{{hasMore}}" loading="{{loading}}" page="{{currentPage}}" />
<i-toast id="toast" />
</view> </view>
\ No newline at end of file
pages/guide/index.wxss
...@@ -5,6 +5,7 @@ form{ ...@@ -5,6 +5,7 @@ form{
width: 100%; width: 100%;
height: 50px; height: 50px;
display: block; display: block;
margin-bottom: 2px;
} }
.search_out{ .search_out{
width: 100%; width: 100%;
...@@ -16,7 +17,7 @@ form{ ...@@ -16,7 +17,7 @@ form{
padding: 20rpx; padding: 20rpx;
box-sizing: border-box; box-sizing: border-box;
background: rgb(207, 207, 207); background: rgb(255, 255, 255);
} }
.search_out .input_box{ .search_out .input_box{
width: 100%; width: 100%;
...@@ -33,30 +34,35 @@ form{ ...@@ -33,30 +34,35 @@ form{
margin: 0; margin: 0;
padding-left: 35px; padding-left: 35px;
padding-right: 35px; padding-right: 35px;
background: rgb(255, 255, 255); background: rgb(240, 240, 240);
border-radius: 3px; border-radius: 20px;
font-size: 12px; font-size: 12px;
} }
.search_out .input_box .icon-search{ .search_out .input_box .icon-search{
position: absolute; position: absolute;
left: 25rpx; left: 25rpx;
top: calc(50% - 9px); top: calc(50% - 7px);
} }
.search_out .input_box .icon-clear{ .search_out .input_box .icon-clear{
position: absolute; position: absolute;
right: 25rpx; right: 25rpx;
top: calc(50% - 9px); top: calc(50% - 7px);
opacity: 0.85; opacity: 0.85;
} }
.search_out .recoverBnt{ .search_out .recoverBnt{
width: 50px; width: 30px;
height: 30px; height: 30px;
display: none; display: none;
flex-grow: 0; flex-grow: 0;
box-sizing: border-box; box-sizing: border-box;
outline: none;
border: none;
background: none;
padding: 0; padding: 0;
margin-left: 20rpx; margin-left: 20rpx;
color: rgb(6, 173, 165);
letter-spacing: 1px;
font-size: 12px; font-size: 12px;
line-height: 30px; line-height: 30px;
} }
......
utils/Config.js
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
// } // }
export const Config = { export const Config = {
apiPath: "https://meixzz.utools.club/api/", apiPath: "http://local.picp.io/api/",
mobPath: "https://mavaler.jqhulian.com/mob/", mobPath: "https://mavaler.jqhulian.com/mob/",
shopJoinPath: "https://mavaler.jqhulian.com/mob/Index/shopjoin" shopJoinPath: "https://mavaler.jqhulian.com/mob/Index/shopjoin"
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment