開源省錢兄同城跑腿源碼，目前只開源用戶端V2版本部分核心模塊源碼提供學(xué)習(xí)研究
使用uniapp技術(shù)，提供學(xué)習(xí)使用不可商業(yè)
適配支持公眾號+APP+H5+小程序，使用Hbuilder導(dǎo)入即可運行
#功能說明
發(fā)布跑腿 訂單管理 輪播 幫我買 幫我送 同城服務(wù) 同城幫買
萬能任務(wù) 公告 紅包 地址管理 聯(lián)系客服 系統(tǒng)設(shè)置 修改頭像
紅包列表 價格計算 協(xié)議 設(shè)置中心 登錄 獲取驗證碼等功能
定位功能 地圖功能學(xué)習(xí)
# 體驗方式
小程序搜索：碼兄新跑腿?
# 技術(shù)棧
用戶端?uniapp（vue語法）
#下載地址
省錢兄同城跑腿源碼（小程序+APP+H5）uniapp前端模版源碼-小程序文檔類資源-CSDN下載
# 產(chǎn)品介紹文章來源：http://www.zghlxwxcb.cn/news/detail-501636.html
省錢兄同城跑腿-同城跑腿小程序源碼-跑腿APP-跑腿配送服務(wù)-校園跑腿源碼文章來源地址http://www.zghlxwxcb.cn/news/detail-501636.html
<!-- 開源省錢兄同城跑腿源碼，目前只開源用戶端V2版本部分核心模塊源碼提供學(xué)習(xí)研究，使用uniapp技術(shù)，提供學(xué)習(xí)使用不可商業(yè)，商業(yè)使用請聯(lián)系13895585204(同微信)授權(quán)
適配支持公眾號+APP+H5+小程序，使用Hbuilder導(dǎo)入即可運行 -->
<template>
<view>
<view class="margin-lr" v-if="modelSwt == '否'">
<view class="">
<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 bannerList" :key='index'
style="height: 300upx;">
<image :src="item.imageUrl" style="width: 100%;border-radius: 8upx;height: 300upx;"
@click="goWeb(item.url)" mode="scaleToFill"></image>
</swiper-item>
</swiper>
</view>
<view class="flex justify-between align-center bg-white margin-tb padding-lr-sm radius"
style="width: 100%;height: 100rpx;">
<image src="../../static/image/index/xinxi.png" style="width: 126rpx;height: 30rpx;" mode=""></image>
<view class="flex-sub margin-left-sm">
<swiper class="swiper" autoplay="1500" :vertical='true' style="height: 40rpx;overflow: hidden;">
<swiper-item class="" v-for="(item,index) in noticeList" :key='index' @click="goWeb1(item.url)">
<text>{{item.title}}</text>
</swiper-item>
</swiper>
</view>
</view>
<view>
<view class="text-black text-xl text-bold margin-bottom">幫幫跑腿</view>
<view class="flex justify-between flex-wrap">
<view class="bg-video margin-tb-xs" v-for="(item,index) in classifyLsit" :key='index'
@click="goNav(item.url)">
<image :src="item.imageUrl" mode="" style="width: 340rpx;height: 200rpx;"></image>
<view class="flex flex-direction justify-end"
style="position: absolute;top: 0;padding: 30rpx;width: 100%;height: 100%;">
<view class="text-white text-lg text-bold">{{item.name}}</view>
</view>
</view>
</view>
</view>
<!-- 紅包 -->
<view class="hongbao" v-if="HBShow">
<view style="width: 52%;margin: 0 auto;position: relative;">
<view @click="HBShow=false"
style="position: absolute;right: -10rpx;top: -10rpx;font-size: 32rpx;font-weight: bold;">X
</view>
<image src="../../static/image/hb_bg.png" class="hb_img"></image>
<image src="../../static/image/hb_btn.png" class="hb_btn" @click="takemoney()"></image>
</view>
</view>
</view>
<view class="content" v-if="modelSwt == '是'">
<!-- #ifndef MP-WEIXIN -->
<view class="page-body">
<view class="page-section page-section-gap">
<map id="map" style="width: 100%; height: 700px;" :latitude="latitude" :longitude="longitude"
:markers="covers" :show-location="true">
<cover-view style="position: fixed;top: 345px;right: 30px;" @click="onToGetLocation()">
<cover-image class="img-map1" src="../../static/image/dw.png">
</cover-image>
</cover-view>
</map>
</view>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="page-body">
<view class="page-section page-section-gap">
<map id="map" style="width: 100%; height: 700px;" :latitude="latitude" :longitude="longitude"
:markers="covers" :show-location="true" :customCallout="customCallout">
<cover-view style="position: fixed;bottom: 430rpx;right: 60rpx;" @click="onToGetLocation()">
<cover-image class="img-map1" src="../../static/image/dw.png">
</cover-image>
</cover-view>
</map>
</view>
</view>
<!-- #endif -->
<cover-view class="controls-title">
<cover-view class="controls-tabs">
<cover-view v-for="(item,index) in classifyLsit" :key="index" v-if="index<4"
@tap="change(index,item)" class="atabs_ds">
<cover-view>{{item.name}}</cover-view>
<cover-view :class="{btna:count == index}"></cover-view>
</cover-view>
</cover-view>
<!-- 同城服務(wù) -->
<cover-view class="tabs_box">
<cover-view class="pay_tit">
<cover-view class="pay_name">請寫明{{modelDet.name }}的內(nèi)容</cover-view>
<cover-view class="pay_set">請?zhí)顚懩木唧w要求等</cover-view>
<cover-view class="pay_radius" @click="bindcity(4)">下單</cover-view>
</cover-view>
</cover-view>
</cover-view>
<cover-view class="hongbao" v-if="HBShow">
<cover-view style="width: 52%;margin: 0 auto;position: relative;">
<cover-view @click="HBShow=false"
style="position: absolute;right: -10rpx;top: -10rpx;font-size: 32rpx;font-weight: bold;">X
</cover-view>
<cover-image src="../../static/image/hb_bg.png" class="hb_img"></cover-image>
<cover-image src="../../static/image/hb_btn.png" class="hb_btn" @click="takemoney()"></cover-image>
</cover-view>
</cover-view>
<cover-view v-else></cover-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
HBShow: false,
modelSwt: "",
modelDet: {},
id: 0, // 使用 marker點擊事件 需要填寫id
title: 'map',
latitude: '',
longitude: '',
iconPath: '../../static/image/location.png',
covers: [{
latitude: '',
longitude: '',
iconPath: '../../static/image/location.png',
width: 40,
height: 40,
callout: { //自定義標(biāo)記點上方的氣泡窗口 點擊有效
content: '當(dāng)前附近騎手', //文本
color: '#ffffff', //文字顏色
fontSize: 10, //文本大小
padding: 10, //附近留白
borderRadius: 2, //邊框圓角
bgColor: '#00c16f', //背景顏色
display: 'ALWAYS', //常顯
},
}],
count: "",
list: [{
id: 0,
name: '幫我送'
}, {
id: 1,
name: '幫我取'
}, {
id: 2,
name: '同城幫買'
}, {
id: 3,
name: '同城服務(wù)'
}],
current: 0,
value0: '',
value1: '',
value2: '',
value3: '',
type: 'text',
clearable: false,
riderNumber: '',
// 用戶紅包
newUserFlag: 2,
token: '',
bannerList: [],
noticeList: [],
classifyLsit: [],
tuiguang: '',
tuiguangImg: '',
arr: [],
showModal1: true,
invitationCode:''
}
},
// 開源省錢兄同城跑腿源碼，目前只開源用戶端V2版本部分核心模塊源碼提供學(xué)習(xí)研究，使用uniapp技術(shù)，提供學(xué)習(xí)使用不可商業(yè)，商業(yè)使用請聯(lián)系13895585204授權(quán)
// 適配支持公眾號+APP+H5+小程序，使用Hbuilder導(dǎo)入即可運行
onLoad(option) {
if (option.scene) {
console.log('邀請人的碼：', option.scene)
this.$queue.setData("userByinvitationId", option.scene);
}
// 獲取邀請碼保存到本地
if (option.invitation) {
that.$queue.setData('userByinvitationId', option.invitation);
}
this.invitationCode = this.$queue.getData('invitationCode');
this.getBannerList()
this.getNoticeList()
this.getZiZhi()
let takeAddress = {
data1: '',
data2: '',
}
let closeAddress = {
data1: '',
data2: '',
data3: '',
data4: '',
citydata: ''
}
uni.setStorageSync('takeAddress', takeAddress)
uni.setStorageSync('closeAddress', closeAddress)
if (uni.getStorageSync('disinfo')) {
uni.removeStorageSync('disinfo')
}
},
onShow() {
// 首頁是否展示地圖
this.$Request.getT('/app/common/type/275').then(res => {
if (res.code == 0) {
if (res.data && res.data.value) {
this.modelSwt = res.data.value
this.$queue.setData('modelSwt', res.data.value)
}
}
});
this.token = uni.getStorageSync('token')
if (this.token) {
this.getUser()
}
this.$Request.getT('/app/common/type/307').then(res => { //用戶端騎手取消訂單通知 307
if (res.code == 0) {
if (res.data && res.data.value) {
this.arr.push(res.data.value)
}
}
})
if (this.showModal1) {
// #ifdef MP-WEIXIN
this.openMsg()
// #endif
}
},
onReady() {
this.map = uni.createMapContext("map", this)
},
onShareAppMessage(res) { //發(fā)送給朋友
return {
title: this.tuiguang,
path: '/pages/index/index?invitation='+this.invitationCode,
imageUrl: this.tuiguangImg,
}
},
onShareTimeline(res) { //分享到朋友圈
return {
title: this.tuiguang,
path: '/pages/index/index?invitation='+this.invitationCode,
imageUrl: this.tuiguangImg,
}
},
methods: {
// 分享文案和圖片
getZiZhi() {
this.$Request.getT('/app/common/type/276').then(res => {
if (res.code === 0) {
this.tuiguang = res.data.value;
}
});
this.$Request.getT('/app/common/type/277').then(res => {
if (res.code === 0) {
this.tuiguangImg = res.data.value;
}
});
},
goWeb(url) {
console.log(url.indexOf('/pages/') !== -1)
return
if (url.indexOf('/pages/') !== -1) {
uni.navigateTo({
url
});
} else {
//#ifndef H5
uni.navigateTo({
url: '/pages/index/webView?url=' + url
});
//#endif
//#ifdef H5
window.location.href = url;
//#endif
}
},
goWeb1(url) {
if (url.indexOf('http') !== -1) {
//#ifndef H5
uni.navigateTo({
url: '/pages/index/webView?url=' + url
});
//#endif
//#ifdef H5
window.location.href = url;
//#endif
}
},
// 跳轉(zhuǎn)發(fā)布頁面
goNav(e) {
if (this.token) {
uni.navigateTo({
url: e
})
} else {
uni.navigateTo({
url: '/pages/my/register'
})
}
},
// 獲取輪播圖
getBannerList() {
this.$Request.get("/app/banner/selectBannerList?classify=1&state=1").then(res => {
if (res.code == 0) {
this.bannerList = res.data
}
});
this.$Request.get("/app/banner/selectBannerList?classify=4&state=1").then(res => {
if (res.code == 0) {
this.classifyLsit = res.data
this.modelDet = this.classifyLsit[0]
}
});
},
// 獲取公告
getNoticeList() {
let data = {
page: 1,
limit: 100
}
this.$Request.get("/app/notice/selectNoticeList", data).then(res => {
if (res.code == 0) {
this.noticeList = res.data.list
}
});
},
// 獲取用戶當(dāng)前定位
getUser() {
console.log('執(zhí)行')
var that = this
uni.getLocation({
type: 'wgs84',
success: function(res) {
// console.log('成功')
// console.log(res)
console.log('當(dāng)前位置的經(jīng)度：' + res.longitude);
console.log('當(dāng)前位置的緯度：' + res.latitude);
that.longitude = res.longitude
that.latitude = res.latitude
that.covers[0].longitude = res.longitude
that.covers[0].latitude = res.latitude
that.getAdd(that.longitude, that.latitude)
that.getuserinfo()
},
fail: function(err) {
console.log('授權(quán)失敗', err)
uni.showToast({
title: "獲取位置授權(quán)失敗",
icon: "none"
})
}
});
},
//右下角定位按鈕的點擊事件
onToGetLocation() {
console.log('11')
// this. getUser()
// this.map.moveToLocation();
let mapContext = uni.createMapContext('map');
mapContext.moveToLocation(); //moveToLocation將地圖中心移動到當(dāng)前定位點，需要配合map組件的show-location使用
},
// 跑腿人位置
getAdd(lng, lat) {
this.$Request.getT('/app/indent/find5KmRider?lng=' + lng + '&lat=' + lat).then(res => {
// console.log('```````````````', res)
if (res.code == 0) {
this.riderNumber = res.data.length
if (res.data.length > 0) {
var arr = []
for (var i in res.data) {
var obj = {}
obj.latitude = res.data[i].stationLat
obj.longitude = res.data[i].stationLng
obj.iconPath = '../../static/image/rider.png'
obj.width = 30
obj.height = 30
arr.push(obj)
}
this.covers[0].callout.content = '當(dāng)前附近騎手' + res.data.length + '人'
// this.covers = arr
this.covers = [...this.covers, ...arr];
// console.log('this.covers ', this.covers)
}
}
});
},
change(index, item) {
// console.log(index)
this.modelDet = item
this.current = index;
this.count = index;
console.log(this.count)
// uni.removeStorageSync('takeAddress')
},
bindHelppay(index) {
// console.log(index)
let token = this.$queue.getData("token");
if (token) {
uni.navigateTo({
url: '/pages/Helppay/Helppay'
})
} else {
uni.navigateTo({
url: '/pages/my/register'
})
}
},
bindcity(index) {
// console.log(index)
let token = this.$queue.getData("token");
if (token) {
uni.navigateTo({
url: this.modelDet.url
})
} else {
uni.navigateTo({
url: '/pages/my/register'
})
}
},
bindtake(index) {
// console.log(index)
let token = this.$queue.getData("token");
if (token) {
if (this.longitude == '') {
this.getUser()
} else {
uni.navigateTo({
url: '/pages/takeaddress/takeaddress?index=' + index
})
}
} else {
uni.navigateTo({
url: '/pages/my/register'
})
}
},
bindclose(index) {
// console.log(index)
let token = this.$queue.getData("token");
if (token) {
uni.navigateTo({
url: '/pages/closeaddress/closeaddress?index=' + index
})
} else {
uni.navigateTo({
url: '/pages/my/register'
})
}
},
// 獲取用戶信息
getuserinfo() {
this.$Request.getT('/app/userinfo/findUserInfoById').then(res => {
console.log(res)
if (res.code == 0) {
this.newUserFlag = res.data.newUserFlag
console.log(this.newUserFlag)
if (this.newUserFlag == 1) {
this.HBShow = true
} else {
this.HBShow = false
}
}
});
},
// 紅包
takemoney() {
this.$Request.getT('/app/userinfo/getNewUserRedPacket').then(res => {
console.log(res)
if (res.code === 0) {
this.HBShow = false
this.getuserinfo()
setTimeout(function() {
uni.navigateTo({
url: '/pages/my/hongbao/hongbao'
})
}, 100)
} else {
uni.showToast({
title: res.msg,
icon: "none"
})
this.newUserFlag = ''
}
});
},
// 開啟訂閱消息
openMsg() {
console.log('訂閱消息')
var that = this
uni.getSetting({
withSubscriptions: true, //是否獲取用戶訂閱消息的訂閱狀態(tài)，默認false不返回
success(ret) {
console.log(ret.subscriptionsSetting, '------------------')
// if (ret.subscriptionsSetting.itemSettings && Object.keys(ret.subscriptionsSetting.itemSettings).length == 2) {
if (ret.subscriptionsSetting.itemSettings) {
uni.setStorageSync('sendMsg', true)
uni.openSetting({ // 打開設(shè)置頁
success(rea) {
console.log(rea.authSetting)
}
});
} else { // 用戶沒有點擊“總是保持以上，不再詢問”則每次都會調(diào)起訂閱消息
console.log(99999)
uni.setStorageSync('sendMsg', false)
uni.showModal({
title: '提示',
content: '為了更好的體驗,請綁定消息推送',
confirmText: '確定',
cancelText: '取消',
success: function(res) {
if (res.confirm) {
console.log(that.arr)
wx.requestSubscribeMessage({
tmplIds: that.arr,
success(re) {
console.log(JSON.stringify(re),
'++++++++++++++')
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
// uni.setStorageSync('sendMsg', true)
}
},
fail: (res) => {
console.log(res)
}
})
// uni.setStorageSync('sendMsg', true)
console.log('確認')
that.showModal1 = false
} else if (res.cancel) {
console.log('取消')
// uni.setStorageSync('sendMsg', false)
that.showModal1 = true
}
}
})
}
}
})
},
}
}
</script>
<style>
.content {
width: 100%;
position: fixed;
top: 0upx;
left: 0upx;
right: 0upx;
bottom: 0upx;
}
.controls-title {
width: 90%;
height: 370upx;
background: #FFFFFF;
position: fixed;
bottom: 0rpx;
margin: 40upx;
border-radius: 26upx;
box-shadow: 0upx 30upx 40upx 0upx rgba(187, 170, 163, 0.20);
/* #ifndef MP-WEIXIN */
width: 90%;
margin: 0 40rpx;
margin-bottom: 150rpx;
/* #endif */
}
/* tab選項卡 */
.controls-tabs {
display: flex;
font-size: 33rpx;
overflow-x: auto;
}
.atabs_ds {
flex-grow: 1;
text-align: center;
height: 55rpx;
}
/* .tabs_box {
display: none;
background: #C8C7CC;
} */
.btna {
background: #FF6A04;
width: 68%;
height: 8rpx;
margin: 9rpx 10rpx 10rpx 29rpx;
border-radius: 35rpx;
}
.tabs_box {
/* display: none; */
}
.dis {
display: block;
}
.controls-tabs {
width: 100%;
height: 90rpx;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10rpx;
}
.box_bg {
width: 90%;
height: 100upx;
background: #FFFFFF;
margin: 0 auto;
border-radius: 12upx;
display: flex;
margin-top: 20upx;
}
.box {
width: 90%;
height: 100upx;
background: #F5F5F5;
margin: 0 auto;
border-radius: 12upx;
display: flex;
margin-top: 20upx;
}
.box_dian {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.box_dian cover-image {
width: 20upx;
height: 20upx;
}
.box_name {
flex: 5;
display: flex;
justify-content: left;
align-items: center;
color: #333333;
font-weight: 700;
font-size: 34rpx;
}
.box_addres {
flex: 5;
}
.add {
color: #333333;
font-size: 26upx;
letter-spacing: 2upx;
font-weight: bold;
line-height: 50upx;
}
.name {
display: inline;
font-size: 24upx;
color: #999999;
}
.number {
display: initial;
color: #999999;
font-size: 24upx;
margin-left: 30upx;
}
.box_image {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.icon_you {
color: #CCCCCC !important;
}
/* 同城購買 */
.pay_tit {
width: 90%;
margin: 0 auto;
height: 200upx;
position: relative;
}
.pay_name {
font-size: 31rpx;
font-weight: bold;
width: 95%;
margin: 0 auto;
letter-spacing: 2upx;
}
.pay_set {
color: #333333;
font-size: 28rpx;
width: 95%;
margin: 0 auto;
margin-top: 20upx;
}
.pay_radius {
width: 100upx;
height: 100upx;
background: #FF7F00;
color: white;
text-align: center;
line-height: 100upx;
border-radius: 68upx;
position: absolute;
right: 20upx;
}
.hongbao {
width: 100%;
/* height: 100px; */
/* background: #007AFF; */
position: fixed;
top: 24%;
/* bottom: 50%; */
left: 0rpx;
right: 0rpx;
/* display: none; */
}
.hb_img {
width: 100%;
height: 435rpx;
}
.hb_btn {
width: 60%;
height: 72rpx;
position: absolute;
top: 315rpx;
left: 80rpx;
}
.img-map1 {
width: 80rpx;
height: 80rpx;
}
</style>
到了這里，關(guān)于省錢兄同城跑腿小程序源碼uniapp前端模版源碼（小程序+APP+H5）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
