项目进度-05（2020.12.7~12.14）
项目整体进度：
上周我们创建了主要以商品发布、商品修改以及商品删除、商品购买等功能，并且增加了几个云函数。这周我们实现了商品的搜索，用户信息的修改，以及一些细节部分，如回到置顶处，及浏览量排序，改变商品展示模块，搜索历史记录以及小程序页面初始化。
一、商品的搜索
我们通过代码实现了商品的搜索。若有需要搜索的商品，直接点击搜索栏输入商品关键字即可。如图：
值得注意的是，以上操作并不需要把所有的商品名称输入上去，输入部分关键字即可，如输入‘‘东’’。
也可以出现和输入‘‘东区’’一样的结果。
但如果我们只输入其中的词组呢，比如‘‘二维码’’，如图：
也会出现相同的结果。
如果有同关键字的商品，输入公共关键字即可将商品全部展示，如图：
这样做可以满足用户需求，如果用户对于商品名称比较模糊，可以通过这种方式具体的提供商品，以便用户选择。
以上效果由下面这些代码实现：
search(){
let that=this;
if(this.data.text.length==0){
wx.showToast({
title: '请输入关键词',
icon:'none'
})
}
else{
wx.showLoading({
title: '搜索中',
})
if(that.data.hislist.indexOf(that.data.text)==-1){
that.history(that.data.text);
}
this.setData({
is_searched:true
})
wx.cloud.callFunction({
name:'search',
data:{
key:this.data.text
}
}).then(res=>{
this.setData({
list:res.result.data
})
wx.hideLoading();
})
}
},
二、用户信息的修改
我们增加了用户信息的修改，如图：
本次修改完善了以前的修改功能，以前只能修改头像，而如今可以修改所在校区，电话号码，邮箱，QQ号等功能。用户可以根据自身需要选择修改信息，其中邮箱与电话号码是选填，号码与校区必填。若不填号码，则会出现提示信息，如图：
点击校区以更换，如图：
点击确认修改后，弹出提示，点击确认，修改成功。修改成功后便会自动返回主页面。
其中电话号码的格式，邮箱格式，QQ号的格式没有明确的规定，在今后我们会更正。
代码实现如下图：
choose(e){
this.setData({
ids:e.detail.value
})
},
emInput(e){
this.setData({
email:e.detail.value
})
},
qqInput(e){
this.setData({
qqnum:e.detail.value
})
},
phoneInput(e){
this.setData({
phonenum:e.detail.value
})
},
onLoad: function (options) {
this.setData({
ids:app.userInfo[0].campus
})
if(app.userInfo[0].contact){
this.setData({
phonenum:app.userInfo[0].contact[0],
email:app.userInfo[0].contact[1],
qqnum:app.userInfo[0].contact[2]
})
}
},
update(){
let that=this;
if(this.data.ids==-1){
wx.showToast({
title: '请填写您的校区',
icon:'none'
})
}
else if(this.data.phonenum.length==0){
wx.showToast({
title: '请填写您的电话号码',
icon:'none'
})
}
else{
wx.showModal({
title:'提示',
content:'您确定填写的信息正确吗',
success(res){
if(res.confirm){
wx.showLoading({
title: '发布中',
})
wx.cloud.callFunction({
name:'user_update',
data:{
id:app.userInfo[0]._id,
campus:that.data.ids,
phonenum:that.data.phonenum,
email:that.data.email,
qqnum:that.data.qqnum
},
success(re){
app.userInfo[0].campus=that.data.ids
app.userInfo[0].contact=[that.data.phonenum,that.data.email,that.data.qqnum]
}
});
wx.hideLoading();
wx.showToast({
title: '修改成功',
})
setTimeout(function(){
wx.switchTab({
url: '../index/index',
})
},500)
}
}
})
}
},
三、浏览时回到置顶处
当浏览者浏览商品致底层时，如果想回到浏览顶层，需要不断地向上划动手机，这是一件是否麻烦的事情。考虑到用户需求以及使用方便程度，我们增加了向上置顶的功能。如图：
点击该黄色按钮即可置顶，效果如下：
其中这个黄色置顶图标不会一直出现，它只会在当浏览距离大于400码的时候出现。具体实现如下代码中：
html代码：
<block wx:if="{{scrollTop>400}}" >
<view bindtap="gotop">
<image class="icon" src="../../image/top.png"></image>
</view>
</block>
Js代码：
gotop(){
wx.pageScrollTo({
scrollTop: 0
})
四、显示浏览量及其排序
为了满足用户需求，我们加入了浏览量，以此数据来体现商品的热门程度，以便给用户做一个参考。并且可以以浏览量排序，从高浏览量向低浏览量排序。如图：
如图右下角的数字71，代表累计访问次数，虽然这种数据并不能实际意义体现商品热门程度，我们会在后期加以修改。
代码如下：
Html代码：
<view class="suffer">
<image class="suffer_image" src="/image/suffer.png"></image>
<view class="suffer_text">{{item.tapcount}}</view>
</view>
Js代码：
在getList函数中增加
orderBy('tapcount','desc')
五、改变商品的展示
为了满足用户的选择与需要，有些用户可能不适应小程序商品的布局，所以加入了改变的页面。如图所示：
在搜索栏的右边的图标。
未点图标之前布局如下：
更改之后：
代码如下：
<image bindtap="changeCard" class="top_list" src="{{iscard?'/image/list.png':'/image/card.png'}}"></image>
changeCard(){
if(this.data.iscard){
this.setData({
iscard:false
})
}
else{
this.setData({
iscard:true
})
}
},
<view hidden="{{iscard}}">
<view class="card_grid" wx:if="{{list.length>0}}">
<block wx:for="{{list}}" wx:key="_id">
<view class="card_one" bindtap="detail" data-id="{{item._id}}">
<image lazy-load class="card_poster" src="{{item.image[0]}}"></image>
<view class="card_title text-cut">{{item.name}}
</view>
<view class="card_between">
<view class="card_price">￥{{item.price}}元</view>
<image lazy-load class="card_buy" src="/image/buy.png"></image>
</view>
</view>
</block>
</view>
</view>
<view hidden="{{!iscard}}">
<block wx:if="{{list.length>0}}">
<block wx:for="{{list}}" wx:key="_id">
<view class="list_box" bindtap="detail" data-id="{{item._id}}">
<image lazy-load class="list_poster" src="{{item.image[0]}}"></image>
<view class="list_content">
<view class="list_word">
<view class="list_title text-cut">{{item.name}}
</view>
</view>
<view class="list_between">
<view class="list_price">￥{{item.price}}元</view>
<view class="suffer">
<image class="suffer_image" src="/image/suffer.png"></image>
<view class="suffer_text">{{item.tapcount}}</view>
</view>
</view>
</view>
</view>
</block>
</block>
</view>
六、搜索记录以及搜索记录的删除
之前我们增加了搜索的功能，现在我们完善了细节。
搜索之后会留下搜索记录，如图：
其中，长按某一关键词即可删除该记录，如图：
记录消失了。
同样，点击右边垃圾桶即可删除所有记录。如图：
代码如下：
history(key){
let that=this;
wx.getStorage({
key: 'history',
success(res){
if(that.data.hislist.length==5){
that.data.hislist.splice(0,1);
that.data.hislist[that.data.hislist.length]=key;
}
else{
that.data.hislist[that.data.hislist.length]=key;
}
wx.setStorage({
data: that.data.hislist,
key: 'history',
})
},
fail(res){
that.data.hislist[that.data.hislist.length]=key;
wx.setStorage({
key:'history',
data:that.data.hislist,
})
}
})
},
choosekey(e){
this.setData({
text:e.currentTarget.dataset.key
})
this.search();
},
detail(e) {
let that = this;
wx.navigateTo({
url: '/pages/detail/detail?scene=' + e.currentTarget.dataset.id,
})
},
gethis(){
let that=this;
wx.getStorage({
key:'history',
success(res){
that.setData({
hislist:res.data
})
}
})
},
delete(){
wx.removeStorage({
key: 'history',
success (res) {
console.log(res)
}
})
wx.redirectTo({
url: '../search/search',
})
},
delete_key(e){
let that=this;
wx.showModal({
title:'提示',
content:'您确定要删除这条记录吗',
success(res){
if(res.confirm){
that.data.hislist.splice(e.currentTarget.dataset.id,1);
wx.setStorage({
data: that.data.hislist,
key: 'history',
})
wx.redirectTo({
url: '../search/search',
})
}
}
})
},
<block wx:if="{{!is_searched}}">
<view class="a">
<image src="../../image/his.png"></image>
<view>搜索历史</view>
<image src='/image/del.png' class='cancle_btn' wx:if="{{hislist.length>0}}" bindtap='delete'></image>
</view>
<block wx:if="{{hislist.length==0}}">
<view class="nosearch">您还没搜索过哟，赶快试试吧</view>
</block>
<view class="blank"></view>
<view class='list'>
<view class="key" wx:for="{{hislist}}" wx:key="index" bindlongpress="delete_key" bindtap='choosekey' data-id='{{index}}' data-key='{{item}}'>{{item}}</view>
</view>
</block>
七、小程序页面初始化
为了使程序更加美观，我们加入了初始化页面。如图：
有3秒显示时间，可以选择跳过。3秒过后页面自动消失。
项目成员的分工
王湛：商品的购买，买家对订单的一系列操作。
晏梓昂：卖家对订单的一系列操作。
徐鹏：商品的搜索以及历史搜索记录的删除。
王祺：用户信息的修改以及小程序初始页面。
许振宁：返回置顶页面以及改变商品展示。
项目燃尽图
下阶段安排
1.商品的收藏功能
2.排序方式多样性
3.小程序的使用说明
4.小程序的关于程序
5.用户使用手册
附上会议图
1145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
