Skip to content

Commit

Permalink
首页美化
Browse files Browse the repository at this point in the history
  • Loading branch information
@gooking
gooking committed Dec 29, 2019
1 parent bbe90e5 commit 8aa6643
Show file tree
Hide file tree
Showing 9 changed files with 255 additions and 164 deletions.
37 changes: 10 additions & 27 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,18 +74,14 @@ thirdScriptError

```javascript
module.exports = {
version: "5.0",
note: "优化接口调用流程",
version: "7.4.0",
note: '内页增加快速浮动导航、我的页面UI优化',
subDomain: "tz", // 根据教程 https://www.yuque.com/apifm/doc/qr6l4m 查看你自己的 subDomain
appid: "wxa46b09d413fbcaff", // 您的小程序的appid，购物单功能需要使用
shareProfile: "百款精品商品，总有一款适合您" // 首页转发的时候话术
};
/*
根据自己需要修改下单时候的模板消息内容设置，可增加关闭订单、收货时候模板消息提醒；
1、/pages/to-pay-order/index.js 中已添加关闭订单、商家发货后提醒消费者；
2、/pages/order-details/index.js 中已添加用户确认收货后提供用户参与评价；评价后提醒消费者好评奖励积分已到账；
3、请自行修改上面几处的模板消息ID，参数为您自己的变量设置即可。
*/
shareProfile: '百款精品商品，总有一款适合您', // 首页转发的时候话术
kanjiaRequirePlayAd: true, // 是否必须要观看视频广告后才可以砍价
goodsDetailSkuShowType: 0, // 0 为点击立即购买按钮后出现规格尺寸、数量的选择； 1为直接在商品详情页面显示规格尺寸、数量的选择，而不弹框
}
```

