@ -0,0 +1,214 @@ | |||
<template> | |||
<view class="works" @click="$emit('click')"> | |||
<view class="box" | |||
:style="{'--sexcolor' : sex[item.sex].color}"> | |||
<view class="headPortraitimg"> | |||
<image :src="item.userImage" mode="aspectFill"></image> | |||
</view> | |||
<view class="YaoduUniversalWall"> | |||
<view class="heide"> | |||
<view class="username text-ellipsis"> | |||
{{ item.userName }} | |||
</view> | |||
<view class="inde" | |||
v-if="item.sex"> | |||
<!-- 性别 --> | |||
{{ item.sex }} | |||
</view> | |||
<view class="inde" | |||
v-if="item.yearDate"> | |||
<!-- 年份 --> | |||
{{ item.yearDate }} | |||
</view> | |||
<view class="inde" | |||
v-if="item.addId"> | |||
<!-- 地址 --> | |||
{{ item.addId }} | |||
</view> | |||
<view class="authentication" | |||
v-if="item.isContent"> | |||
<!-- 个人认证 --> | |||
{{ item.isContent }} | |||
</view> | |||
</view> | |||
<view class="Times"> | |||
<view class="TimeMonth"> | |||
<!-- 10-08 --> | |||
{{ item.createTime }}发布 | |||
</view> | |||
<!-- <view class="Month"> | |||
12:34 | |||
</view> --> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="dynamics" v-html="$utils.stringFormatHtml(item.title)"> | |||
</view> | |||
<view class="Artworkimages"> | |||
<view class="wrokimg" | |||
@click.stop="previewImage(item.image, i)" | |||
:key="i" v-for="(img, i) in item.image"> | |||
<image :src="img" mode="aspectFill"></image> | |||
</view> | |||
</view> | |||
<view class="bottom"> | |||
<view class="Leavingamessage" | |||
@click.stop="$emit('del')"> | |||
<uv-icon size="40rpx" name="trash"></uv-icon> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import mixinsSex from '@/mixins/sex.js' | |||
export default { | |||
mixins: [mixinsSex], | |||
props: { | |||
item: {}, | |||
}, | |||
data() { | |||
return { | |||
} | |||
}, | |||
methods: { | |||
}, | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.works { | |||
margin: 40rpx 20rpx; | |||
background-color: #fff; | |||
padding: 40rpx; | |||
border-radius: 20rpx; | |||
box-shadow: 0 0 6rpx 6rpx #00000011; | |||
.box { | |||
display: flex; | |||
align-items: center; | |||
.headPortraitimg { | |||
width: 100rpx; | |||
height: 100rpx; | |||
border-radius: 15rpx; | |||
overflow: hidden; | |||
image{ | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
.YaoduUniversalWall { | |||
padding: 0rpx 10rpx; | |||
.username { | |||
max-width: 200rpx; | |||
} | |||
.heide { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.inde { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
padding: 0rpx 10rpx; | |||
margin: 0rpx 5rpx; | |||
font-size: 20rpx; | |||
height: 30rpx; | |||
color: white; | |||
// background-color: rgb(124, 136, 242); | |||
background-color: var(--sexcolor); | |||
border-radius: 7rpx; | |||
flex-shrink: 0; | |||
} | |||
.authentication { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
padding: 0rpx 10rpx; | |||
margin: 0rpx 5rpx; | |||
font-size: 20rpx; | |||
height: 34rpx; | |||
padding: 0rpx 10rpx; | |||
color: white; | |||
background-color: #ffd036; | |||
border-radius: 7rpx; | |||
flex-shrink: 0; | |||
} | |||
.Times { | |||
display: flex; | |||
padding: 5rpx 0rpx; | |||
font-size: 20rpx; | |||
margin-top: 10rpx; | |||
.Month { | |||
margin: 0rpx 15rpx; | |||
} | |||
} | |||
} | |||
} | |||
.personalInformation { | |||
display: flex; | |||
.inde { | |||
font-size: 25rpx; | |||
padding: 0rpx 8rpx; | |||
} | |||
.authentication { | |||
font-size: 25rpx; | |||
} | |||
} | |||
.dynamics { | |||
margin-top: 20rpx; | |||
font-size: 28rpx; | |||
// font-weight: bold; | |||
// line-height: 35rpx; | |||
letter-spacing: 3rpx; | |||
} | |||
.Artworkimages { | |||
display: flex; | |||
flex-wrap: wrap; | |||
.wrokimg { | |||
margin: 10rpx; | |||
image { | |||
height: 190rpx; | |||
width: 190rpx; | |||
border-radius: 20rpx; | |||
} | |||
} | |||
} | |||
.bottom { | |||
display: flex; | |||
margin-top: 20rpx; | |||
font-size: 24rpx; | |||
.browse { | |||
margin: 0rpx 30rpx; | |||
color: rgb(132, 132, 132); | |||
} | |||
.Leavingamessage { | |||
height: 20rpx; | |||
width: 20rpx; | |||
margin-left: auto; | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,22 @@ | |||
<template> | |||
<view class="page pageList"> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
} | |||
}, | |||
methods: { | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
</style> |
@ -0,0 +1,22 @@ | |||
<template> | |||
<view class="page pageList"> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
} | |||
}, | |||
methods: { | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
</style> |
@ -0,0 +1,82 @@ | |||
<template> | |||
<view class="comment"> | |||
<view class="box"> | |||
<view class="headPortraitimg"> | |||
<image :src="item.userHead" | |||
@click.stop="previewImage([item.userHead])" | |||
mode="aspectFill"></image> | |||
</view> | |||
<view class="YaoduUniversalWall"> | |||
<view class="heide"> | |||
<view class="username text-ellipsis"> | |||
{{ item.userName }} | |||
</view> | |||
</view> | |||
<view class="Times"> | |||
<view class="TimeMonth"> | |||
{{ item.createTime }}发布 | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="dynamics" v-html="$utils.stringFormatHtml(item.userValue)"> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
props : ['item'], | |||
data() { | |||
return { | |||
} | |||
}, | |||
methods: { | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.comment { | |||
background-color: #fff; | |||
padding: 30rpx 40rpx; | |||
margin-top: 10rpx; | |||
.box { | |||
display: flex; | |||
align-items: center; | |||
.headPortraitimg { | |||
width: 80rpx; | |||
height: 80rpx; | |||
border-radius: 15rpx; | |||
overflow: hidden; | |||
image { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
.YaoduUniversalWall { | |||
padding: 0rpx 10rpx; | |||
font-size: 26rpx; | |||
line-height: 40rpx; | |||
.Times { | |||
font-size: 22rpx; | |||
} | |||
} | |||
} | |||
.dynamics { | |||
margin-top: 20rpx; | |||
margin-left: 100rpx; | |||
font-size: 28rpx; | |||
letter-spacing: 3rpx; | |||
} | |||
} | |||
</style> |
@ -0,0 +1,111 @@ | |||
<template> | |||
<view> | |||
<view class="comment-list"> | |||
<commentItem | |||
v-for="(item,index) in list" | |||
:key="index" | |||
:item="item" /> | |||
</view> | |||
<view class="submit-box"> | |||
<view class="top"> | |||
<uv-icon | |||
color="#00cf05" | |||
size="50rpx" | |||
name="weixin-fill"></uv-icon> | |||
<input type="text" | |||
:placeholder="'评论给' + params.name" | |||
v-model="form.userValue"/> | |||
<view class="submit" | |||
@click="submit"> | |||
发布 | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import commentItem from './commentItem.vue' | |||
export default { | |||
components: { | |||
commentItem, | |||
}, | |||
props: ['list', 'params'], | |||
data() { | |||
return { | |||
form : {}, | |||
} | |||
}, | |||
methods: { | |||
submit(){ | |||
let data = { | |||
...this.form, | |||
...this.params, | |||
} | |||
if (this.$utils.verificationAll(data, { | |||
userValue: '说点什么吧', | |||
type: '缺少type', | |||
orderId: '缺少orderId', | |||
})) { | |||
return | |||
} | |||
// this.form.image = this.fileList.map((item) => item.url).join(",") | |||
// this.form.orderId = this.params.orderId | |||
// this.form.type = this.params.type | |||
this.$api('addComment', data, res => { | |||
if(res.code == 200){ | |||
this.form.userValue = '' | |||
uni.showToast({ | |||
title: '发布成功!', | |||
icon: 'none' | |||
}) | |||
this.$emit('getData') | |||
} | |||
}) | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.comment-list { | |||
margin-top: 20rpx; | |||
padding-bottom: 150rpx; | |||
} | |||
.submit-box { | |||
position: fixed; | |||
bottom: 0; | |||
left: 0; | |||
background-color: #fff; | |||
width: 100%; | |||
box-shadow: 0 0 6rpx 6rpx #00000011; | |||
padding-bottom: env(safe-area-inset-bottom); | |||
.top { | |||
align-items: center; | |||
display: flex; | |||
justify-content: center; | |||
input { | |||
background-color: #f3f3f3; | |||
width: 460rpx; | |||
height: 40rpx; | |||
border-radius: 40rpx; | |||
margin: 20rpx; | |||
padding: 20rpx 30rpx; | |||
font-size: 28rpx; | |||
} | |||
.submit {} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,291 @@ | |||
<template> | |||
<view class="postDetail"> | |||
<navbar leftClick @leftClick="$utils.navigateBack" title="详情" /> | |||
<view class="works" @click="$emit('click')"> | |||
<view class="box" :style="{'--sexcolor' : sex[detail.sex].color}"> | |||
<view class="headPortraitimg"> | |||
<image :src="detail.logoImage" | |||
@click.stop="previewImage([item.logoImage])" | |||
mode="aspectFill"></image> | |||
</view> | |||
<view class="YaoduUniversalWall"> | |||
<view class="heide"> | |||
<view class="username text-ellipsis"> | |||
{{ detail.title }} | |||
</view> | |||
<view class="inde" v-if="detail.sex"> | |||
<!-- 性别 --> | |||
{{ detail.sex }} | |||
</view> | |||
<view class="inde" v-if="detail.yearDate"> | |||
<!-- 年份 --> | |||
{{ detail.yearDate }} | |||
</view> | |||
<view class="inde" v-if="detail.address"> | |||
<!-- 地址 --> | |||
{{ detail.address }} | |||
</view> | |||
<view class="authentication" v-if="detail.isContent"> | |||
<!-- 个人认证 --> | |||
{{ detail.isContent }} | |||
</view> | |||
</view> | |||
<view class="Times"> | |||
<view class="TimeMonth"> | |||
营业时间:{{ detail.workTime }} | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<!-- <view class="dynamics" v-html="$utils.stringFormatHtml(detail.title)"> | |||
</view> --> | |||
<view class="dynamics"> | |||
地址:{{ detail.address }} | |||
</view> | |||
<view class="Artworkimages"> | |||
<view class="wrokimg" @click.stop="previewImage(detail.detailsImage, i)" :key="i" | |||
v-for="(img, i) in detail.detailsImage"> | |||
<image :src="img" mode="aspectFill"></image> | |||
</view> | |||
</view> | |||
<view class="bottom"> | |||
<view class="browse"> | |||
{{ detail.isBrowse }}浏览 | |||
</view> | |||
<view class="browse"> | |||
{{ detail.isComment }}条评论 | |||
</view> | |||
<view class="Leavingamessage" | |||
@click="openLocation(detail.latitude, detail.longitude)" | |||
v-if="detail.latitude && detail.longitude"> | |||
<uv-icon size="40rpx" name="map"></uv-icon> | |||
导航 | |||
</view> | |||
</view> | |||
</view> | |||
<commentList | |||
@getData="getData" | |||
:list="list" | |||
:params="params" | |||
/> | |||
</view> | |||
</template> | |||
<script> | |||
import mixinsSex from '@/mixins/sex.js' | |||
import mixinsList from '@/mixins/list.js' | |||
import commentList from '../components/list/comment/commentList.vue' | |||
export default { | |||
mixins: [mixinsSex, mixinsList], | |||
components: { | |||
commentList | |||
}, | |||
data() { | |||
return { | |||
detail: {}, | |||
mixinsListApi : 'getCommentPage', | |||
params : { | |||
type : '4', | |||
orderId : '', | |||
name : '', | |||
}, | |||
id : 0, | |||
} | |||
}, | |||
onLoad(options) { | |||
// this.$route.query的参数 | |||
console.log(options) | |||
this.id = options.id | |||
this.queryParams.type = this.params.type | |||
this.queryParams.orderId = options.id | |||
this.params.orderId = options.id | |||
}, | |||
onPullDownRefresh() { | |||
this.getDetail() | |||
}, | |||
onShow() { | |||
this.getDetail() | |||
}, | |||
onShareAppMessage(res) { | |||
// return { | |||
// title: this.item.title, | |||
// desc: this.item.content && this.item.content.slice(0, 30), | |||
// path: '/pages/publish/postDetail?id=' + this.id | |||
// } | |||
}, | |||
methods: { | |||
getDetail() { | |||
this.$api('getStoreDetail', { | |||
id: this.id | |||
}, res => { | |||
uni.stopPullDownRefresh() | |||
if (res.code == 200) { | |||
this.params.name = res.result.title | |||
// res.result.image = | |||
// res.result.image ? | |||
// res.result.image.split(',') : [], | |||
res.result.detailsImage = | |||
res.result.detailsImage ? | |||
res.result.detailsImage.split(',') : [], | |||
// res.result.details = | |||
// res.result.details ? | |||
// res.result.details.split(',') : [] | |||
this.detail = res.result | |||
} | |||
}) | |||
}, | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.postDetail { | |||
padding-bottom: env(safe-area-inset-bottom); | |||
.works { | |||
background-color: #fff; | |||
padding: 40rpx; | |||
border-radius: 20rpx; | |||
.box { | |||
display: flex; | |||
align-items: center; | |||
.headPortraitimg { | |||
width: 100rpx; | |||
height: 100rpx; | |||
border-radius: 15rpx; | |||
overflow: hidden; | |||
image { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
} | |||
.YaoduUniversalWall { | |||
padding: 0rpx 10rpx; | |||
.username { | |||
max-width: 200rpx; | |||
} | |||
.heide { | |||
display: flex; | |||
align-items: center; | |||
} | |||
.inde { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
padding: 0rpx 10rpx; | |||
margin: 0rpx 5rpx; | |||
font-size: 20rpx; | |||
height: 30rpx; | |||
color: white; | |||
// background-color: rgb(124, 136, 242); | |||
background-color: var(--sexcolor); | |||
border-radius: 7rpx; | |||
flex-shrink: 0; | |||
} | |||
.authentication { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
padding: 0rpx 10rpx; | |||
margin: 0rpx 5rpx; | |||
font-size: 20rpx; | |||
height: 34rpx; | |||
padding: 0rpx 10rpx; | |||
color: white; | |||
background-color: #ffd036; | |||
border-radius: 7rpx; | |||
flex-shrink: 0; | |||
} | |||
.Times { | |||
display: flex; | |||
padding: 5rpx 0rpx; | |||
font-size: 20rpx; | |||
margin-top: 10rpx; | |||
.Month { | |||
margin: 0rpx 15rpx; | |||
} | |||
} | |||
} | |||
} | |||
.personalInformation { | |||
display: flex; | |||
.inde { | |||
font-size: 25rpx; | |||
padding: 0rpx 8rpx; | |||
} | |||
.authentication { | |||
font-size: 25rpx; | |||
} | |||
} | |||
.dynamics { | |||
margin-top: 20rpx; | |||
font-size: 28rpx; | |||
// font-weight: bold; | |||
// line-height: 35rpx; | |||
letter-spacing: 3rpx; | |||
} | |||
.Artworkimages { | |||
display: flex; | |||
flex-wrap: wrap; | |||
.wrokimg { | |||
margin: 10rpx; | |||
image { | |||
height: 190rpx; | |||
width: 190rpx; | |||
border-radius: 20rpx; | |||
} | |||
} | |||
} | |||
.bottom { | |||
display: flex; | |||
margin-top: 20rpx; | |||
font-size: 24rpx; | |||
.browse { | |||
margin: 0rpx 30rpx; | |||
color: rgb(132, 132, 132); | |||
} | |||
.Leavingamessage { | |||
margin-left: auto; | |||
display: flex; | |||
align-items: center; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,88 @@ | |||
<template> | |||
<view class="page pageList"> | |||
<navbar title="江华人" leftClick @leftClick="$utils.navigateBack" /> | |||
<view style="padding: 10rpx 30rpx;"> | |||
<uv-search bgColor="#fff" @search="getData" @custom="getData" searchIconSize="30rpx" | |||
placeholder="请输入搜索关键字..." v-model="queryParams.title"></uv-search> | |||
</view> | |||
<view class="fansList"> | |||
<view class="fanst" v-for="(item,index) in list"> | |||
<view class=" profilepicture"> | |||
<image :src="item.headImage" mode="aspectFill"></image> | |||
</view> | |||
<view class="name"> | |||
<view class="namea"> | |||
{{ item.nickName }} | |||
</view> | |||
<view class="nameb"> | |||
<!-- 感悟哲理,积极面对人生,传递正能量。 --> | |||
{{ item.createTime }} | |||
</view> | |||
</view> | |||
<view class="Dot"> | |||
<uv-icon name="more-dot-fill"></uv-icon> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import mixinsList from '@/mixins/list.js' | |||
export default { | |||
mixins: [mixinsList], | |||
data() { | |||
return { | |||
mixinsListApi : 'getJiangHuInfo', | |||
} | |||
}, | |||
methods: { | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.fansList { | |||
margin: 20rpx 10rpx; | |||
background-color: white; | |||
.fanst{ | |||
margin: 20rpx 0rpx; | |||
display: flex; | |||
align-items: center; | |||
padding: 20rpx; | |||
.profilepicture { | |||
width: 100rpx; | |||
height: 100rpx; | |||
border-radius: 50%; | |||
image{ | |||
width: 100rpx; | |||
height: 100rpx; | |||
border-radius: 50%; | |||
} | |||
} | |||
.name { | |||
letter-spacing: 2rpx; | |||
font-size: 25rpx; | |||
margin-left: 20rpx; | |||
.namea { | |||
font-weight: bold; | |||
} | |||
.nameb { | |||
color: rgba(0, 0, 0, 0.5); | |||
} | |||
} | |||
.Dot{ | |||
margin-left: auto; | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,151 @@ | |||
<template> | |||
<view class="postDetail"> | |||
<navbar leftClick @leftClick="$utils.navigateBack" title="详情" /> | |||
<view class="swipe"> | |||
<uv-swiper | |||
:list="detail.images" | |||
indicator | |||
height="420rpx"></uv-swiper> | |||
</view> | |||
<view class="box"> | |||
<view class="title"> | |||
{{ detail.name }} | |||
</view> | |||
<view class="createBy"> | |||
<view class=""> | |||
发布时间:{{ $dayjs(detail.createTime).format('YYYY-MM-DD') }} | |||
</view> | |||
</view> | |||
<view class="createBy"> | |||
<view class=""> | |||
地址:{{ detail.address }} | |||
</view> | |||
</view> | |||
<view class="content"> | |||
<uv-parse :content="detail.details"></uv-parse> | |||
</view> | |||
</view> | |||
<commentList | |||
@getData="getData" | |||
:list="list" | |||
:params="params" | |||
/> | |||
</view> | |||
</template> | |||
<script> | |||
import mixinsList from '@/mixins/list.js' | |||
import commentList from '../components/list/comment/commentList.vue' | |||
export default { | |||
mixins: [mixinsList], | |||
components: { | |||
commentList | |||
}, | |||
data() { | |||
return { | |||
detail: {}, | |||
mixinsListApi : 'getCommentPage', | |||
params : { | |||
type : '3', | |||
orderId : '', | |||
name : '', | |||
}, | |||
id : 0, | |||
} | |||
}, | |||
onLoad(options) { | |||
// this.$route.query的参数 | |||
console.log(options) | |||
this.id = options.id | |||
this.queryParams.type = this.params.type | |||
this.queryParams.orderId = options.id | |||
this.params.orderId = options.id | |||
}, | |||
onPullDownRefresh(){ | |||
this.getDetail() | |||
}, | |||
onShow() { | |||
this.getDetail() | |||
}, | |||
onShareAppMessage(res) { | |||
// if (res.from === 'button') {// 来自页面内分享按钮 | |||
// console.log(res.target) | |||
// } | |||
// return { | |||
// title: this.item.title, | |||
// desc: this.item.content && this.item.content.slice(0, 30), | |||
// path: '/pages/publish/postDetail?id=' + this.id | |||
// } | |||
}, | |||
methods: { | |||
getDetail() { | |||
this.$api('getScenicDetail', { | |||
id : this.id | |||
}, res => { | |||
uni.stopPullDownRefresh() | |||
if (res.code == 200) { | |||
this.params.name = res.result.name | |||
this.detail = res.result | |||
this.detail.images = res.result.images && res.result.images.split(',') | |||
} | |||
}) | |||
}, | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.postDetail { | |||
.box { | |||
padding: 20rpx; | |||
width: 100vw; | |||
background-color: #fff; | |||
box-sizing: border-box; | |||
.title { | |||
font-size: 34rpx; | |||
font-weight: 600; | |||
color: #000; | |||
} | |||
.createBy { | |||
display: flex; | |||
margin-top: auto; | |||
margin-bottom: 10rpx; | |||
font-size: 24rpx; | |||
margin-top: 20rpx; | |||
color: #555; | |||
&>view { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding-right: 20rpx; | |||
} | |||
} | |||
.controls { | |||
margin-top: 30rpx; | |||
} | |||
.content { | |||
margin-top: 30rpx; | |||
font-size: 28rpx; | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,190 @@ | |||
import config from '../config.js' | |||
function calculateDistance(lat1, lon1, lat2, lon2) { //计算两点距离 | |||
let distance = 0 | |||
if (!lat2 || !lon2) return distance | |||
//先强制转换一下(后端给的字符串) | |||
lat1 = parseFloat(lat1) | |||
lon1 = parseFloat(lon1) | |||
lat2 = parseFloat(lat2) | |||
lon2 = parseFloat(lon2) | |||
// 将角度转换为弧度 | |||
const R = 6371; // 地球半径,单位公里 | |||
const dLat = (lat2 - lat1) * Math.PI / 180; | |||
const dLon = (lon2 - lon1) * Math.PI / 180; | |||
lat1 = lat1 * Math.PI / 180; | |||
lat2 = lat2 * Math.PI / 180; | |||
// Haversine公式 | |||
const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + | |||
Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(lat1) * Math.cos(lat2); | |||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); | |||
// 计算距离 | |||
distance = R * c; | |||
return distance.toFixed(0) | |||
} | |||
function getLocation(fn) { //获取用户经纬度 | |||
wxGetLocation() //此方法只用于提示用户打开gps | |||
// uni.getLocation({ | |||
// type: 'gcj02', | |||
// isHighAccuracy: true, | |||
// highAccuracyExpireTime: 1000, | |||
// success: function(position) { | |||
// fn(position) | |||
// }, | |||
// fail: function() { //使用ip获取定位 | |||
// let key = config.mapKey; //腾讯地图key | |||
// getUserAddressByIp(key).then(res => { | |||
// fn(res.position) //返回经纬度 | |||
// }) | |||
// } | |||
// }) | |||
uni.getFuzzyLocation({ | |||
type: 'gcj02', | |||
// type: 'wgs84', | |||
success (res) { | |||
fn(res) | |||
} | |||
}) | |||
} | |||
function getLocationDetail() { //获取用户详细地址 | |||
wxGetLocation() | |||
return new Promise((resolve, reject) => { | |||
let key = config.mapKey; //腾讯地图key | |||
// uni.getLocation({ | |||
// type: 'gcj02', | |||
// isHighAccuracy: true, | |||
// highAccuracyExpireTime: 1000, | |||
// success: function(position) { | |||
// getUserAddress(position.latitude, position.longitude, key).then(res => { | |||
// resolve(res) | |||
// }) | |||
// }, | |||
// fail: function() { //使用ip获取定位 | |||
// getUserAddressByIp(key).then(res => { | |||
// resolve(res) | |||
// }) | |||
// } | |||
// }) | |||
getLocation((position) => { | |||
getUserAddress(position.latitude, position.longitude, key).then(res => { | |||
resolve(res) | |||
}) | |||
}) | |||
}) | |||
} | |||
function getUserAddress(latitude, longitude, key) { //通过经纬度获取用户详细地址 | |||
return new Promise((resolve, reject) => { | |||
let url = `/ws/geocoder/v1/?location=${latitude},${longitude}&key=${key}` | |||
// #ifndef H5 | |||
url = `https://apis.map.qq.com` + url | |||
// #endif | |||
uni.request({ | |||
url, | |||
success: (res) => { | |||
let { | |||
lat, | |||
lng | |||
} = res.data.result.ad_info.location; | |||
let data = { | |||
position: { | |||
latitude: lat, | |||
longitude: lng | |||
}, | |||
addressDetail: res.data.result.ad_info | |||
} | |||
resolve(data) | |||
}, | |||
fail(err) { | |||
reject(err) | |||
} | |||
}) | |||
}) | |||
} | |||
function getUserAddressByIp(key) { //根据IP获取当前用户位置 | |||
return new Promise((resolve, reject) => { | |||
uni.request({ | |||
url: 'https://api.ipify.org?format=json', | |||
success: (ipInfo) => { | |||
let url = `/ws/location/v1/ip?ip=${ipInfo.data.ip}&key=${key}` | |||
// #ifndef H5 | |||
url = `https://apis.map.qq.com` + url | |||
// #endif | |||
uni.request({ | |||
url, | |||
success: (res) => { | |||
let { | |||
lat, | |||
lng | |||
} = res.data.result.location; | |||
let data = { | |||
addressDetail: res.data.result.ad_info, | |||
ip: res.data.result.ip, | |||
position: { | |||
latitude: lat, | |||
longitude: lng | |||
} | |||
} | |||
resolve(data) | |||
}, | |||
fail(err) { | |||
reject(err) | |||
} | |||
}) | |||
} | |||
}) | |||
}) | |||
} | |||
//打开地图让用户选择位置 | |||
function selectAddress(successCallback) { | |||
uni.chooseLocation({ | |||
// longitude, //经度 | |||
// latitude, //纬度 | |||
success: function(res) { | |||
successCallback && successCallback(res) | |||
} | |||
}); | |||
} | |||
//sdk自带获取位置方法(只支持微信环境),这里只当提示在用了(具体获取地址逻辑上面几个方法已完成) | |||
function wxGetLocation(successCallback, failCallback) { | |||
// #ifdef MP-WEIXIN | |||
// #endif | |||
console.log('wx.getLocation'); | |||
// wx.getLocation({ | |||
// type: 'gcj02', | |||
// isHighAccuracy: true, | |||
// highAccuracyExpireTime: 2000, | |||
// success(res) {}, | |||
// fail(err) { | |||
// if(err.errMsg == 'getLocation:gps closed'){ | |||
// uni.showToast({ | |||
// title: '请打开GPS定位,否则定位不准确', | |||
// icon: 'none' | |||
// }) | |||
// } | |||
// } | |||
// }) | |||
} | |||
export default { | |||
calculateDistance, //计算两点距离 | |||
getLocationDetail, //获取用户详细地址 | |||
getLocation, //获取用户经纬度 | |||
selectAddress, //打开地图让用户选择位置 | |||
wxGetLocation, | |||
} |