开源代码是用户端uniapp部分源码，使用hbuilder导入即可运行
只提供参考学习使用！已经获得软著！不可商业使用！感谢支持
体验说明
一、体验地址
管理后台 https://paotuiadmin.xianmxkj.com
账号：sqx
密码：88888888
h5体验地址
h5：https://paotui.xianmxkj.com
APP下载链接：
https://paotui.xianmxkj.com/paotui.apk
小程序体验 微信搜索：省钱兄科技
二、技术栈
后台服务 springboot+mybatisplus+mysql
用户端 uniapp（vue语法）
管理后台 vue+elementUi
源码下载地址：
https://gitee.com/maxiaodong1996/paotui
免费uniapp视频学习资料
关注我的技术公众号【码兄】回复【uniapp】获取?
免费提供学习视频
VUE、小程序、公众号、Android、JAVA、C、C++、Python等各类语言学习视频
?
<template>
<view class="container">
<view class="header">
<view class="nav">
<view class="navLeft" @tap="goSelectCity">
<image src="../../static/img/home/1.png"></image>
<view class="localName">{{ localCampus }}</view>
<text class="cuIcon-right"></text>
</view>
<view class="navRight" @tap="goMessage">
<image src="../../static/img/home/info.png"></image>
</view>
</view>
<view class="search-box">
<view class="search-wrap" @tap="goSearch">
<image class="search-icon" src="../../static/img/home/search.png"></image>
<input class="search-input" type="text" value="输入关键字搜索任务" disabled />
</view>
</view>
</view>
<view class="main">
<view class="home-bgi">
<swiper class="swiper" autoplay="1500" :indicator-dots="true" :circular='true'
indicator-active-color="#ffffff" indicator-color="#cccccc">
<swiper-item class="swiper-wrap" v-for="(item,index) in banners" :key='index'>
<image :src="item.imageUrl"></image>
</swiper-item>
</swiper>
</view>
<view class="menu-box">
<view class="category">
<swiper class="swiper" duration="300" :style="{ height: categoryHeight }">
<swiper-item v-for="(nav, index) in navlist" :key="index">
<view class="category-list">
<view class="icon-box" v-for="(item,ind) in nav" :key="ind" @tap="toNavList(item, ind)">
<image class="icon" :src="item.classifyIcon" style="height: 100rpx;width: 100rpx">
</image>
<view class="text">{{ item.classifyName }}</view>
</view>
</view>
</swiper-item>
</swiper>
<view class="dots">
<view v-for="(page, pageindex) in navlist" :key="pageindex"
:class="{ active: pageindex == currentPageindex }"></view>
</view>
</view>
</view>
<view class="demand-release">
<view class="title">发布需求</view>
<view class="search-wrap">
<text>我需要</text>
<input class="search-input" type="text" v-model="content" placeholder="请填写需求"
placeholder-class="placeholder-search-input" />
</view>
<view class="search-wrap">
<text>手机号</text>
<input class="search-input" type="text" v-model="phone" placeholder="请填写手机号" :disabled="!isDisable"
maxlength="11" placeholder-class="placeholder-search-input" />
<view class="edit" @tap='edit()'>修改</view>
</view>
<view class="btn" @tap='sendDemand()'>马上发布需求</view>
</view>
<view class="card-box">
<view class="title" v-if="goodsHomeList.length > 0">最新任务</view>
<task-home-list splitLine @click="clickItem" :list="goodsHomeList"></task-home-list>
<!-- 暂无数据展示 -->
<!-- <empty v-if="goodsHomeList.length === 0" des="暂无最新订单" show="false"></empty> -->
</view>
<!-- 加载更多提示 -->
<view v-if="goodsHomeList.length > 0">
<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
</view>
</view>
</view>
</template>
<script>
import taskHomeList from "@/components/mask/task-home-list.vue"
export default {
components: {
taskHomeList
},
data() {
return {
localCampus: '陕西师范大学',
banners: [],
categoryHeight: '320rpx', //菜单默认高度
currentPageindex: 0, //菜单滚动小点
navlist: [{
url: '../../static/img/home/2.png',
title: '找人代买'
},
{
url: '../../static/img/home/3.png',
title: '外卖代拿'
},
{
url: '../../static/img/home/4.png',
title: '找人陪跑'
},
{
url: '../../static/img/home/5.png',
title: '找人代办'
},
{
url: '../../static/img/home/6.png',
title: '快递代拿'
}
],
content: "",
phone: "",
isDisable: false,
goodsHomeList: [],
page: 1,
limit: 10,
loadingType: 0,
contentText: {
contentdown: '上拉显示更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了'
},
arr: [],
showModal: true
}
},
onLoad() {
let isLogin = this.yu.isLogin();
let userId = this.yu.getCache('userId');
if (isLogin) {
this.getUserInfo(userId);
} else {
this.initCampusList();
}
this.localCampus = this.yu.getCache('campusName') ? this.yu.getCache('campusName') : this.localCampus;
// console.log('this.localCampus',this.localCampus)
this.$Request.getT('/common/type/121').then(res => { //报名成功通知
if (res.code == 0) {
if (res.data && res.data.value) {
// that.orderStart = res.data;
this.arr.push(res.data.value)
}
}
})
this.$Request.getT('/common/type/122').then(res => { //活动即将开始提醒
if (res.code == 0) {
if (res.data && res.data.value) {
// that.orderStart = res.data;
this.arr.push(res.data.value)
}
}
})
},
onShow() {
let isLogin = this.yu.isLogin();
let phone = this.yu.getCache('mobile');
let userId = this.yu.getCache('userId');
this.getSelectBanner(1);
this.getMenuList();
this.localCampus = this.yu.getCache('campusName') ? this.yu.getCache('campusName') : this.localCampus;
if (!isLogin) {
setTimeout(() => {
this.page = 1;
this.goodsHomeList = [];
if (this.yu.getCache('campus')) {
this.campusId = this.yu.getCache('campus');
}
this.getNewHelpOrderList();
}, 10)
} else {
this.page = 1;
this.goodsHomeList = [];
if (this.yu.getCache('campus')) {
this.campusId = this.yu.getCache('campus');
}
this.getNewHelpOrderList();
//订阅
if(this.showModal) {
this.openMsg()
}
}
if (phone && phone !== 'undefined') {
this.phone = phone;
} else {
this.phone = '';
}
},
onHide() {
this.content = ""
},
methods: {
// 开启订阅消息
openMsg() {
console.log('订阅消息')
var that = this
wx.getSetting({
withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
success(ret) {
console.log(ret,'------------------')
// console.log(ret.subscriptionsSetting.itemSettings)
// console.log(Object.keys(ret.subscriptionsSetting.itemSettings).length)
// if (JSON.stringify(ret.subscriptionsSetting.itemSettings).indexOf('accept')!=-1) {
if (ret.subscriptionsSetting.itemSettings && Object.keys(ret.subscriptionsSetting.itemSettings).length == 2) {
uni.setStorageSync('sendMsg', true)
// wx.requestSubscribeMessage({
// tmplIds: that.arr,
// success(re) {
// console.log(JSON.stringify(re), 111111111111)
// var datas = JSON.stringify(re);
// if (datas.indexOf("accept") != -1) {
// console.log(re)
// }
// },
// fail: (res) => {
// console.log(res)
// }
// })
} else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
uni.setStorageSync('sendMsg', false)
uni.showModal({
title: '提示',
content: '为了更好的体验,请绑定消息推送',
confirmText: '确定',
cancelText: '取消',
success: function(res) {
if (res.confirm) {
console.log(res,'--------------------')
wx.requestSubscribeMessage({
tmplIds: that.arr,
success(re) {
console.log(JSON.stringify(re), 111111111111)
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
that.showModal = false
} else if (res.cancel) {
console.log('取消')
that.showModal = true
}
}
})
}
}
})
},
goSearch() {
if (uni.getStorageSync('sendMsg')) {
wx.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
uni.navigateTo({
url: '/pages/task/search'
});
},
goSelectCity() {
if (uni.getStorageSync('sendMsg')) {
wx.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
console.log(JSON.stringify(re), 111111111111)
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
uni.navigateTo({
url: '/pages/index/selectCampus?localCampus=' + this.localCampus
});
},
initCampusList() {
let that = this;
that.yu.request('/helpCampus/selectCampusList', 'GET').then(res => {
if (res.code === 0) {
if (res.data.length !== 0) {
this.campusId = res.data[0].campusId;
this.localCampus = res.data[0].campusName;
this.yu.setCache("campus", res.data[0].campusId);
this.yu.setCache("campusName", res.data[0].campusName);
// this.getNewHelpOrderList();
}
}
});
},
goMessage: function() {
if (uni.getStorageSync('sendMsg')) {
wx.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
console.log(JSON.stringify(re), 111111111111)
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
let token = this.yu.getCache('token');
if (token) {
uni.navigateTo({
url: '/pages/task/renwu'
});
} else {
this.goLogin();
}
},
getSelectBanner(index) {
this.yu.request('/banner/selectBannerList?classify=' + index + '&state=1', 'GET').then(res => {
if (res.code === 0) {
this.banners = res.data;
uni.stopPullDownRefresh();
}
});
},
getMenuList() {
this.yu.request('/helpClassify/selectClassifyList', 'GET').then(res => {
if (res.code === 0) {
if (res.data.length > 0) {
var dataNew = this.chunk(res.data, 10)
this.navlist = dataNew;
if (res.data.length > 5) {
this.categoryHeight = "320rpx"
} else {
this.categoryHeight = "160rpx"
}
}
uni.stopPullDownRefresh();
}
});
},
goLogin() {
this.yu.setCache('href', '/pages/index/index');
uni.navigateTo({
url: '/pages/public/login'
});
},
getNewHelpOrderList(type) {
let postData = {
page: this.page,
limit: this.limit,
campus: this.campusId
}
this.loadingType = 1;
this.yu.request('/help/selectNewHelpOrderList', 'GET', postData).then(res => {
if (res.code === 0) {
if (this.page === 1) {
this.goodsHomeList = [];
}
uni.hideLoading();
if (res.data.list) {
res.data.list.forEach(dd => {
this.yu.request('/helpClassify/selectClassifyList', 'GET').then(ress => {
if (ress.code === 0) {
ress.data.forEach(ddd => {
if (dd.classifyId == ddd.id) {
dd.classifyName = ddd.classifyName
}
});
dd.imageUrl = dd.imageUrl != null ? dd.imageUrl :
'/static/img/logo.png'
this.goodsHomeList.push(dd);
}
});
});
console.log('goodsList', this.goodsHomeList)
}
if (res.data.list.length === this.limit) {
this.loadingType = 0;
} else {
this.loadingType = 3;
}
} else {
this.loadingType = 2;
}
if (type === "refresh") {
uni.stopPullDownRefresh();
}
})
},
clickItem: function(options) {
if (uni.getStorageSync('sendMsg')) {
wx.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
console.log(JSON.stringify(re), 111111111111)
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
// console.log('点击',options)
uni.navigateTo({
url: '/pages/index/taskDetail?helpOrderId=' + options.item.id
})
},
toNavList: function(item, ind) {
if (uni.getStorageSync('sendMsg')) {
wx.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
console.log(JSON.stringify(re), 111111111111)
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
uni.navigateTo({
url: '/pages/task/tasklist?searchValue=' + item.classifyName + '&classifyId=' + item.id +
'&type=directSearch'
});
},
// 传进数组和指定个数，进行拆分
chunk: function(array, size) {
const length = array.length
if (!length || !size || size < 1) {
return []
}
let index = 0
let resIndex = 0
let result = new Array(Math.ceil(length / size))
while (index < length) {
result[resIndex++] = array.slice(index, (index += size))
}
return result
},
edit() {
this.phone = '';
let isLogin = this.yu.isLogin();
if (isLogin) {
this.isDisable = true;
} else {
this.isDisable = false;
}
},
sendDemand() {
if (uni.getStorageSync('sendMsg')) {
wx.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
console.log(JSON.stringify(re), 111111111111)
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
let token = this.yu.getCache('token');
if (token) {
uni.navigateTo({
url: '/pages/order/release?type=hasPhoneAndContent&content=' + this.content + '&phone=' +
this.phone
});
} else {
this.goLogin();
}
},
getUserInfo(userId) {
// 更新登录信息
this.yu.request("/app/selectUserById?userId=" + userId, 'POST').then(res => {
if (res.code === 0) {
this.yu.setCache("avatar", res.data.imageUrl ? res.data.imageUrl : '/static/img/logo.png');
this.yu.setCache("nickName", res.data.nickName ? res.data.nickName : res.data.phone);
this.yu.setCache("mobile", res.data.phone);
this.yu.setCache("invitationCode", res.data.invitationCode);
this.yu.setCache("relation_id", res.data.relationId);
this.yu.setCache("relation", res.data.invitationCode);
this.yu.setCache("grade", res.data.grade);
this.yu.setCache("isInvitation", res.data.isInvitation);
this.yu.setCache("gender", parseInt(res.data.gender));
this.yu.setCache("campus", res.data.campus);
this.yu.setCache("campusName", res.data.campusName);
uni.stopPullDownRefresh();
}
});
},
},
onReachBottom: function() {
this.page = this.page + 1;
this.getNewHelpOrderList();
},
onPullDownRefresh: function() {
this.getSelectBanner(1);
this.getMenuList();
let userId = this.yu.getCache('userId');
this.getUserInfo(userId);
this.page = 1;
this.getNewHelpOrderList('refresh');
}
}
</script>
<style lang="scss">
page {
width: 100%;
background: #F7F7F7;
}
.container {
width: 100%;
.header {
width: 100%;
background: #FFFFFF;
.nav {
height: 88upx;
padding: 0 30upx;
display: flex;
justify-content: space-between;
align-items: center;
.navLeft {
display: flex;
justify-content: space-around;
align-items: center;
image {
width: 34upx;
height: 48upx;
}
.localName {
font-size: 28upx;
font-weight: bold;
color: #333333;
margin-left: 20upx;
}
text {
font-size: 22upx;
color: #333333;
margin-left: 12upx;
}
}
.navRight {
width: 44upx;
height: 39upx;
image {
width: 100%;
height: 100%;
}
}
}
.search-box {
width: 100%;
height: 78upx;
padding: 0 30upx;
display: flex;
align-items: center;
.search-wrap {
width: 100%;
height: 60upx;
background: #F2F2F2;
border-radius: 8upx;
display: flex;
align-items: center;
padding: 0 20upx;
.search-icon {
width: 35upx;
height: 34upx;
}
.search-input {
flex: 1;
font-size: 24upx;
font-weight: 500;
color: #858585;
margin-left: 10upx;
}
}
}
}
.main {
width: 100%;
padding: 20upx 20upx 20upx;
.home-bgi {
width: 100%;
height: 240upx;
background: #FFF;
.swiper {
width: 100%;
height: 100%;
.swiper-wrap {
width: 100%;
height: 100%;
image {
width: 100%;
height: 100%;
display: block;
}
}
}
}
.menu-box {
width: 100%;
padding: 20upx 0 20upx;
display: flex;
.category {
width: 100%;
border-radius: 20upx;
.swiper {
width: 100%;
.uni-swiper-dot {
width: 20upx;
}
.category-list {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
flex-flow: wrap;
.icon-box {
width: 20%;
display: flex;
flex-flow: wrap;
justify-content: center;
font-size: 22upx;
color: #666;
.icon {
width: 100upx;
height: 100upx;
}
.text {
width: 100%;
display: flex;
justify-content: center;
padding-bottom: 18upx;
padding-top: 18upx;
}
}
}
}
.dots {
display: flex;
align-items: center;
justify-content: center;
height: 15upx;
width: 100%;
view {
width: 30upx;
height: 5upx;
background-color: rgba(0, 0, 0, 0.2);
&.active {
background-color: #ff570a;
}
}
}
}
.menu-item {
width: 20%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.iconImg {
width: 100upx;
height: 100upx;
}
text {
margin-top: 17upx;
font-size: 24upx;
font-weight: bold;
color: #333333;
}
}
}
.demand-release {
background-color: #FFF;
padding: 32upx 20upx 30upx;
.title {
font-size: 34upx;
font-weight: 800;
color: #333333;
line-height: 34upx;
margin-bottom: 26upx;
}
.search-wrap {
height: 88upx;
padding: 0 20upx;
background: #F5F5F5;
border-radius: 5upx;
display: flex;
justify-content: space-between;
margin-bottom: 10upx;
text {
margin-right: 40upx;
line-height: 88upx;
font-size: 28upx;
}
.search-input {
flex: 1;
height: 100%;
font-size: 28upx;
}
.placeholder-search-input {
font-size: 28upx;
}
.edit {
height: 88upx;
line-height: 88upx;
font-size: 24upx;
font-weight: 500;
color: #FF3530;
}
}
.btn {
width: 100%;
height: 88upx;
text-align: center;
line-height: 88upx;
background: #FF3530;
border-radius: 5upx;
font-size: 28upx;
font-weight: bold;
color: #FFFFFF;
margin-top: 20upx;
}
}
.card-box {
// padding: 0 30upx;
background-color: #FFF;
margin-top: 20upx;
.title {
height: 86upx;
font-size: 34upx;
font-weight: 800;
color: #333333;
line-height: 86upx;
padding: 0 30upx;
}
}
}
}
</style>
以上项目仅供学习使用、不可商用
本人全栈工程师，拥有专业的技术开发团队
掌握vue、小程序原生开发、Android原生开发、
Java后台开发技术、大前端技术、react开发、
主要发展方向在移动端方向
专业开发移动端各类应用
专业电商、社区、直播、分销、社区团购、校园跑腿、商城等各类程序开发
wx 710070994