4、[设置小程序合法服务器域名](https://www.yuque.com/apifm/doc/tvpou9)
Expand All @@ -96,9 +92,9 @@ module.exports = {

```
这两个功能都是使用后台 “系统设置” --> “banner” 管理功能来实现的；
后台发布banner的时候，自定义类型请分别填写 app 和 new
后台发布banner的时候，自定义类型请分别填写 app 和 index
小程序会自动读取类型为 app 的banner图片作为启动展示图片；
小程序会自动读取类型为 new 的banner图片作为首页分类下的轮播图；
小程序会自动读取类型为 index 的banner图片作为首页的轮播图；
```

7、订阅消息(以前的模板消息)如何使用？请查阅 “api工厂” 的教程：
Expand Down Expand Up @@ -213,21 +209,6 @@ module.exports = {
1. 创建订单接口增加 expireMinutes 参数；
2. 代表多少分钟未支付自动关闭本订单，传 0 不自动关闭订单；

- 我没有那么多分类，首页2行分类能否改成1行？

打开 /pages/index/index.js 文件，找到下图所示位置，代码

```js
// 这行代码为显示2行
const _n = Math.ceil(categories.length / 2)
// 这行代码为显示1行
const _n = Math.ceil(categories.length)
```

<img src="https://dcdn.it120.cc/2019/09/05/31729239-dc73-47f6-938a-9ab2c9c0bfdd.png">

- [更多问题？](https://www.yuque.com/apifm/doc)

- 如何删除小程序源码中的广告位？

1. 在小程序开发工具中全局搜索关键词: <ad
Expand All @@ -239,6 +220,8 @@ module.exports = {

全局搜索并注释掉 console.dir 就好了

- [更多问题？](https://www.yuque.com/apifm/doc)

## 如何升级到最新版

- 小程序程序的修改和您后台的数据是独立的，所以不用担心您会丢失数据
Expand Down
5 changes: 3 additions & 2 deletions app.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
"pages": [
"pages/start/start",
"pages/index/index",
"pages/notice/index",
"pages/notice/show",
"pages/category/category",
"pages/goods/list",
"pages/goods-details/index",
Expand All @@ -13,8 +15,7 @@
"pages/order-details/index",
"pages/order/refundApply",
"pages/wuliu/index",
"pages/my/index",
"pages/notice/show",
"pages/my/index",
"pages/recharge/index",
"pages/withdraw/index",
"pages/kanjia/index",
Expand Down
51 changes: 16 additions & 35 deletions pages/index/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@ const TOOLS = require('../../utils/tools.js')
var app = getApp()
Page({
data: {
inputShowed: false, // 是否显示搜索框
inputVal: "", // 搜索框内容
category_box_width: 750, //分类总宽度
goodsRecommend: [], // 推荐商品
kanjiaList: [], //砍价商品列表
pingtuanList: [], //拼团商品列表
Expand Down Expand Up @@ -73,12 +71,12 @@ Page({
* 调用接口封装方法
*/
WXAPI.banners({
type: 'new'
type: 'index'
}).then(function(res) {
if (res.code == 700) {
wx.showModal({
title: '提示',
content: '请在后台添加 banner 轮播图片，自定义类型填写 new',
content: '请在后台添加 banner 轮播图片，自定义类型填写 index',
showCancel: false
})
} else {
Expand Down Expand Up @@ -120,11 +118,8 @@ Page({
})
categories = categories.concat(_categories)
}
const _n = Math.ceil(categories.length / 2)
// const _n = Math.ceil(categories.length)
this.setData({
categories: categories,
category_box_width: 150 * _n,
activeCategoryId: 0,
curPage: 1
});
Expand Down Expand Up @@ -200,11 +195,6 @@ Page({
}
})
},
toSearch: function() {
wx.navigateTo({
url: '/pages/goods/list?name=' + this.data.inputVal,
})
},
onReachBottom: function() {
this.setData({
curPage: this.data.curPage + 1
Expand All @@ -218,28 +208,6 @@ Page({
this.getGoodsList(this.data.activeCategoryId)
wx.stopPullDownRefresh()
},
// 以下为搜索框事件
showInput: function () {
this.setData({
inputShowed: true
});
},
hideInput: function () {
this.setData({
inputVal: "",
inputShowed: false
});
},
clearInput: function () {
this.setData({
inputVal: ""
});
},
inputTyping: function (e) {
this.setData({
inputVal: e.detail.value
});
},
// 获取砍价商品
async kanjiaGoods(){
const res = await WXAPI.goods({
Expand Down Expand Up @@ -267,5 +235,18 @@ Page({
})
}
})
}
},
bindinput(e) {
this.setData({
inputVal: e.detail.value
})
},
bindconfirm(e) {
this.setData({
inputVal: e.detail.value
})
wx.navigateTo({
url: '/pages/goods/list?name=' + this.data.inputVal,
})
},
})
109 changes: 46 additions & 63 deletions pages/index/index.wxml
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,54 @@
<view class="swiper-container">
<swiper indicator-dots="true" indicator-active-color="#fff" autoplay circular>
<swiper-item wx:for="{{banners}}" wx:key="id">
<image mode="aspectFill" bindtap="tapBanner" data-id="{{item.businessId}}" src="{{item.picUrl}}" />
</swiper-item>
</swiper>
<view class="search">
<input type="text" placeholder="输入搜索关键词" value="{{name}}" bindinput="bindinput" bindconfirm="bindconfirm"></input>
<image src="/images/icon/search.svg"></image>
</view>
</view>
<view class="notice-box" wx:if="{{noticeList}}">
<view class="notice">
<image class="notice_icon" src="/images/notice.png"></image>
<swiper class="notice_swiper" vertical autoplay circular>
<navigator wx:for-items="{{noticeList.dataList}}" wx:key="id" url="/pages/notice/show?id={{item.id}}">
<swiper-item>
<view class="notice_itemr">{{item.title}}</view>
</swiper-item>
</navigator>
</swiper>
</view>
<view class="more"><navigator url="/pages/notice/index">更多 ></navigator></view>
</view>
<view class="category-box">
<view class="category-list" wx:for="{{categories}}" wx:key="id">
<view class="category-column {{activeCategoryId == item.id ? 'type-item-on' : ''}}" bindtap="tabClick" id="{{item.id}}">
<image mode="aspectFill" class="category-imgbox" src="{{item.icon}}"></image>
<view class="category-title">{{item.name}}</view>
</view>
</view>
</view>
<view class="container">
<view class="page__bd">
<view class="weui-search-bar">
<view class="weui-search-bar__form">
<view class="weui-search-bar__box">
<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
<input type="text " class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" confirm-type="search" bindconfirm='toSearch' />
<view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
<icon type="clear" size="14"></icon>
</view>
</view>
<label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
<icon class="weui-icon-search" type="search" size="14"></icon>
<view class="weui-search-bar__text">搜索</view>
</label>
</view>
<view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
<block wx:for="{{categories}}" wx:key="id" wx:if="{{item.goods}}">
<view class="category-goods-title">
<view class="weui-panel__hd">{{item.name}}</view>
<view class="more"><navigator url="/pages/goods/list?categoryId={{item.id}}">更多 ></navigator></view>
</view>
<!-- <view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}">
<navigator url="" class="weui-cell" hover-class="weui-cell_active">
<view class="weui-cell__bd">
<view>实时搜索文本</view>
</view>
</navigator>
<navigator url="" class="weui-cell" hover-class="weui-cell_active">
<view class="weui-cell__bd">
<view>实时搜索文本</view>
</view>
</navigator>
<navigator url="" class="weui-cell" hover-class="weui-cell_active">
<view class="weui-cell__bd">
<view>实时搜索文本</view>
<view class="goods-container">
<view class="goods-box" wx:for-items="{{item.goods}}" wx:key="id" bindtap="toDetailsTap" data-id="{{item.id}}">
<view class="img-box">
<image src="{{item.pic}}_m" class="image" mode="aspectFill" lazy-load="true" />
</view>
</navigator>
<navigator url="" class="weui-cell" hover-class="weui-cell_active">
<view class="weui-cell__bd">
<view>实时搜索文本</view>
</view>
</navigator>
</view> -->
<view wx:if="{{noticeList}}" class="notice">
<image class="notice_icon" src="/images/notice.png"></image>
<swiper wx:if="{{noticeList}}" class="notice_swiper" vertical autoplay circular>
<navigator wx:for-items="{{noticeList.dataList}}" wx:key="id" url="/pages/notice/show?id={{item.id}}" open-type="navigate">
<swiper-item>
<view class="notice_itemr">{{item.title}}</view>
</swiper-item>
</navigator>
</swiper>
</view>
<scroll-view scroll-x>
<view class="category-box" style='width:{{category_box_width}}rpx;'>
<view class="category-list" wx:for="{{categories}}" wx:key="id">
<view class="category-column {{activeCategoryId == item.id ? 'type-item-on' : ''}}" bindtap="tabClick" id="{{item.id}}">
<image class="category-imgbox" src="{{item.icon}}"></image>
<view class="category-title">{{item.name}}</view>
</view>
<view class="goods-title">{{item.name}}</view>
<view style='display:flex;'>
<view class="goods-price">¥ {{item.minPrice}}</view>
<view wx:if="{{item.originalPrice && item.originalPrice > 0}}" class="goods-price" style='color:#aaa;text-decoration:line-through'>¥ {{item.originalPrice}}</view>
</view>
</view>
</scroll-view>
</view>
<view class="swiper-container">
<swiper class="swiper_box" indicator-dots="true" indicator-active-color="#fff" autoplay circular>
<swiper-item wx:for="{{banners}}" wx:key="id">
<image bindtap="tapBanner" data-id="{{item.businessId}}" src="{{item.picUrl}}" class="slide-image" />
</swiper-item>
</swiper>
</view>
</view>
</block>
<view class="weui-loadmore weui-loadmore_line" wx:if="{{goodsRecommend.length > 0 && activeCategoryId == 0}}">
<view class="weui-loadmore__tips weui-loadmore__tips_in-line">爆品推荐</view>
</view>
Expand Down
Loading

0 comments on commit 8aa6643

Please sign in to comment.