云诺说 - 小程序定制 - 广告营销
当前位置: 商业源码 > 基于微信小程序-云开发的校园服务平台提供闲置二手交易商城和失物招领功能(毕业设计优秀论文)

基于微信小程序-云开发的校园服务平台提供闲置二手交易商城和失物招领功能(毕业设计优秀论文)

2019-08-02 04:27 分类:商业源码 作者:云诺 阅读(220)

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

    该校园服务平台微信小程序是基于小程序云开发API接口开发完成的。具备完整的二手交易、失物招领、闲置二手交易功能。代码清晰简单易学。具有良好的扩展性和二次开发能力。适合个人技术学习、毕业设计项目和毕设系统二次开发。

微信小程序餐饮管理系统源码|毕业设计微餐厅系统|毕业设计微餐厅点餐系统小程序

微信小程序毕业设计源码|学校教务监考毕业设计系统源码

微信小程序微餐厅、外卖、点餐、订位、餐饮源码带PHP后台

微信小程序商城完整源码带PHP完整管理后台

微信小程序商城完整源码带后台(PHP+MYsql)

1.总体功

(1)用户信息模块  用户注册登录、个人信息维护

(2)二手交易模块  闲置信息发布、二手物品查询、闲置信息展示、物品分享

(3)失物招领模块 失物招领信息发布、展示

(4)个人信息模块 微信登录、我发布商品列表、我的失物招领列表、喜欢的商品收藏功能

2. 技术选型与架构

    前端采用的微信小程序,后端采用小程序云开发API(无需搭建服务器,即可使用云端能力

    软件:微信开发者工具

    云开发提供了几大基础能力支持:

QQ截图20190802160638.png

3.部分效果图(主页、二手物品发布、个人信息界面)

微信图片_20190802154158.jpg微信图片_20190802154209.jpg微信图片_20190802154213.jpg


4.部分源码

主页逻辑(home.js)

const app = getApp()

Page({

    /**
    * 页面的初始数据
    */
    data: {
        imgUrls: [
            'cloud://dev-513b66.6465-dev-513b66/Carousel/air.jpg',
            'cloud://dev-513b66.6465-dev-513b66/Carousel/damen.jpg',
            'cloud://dev-513b66.6465-dev-513b66/Carousel/timg.jpg',
            'cloud://dev-513b66.6465-dev-513b66/Carousel/yishu.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}`
        })
    }
})

组件布局(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>

样式(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;    
}

承接毕业设计,专业团队,价格低!! 微信:LGY178888(添加请说明来意)

 

祝生活愉快!

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

赞(0) 打赏

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

支付宝
微信
1

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

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - 基于微信小程序-云开发的校园服务平台提供闲置二手交易商城和失物招领功能(毕业设计优秀论文)

博客简介

云诺说是一个致力于分享互联网编程技术交流、小程序开发、小程序源码分享、网络推广引流服务、推荐优质的引流渠道、广告开户、竞价推广等行业的IT技术网站,希望你能在本站得到你所需要的信息。

Q Q :2730094141

微信 :LGY17666

职业 :小程序开发、网络推广

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

友情链接

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

站点统计

  • 文章总数:76 篇
  • 草稿数目:0 篇
  • 分类数目:14 个
  • 独立页面:86 个
  • 评论总数:0 条
  • 访问总量: 12067次
  • 最近更新:2019年11月21日