首次提交
This commit is contained in:
duan
684
running/index/index.vue
Normal file
684
running/index/index.vue
Normal file
@@ -0,0 +1,684 @@
|
||||
<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/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&&paotuiHB == '是'">
|
||||
<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/hb_bg.png" class="hb_img"></image>
|
||||
<image src="../static/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/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/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>
|
||||
|
||||
<!-- 同城服务 -->
|
||||
<cover-view class="tabs_box">
|
||||
<cover-view class="pay_tit">
|
||||
<cover-view class="pay_name">请写明{{modelDet.name }}的内容</cover-view>
|
||||
<cover-view class="pay_set">请填写您的具体要求等</cover-view>
|
||||
<cover-view class="pay_radius" @click="bindcity(4)">下单</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
|
||||
<cover-view class="hongbao" v-if="newUserFlag == 1&&paotuiHB == '是'">
|
||||
<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/hb_bg.png" class="hb_img"></cover-image>
|
||||
<cover-image src="../static/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/location.png',
|
||||
covers: [{
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
iconPath: '../static/location.png',
|
||||
width: 40,
|
||||
height: 40,
|
||||
callout: { //自定义标记点上方的气泡窗口 点击有效
|
||||
content: '当前附近骑手', //文本
|
||||
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: '同城服务'
|
||||
}],
|
||||
current: 0,
|
||||
value0: '',
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
type: 'text',
|
||||
clearable: false,
|
||||
riderNumber: '',
|
||||
arr: [],
|
||||
|
||||
// 用户红包
|
||||
newUserFlag: 2,
|
||||
|
||||
token: '',
|
||||
bannerList: [],
|
||||
noticeList: [],
|
||||
classifyLsit: [],
|
||||
|
||||
tuiguang: '',
|
||||
tuiguangImg: '',
|
||||
paotuiHB: '否'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
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/294').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()
|
||||
}
|
||||
|
||||
},
|
||||
onReady() {
|
||||
this.map = uni.createMapContext("map", this)
|
||||
},
|
||||
onShareAppMessage(res) { //发送给朋友
|
||||
return {
|
||||
title: this.tuiguang,
|
||||
path: '/pages/index/index',
|
||||
imageUrl: this.tuiguangImg,
|
||||
}
|
||||
},
|
||||
onShareTimeline(res) { //分享到朋友圈
|
||||
return {
|
||||
title: this.tuiguang,
|
||||
path: '/pages/index/index',
|
||||
imageUrl: this.tuiguangImg,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 分享文案和图片
|
||||
getZiZhi() {
|
||||
this.$Request.getT('/app/common/type/295').then(res => {
|
||||
if (res.code === 0) {
|
||||
this.tuiguang = res.data.value;
|
||||
}
|
||||
});
|
||||
this.$Request.getT('/app/common/type/296').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
|
||||
}
|
||||
},
|
||||
// 跳转发布页面
|
||||
goNav(e) {
|
||||
if (this.token) {
|
||||
uni.navigateTo({
|
||||
url: e
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/register'
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
// 获取轮播图
|
||||
getBannerList() {
|
||||
this.$Request.get("/app/banner/selectBannerList?classify=7&state=1").then(res => {
|
||||
if (res.code == 0) {
|
||||
this.bannerList = res.data
|
||||
}
|
||||
});
|
||||
this.$Request.get("/app/banner/selectBannerList?classify=6&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
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 获取用户当前定位
|
||||
getUser() {
|
||||
console.log('执行')
|
||||
var that = this
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: function(res) {
|
||||
// console.log('成功')
|
||||
// console.log(res)
|
||||
console.log('当前位置的经度：' + res.longitude);
|
||||
console.log('当前位置的纬度：' + 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('授权失败', err)
|
||||
uni.showToast({
|
||||
title: "获取位置授权失败",
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
//右下角定位按钮的点击事件
|
||||
onToGetLocation() {
|
||||
console.log('11')
|
||||
// this. getUser()
|
||||
// this.map.moveToLocation();
|
||||
let mapContext = uni.createMapContext('map');
|
||||
mapContext.moveToLocation(); //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
|
||||
|
||||
|
||||
},
|
||||
// 跑腿人位置
|
||||
getAdd(lng, lat) {
|
||||
this.$Request.getT('/app/tbindent/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/rider.png'
|
||||
obj.width = 30
|
||||
obj.height = 30
|
||||
arr.push(obj)
|
||||
}
|
||||
this.covers[0].callout.content = '当前附近骑手' + 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'
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
getuserinfo() {
|
||||
this.$Request.getT('/app/tbindent/findUserInfoById').then(res => {
|
||||
console.log(res)
|
||||
if (res.code == 0) {
|
||||
this.newUserFlag = res.data.newUserFlag
|
||||
console.log(this.newUserFlag)
|
||||
if (this.newUserFlag == 1) {
|
||||
this.paotuiHB = this.$queue.getData('paotuiHB')
|
||||
if (this.paotuiHB == '是') {
|
||||
this.HBShow = true
|
||||
}
|
||||
} else {
|
||||
this.HBShow = false
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 红包
|
||||
takemoney() {
|
||||
this.$Request.getT('/app/tbindent/getNewUserRedPacket').then(res => {
|
||||
console.log(res)
|
||||
if (res.code === 0) {
|
||||
this.HBShow = false
|
||||
this.getuserinfo()
|
||||
setTimeout(function() {
|
||||
uni.navigateTo({
|
||||
url: '/my/hongbao/hongbao'
|
||||
})
|
||||
}, 100)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none"
|
||||
})
|
||||
this.newUserFlag = ''
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user