瑶都万能墙
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

297 lines
5.9 KiB

<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
},
onShareAppMessage(res) {
return {
title: this.detail.title,
path: '/pages_order/gourmet/gourmetDetail?id=' + this.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>