本文转载自云诺说博客：http://doofuu.com/
时间过得可真快啊，转眼间大学已经结束了。今天下雨，没地方去。在家里闲着也是闲着，还是写写以前毕设的微信小程序的校园二手商城系统吧。如果做的好的话校园二手商城其实是一个比较好的创业点子，每年有无数的毕业生毕业。这其中有很多可以回收，出售的个人二手物品。比如书籍、电器、体育用品等等。这些东西很多都是被当场扔掉了。如果有那么一个平台提供二手出售。应该有不少的学生会去用吧。毕竟学生的购买力有限，二手商品或许更吸引人，可以参考 闲鱼、转转等平台。
好了，废话不多说今天来看下个人出售物品的列表实现
```html
<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>
```
```javascript
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)
}
})
}
})
```
校园二手商城小程序部分界面截图
需要可以加微信（LGY178888）了解下！
