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.
145 lines
2.7 KiB
145 lines
2.7 KiB
<template>
|
|
<view class="bg">
|
|
<view style="position: relative;">
|
|
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000"
|
|
circular v-if="imgList.length>0" @change="handleSwiperChange" :current="currentIndex">
|
|
<swiper-item v-for="(item, index) in imgList" :key="index">
|
|
<view class="swiper-item">
|
|
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="swiper-pointer">
|
|
<view :class="['poiner-item',currentIndex==i?'active':'']" v-for="(item,i) in imgList" :key="i"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="topBox">
|
|
<view class="title text-overflowRows">{{detail.title}}</view>
|
|
<view class="name">
|
|
<image :src="showImg(detail.avatar)"></image>
|
|
{{detail.nickname}}
|
|
</view>
|
|
<view class="content" style="padding-top: 52rpx;" v-html="formateRichText(detail.detail)"></view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
detail: {},
|
|
imgList: [],
|
|
currentIndex: 0,
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.getDetail(option.id)
|
|
},
|
|
methods: {
|
|
handleSwiperChange(e) {
|
|
this.currentIndex = e.detail.current;
|
|
},
|
|
getDetail(id) {
|
|
this.Post({id: id},'/api/travels/getDetail').then(res => {
|
|
this.detail = res.data;
|
|
if (res.data.img) {
|
|
this.imgList = res.data.img.split(',') || []
|
|
}
|
|
});
|
|
|
|
this.Post({id: id},"/api/travels/addView")
|
|
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
width: 750rpx;
|
|
min-height: 100vh;
|
|
background: #FFFFFF;
|
|
padding-bottom: 100rpx;
|
|
}
|
|
|
|
.swiper {
|
|
height: 750rpx;
|
|
|
|
.swiper-item {
|
|
width: 100%;
|
|
height: 750rpx;
|
|
|
|
.item-img {
|
|
width: 750rpx;
|
|
height: 750rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topBox {
|
|
width: 100%;
|
|
padding: 28rpx 32rpx;
|
|
background: #fff;
|
|
margin-top: -20rpx;
|
|
background: white;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
position: relative;
|
|
|
|
.title {
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
}
|
|
.flex-between{
|
|
padding: 28rpx 0;
|
|
border-bottom: 2rpx solid #F7F7F7;
|
|
|
|
}
|
|
|
|
.name {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #999999;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 24rpx;
|
|
|
|
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 50%;
|
|
margin-right: 12rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
padding-top: 20rpx;
|
|
}
|
|
.swiper-pointer{
|
|
position: absolute;
|
|
right: 20rpx;
|
|
bottom: 40rpx;
|
|
display: flex;
|
|
|
|
.poiner-item{
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 50%;
|
|
opacity: 0.5;
|
|
margin-left: 15rpx;
|
|
}
|
|
.poiner-item.active{
|
|
opacity: 1;
|
|
}
|
|
|
|
}
|
|
</style>
|