云诺说 - 小程序开发 - 软件定制
当前位置: 毕设小程序_代做小程序,小程序定制开发,微信小程序代做,uniapp小程序，java小程序系统,毕业设计微信小程序开发 > 校园二手商城小程序开发源码

校园二手商城小程序开发源码

2021-01-04 07:45 分类：毕设小程序_代做小程序,小程序定制开发,微信小程序代做,uniapp小程序，java小程序系统,毕业设计微信小程序开发 作者：云诺 阅读(6455)

版权声明：本文为博主原创文章，如果转载请给出原文链接：http://doofuu.com/article/4156241.html

最近在学习微信小程序开发，就自己动手做了一个校园二手商城小程序，基于微信小程序云开发，不用写后台管理非常的方便。二手商城小程序目前主要实现了二手物品搜索，物品展示、物品收藏、物品发布、物品购买、发布记录、授权登录、个人信息修改等。

今天主要介绍二手物品商城小程序的首页开发下面列举一下代码

home.wxml

<view>
    <view class="search">
        <view class="ipt-box">
            <text class="iconfont icon-icon_search"></text>
            <input class="search-ipt" value="{{searchKey}}" bindinput="saveSearchKey" maxlength="20" type="text" placeholder="请输入查询内容" />
        </view>
        <button bindtap="toSearchList" class="search-btn">搜索</button>
    </view>
    <swiper
        class="home-swiper"
        autoplay="true"
        interval="3000"
        duration="500"
    >
        <block wx:for="{{imgUrls}}" wx:key="*this">
            <swiper-item>
                <image src="{{item}}" class="slide-image"/>
            </swiper-item>
        </block>
    </swiper>
    <view class="main">
        <!-- 近期热门 -->
        <view class="hot">
            <view class="h-tag">
                <view class="v-line"></view>
                <text class="tit">热门分类</text>
            </view>
            <view class="classify">
                <view bindtap="toClassifyList" data-classify="{{item.txt}}" wx:for="{{classify_list}}" wx:key="{{item.txt}}" class="classify-item">
                    <view class="img_box">
                        <image src="{{item.icon}}" />
                    </view>
                    <text class="txt">{{item.txt}}</text>
                </view>
            </view>
            
        </view>

        <!-- 信息列表 -->
        <view class="main-msg">
            <!-- 导航条 -->
            <!-- <view class="tab">
                <view bindtap="changeChoice" data-tag="1" class='{{choose ? "tab-item item-border" : "tab-item"}}'>
                    <text class='{{choose ? "tit-b" : "tit"}}'>二手市场</text>
                </view>
                <view bindtap="changeChoice" data-tag="0" class='{{choose ? "tab-item" : "tab-item item-border"}}'>
                    <text class='{{choose ? "tit" : "tit-b"}}'>失物招领</text>
                </view>
            </view> -->

            <!-- 列表 -->
            <view class="msg-list">

                <!-- 二手商品列表 -->
                <view wx:if="{{choose == 1}}" bindtap="tapToDetail" data-id="{{item._id}}" class="msg-item" wx:key="{{item._id}}" wx:for="{{goods_list}}">
                    <image 
                        src="{{item.userDetail.avatarUrl}}" 
                        class="userinfo-avatar mini-avatar"
                        catchtap="tapToUserInfo"
                        data-userid="{{item.openid}}"
                    />
                    <view class="item_right">
                        <view class="nickName">
                            <text>{{item.userDetail.nickName}}</text>
                        </view>
                        <view class="item_title">
                            <text>{{item.title}}</text>
                        </view>
                        <view class="price">
                            <text class="tag">￥</text><text>{{item.price}}</text>
                        </view>
                        <view class="pic_box">
                            <image
                                wx:for="{{item.pic_url}}" 
                                wx:for-item="img"
                                wx:for-index="idx" 
                                wx:key="{{index}}-{{idx}}" 
                                src="{{img}}"
                                class="goods_pic"
                            />
                        </view>
                        <view class="txt_box">
                            <view class="g_type">
                                <text>#{{item.g_type}}</text>
                                <van-tag wx:if="{{item.isNew}}" plain type="success">全新宝贝</van-tag>
                            </view>
                            <text class="pub_time">{{item.pub_time}} | {{item.likeNum}}人喜欢</text>
                        </view>
                    </view>
                </view>

                <!-- 失物招领列表 -->
                <view wx:if="{{choose == 0}}" bindtap="tapToLostDetail" data-id="{{item._id}}" class="msg-item" wx:key="{{item._id}}" wx:for="{{lost_list}}">
                    <image 
                        src="{{item.userDetail.avatarUrl}}" 
                        class="userinfo-avatar mini-avatar"
                        catchtap="tapToUserInfo"
                        data-userid="{{item.openid}}"
                    />
                    <view class="item_right">
                        <view class="nickName">
                            <text>{{item.userDetail.nickName}}</text>
                        </view>
                        <view class="decrip">
                            <view>
                                <image
                                    src="{{item.pic_url[0]}}"
                                    class="goods_pic"
                                />
                            </view>
                            <view class="des_txt">
                                <text class="title">{{item.title}}</text>
                                <text class="description">{{item.description}}</text>
                            </view>
                        </view>
                        <view class="t_box">
                            <view class="g_type">
                                <text>#{{item.type}}</text>
                                <van-tag wx:if="{{item.status == 1 && item.type_num == 1}}" color="#f2826a" plain>已返还</van-tag>
                                <van-tag wx:if="{{item.status == 1 && item.type_num == 0}}" color="#f2826a" plain>已寻回</van-tag>                                
                            </view>
                            <text class="pub_time">{{item.pub_time}}</text>
                        </view>
                    </view>
                    
                </view>


                <view class="footer" wx:if="{{lastData}}">
                    <text>没有更多数据了哟~</text>
                </view>
            </view>
        </view>
    </view>
