|
|
@@ -1,31 +1,5 @@
|
|
|
<template>
|
|
|
<view class="page-container" v-if="detail">
|
|
|
- <!-- 自定义导航栏 -->
|
|
|
- <!-- <up-navbar height="60px" class="nav-bar" @rightClick="rightClick">
|
|
|
- <template #left>
|
|
|
- <uni-icons @click="goBack" type="left" size="26"></uni-icons>
|
|
|
- <view class="user-box" @click="toUserPage">
|
|
|
- <up-avatar
|
|
|
- class="user-avatar"
|
|
|
- :src="detail.usePicture || ''"
|
|
|
- shape="circle"
|
|
|
- ></up-avatar>
|
|
|
- <text class="username">{{ detail.userName }}</text>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template #center> </template>
|
|
|
- <template #right>
|
|
|
- <FollowBtn
|
|
|
- :followed="detail.followMark"
|
|
|
- :followedId="detail.userId"
|
|
|
- @update:followed="(val) => (detail.followMark = val)"
|
|
|
- />
|
|
|
- <view @click="handleActions" class="actions" v-if="isOwner">
|
|
|
- <uni-icons size="24" type="more-filled"></uni-icons>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </up-navbar> -->
|
|
|
-
|
|
|
<!-- 内容区域 -->
|
|
|
<view class="content-box">
|
|
|
<view class="content-container">
|
|
|
@@ -33,33 +7,36 @@
|
|
|
<view class="post-content">
|
|
|
<view class="post-image">
|
|
|
<view class="image-list-box">
|
|
|
- <image :src="detail.coverImage" mode="" class="coverImage"></image>
|
|
|
- <!-- <up-swiper
|
|
|
-
|
|
|
- indicatorMode="dot"
|
|
|
- bgColor="#fff"
|
|
|
- imgMode="widthFix"
|
|
|
- :autoplay="false"
|
|
|
- @click="clickSwiper"
|
|
|
- height="540"
|
|
|
- :list="[detail.coverImage]"
|
|
|
- ></up-swiper> -->
|
|
|
+ <up-swiper indicatorInactiveColor="#CCCCCC" indicatorActiveColor="#F8C008" bgColor="#fff"
|
|
|
+ :imgMode="swiperList[currentIndex]?.mode" :autoplay="false" @click="clickSwiper"
|
|
|
+ @change="({current})=>currentIndex = current" height="263" :list="detail.imageUrlList"
|
|
|
+ keyName="url"></up-swiper>
|
|
|
</view>
|
|
|
<!-- <view v-else class="image-box">
|
|
|
<image :src="detail.imageUrlList[0]" mode="widthFix" />
|
|
|
</view> -->
|
|
|
</view>
|
|
|
- <view class="post-box">
|
|
|
- <view class="post-title">
|
|
|
- <text>{{ detail.title }}</text>
|
|
|
- </view>
|
|
|
- <view class="post-text">
|
|
|
- <text>{{ detail.content }}</text>
|
|
|
+ <view class="post-indicator">
|
|
|
+ <view class="post-indicator-list">
|
|
|
+ <view :class="{active:index == currentIndex}" class="post-indicator-li"
|
|
|
+ v-for="(item,index) in detail.imageUrlList" :key="index"></view>
|
|
|
</view>
|
|
|
- <view class="post-info">
|
|
|
- <text class="post-time">{{ detail.publishTime }}</text>
|
|
|
- <!-- <text class="post-views">共{{ detail.commentCount }}条评论</text> -->
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="post-box">
|
|
|
+ <view class="post-box-main">
|
|
|
+ <view class="post-title">
|
|
|
+ <text>{{ detail.title }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="post-text">
|
|
|
+ <text>{{ detail.content }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="post-info">
|
|
|
+ <text class="post-time">{{ detail.publishTime }}</text>
|
|
|
+ <!-- <text class="post-views">共{{ detail.commentCount }}条评论</text> -->
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="fixed-view"></view>
|
|
|
@@ -177,12 +154,15 @@
|
|
|
import {
|
|
|
getArticleDetailId,
|
|
|
getGoodDetailId,
|
|
|
- getWechatConfig
|
|
|
+ getWechatConfig,
|
|
|
+ setUserState
|
|
|
} from "@/api/index.js"
|
|
|
+ // import { setUserState } from "@/api/book.js"
|
|
|
import {
|
|
|
browser,
|
|
|
openApp
|
|
|
} from "@/utils/ifApp.js"
|
|
|
+
|
|
|
import Comment from "@/components/comment/index";
|
|
|
import FollowBtn from "@/components/followBtn/index";
|
|
|
import wx from 'weixin-js-sdk'
|
|
|
@@ -244,6 +224,9 @@
|
|
|
|
|
|
const articleId = ref("");
|
|
|
const detail = ref(null);
|
|
|
+
|
|
|
+ const currentIndex = ref(0) //指示点下标
|
|
|
+ const swiperList = ref([])
|
|
|
|
|
|
const isOwner = computed(() => {
|
|
|
|
|
|
@@ -322,7 +305,20 @@
|
|
|
data
|
|
|
} = await getGoodDetailId(articleId.value);
|
|
|
detail.value = data;
|
|
|
+ swiperList.value = []
|
|
|
+ data.imageUrlList.forEach(async item => {
|
|
|
+ const res = await uni.getImageInfo({
|
|
|
+ src: item, // 图片路径，可以是本地路径、临时路径、网络URL
|
|
|
+ });
|
|
|
+ swiperList.value.push({
|
|
|
+ url: item,
|
|
|
+ mode: res.height > res.width ? 'aspectFit' : 'aspectFill',
|
|
|
+ type: 'image',
|
|
|
+ height:res.height
|
|
|
+ })
|
|
|
+ })
|
|
|
// detail.value.followMark = true
|
|
|
+
|
|
|
uni.hideLoading();
|
|
|
} catch (error) {
|
|
|
console.error("fetchArticleDetail", error);
|
|
|
@@ -547,8 +543,6 @@
|
|
|
.page-container {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- height: auto !important;
|
|
|
- background-color: #f8f8f8;
|
|
|
|
|
|
.nav-bar {
|
|
|
position: absolute;
|
|
|
@@ -570,45 +564,58 @@
|
|
|
}
|
|
|
|
|
|
.content-box {
|
|
|
- flex: 1;
|
|
|
- overflow: auto;
|
|
|
- background-color: #fff;
|
|
|
+
|
|
|
|
|
|
.content-container {
|
|
|
- // height: 100vh;
|
|
|
- // padding: 0 30rpx;
|
|
|
- // margin-top: 80rpx;
|
|
|
|
|
|
.post-content {
|
|
|
- background-color: #fff;
|
|
|
- // border-radius: 20rpx;
|
|
|
- padding: 0 0 30rpx 0;
|
|
|
-
|
|
|
- // margin-top: 20rpx;
|
|
|
+ .post-indicator {
|
|
|
+ &-list {
|
|
|
+ height: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-li {
|
|
|
+ width: 8rpx;
|
|
|
+ height: 8rpx;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ background: #CCCCCC;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ width: 32rpx;
|
|
|
+ background: #F8C008;
|
|
|
+ }
|
|
|
+ }
|
|
|
.post-box {
|
|
|
- // padding: 0 20rpx;
|
|
|
+ padding: 0 16rpx;
|
|
|
+ .post-box-main {
|
|
|
+ border-bottom: 2rpx solid #F1F3F8;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.post-title {
|
|
|
|
|
|
- // margin-bottom: 20rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
text {
|
|
|
- font-size: 18px;
|
|
|
+ font-size: 32rpx;
|
|
|
font-weight: bold;
|
|
|
- color: #333;
|
|
|
- line-height: 1.4;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 48rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.post-image {
|
|
|
- // margin: 0rpx 0 20rpx;
|
|
|
- // border-radius: 16rpx;
|
|
|
- overflow: hidden;
|
|
|
- min-height: 65vh;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+
|
|
|
|
|
|
// background-color: #f5f0ff;
|
|
|
.image-box {
|
|
|
@@ -642,27 +649,7 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .post-text {
|
|
|
- margin: 20rpx 0;
|
|
|
- line-height: 1.6;
|
|
|
- display: block;
|
|
|
- margin-bottom: 0.625rem;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- line-height: 1.5;
|
|
|
- max-height: 3em;
|
|
|
-
|
|
|
- text {
|
|
|
- font-size: 14px;
|
|
|
- color: #333;
|
|
|
- line-height: 1.6;
|
|
|
- display: block;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
|
|
|
.post-info {
|
|
|
display: flex;
|
|
|
@@ -990,7 +977,4 @@
|
|
|
color: $note-red !important;
|
|
|
}
|
|
|
|
|
|
- .post-box {
|
|
|
- padding: 40rpx;
|
|
|
- }
|
|
|
</style>
|
