| @ -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, | |||
| } | |||