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