</view>
JavaScript

home.wxss

.main-msg, .hot{
    background-color: white;
    margin-top: 20rpx;
}
.search{
    margin: 10rpx;
    height: 60rpx;
    display: flex;
    flex-direction: row;
}
.search-btn{
    font-size: 24rpx;
    color: white;
    background-color: #0fb7e0;
    border: none;
}
.ipt-box{
    width: 80%;
    background-color: white;
    border-radius: 10rpx;
    padding-left: 20rpx;
    height: 100%;
}
.search-ipt{
    height: 100%;
    font-size: 24rpx;
    display: inline-block;
    width:90%;
    margin-left:20rpx;
}
.icon-icon_search{
    position: relative;
    bottom: 20rpx;
}
.v-line{
    display: inline-block;
    height: 40rpx;
    width: 6rpx;
    margin-right: 20rpx;
    background-color: #249ed9;
}
.hot{
    height: 240rpx;
    padding: 20rpx;
}
.h-tag{
    border-bottom: 1rpx solid gray;
    height: 60rpx;
    display: flex;
    flex-direction: row;
}
.tit{
    font-size: 32rpx;
    color: gray;
}
.tit-b{
    font-size: 32rpx;
    color: #249ed9;
}
.tab{
    display: flex;
    height: 80rpx;
    flex-direction: row;
    align-items: center;
    border-bottom: 1rpx solid gray;
}
.tab-item{
    width: 50%;
    height: 100%;
    text-align: center;
    line-height: 80rpx;
}
.item-border{
    border-bottom: 1px solid #249ed9;
}
.van-tag{
    float:right;
    position:relative;
    right:100rpx;
}
.classify-item image{
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.img_box{
    position: relative;
    background-color: #5386a6;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-bottom: 10rpx;
}
.classify{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 40rpx;
}
.classify .txt{
    font-size: 24rpx;
    color: gray;
}
.classify-item{
    display: flex;
    flex-direction: column;
    align-items: center;
}
JavaScript

home.js

const app = getApp()

Page({

    /**
    * 页面的初始数据
    */
    data: {
        imgUrls: [
          "../../images/icons/b1.jpg",
          "../../images/icons/b2.jpg"
        ],
        hot_list: [],
        choose: 1,
        goods_list: [],
        lost_list: [],
        startNum: 0,
        lastData: false,
        lostStart: 0,
        lastLost: false,
        active: 0,
        classify_list: [{
            icon: '../../images/icons/digit.png',
            txt: '数码'
        }, {
            icon: '../../images/icons/book.png',
            txt: '书籍'
        }, {
            icon: '../../images/icons/soccer.png',
            txt: '运动'
        }, {
            icon: '../../images/icons/shirt.png',
            txt: '服饰'
        }],
        searchKey: ''
    },

    saveSearchKey(e){
        this.setData({
            searchKey: e.detail.value
        });
    },

    changeChoice(event) {
        const tag = parseInt(event.currentTarget.dataset.tag, 10);
        this.setData({
            choose: tag
        });
    },

    initList(startNum){
        const that = this;
        wx.showLoading({
            title: '加载中'
        })
        wx.cloud.callFunction({
            name: 'getGoods_list',
            data: {
                startNum
            },
            success: res => {
                console.log(res);
                wx.stopPullDownRefresh(); // 停止下拉刷新
                wx.hideLoading();
                const { isLast } = res.result;
                let reverseList = res.result.list.data.reverse();
                if(startNum){
                    //startNum不为0时，拼接到goods_list的后面
                    reverseList = that.data.goods_list.concat(reverseList);
                }
                that.setData({
                    goods_list: reverseList,
                    lastData: isLast
                });
            },
            fail: err => {
                wx.hideLoading();
                console.log(err);
            }
        })
    },

    initLostList(startNum){
        const that = this;
        wx.showLoading({
            title: '加载中'
        })
        wx.cloud.callFunction({
            name: 'getLost_list',
            data: {
                startNum
            },
            success: res => {
                console.log(res);
                wx.stopPullDownRefresh(); // 停止下拉刷新
                wx.hideLoading();
                const { isLast } = res.result;
                let reverseList = res.result.list.data.reverse();
                if(startNum){
                    //startNum不为0时，拼接到goods_list的后面
                    reverseList = that.data.lost_list.concat(reverseList);
                }
                that.setData({
                    lost_list: reverseList,
                    lastLost: isLast
                });
            },
            fail: err => {
                wx.hideLoading();
                console.log(err);
            }
        })

    },

    /**
    * 生命周期函数--监听页面显示
    */
    onShow() {
        this.initList(0);
        this.initLostList(0);
    },

    /**
    *上拉加载
    */
    onReachBottom(){
        console.log('上拉加载')
        const { startNum, lastData, lostStart, lastLost, choose } = this.data;

        if(choose == 1 && !lastData){
            this.initList(startNum + 1);
        }else if(choose == 0 && !lastLost){
            this.initLostList(lostStart + 1)
        }

    },

    /**
    *下拉刷新
    */
    onPullDownRefresh(){
        const { choose } = this.data;
        if(choose == 1){
            this.initList(0);
        }else{
            this.initLostList(0);
        }
        
    },

    tapToDetail(e){
        const { id } = e.currentTarget.dataset;
        wx.navigateTo({
            url: `../goodsDetail/goodsDetail?id=${id}&status=1`
        });
    },

    tapToLostDetail(e){
        const { id } = e.currentTarget.dataset;
        wx.navigateTo({
            url: `../lostDetail/lostDetail?id=${id}`
        });
    },

    toClassifyList(e){
        const { classify } = e.currentTarget.dataset;
        wx.navigateTo({
            url: `../classifyList/classifyList?from=classify&txt=${classify}`
        })
    },

    toSearchList(){
        let { searchKey } = this.data;
        this.setData({
            searchKey: ''
        })
        searchKey = searchKey.replace(/\s*/g, '');
        if(searchKey){
            wx.navigateTo({
                url: `../classifyList/classifyList?from=search&txt=${searchKey}`
            })
        }
    },

    tapToUserInfo(e){
        const { userid } = e.currentTarget.dataset;
        wx.navigateTo({
            url: `../userCenter/userCenter?userId=${userid}`
        })
    }
})
JavaScript

首页布局、样式、逻辑代码都粘贴了出来，页面功能也不复杂。下面分享下截图

企业微信截图_20210104193655.png


需要源码或者有疑问的可以加我微信交流（LGY178888），请备注来意！

「创作不易，你的支持是本站持续更新最大的动力！」

赞(0) 打赏

谢谢你请我喝奶茶*^_^*

支付宝
微信
赏 1

谢谢你请我喝奶茶*^_^*

支付宝
微信

共有 0 条评论 - 校园二手商城小程序开发源码

博客简介

云诺说是一个致力于分享互联网编程技术交流、小程序开发、小程序源码分享、软件服务定制和生活记录的技术服务型学习博客网站。

微信 ：LGY178888

职业 ：小程序开发、软件定制

现居 ：广东省-广州市-天河区

最近更新

随机文章

热门标签

小程序源码毕设小程序毕设论文小程序论文论文模版论文范文毕设源码毕设系统小程序云开发二手商城系统毕设选题微信小程序毕设开题报告小程序商城小程序毕设小程序系统小程序毕设题目毕设代写

友情链接

欢迎与本博客交换友情链接，本博客对交换链接的网站没有要求。如果您是本博客的友情链接网站，在遇到网站运行问题时，可以随时联系，我们将免费提供技术类支持！ 申请交换友链

站点统计

  • 文章总数：171 篇
  • 草稿数目：0 篇
  • 分类数目：14 个
  • 独立页面：181 个
  • 评论总数：0 条
  • 访问总量： 995026次
  • 最近更新：2025年07月25日