基于云开发微信小程序二手闲置商城校园跳蚤物品交换系统设计与实现（三）
时间过得可真快啊，转眼间大学已经结束了。今天下雨，没地方去。在家里闲着也是闲着，还是写写以前开发的微信小程序的校园二手商城系统吧。如果做的好的话二手商城其实是一个比较好的创业点子，每年有无数的毕业生。这其中有很多可以回收，出售的个人二手物品。比如书籍、电器、体育用品等等。这些东西很多都是被当场扔掉了。毕竟学生的购买力有限，二手商品或许更吸引人，可以参考 闲鱼、转转等平台。
好了，废话不多说今天来看下个人出售物品的列表实现
个人出售物品界面布局代码
<view>
<van-tabs bind:change="onChange" active="{{ active }}">
<van-tab title="在售商品">
<view wx:for="{{sale_list}}" data-status="1" wx:key="{{index}}" class="list_item" bindtap="tapToDetail" data-id="{{item._id}}">
<image src="{{item.pic_url[0]}}" />
<view class="g_center">
<view class="goods_msg">
<text class="g_tit">{{item.title}}text>
<text class="g_desc">{{item.description}}text>
<text class="like_num">{{item.likeNum}}人喜欢text>
<text class="pub_time">{{item.pub_time}}text>
view>
view>
<view class="g_right">
<view class="p_box">
<text class="p_tag">￥text><text>{{item.price}}text>
view>
<view class="btns">
<van-button data-gid="{{item._id}}" data-type="0" data-index="{{index}}" catchtap="ifPullOff" plain round size="mini" type="danger">下架van-button>
<van-button data-gid="{{item._id}}" data-status="1" data-type="1" data-index="{{index}}" catchtap="ifPullOff" plain round size="mini" type="default">删除van-button>
view>
view>
view>
<view class="no-likes" wx:if="{{noSale}}">
<text class="empty">您暂时还没有在售商品哟~text>
view>
van-tab>
<van-tab title="下架商品">
<view wx:for="{{unsale_list}}" data-status="0" wx:key="{{index}}" class="list_item" bindtap="tapToDetail" data-id="{{item._id}}">
<image src="{{item.pic_url[0]}}" />
<view class="g_center">
<view class="goods_msg">
<text class="g_tit">{{item.title}}text>
<text class="g_desc">{{item.description}}text>
<text class="like_num">{{item.likeNum}}人喜欢text>
<text class="pub_time">{{item.pub_time}}text>
view>
view>
<view class="g_right">
<view class="p_box">
<text class="p_tag">￥text><text>{{item.price}}text>
view>
<view class="btns">
<van-button plain round data-gid="{{item._id}}" data-type="2" data-index="{{index}}" catchtap="ifPullOff" size="mini" type="danger">重新发布van-button>
<van-button data-gid="{{item._id}}" data-status="0" data-type="1" data-index="{{index}}" catchtap="ifPullOff" plain round size="mini" type="default">删除van-button>
view>
view>
view>
<view class="no-likes" wx:if="{{noUnsale}}">
<text class="empty">暂无数据text>
view>
van-tab>
van-tabs>
<van-dialog id="van-dialog" />
view>
个人出售物品页面小程序逻辑处理代码
import Dialog from '../../miniprogram_npm/vant-weapp/dialog/dialog';
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
sale_list: [],
unsale_list: [],
active: 0,
noSale: false,
noUnsale: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getSaleList();
},
getSaleList(){
const skey = wx.getStorageSync('skey');
const that = this;
if(skey){
wx.showLoading({
title: '加载中'
})
wx.cloud.callFunction({
name: 'getMyPublish_list',
data: {
skey
},
success: res => {
wx.hideLoading();
if(res.result.length){
that.setData({
sale_list: res.result
});
}else{
that.setData({
noSale: true
});
}
console.log(res);
},
fail: err => {
console.log(err);
}
});
}
},
getUnsaleList(){
const skey = wx.getStorageSync('skey');
const that = this;
if(skey){
wx.showLoading({
title: '加载中'
})
wx.cloud.callFunction({
name: 'getUnsale_list',
data: {
skey
},
success: res => {
console.log(res);
wx.hideLoading();
if(res.result.length){
that.setData({
unsale_list: res.result
});
}else{
that.setData({
noUnsale: true
});
}
},
fail: err => {
wx.hideLoading();
console.log(err);
}
})
}
},
onChange(e){
console.log(e.detail.index)
if(e.detail.index === 0){
this.getSaleList();
}else{
this.getUnsaleList();
}
},
tapToDetail(e){
const { id, status } = e.currentTarget.dataset;
wx.navigateTo({
url: `../goodsDetail/goodsDetail?id=${id}&status=${status}`
});
},
ifPullOff(e){
const that = this;
const { gid, index, type, status } = e.currentTarget.dataset;
const msg = {
0: '确定将该商品下架吗？',
1: '确定将该商品删除吗？',
2: '确定重新发布商品吗？'
}
Dialog.confirm({
title: '提示',
message: msg[type]
}).then(() => {
if (type == 0){
that.pullOffShelve(gid, index);
} else if (type ==1){
that.deleteGoods(gid, index, status);
} else {
that.rePublish(gid, index);
}
});
},
deleteGoods(goods_id, index, status){
wx.showLoading({
title: '删除中'
});
let list;
const that = this;
if(status == 1){
list = this.data.sale_list;
}else{
list = this.data.unsale_list;
}
list.splice(index,1);
wx.cloud.callFunction({
name: 'cFuncs',
data: {
goods_id,
status,
api_name: 'deleteGoods'
},
success: res => {
wx.hideLoading();
if(status == 1){
that.setData({
sale_list: list
})
}else{
that.setData({
unsale_list: list
})
}
console.log(res)
},
fail: err => {
wx.hideLoading();
console.log(err);
}
})
},
pullOffShelve(goods_id, index){
wx.showLoading({
title: '正在下架'
});
const { sale_list } = this.data;
const that = this;
sale_list.splice(index,1);
wx.cloud.callFunction({
name: 'pullOffShelves',
data: {
goods_id
},
success: res => {
wx.hideLoading();
console.log(res);
that.setData({
sale_list
})
},
fail: err => {
wx.hideLoading();
console.log(err);
}
})
},
rePublish(goods_id, index){
wx.showLoading({
title: '发布中'
});
console.log(goods_id);
const { unsale_list } = this.data;
const that = this;
unsale_list.splice(index,1);
wx.cloud.callFunction({
name: 'rePublish_goods',
data: {
goods_id
},
success: res => {
wx.hideLoading();
console.log(res);
that.setData({
unsale_list
});
},
fail: err => {
wx.hideLoading();
console.log(err)
}
})
}
})
校园二手商城小程序部分界面截图
个人出售物品页面的布局很简单，有基本的html、css就能搞定。逻辑处理只要查询出循环展示就可以了，也算很简单的。