项目进度-02 （2020.11.09~11.016）
项目整体进度：
上周我们利用微信开发者工具中的云开发控制平台，将小程序项目搭载了数据库，用以实现后续的各项功能，本周我们增加了商品罗列，商品分类，修改图像，商品详情信息功能。
一·商品分类
我们通过代码实现了商品的分类，以下代码实现了将分类模块显示出来，比如日用品和装饰品等，如下图所示：
其中代码中的king_img是图像右侧的右箭头。不点击箭头时，小程序并不会显示出所有的分类，点击小箭头时小箭头会从指向右侧变为指向下侧，而同时所有的分类都会展示出来。
展示箭头与未点击箭头时分类栏的代码如下：
实现点击箭头时展现所有分类栏的时候的代码如下：
其中js代码如下：
点击某一个分类项目，触发collegeSelect事件，并发生此事件。
比如点击通用的时候，就会将通用中的内容显示出来。
点击“全部”的时候，会执行selectAll函数，并发生此事件，会将全部的商品信息显示出来，并触发getList函数。
二·商品罗列
我们开发了商品罗列的功能，就是展示商品的基本信息，而商品的具体信息将会在商品详情中提到。基本信息包括商品的图片，价格，与对应名称。
代码如下：
其中该代码实现的主要是显示图片，价钱与单位。显示图片如下：
如果点击的不同发的类别，而该类别并没有过商品记录的话，则触发一下代码，显示“空空如也”。
效果如下：
全体效果：
三·修改图像
开发了部分修改个人信息的功能，修改个人账号的头像，通过上转个人头像并刷新，从而更改头像。代码如下：
其中的Upavatar为js文件，代码如下：
当showModal函数执行成功时，便会进行if中的操作，寻找上传图片的路径，并执行Uppic函数。代码如下：
上传图片到云存储，如果uploadFile函数执行成功，执行deleteFile函数，就会删除以前的头像图片，然后更新用户信息中头像图片的云存储路径。
具体效果如下：
四·商品详情
在首页中点击你感兴趣的商品，你会进入你选择的商品的详情页面
该页面组成的的一部分由该商品照片的轮播图和商品价格组成，代码如下：
效果如下：
第二部分是一个选择框，你有两个选项分别是发布信息和物品详情
代码如下：
这是其绑定的点击事件：
效果如下：
第三部分是根据第二部分的选择而改变的：
如果你选择的是发布信息(即first_title为false)，会显示发布物品的发布者一些信息，发布时间，类型等内容，代码如下：
效果如下：
如果你选择的是物品详情 (即first_title为true)，会显示发布物品的相关描述，图片等内容，代码如下：
效果如下：
项目成员分工：
王湛：
Uppic(tempFilePath){
let that=this;
wx.cloud.uploadFile({
cloudPath: Date.now()+'.png',
filePath: tempFilePath, // 文件路径
success: res => {
wx.cloud.deleteFile({
fileList: [that.data.userinfo[0].avatarUrl],
success: res => {
}
})
db.collection('users').doc(that.data.userinfo[0]._id).update({
data: {
avatarUrl: res.fileID
},
success: function(ressult) {
that.data.userinfo[0].avatarUrl=res.fileID;
app.userInfo=userinfo;
}
});
},
})
},
changeTitle(e) {
let that = this;
that.setData({
first_title: e.currentTarget.dataset.id
});
},
晏梓昂：
go(){
wx.navigateTo({
url: '../login/login',
})
},
Upavatar(){
let that=this;
wx.showModal({
title: '提示',
content: '您是否要修改图片',
success (res) {
if (res.confirm) {
wx.chooseImage({
count: 1,
success:res=>{
var tempFilePath=res.tempFilePaths[0];
that.Uppic(tempFilePath);
}
})
}
}
})
徐鹏：
collegeSelect(e) {
this.setData({
collegeCur: e.currentTarget.dataset.id - 1,
scrollLeft: (e.currentTarget.dataset.id - 3) * 100,
showList: false,
})
this.getList();
},
showlist() {
let that = this;
if (that.data.showList) {
that.setData({
showList: false,
})
} else {
that.setData({
showList: true,
})
}
},
王祺：
getList(){
let that=this;
if (this.data.collegeCur == -2) {
var kind = _.neq(-2); //除-2之外所有
} else {
var kind = this.data.collegeCur //小程序搜索必须对应格式
}
db.collection('goods').where({
kind:kind
}).get({
success: function(res) {
that.setData({
list:res.data
})
}
})
},
detail(e) {
let that = this;
wx.navigateTo({
url: '/pages/detail/detail?scene=' + e.currentTarget.dataset.id,
})
},
许振宁：
selectAll() {
this.setData({
collegeCur: -2,
scrollLeft: -200,
showList: false,
})
this.getList();
},
onLoad(e) {
var that=this;
this.data.id=e.scene;
db.collection("goods").doc(this.data.id).get({
success:res=>{
that.setData({
goodInfo:res.data,
month:res.data.time.getMonth()+1,
date:res.data.time.getDate(),
});
db.collection("users").doc(this.data.goodInfo.hostid).get({
success:res=>{
that.setData({
hostInfo:res.data
});
}
})
}
});
},
项目燃尽图：
下阶段预计进度：
商品发布功能，添加购物车功能，购买功能。
附会议记录照片：
1169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
