六大模块
This commit is contained in:
parent
bb572330a2
commit
a3f9bcc897
35
components/vlog/newfl.vue
Normal file
35
components/vlog/newfl.vue
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<view class="nodata" :style="'width: ' + 375 + 'px; height: ' +500 + 'px;'">
|
||||||
|
<text class="warn-info">测试</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
popupsTop: "0rpx",
|
||||||
|
popupsLeft: "0rpx",
|
||||||
|
show: false,
|
||||||
|
dynPlace: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.nodata {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warn-info {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
17
pages.json
17
pages.json
@ -232,6 +232,22 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/tabbar/vlog/vlindex",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"navigationStyle": "custom", // 隐藏系统导航栏
|
||||||
|
"app-plus": {
|
||||||
|
"titleNView": false // 禁用原生导航栏
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/tabbar/vlog/vlindexstr",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "无终街"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/me/modifySex",
|
"path": "pages/me/modifySex",
|
||||||
"style": {
|
"style": {
|
||||||
@ -472,6 +488,7 @@
|
|||||||
"navigationBarBackgroundColor": "#181b27"
|
"navigationBarBackgroundColor": "#181b27"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"path": "pages/search/search",
|
"path": "pages/search/search",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
@ -69,8 +69,28 @@
|
|||||||
>
|
>
|
||||||
{{ tab.name }}
|
{{ tab.name }}
|
||||||
</text>
|
</text>
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 二级 tab -->
|
||||||
|
<view v-if="tabList[tabIndex] && tabList[tabIndex].child" style="flex-direction: row; flex: 1; justify-content: space-around">
|
||||||
|
<view
|
||||||
|
class="uni-tab-item"
|
||||||
|
v-for="(childTab, childIndex) in tabList[tabIndex].child"
|
||||||
|
:key="childTab.id"
|
||||||
|
:id="childTab.id"
|
||||||
|
:data-parent-index="tabIndex"
|
||||||
|
:data-child-index="childIndex"
|
||||||
|
@click="onChildTabTap(tabIndex, childIndex,childTab)"
|
||||||
|
>
|
||||||
|
<text
|
||||||
|
class="uni-tab-item-title scroll-view-animation"
|
||||||
|
>
|
||||||
|
{{ childTab.name }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<view class="scroll-view-indicator">
|
<view class="scroll-view-indicator">
|
||||||
<view
|
<view
|
||||||
ref="underline"
|
ref="underline"
|
||||||
@ -135,6 +155,7 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
childTabIndex:0,
|
||||||
channel: null,
|
channel: null,
|
||||||
canSwipe: true,
|
canSwipe: true,
|
||||||
isTap: false,
|
isTap: false,
|
||||||
@ -150,13 +171,22 @@ export default {
|
|||||||
refreshList: [], // 下拉刷新后获得的新的列表
|
refreshList: [], // 下拉刷新后获得的新的列表
|
||||||
pagingList: [], // 分页list
|
pagingList: [], // 分页list
|
||||||
refresh: 0, // 从me页面传来的refresh，用于退出登录后重新刷新当前页的视频
|
refresh: 0, // 从me页面传来的refresh，用于退出登录后重新刷新当前页的视频
|
||||||
/////////////////
|
|
||||||
pageList: ['videoLocal', 'videoFollowComp', 'videoComp'],
|
pageList: ['videoLocal', 'videoFollowComp', 'videoComp'],
|
||||||
tabList: [
|
tabList: [
|
||||||
{
|
{
|
||||||
id: 'tab' + 0,
|
id: 'tab' + 0,
|
||||||
name: '同城',
|
name: '同城',
|
||||||
pageid: 1
|
pageid: 1,
|
||||||
|
child:[
|
||||||
|
{id: 'tabs' + 1,name: '房地产',pageid: 9},
|
||||||
|
{id: 'tabs' + 2,name: '医疗',pageid: 10},
|
||||||
|
{id: 'tabs' + 3,name: '教育',pageid: 11},
|
||||||
|
{id: 'tabs' + 4,name: '商贸',pageid: 12},
|
||||||
|
{id: 'tabs' +5,name: '商超',pageid: 13},
|
||||||
|
{id: 'tabs' + 6,name: '特色',pageid: 14},
|
||||||
|
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'tab' + 1,
|
id: 'tab' + 1,
|
||||||
@ -277,6 +307,10 @@ export default {
|
|||||||
|
|
||||||
// },
|
// },
|
||||||
methods: {
|
methods: {
|
||||||
|
onChildTabTap(i,o,item){
|
||||||
|
this.childTabIndex=o
|
||||||
|
uni.navigateTo({url:`/pages/tabbar/vlog/vlindex?name=${item.name}`});
|
||||||
|
},
|
||||||
handleHuaWei() {
|
handleHuaWei() {
|
||||||
// 处理华为机型问题
|
// 处理华为机型问题
|
||||||
// #ifdef APP-HARMONY
|
// #ifdef APP-HARMONY
|
||||||
@ -349,7 +383,6 @@ export default {
|
|||||||
},
|
},
|
||||||
// ----------头部区域点击tabs
|
// ----------头部区域点击tabs
|
||||||
ontabtap(e) {
|
ontabtap(e) {
|
||||||
console.log(e);
|
|
||||||
let index = e.target.dataset.current || e.currentTarget.dataset.current;
|
let index = e.target.dataset.current || e.currentTarget.dataset.current;
|
||||||
this.isTap = true;
|
this.isTap = true;
|
||||||
var currentSize = this.tabListSize[index];
|
var currentSize = this.tabListSize[index];
|
||||||
@ -373,7 +406,6 @@ export default {
|
|||||||
.boundingClientRect()
|
.boundingClientRect()
|
||||||
.exec((rect) => {
|
.exec((rect) => {
|
||||||
this.tabbarWidth = rect[0].width;
|
this.tabbarWidth = rect[0].width;
|
||||||
console.log(this.tabbarWidth);
|
|
||||||
});
|
});
|
||||||
// 查询 tabview 宽度
|
// 查询 tabview 宽度
|
||||||
dm.in(this)
|
dm.in(this)
|
||||||
@ -381,7 +413,6 @@ export default {
|
|||||||
.boundingClientRect()
|
.boundingClientRect()
|
||||||
.exec((rect) => {
|
.exec((rect) => {
|
||||||
this.swiperWidth = rect[0].width;
|
this.swiperWidth = rect[0].width;
|
||||||
console.log(this.swiperWidth);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 因 nvue 暂不支持 class 查询
|
// 因 nvue 暂不支持 class 查询
|
||||||
@ -395,7 +426,6 @@ export default {
|
|||||||
rect.left = rect.left - 40; //修正 left 值，减去 padding-left: 40px
|
rect.left = rect.left - 40; //修正 left 值，减去 padding-left: 40px
|
||||||
this.tabListSize[rect.dataset.id] = rect;
|
this.tabListSize[rect.dataset.id] = rect;
|
||||||
});
|
});
|
||||||
console.log(this.tabListSize[this.tabIndex]);
|
|
||||||
this.updateIndicator(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex].width);
|
this.updateIndicator(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex].width);
|
||||||
this.switchTab(this.tabIndex);
|
this.switchTab(this.tabIndex);
|
||||||
});
|
});
|
||||||
@ -429,8 +459,6 @@ export default {
|
|||||||
},
|
},
|
||||||
animationfinish(e) {
|
animationfinish(e) {
|
||||||
let index = e.detail.current;
|
let index = e.detail.current;
|
||||||
console.log('当前索引' + index);
|
|
||||||
console.log('之前的索引' + this._lastTabIndex);
|
|
||||||
if (index != this._lastTabIndex) {
|
if (index != this._lastTabIndex) {
|
||||||
// 成功切换
|
// 成功切换
|
||||||
var beforeProp = this.pageList[this._lastTabIndex];
|
var beforeProp = this.pageList[this._lastTabIndex];
|
||||||
@ -465,7 +493,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
updateIndicator(left, width) {
|
updateIndicator(left, width) {
|
||||||
// console.log(left)
|
|
||||||
this.indicatorLineLeft = left;
|
this.indicatorLineLeft = left;
|
||||||
this.indicatorLineWidth = width;
|
this.indicatorLineWidth = width;
|
||||||
},
|
},
|
||||||
@ -480,7 +507,6 @@ export default {
|
|||||||
this.scrollInto = this.tabList[index].id;
|
this.scrollInto = this.tabList[index].id;
|
||||||
},
|
},
|
||||||
scrollTabTo(index) {
|
scrollTabTo(index) {
|
||||||
console.log(index);
|
|
||||||
const el = this.$refs['tabitem' + index][0];
|
const el = this.$refs['tabitem' + index][0];
|
||||||
let offset = 0;
|
let offset = 0;
|
||||||
// TODO fix ios offset
|
// TODO fix ios offset
|
||||||
@ -534,7 +560,7 @@ export default {
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
height: 100rpx;
|
height: 150rpx;
|
||||||
line-height: 100rpx;
|
line-height: 100rpx;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 40px;
|
padding-left: 40px;
|
||||||
@ -637,7 +663,7 @@ export default {
|
|||||||
.tab-bar {
|
.tab-bar {
|
||||||
/* width: 750upx; */
|
/* width: 750upx; */
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 84upx;
|
height: auto;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
lines: 1;
|
lines: 1;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@ -665,7 +691,13 @@ export default {
|
|||||||
.uni-tab-item-title-active {
|
.uni-tab-item-title-active {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
.uni-tab-item-title-active-two{
|
||||||
|
color: #ffffff;
|
||||||
|
background:red;
|
||||||
|
width:100rpx;
|
||||||
|
text-align: center;
|
||||||
|
border-radius:50%
|
||||||
|
}
|
||||||
.scroll-view-indicator {
|
.scroll-view-indicator {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
|
|||||||
560
pages/tabbar/vlog/log/flog.vue
Normal file
560
pages/tabbar/vlog/log/flog.vue
Normal file
@ -0,0 +1,560 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 页面其他内容 -->
|
||||||
|
<view class="page-content">
|
||||||
|
<!-- 这里可以添加页面的主要内容 -->
|
||||||
|
<view class="company-profile">
|
||||||
|
<view class="header">
|
||||||
|
<view class="avatar">
|
||||||
|
<image :src="imgage" mode="aspectFill" class="avatar-img" />
|
||||||
|
</view>
|
||||||
|
<view class="title">玉田房产</view>
|
||||||
|
<view class="badge">达人标识</view>
|
||||||
|
<!-- <view
|
||||||
|
:class="istae == true ? 'follow-btn' : 'stafollow-btn'"
|
||||||
|
@click="istae = !istae"
|
||||||
|
>关注</view
|
||||||
|
> -->
|
||||||
|
</view>
|
||||||
|
<view class="info-section">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-content"
|
||||||
|
>无终街是玉田房产业界专业的信息展示平台,提供全面及时的玉田房产资讯，给网友提供快捷专业房产信息,欢迎广大房产平台咨询0315-6198200</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="card" v-for="(item, index) in list" :key="index">
|
||||||
|
<view class="card-header" @click="torout(item)">
|
||||||
|
<text class="title">{{ item.title }}</text>
|
||||||
|
<text class="subtitle">{{ item.conent }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="card-body">
|
||||||
|
<view class="img-list">
|
||||||
|
<image
|
||||||
|
v-for="(imgUrl, imgIndex) in item.imglist"
|
||||||
|
:key="imgIndex"
|
||||||
|
:src="imgUrl"
|
||||||
|
mode="aspectFill"
|
||||||
|
class="list-img"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="stats-row">
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.xing"
|
||||||
|
@click="addxingfun(item, index)"
|
||||||
|
src="@/static/img/index/xing-2.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/xing.png"
|
||||||
|
@click="delxingfun(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.xingnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.fen"
|
||||||
|
@click="shareContent(item, index)"
|
||||||
|
src="@/static/img/index/fen.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/fen-2.png"
|
||||||
|
@click="shareContent(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.fennum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<!-- 评论 -->
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.ping"
|
||||||
|
@click="showCommentInput(item, index)"
|
||||||
|
src="@/static/img/index/ping.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/ping.png"
|
||||||
|
@click="showCommentInput(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.pingnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.xin"
|
||||||
|
@click="addisredfun(item, index)"
|
||||||
|
src="@/static/img/index/xin.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/xin-3.png"
|
||||||
|
@click="delisredfun(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.xinnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 自定义模态框 -->
|
||||||
|
<view v-if="showCommentModal" class="comment-modal">
|
||||||
|
<view class="modal-content">
|
||||||
|
<textarea
|
||||||
|
v-model="commentContent"
|
||||||
|
placeholder="请输入评论内容"
|
||||||
|
class="comment-input"
|
||||||
|
></textarea>
|
||||||
|
<view class="modal-buttons">
|
||||||
|
<button @click="cancelComment">取消</button>
|
||||||
|
<button @click="submitComment()">提交</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import imgage from "@/static/logn.png"; // 导入图片资源
|
||||||
|
import l1 from "@/static/img/index/l1.png"; // 导入图片资源
|
||||||
|
import l2 from "@/static/img/index/l2.png"; // 导入图片资源
|
||||||
|
import l3 from "@/static/img/index/l3.png"; // 导入图片资源
|
||||||
|
import l4 from "@/static/img/index/l4.png"; // 导入图片资源
|
||||||
|
import l5 from "@/static/img/index/l5.png"; // 导入图片资源
|
||||||
|
import l6 from "@/static/img/index/l6.png"; // 导入图片资源
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
stylie: {
|
||||||
|
width: "20px", // 设置宽度为 20px
|
||||||
|
height: "20px", // 设置高度为 20px
|
||||||
|
marginRight: "10px", // 设置右边距为 10px
|
||||||
|
},
|
||||||
|
showCommentModal: false, // 控制模态框的显示
|
||||||
|
commentContent: "", // 评论内容
|
||||||
|
currentCommentIndex: -1,
|
||||||
|
currentCommentItem: null,
|
||||||
|
isred: false,
|
||||||
|
isrednum: 0,
|
||||||
|
imgage: imgage,
|
||||||
|
navTitle: [
|
||||||
|
{ id: "tabs" + 1, name: "房地产", pageid: 9 },
|
||||||
|
{ id: "tabs" + 2, name: "医疗", pageid: 10 },
|
||||||
|
{ id: "tabs" + 3, name: "教育", pageid: 11 },
|
||||||
|
{ id: "tabs" + 4, name: "商贸", pageid: 12 },
|
||||||
|
{ id: "tabs" + 5, name: "商超", pageid: 13 },
|
||||||
|
{ id: "tabs" + 6, name: "特色", pageid: 14 },
|
||||||
|
],
|
||||||
|
showDropdown: false,
|
||||||
|
currentTitle: "",
|
||||||
|
istae: true,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
tp: "玉田房产",
|
||||||
|
img: "",
|
||||||
|
title: "年轻人买房你选对了吗？",
|
||||||
|
conent:
|
||||||
|
"年轻人买房🏠要🤔结合自己的未来规划。如果有换工作💼的可能，要考虑🧐房子是否便于适应新的工作🤔地点。对于有结婚生育计划🧐的人，房子的户型和面积是否能满足家庭结构变化的需求就🤔很重要。例如，考虑是否有足够🧐的房间给未来的孩子。同时，🤔还要考虑房子的🤔转手或出租的可能性，🤔因为未来可能会因为工作调动等🤔情况而需要转手房产或者出租，所以房子在市场上的受欢迎程度也需要🧐提前思考。看看下面内容你选对了吗？",
|
||||||
|
xin: false,
|
||||||
|
timer: "2025-06-01 12:00 玉田",
|
||||||
|
xinnum: 0,
|
||||||
|
xing: false,
|
||||||
|
xingnum: 0,
|
||||||
|
ping: false,
|
||||||
|
pingnum: 0,
|
||||||
|
pingcontent: [],
|
||||||
|
fen: false,
|
||||||
|
fennum: 0,
|
||||||
|
imglist: [l3, l2, l1],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tp: "玉田房产",
|
||||||
|
img: "",
|
||||||
|
title: "买二手房你需要知道知识点",
|
||||||
|
conent:
|
||||||
|
"购买二手房时，讲价是一个常见的环节，通过合理的讲价技巧，买家可以争取到更优惠的价格。以下是一些有效的讲价方法：了解市场行情：在开始讲价之前，买家需要对当地的房产市场有一个全面的了解。这包括了解相似房源的售价、市场供需状况以及经济环境等因素。通过这些信息，买家可以更准确地评估房屋的合理价格。准备充分的数据支持：在讲价时，提供具体的数据和事实支持是非常有帮助的。例如，可以指出房屋的某些不足之处，如装修老旧、设施不齐全等，并据此提出降价的理由。同时，也可以提供周边类似房源的成交价格作为参考。保持冷静和耐心：讲价过程中，保持冷静和耐心至关重要。不要急于做出决定，也不要在情绪的驱使下做出让步。通过冷静分析和耐心等待，往往能够获得更好的交易条件。利用中介的力量：如果通过房产中介进行交易，可以充分利用中介的专业知识和经验来进行讲价。中介通常对市场有深入的了解，并且能够提供专业的谈判策略。灵活运用多种讲价策略：讲价不仅仅是直接要求降价，还包括提出其他形式的优惠条件，如要求卖家承担部分税费、提供家具电器等。这些策略可以增加讲价的灵活性，提高成功率。了解房主卖房🏠的原因：了解房主是因为什么原因而卖房，是否急卖。比如，有的房主可能急卖房子，供孩子出国留学或者给家里的老人看病。这个时候，只要价格合适，哪怕低一点，房主也愿意出售。不要表露自己的喜好：遇到喜欢的房屋时，千万不能把你的欢喜表露出来。在这时应该不断的提出你不满意的地方，比如房子临街，就抱怨房子太吵；在一楼，就说太潮；住在高楼层，就说太高；如此种种。不论你怎么说，其目的就是打击房主的优势心理，让他知道自己的房子有太多的缺点，这样的房子我都愿意买，你还不降点价吗？",
|
||||||
|
xin: false,
|
||||||
|
timer: "2025-06-02 10:01 玉田",
|
||||||
|
xinnum: 0,
|
||||||
|
xing: false,
|
||||||
|
xingnum: 0,
|
||||||
|
ping: false,
|
||||||
|
pingnum: 0,
|
||||||
|
pingcontent: [],
|
||||||
|
fen: false,
|
||||||
|
fennum: 0,
|
||||||
|
imglist: [l4, l5, l6],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.name) {
|
||||||
|
this.passedName = options.name;
|
||||||
|
this.currentTitle = options.name; // 可以根据需求设置当前标题
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
shareContent(item, index) {
|
||||||
|
uni.share({
|
||||||
|
provider: "weixin",
|
||||||
|
scene: "WXSceneTimeline", // 指定分享到朋友圈
|
||||||
|
type: 0,
|
||||||
|
href: "https://example.com", // 分享的链接，需替换为实际链接
|
||||||
|
title: "房产服务分享", // 分享标题
|
||||||
|
imageUrl: item.img || "https://example.com/default-image.jpg", // 分享图片，需替换为实际图片链接
|
||||||
|
success: () => {
|
||||||
|
this.list[index].fennum++;
|
||||||
|
this.list[index].fen = true;
|
||||||
|
uni.showToast({
|
||||||
|
title: "分享成功",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: "分享失败，请重试",
|
||||||
|
icon: "none",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addisredfun(item, index) {
|
||||||
|
this.list[index].xinnum--;
|
||||||
|
this.list[index].xin = !this.list[index].xin;
|
||||||
|
},
|
||||||
|
delisredfun(item, index) {
|
||||||
|
if (this.list[index].xinnum == 0) {
|
||||||
|
this.list[index].xinnum++;
|
||||||
|
}
|
||||||
|
this.list[index].xin = !this.list[index].xin;
|
||||||
|
},
|
||||||
|
addxingfun(item, index) {
|
||||||
|
this.list[index].xingnum--;
|
||||||
|
this.list[index].xing = !this.list[index].xing;
|
||||||
|
},
|
||||||
|
delxingfun(item, index) {
|
||||||
|
if (this.list[index].xingnum == 0) {
|
||||||
|
this.list[index].xingnum++;
|
||||||
|
}
|
||||||
|
this.list[index].xing = !this.list[index].xing;
|
||||||
|
},
|
||||||
|
showCommentInput(item, index) {
|
||||||
|
this.showCommentModal = true;
|
||||||
|
this.currentCommentIndex = index;
|
||||||
|
this.currentCommentItem = item;
|
||||||
|
},
|
||||||
|
cancelComment() {
|
||||||
|
this.showCommentModal = false;
|
||||||
|
this.commentContent = "";
|
||||||
|
},
|
||||||
|
submitComment() {
|
||||||
|
if (this.commentContent.trim()) {
|
||||||
|
const userInfo = this.$options.filters.isLogin();
|
||||||
|
const currentDate = new Date();
|
||||||
|
const time = `${currentDate.getFullYear()}-${String(
|
||||||
|
currentDate.getMonth() + 1
|
||||||
|
).padStart(2, "0")}-${String(currentDate.getDate()).padStart(
|
||||||
|
2,
|
||||||
|
"0"
|
||||||
|
)} ${String(currentDate.getHours()).padStart(2, "0")}:${String(
|
||||||
|
currentDate.getMinutes()
|
||||||
|
).padStart(2, "0")}`;
|
||||||
|
this.list[this.currentCommentIndex].pingcontent.push({
|
||||||
|
img: userInfo.face, //图片
|
||||||
|
name: userInfo.nickName, //名字
|
||||||
|
content: this.commentContent, //内容
|
||||||
|
time: time, //时间
|
||||||
|
zannum: 0, //点赞数
|
||||||
|
iszan: false, // 点赞状态，默认为未赞
|
||||||
|
});
|
||||||
|
this.list[this.currentCommentIndex].pingnum++;
|
||||||
|
this.list[this.currentCommentIndex].ping = true;
|
||||||
|
}
|
||||||
|
this.showCommentModal = false;
|
||||||
|
this.commentContent = "";
|
||||||
|
uni.showToast({
|
||||||
|
title: "提交成功",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// addpingfun(item, index) {
|
||||||
|
// this.list[index].pingnum--;
|
||||||
|
// this.list[index].ping = !this.list[index].ping;
|
||||||
|
// },
|
||||||
|
// delpingfun(item, index) {
|
||||||
|
// if (this.list[index].pingnum == 0) {
|
||||||
|
// this.list[index].pingnum++;
|
||||||
|
// }
|
||||||
|
// this.list[index].ping = !this.list[index].ping;
|
||||||
|
// },
|
||||||
|
|
||||||
|
torout(item) {
|
||||||
|
const itemJson = encodeURIComponent(JSON.stringify(item));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/tabbar/vlog/vlindexstr?item=${itemJson}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.nav-left,
|
||||||
|
.nav-right {
|
||||||
|
width: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
// font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.dropdown-icon {
|
||||||
|
margin-left: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 160rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1rpx solid #eee;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 10;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
.company-profile {
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
// margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
background: #ffcc00;
|
||||||
|
color: #333;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow-btn {
|
||||||
|
color: #1890ff;
|
||||||
|
border: 1px solid #1890ff;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.stafollow-btn {
|
||||||
|
color: #ffffff;
|
||||||
|
border: 1px solid red;
|
||||||
|
background: red;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-section {
|
||||||
|
// border-top: 1px solid #eee;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
// 新增样式控制两行显示
|
||||||
|
// overflow: hidden;
|
||||||
|
// display: -webkit-box;
|
||||||
|
// -webkit-box-orient: vertical;
|
||||||
|
// -webkit-line-clamp: 2; /* 限制显示两行 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1890ff;
|
||||||
|
display: flex; /* 弹性布局 */
|
||||||
|
justify-content: center; /* 水平居中 */
|
||||||
|
align-items: center; /* 垂直居中（关键） */
|
||||||
|
gap: 8rpx; /* 图片与文字间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
// 补充：确保图片和文字的垂直基准一致（可选）
|
||||||
|
.stat-number image {
|
||||||
|
vertical-align: middle; /* 图片垂直居中（兼容非 flex 场景） */
|
||||||
|
}
|
||||||
|
.comment-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.img-list {
|
||||||
|
display: flex;
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
gap: 10px; /* 图片之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-img {
|
||||||
|
width: 250rpx; /* 图片宽度，根据需求调整 */
|
||||||
|
height: 250rpx; /* 图片高度，根据需求调整 */
|
||||||
|
border-radius: 8rpx; /* 图片圆角 */
|
||||||
|
object-fit: cover; /* 图片填充方式 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
529
pages/tabbar/vlog/log/jlog.vue
Normal file
529
pages/tabbar/vlog/log/jlog.vue
Normal file
@ -0,0 +1,529 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 页面其他内容 -->
|
||||||
|
<view class="page-content">
|
||||||
|
<!-- 这里可以添加页面的主要内容 -->
|
||||||
|
<view class="company-profile">
|
||||||
|
<view class="header">
|
||||||
|
<view class="avatar">
|
||||||
|
<image :src="imgage" mode="aspectFill" class="avatar-img" />
|
||||||
|
</view>
|
||||||
|
<view class="title">玉田教育</view>
|
||||||
|
<view class="badge">达人标识</view>
|
||||||
|
<!-- <view
|
||||||
|
:class="istae == true ? 'follow-btn' : 'stafollow-btn'"
|
||||||
|
@click="istae = !istae"
|
||||||
|
>关注</view
|
||||||
|
> -->
|
||||||
|
</view>
|
||||||
|
<view class="info-section">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-content"
|
||||||
|
>玉田，隶属河北省唐山市，自古崇文重教，素有“京东文化名城”之美誉。近年来，玉田坚持以办好人民满意的教育为目标，持续深化教育改革，优化资源配置，推动教育事业高质量发展，为县域经济社会发展提供了强有力的人才支撑。</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="card" v-for="(item, index) in list" :key="index">
|
||||||
|
<view class="card-header" @click="torout(item)">
|
||||||
|
<text class="title">{{ item.title }}</text>
|
||||||
|
<text class="subtitle">{{ item.conent }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="card-body">
|
||||||
|
<view class="img-list">
|
||||||
|
<image
|
||||||
|
v-for="(imgUrl, imgIndex) in item.imglist"
|
||||||
|
:key="imgIndex"
|
||||||
|
:src="imgUrl"
|
||||||
|
mode="aspectFill"
|
||||||
|
class="list-img"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="stats-row">
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.xing"
|
||||||
|
@click="addxingfun(item, index)"
|
||||||
|
src="@/static/img/index/xing-2.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/xing.png"
|
||||||
|
@click="delxingfun(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.xingnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.fen"
|
||||||
|
@click="shareContent(item, index)"
|
||||||
|
src="@/static/img/index/fen.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/fen-2.png"
|
||||||
|
@click="shareContent(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.fennum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<!-- 评论 -->
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.ping"
|
||||||
|
@click="showCommentInput(item, index)"
|
||||||
|
src="@/static/img/index/ping.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/ping.png"
|
||||||
|
@click="showCommentInput(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.pingnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.xin"
|
||||||
|
@click="addisredfun(item, index)"
|
||||||
|
src="@/static/img/index/xin.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/xin-3.png"
|
||||||
|
@click="delisredfun(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.xinnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 自定义模态框 -->
|
||||||
|
<view v-if="showCommentModal" class="comment-modal">
|
||||||
|
<view class="modal-content">
|
||||||
|
<textarea
|
||||||
|
v-model="commentContent"
|
||||||
|
placeholder="请输入评论内容"
|
||||||
|
class="comment-input"
|
||||||
|
></textarea>
|
||||||
|
<view class="modal-buttons">
|
||||||
|
<button @click="cancelComment">取消</button>
|
||||||
|
<button @click="submitComment()">提交</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import imgage from "@/static/logn.png"; // 导入图片资源
|
||||||
|
import l9 from "@/static/img/index/l9.png"; // 导入图片资源
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
stylie: {
|
||||||
|
width: "20px", // 设置宽度为 20px
|
||||||
|
height: "20px", // 设置高度为 20px
|
||||||
|
marginRight: "10px", // 设置右边距为 10px
|
||||||
|
},
|
||||||
|
showCommentModal: false, // 控制模态框的显示
|
||||||
|
commentContent: "", // 评论内容
|
||||||
|
currentCommentIndex: -1,
|
||||||
|
currentCommentItem: null,
|
||||||
|
isred: false,
|
||||||
|
isrednum: 0,
|
||||||
|
imgage: imgage,
|
||||||
|
showDropdown: false,
|
||||||
|
currentTitle: "",
|
||||||
|
istae: true,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
tp: "玉田教育",
|
||||||
|
img: "",
|
||||||
|
title: "玉田县一中",
|
||||||
|
conent:
|
||||||
|
"该校是河北省重点中学，河北省示范性高中，唐山市文明单位，中央教科所“素质教育理论与实践研究”实验校，河北省现代教育技术示范校，连续10年被唐山市政府命名为“高中工作先进校”和“唐山市高考强校,高考成绩连年位居全市重点中学前列。此外，各级各类学科竞赛也取得了优异成绩",
|
||||||
|
xin: false,
|
||||||
|
timer: "2025-05-25 09:45 玉田",
|
||||||
|
xinnum: 0,
|
||||||
|
xing: false,
|
||||||
|
xingnum: 0,
|
||||||
|
ping: false,
|
||||||
|
pingnum: 0,
|
||||||
|
pingcontent: [],
|
||||||
|
fen: false,
|
||||||
|
fennum: 0,
|
||||||
|
imglist: [l9],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.name) {
|
||||||
|
this.passedName = options.name;
|
||||||
|
this.currentTitle = options.name; // 可以根据需求设置当前标题
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
shareContent(item, index) {
|
||||||
|
uni.share({
|
||||||
|
provider: "weixin",
|
||||||
|
scene: "WXSceneTimeline", // 指定分享到朋友圈
|
||||||
|
type: 0,
|
||||||
|
href: "https://example.com", // 分享的链接，需替换为实际链接
|
||||||
|
title: "教育服务分享", // 分享标题
|
||||||
|
imageUrl: item.img || "https://example.com/default-image.jpg", // 分享图片，需替换为实际图片链接
|
||||||
|
success: () => {
|
||||||
|
this.list[index].fennum++;
|
||||||
|
this.list[index].fen = true;
|
||||||
|
uni.showToast({
|
||||||
|
title: "分享成功",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: "分享失败，请重试",
|
||||||
|
icon: "none",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addisredfun(item, index) {
|
||||||
|
this.list[index].xinnum--;
|
||||||
|
this.list[index].xin = !this.list[index].xin;
|
||||||
|
},
|
||||||
|
delisredfun(item, index) {
|
||||||
|
if (this.list[index].xinnum == 0) {
|
||||||
|
this.list[index].xinnum++;
|
||||||
|
}
|
||||||
|
this.list[index].xin = !this.list[index].xin;
|
||||||
|
},
|
||||||
|
addxingfun(item, index) {
|
||||||
|
this.list[index].xingnum--;
|
||||||
|
this.list[index].xing = !this.list[index].xing;
|
||||||
|
},
|
||||||
|
delxingfun(item, index) {
|
||||||
|
if (this.list[index].xingnum == 0) {
|
||||||
|
this.list[index].xingnum++;
|
||||||
|
}
|
||||||
|
this.list[index].xing = !this.list[index].xing;
|
||||||
|
},
|
||||||
|
showCommentInput(item, index) {
|
||||||
|
this.showCommentModal = true;
|
||||||
|
this.currentCommentIndex = index;
|
||||||
|
this.currentCommentItem = item;
|
||||||
|
},
|
||||||
|
cancelComment() {
|
||||||
|
this.showCommentModal = false;
|
||||||
|
this.commentContent = "";
|
||||||
|
},
|
||||||
|
submitComment() {
|
||||||
|
if (this.commentContent.trim()) {
|
||||||
|
const userInfo = this.$options.filters.isLogin();
|
||||||
|
const currentDate = new Date();
|
||||||
|
const time = `${currentDate.getFullYear()}-${String(
|
||||||
|
currentDate.getMonth() + 1
|
||||||
|
).padStart(2, "0")}-${String(currentDate.getDate()).padStart(
|
||||||
|
2,
|
||||||
|
"0"
|
||||||
|
)} ${String(currentDate.getHours()).padStart(2, "0")}:${String(
|
||||||
|
currentDate.getMinutes()
|
||||||
|
).padStart(2, "0")}`;
|
||||||
|
this.list[this.currentCommentIndex].pingcontent.push({
|
||||||
|
img: userInfo.face, //图片
|
||||||
|
name: userInfo.nickName, //名字
|
||||||
|
content: this.commentContent, //内容
|
||||||
|
time: time, //时间
|
||||||
|
zannum: 0, //点赞数
|
||||||
|
iszan: false, // 点赞状态，默认为未赞
|
||||||
|
});
|
||||||
|
this.list[this.currentCommentIndex].pingnum++;
|
||||||
|
this.list[this.currentCommentIndex].ping = true;
|
||||||
|
}
|
||||||
|
this.showCommentModal = false;
|
||||||
|
this.commentContent = "";
|
||||||
|
uni.showToast({
|
||||||
|
title: "提交成功",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// addpingfun(item, index) {
|
||||||
|
// this.list[index].pingnum--;
|
||||||
|
// this.list[index].ping = !this.list[index].ping;
|
||||||
|
// },
|
||||||
|
// delpingfun(item, index) {
|
||||||
|
// if (this.list[index].pingnum == 0) {
|
||||||
|
// this.list[index].pingnum++;
|
||||||
|
// }
|
||||||
|
// this.list[index].ping = !this.list[index].ping;
|
||||||
|
// },
|
||||||
|
|
||||||
|
torout(item) {
|
||||||
|
const itemJson = encodeURIComponent(JSON.stringify(item));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/tabbar/vlog/vlindexstr?item=${itemJson}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.nav-left,
|
||||||
|
.nav-right {
|
||||||
|
width: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
// font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.dropdown-icon {
|
||||||
|
margin-left: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 160rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1rpx solid #eee;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 10;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
.company-profile {
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
// margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
background: #ffcc00;
|
||||||
|
color: #333;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow-btn {
|
||||||
|
color: #1890ff;
|
||||||
|
border: 1px solid #1890ff;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.stafollow-btn {
|
||||||
|
color: #ffffff;
|
||||||
|
border: 1px solid red;
|
||||||
|
background: red;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-section {
|
||||||
|
// border-top: 1px solid #eee;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
// 新增样式控制两行显示
|
||||||
|
// overflow: hidden;
|
||||||
|
// display: -webkit-box;
|
||||||
|
// -webkit-box-orient: vertical;
|
||||||
|
// -webkit-line-clamp: 2; /* 限制显示两行 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1890ff;
|
||||||
|
display: flex; /* 弹性布局 */
|
||||||
|
justify-content: center; /* 水平居中 */
|
||||||
|
align-items: center; /* 垂直居中（关键） */
|
||||||
|
gap: 8rpx; /* 图片与文字间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
// 补充：确保图片和文字的垂直基准一致（可选）
|
||||||
|
.stat-number image {
|
||||||
|
vertical-align: middle; /* 图片垂直居中（兼容非 flex 场景） */
|
||||||
|
}
|
||||||
|
.comment-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.img-list {
|
||||||
|
display: flex;
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
gap: 10px; /* 图片之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-img {
|
||||||
|
// width: 250rpx; /* 图片宽度，根据需求调整 */
|
||||||
|
// height: 250rpx; /* 图片高度，根据需求调整 */
|
||||||
|
border-radius: 8rpx; /* 图片圆角 */
|
||||||
|
object-fit: cover; /* 图片填充方式 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
531
pages/tabbar/vlog/log/sclog.vue
Normal file
531
pages/tabbar/vlog/log/sclog.vue
Normal file
@ -0,0 +1,531 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 页面其他内容 -->
|
||||||
|
<view class="page-content">
|
||||||
|
<!-- 这里可以添加页面的主要内容 -->
|
||||||
|
<view class="company-profile">
|
||||||
|
<view class="header">
|
||||||
|
<view class="avatar">
|
||||||
|
<image :src="imgage" mode="aspectFill" class="avatar-img" />
|
||||||
|
</view>
|
||||||
|
<view class="title">玉田商超</view>
|
||||||
|
<view class="badge">达人标识</view>
|
||||||
|
<!-- <view
|
||||||
|
:class="istae == true ? 'follow-btn' : 'stafollow-btn'"
|
||||||
|
@click="istae = !istae"
|
||||||
|
>关注</view
|
||||||
|
> -->
|
||||||
|
</view>
|
||||||
|
<view class="info-section">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-content">
|
||||||
|
夜幕低垂，微风中夹杂着独特的夏日气息。轻抿一口，杯中啤酒泛起气泡，带着丝丝凉意。再翘起二郎腿，享受一盆刚出炉的烧烤串，那滋味，真是妙不可言。</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="card" v-for="(item, index) in list" :key="index">
|
||||||
|
<view class="card-header" @click="torout(item)">
|
||||||
|
<text class="title">{{ item.title }}</text>
|
||||||
|
<text class="subtitle">{{ item.conent }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="card-body">
|
||||||
|
<view class="img-list">
|
||||||
|
<image
|
||||||
|
v-for="(imgUrl, imgIndex) in item.imglist"
|
||||||
|
:key="imgIndex"
|
||||||
|
:src="imgUrl"
|
||||||
|
mode="aspectFill"
|
||||||
|
class="list-img"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="stats-row">
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.xing"
|
||||||
|
@click="addxingfun(item, index)"
|
||||||
|
src="@/static/img/index/xing-2.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/xing.png"
|
||||||
|
@click="delxingfun(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.xingnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.fen"
|
||||||
|
@click="shareContent(item, index)"
|
||||||
|
src="@/static/img/index/fen.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/fen-2.png"
|
||||||
|
@click="shareContent(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.fennum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<!-- 评论 -->
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.ping"
|
||||||
|
@click="showCommentInput(item, index)"
|
||||||
|
src="@/static/img/index/ping.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/ping.png"
|
||||||
|
@click="showCommentInput(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.pingnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.xin"
|
||||||
|
@click="addisredfun(item, index)"
|
||||||
|
src="@/static/img/index/xin.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/xin-3.png"
|
||||||
|
@click="delisredfun(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.xinnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 自定义模态框 -->
|
||||||
|
<view v-if="showCommentModal" class="comment-modal">
|
||||||
|
<view class="modal-content">
|
||||||
|
<textarea
|
||||||
|
v-model="commentContent"
|
||||||
|
placeholder="请输入评论内容"
|
||||||
|
class="comment-input"
|
||||||
|
></textarea>
|
||||||
|
<view class="modal-buttons">
|
||||||
|
<button @click="cancelComment">取消</button>
|
||||||
|
<button @click="submitComment()">提交</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import imgage from "@/static/logn.png"; // 导入图片资源
|
||||||
|
import l13 from "@/static/img/index/l13.png"; // 导入图片资源
|
||||||
|
import l14 from "@/static/img/index/l14.png"; // 导入图片资源
|
||||||
|
import l15 from "@/static/img/index/l15.png"; // 导入图片资源
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
stylie: {
|
||||||
|
width: "20px", // 设置宽度为 20px
|
||||||
|
height: "20px", // 设置高度为 20px
|
||||||
|
marginRight: "10px", // 设置右边距为 10px
|
||||||
|
},
|
||||||
|
showCommentModal: false, // 控制模态框的显示
|
||||||
|
commentContent: "", // 评论内容
|
||||||
|
currentCommentIndex: -1,
|
||||||
|
currentCommentItem: null,
|
||||||
|
isred: false,
|
||||||
|
isrednum: 0,
|
||||||
|
imgage: imgage,
|
||||||
|
showDropdown: false,
|
||||||
|
currentTitle: "",
|
||||||
|
istae: true,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
tp: "玉田商超",
|
||||||
|
img: "",
|
||||||
|
title: "云乡源一桶天下的美味体验",
|
||||||
|
conent:
|
||||||
|
"夜幕降临，微风中夹杂着独特的夏日气息。轻抿一口杯中啤酒泛起气泡，带着丝丝凉意。再翘起二郎腿，享受一盆刚出炉的烧烤串，那滋味真是妙不可言。◆ 海鲜烧烤的吸引力谈及烧烤中的佼佼者，海鲜烧烤无疑占据一席之地。经过火焰的洗礼，海洋的鲜美被进一步激发，散发出诱人的香气。在烹饪大厨手中，它总能脱颖而出，一上桌便被众人争抢而空。02云乡源一桶天下◆ 招牌海鲜烧烤种类在玉田，有一家备受推崇的海鲜烧烤店—「云乡源一桶天下」，其美味程度让每一位食客都赞不绝口。“这里的海鲜烧烤真的太好吃了，每一口都能品尝到海洋的鲜美。”“而且海鲜非常新鲜，尤其是那整只的生蚝，让人垂涎欲滴。”“我喜欢这里的羊肉和牛肉烧烤，调味恰到好处，让人回味无穷。”对于海鲜爱好者来说，烤制是最佳的烹饪方式。在「云乡源一桶天下」，你可以尽情享受到扇贝、海螺、生蚝、花蛤等海鲜的烤制美味。◆ 优质的烹饪方式和食材听说有一次，有位客人竟然独自点了18大个串羊肉烧烤品尝，这究竟是何等美味，竟让人如此着迷！ “选用优质的食材，何必过于依赖重口味调味料？”海鲜烧烤的魅力，往往在于其丰富的口感与独特的烹饪方式。而在这其中，各类贝类食材无疑是不可或缺的灵魂。03完美的海鲜烧烤配酒◆ 夏日的享受烧烤与冰啤酒，这一对夏日里不可或缺的绝配CP，总能带给人一种完美的享受。在店内，你可以尽情享用冰凉的鲜啤，让这个夏夜更加完美。醇厚的啤酒与美味的烧烤在一起不断冲刷你的味蕾，在冰与火的口感中交织，为夏日带来一抹清凉。每当大口吃肉时，搭配上这冰镇啤酒，仿佛能立即感受到温度下降三度，让人倍感惬意。◆ 优惠活动还有更令人兴奋的优惠158超值福利套餐等你来拿！",
|
||||||
|
xin: false,
|
||||||
|
timer: "2025-06-01 14:01 玉田",
|
||||||
|
xinnum: 0,
|
||||||
|
xing: false,
|
||||||
|
xingnum: 0,
|
||||||
|
ping: false,
|
||||||
|
pingnum: 0,
|
||||||
|
pingcontent: [],
|
||||||
|
fen: false,
|
||||||
|
fennum: 0,
|
||||||
|
imglist: [l13, l14, l15],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.name) {
|
||||||
|
this.passedName = options.name;
|
||||||
|
this.currentTitle = options.name; // 可以根据需求设置当前标题
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
shareContent(item, index) {
|
||||||
|
uni.share({
|
||||||
|
provider: "weixin",
|
||||||
|
scene: "WXSceneTimeline", // 指定分享到朋友圈
|
||||||
|
type: 0,
|
||||||
|
href: "https://example.com", // 分享的链接，需替换为实际链接
|
||||||
|
title: "商贸服务分享", // 分享标题
|
||||||
|
imageUrl: item.img || "https://example.com/default-image.jpg", // 分享图片，需替换为实际图片链接
|
||||||
|
success: () => {
|
||||||
|
this.list[index].fennum++;
|
||||||
|
this.list[index].fen = true;
|
||||||
|
uni.showToast({
|
||||||
|
title: "分享成功",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: "分享失败，请重试",
|
||||||
|
icon: "none",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addisredfun(item, index) {
|
||||||
|
this.list[index].xinnum--;
|
||||||
|
this.list[index].xin = !this.list[index].xin;
|
||||||
|
},
|
||||||
|
delisredfun(item, index) {
|
||||||
|
if (this.list[index].xinnum == 0) {
|
||||||
|
this.list[index].xinnum++;
|
||||||
|
}
|
||||||
|
this.list[index].xin = !this.list[index].xin;
|
||||||
|
},
|
||||||
|
addxingfun(item, index) {
|
||||||
|
this.list[index].xingnum--;
|
||||||
|
this.list[index].xing = !this.list[index].xing;
|
||||||
|
},
|
||||||
|
delxingfun(item, index) {
|
||||||
|
if (this.list[index].xingnum == 0) {
|
||||||
|
this.list[index].xingnum++;
|
||||||
|
}
|
||||||
|
this.list[index].xing = !this.list[index].xing;
|
||||||
|
},
|
||||||
|
showCommentInput(item, index) {
|
||||||
|
this.showCommentModal = true;
|
||||||
|
this.currentCommentIndex = index;
|
||||||
|
this.currentCommentItem = item;
|
||||||
|
},
|
||||||
|
cancelComment() {
|
||||||
|
this.showCommentModal = false;
|
||||||
|
this.commentContent = "";
|
||||||
|
},
|
||||||
|
submitComment() {
|
||||||
|
if (this.commentContent.trim()) {
|
||||||
|
const userInfo = this.$options.filters.isLogin();
|
||||||
|
const currentDate = new Date();
|
||||||
|
const time = `${currentDate.getFullYear()}-${String(
|
||||||
|
currentDate.getMonth() + 1
|
||||||
|
).padStart(2, "0")}-${String(currentDate.getDate()).padStart(
|
||||||
|
2,
|
||||||
|
"0"
|
||||||
|
)} ${String(currentDate.getHours()).padStart(2, "0")}:${String(
|
||||||
|
currentDate.getMinutes()
|
||||||
|
).padStart(2, "0")}`;
|
||||||
|
this.list[this.currentCommentIndex].pingcontent.push({
|
||||||
|
img: userInfo.face, //图片
|
||||||
|
name: userInfo.nickName, //名字
|
||||||
|
content: this.commentContent, //内容
|
||||||
|
time: time, //时间
|
||||||
|
zannum: 0, //点赞数
|
||||||
|
iszan: false, // 点赞状态，默认为未赞
|
||||||
|
});
|
||||||
|
this.list[this.currentCommentIndex].pingnum++;
|
||||||
|
this.list[this.currentCommentIndex].ping = true;
|
||||||
|
}
|
||||||
|
this.showCommentModal = false;
|
||||||
|
this.commentContent = "";
|
||||||
|
uni.showToast({
|
||||||
|
title: "提交成功",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// addpingfun(item, index) {
|
||||||
|
// this.list[index].pingnum--;
|
||||||
|
// this.list[index].ping = !this.list[index].ping;
|
||||||
|
// },
|
||||||
|
// delpingfun(item, index) {
|
||||||
|
// if (this.list[index].pingnum == 0) {
|
||||||
|
// this.list[index].pingnum++;
|
||||||
|
// }
|
||||||
|
// this.list[index].ping = !this.list[index].ping;
|
||||||
|
// },
|
||||||
|
|
||||||
|
torout(item) {
|
||||||
|
const itemJson = encodeURIComponent(JSON.stringify(item));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/tabbar/vlog/vlindexstr?item=${itemJson}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.nav-left,
|
||||||
|
.nav-right {
|
||||||
|
width: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
// font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.dropdown-icon {
|
||||||
|
margin-left: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 160rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1rpx solid #eee;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 10;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
.company-profile {
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
// margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
background: #ffcc00;
|
||||||
|
color: #333;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow-btn {
|
||||||
|
color: #1890ff;
|
||||||
|
border: 1px solid #1890ff;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.stafollow-btn {
|
||||||
|
color: #ffffff;
|
||||||
|
border: 1px solid red;
|
||||||
|
background: red;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-section {
|
||||||
|
// border-top: 1px solid #eee;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
// 新增样式控制两行显示
|
||||||
|
// overflow: hidden;
|
||||||
|
// display: -webkit-box;
|
||||||
|
// -webkit-box-orient: vertical;
|
||||||
|
// -webkit-line-clamp: 2; /* 限制显示两行 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1890ff;
|
||||||
|
display: flex; /* 弹性布局 */
|
||||||
|
justify-content: center; /* 水平居中 */
|
||||||
|
align-items: center; /* 垂直居中（关键） */
|
||||||
|
gap: 8rpx; /* 图片与文字间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
// 补充：确保图片和文字的垂直基准一致（可选）
|
||||||
|
.stat-number image {
|
||||||
|
vertical-align: middle; /* 图片垂直居中（兼容非 flex 场景） */
|
||||||
|
}
|
||||||
|
.comment-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.img-list {
|
||||||
|
display: flex;
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
gap: 10px; /* 图片之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-img {
|
||||||
|
// width: 250rpx; /* 图片宽度，根据需求调整 */
|
||||||
|
// height: 250rpx; /* 图片高度，根据需求调整 */
|
||||||
|
border-radius: 8rpx; /* 图片圆角 */
|
||||||
|
object-fit: cover; /* 图片填充方式 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
530
pages/tabbar/vlog/log/slog.vue
Normal file
530
pages/tabbar/vlog/log/slog.vue
Normal file
@ -0,0 +1,530 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 页面其他内容 -->
|
||||||
|
<view class="page-content">
|
||||||
|
<!-- 这里可以添加页面的主要内容 -->
|
||||||
|
<view class="company-profile">
|
||||||
|
<view class="header">
|
||||||
|
<view class="avatar">
|
||||||
|
<image :src="imgage" mode="aspectFill" class="avatar-img" />
|
||||||
|
</view>
|
||||||
|
<view class="title">玉田商贸</view>
|
||||||
|
<view class="badge">达人标识</view>
|
||||||
|
<!-- <view
|
||||||
|
:class="istae == true ? 'follow-btn' : 'stafollow-btn'"
|
||||||
|
@click="istae = !istae"
|
||||||
|
>关注</view
|
||||||
|
> -->
|
||||||
|
</view>
|
||||||
|
<view class="info-section">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-content"
|
||||||
|
>鸦鸿桥镇地处京、津、冀三角腹地，京哈高速公路设有出口，毗邻四大港口，客货运汽车直达京、津、秦及东北地区20多个大中城市，成为连通京津 唐工业带、环渤海经济圈以及唐山湾“四点一带”经 济区的交通主动脉。</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="card" v-for="(item, index) in list" :key="index">
|
||||||
|
<view class="card-header" @click="torout(item)">
|
||||||
|
<text class="title">{{ item.title }}</text>
|
||||||
|
<text class="subtitle">{{ item.conent }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="card-body">
|
||||||
|
<view class="img-list">
|
||||||
|
<image
|
||||||
|
v-for="(imgUrl, imgIndex) in item.imglist"
|
||||||
|
:key="imgIndex"
|
||||||
|
:src="imgUrl"
|
||||||
|
mode="aspectFill"
|
||||||
|
class="list-img"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="stats-row">
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.xing"
|
||||||
|
@click="addxingfun(item, index)"
|
||||||
|
src="@/static/img/index/xing-2.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/xing.png"
|
||||||
|
@click="delxingfun(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.xingnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.fen"
|
||||||
|
@click="shareContent(item, index)"
|
||||||
|
src="@/static/img/index/fen.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/fen-2.png"
|
||||||
|
@click="shareContent(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.fennum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<!-- 评论 -->
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.ping"
|
||||||
|
@click="showCommentInput(item, index)"
|
||||||
|
src="@/static/img/index/ping.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/ping.png"
|
||||||
|
@click="showCommentInput(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.pingnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.xin"
|
||||||
|
@click="addisredfun(item, index)"
|
||||||
|
src="@/static/img/index/xin.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/xin-3.png"
|
||||||
|
@click="delisredfun(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.xinnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 自定义模态框 -->
|
||||||
|
<view v-if="showCommentModal" class="comment-modal">
|
||||||
|
<view class="modal-content">
|
||||||
|
<textarea
|
||||||
|
v-model="commentContent"
|
||||||
|
placeholder="请输入评论内容"
|
||||||
|
class="comment-input"
|
||||||
|
></textarea>
|
||||||
|
<view class="modal-buttons">
|
||||||
|
<button @click="cancelComment">取消</button>
|
||||||
|
<button @click="submitComment()">提交</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import imgage from "@/static/logn.png"; // 导入图片资源
|
||||||
|
import l10 from "@/static/img/index/l10.png"; // 导入图片资源
|
||||||
|
import l11 from "@/static/img/index/l11.png"; // 导入图片资源
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
stylie: {
|
||||||
|
width: "20px", // 设置宽度为 20px
|
||||||
|
height: "20px", // 设置高度为 20px
|
||||||
|
marginRight: "10px", // 设置右边距为 10px
|
||||||
|
},
|
||||||
|
showCommentModal: false, // 控制模态框的显示
|
||||||
|
commentContent: "", // 评论内容
|
||||||
|
currentCommentIndex: -1,
|
||||||
|
currentCommentItem: null,
|
||||||
|
isred: false,
|
||||||
|
isrednum: 0,
|
||||||
|
imgage: imgage,
|
||||||
|
showDropdown: false,
|
||||||
|
currentTitle: "",
|
||||||
|
istae: true,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
tp: "玉田商贸",
|
||||||
|
img: "",
|
||||||
|
title: "鸦鸿桥商贸社区",
|
||||||
|
conent:
|
||||||
|
"鸦鸿桥镇地处京、津、冀三角地带，周边交通发达有京哈高速，毗邻四大港口，客货运汽车直达京、津、冀及东北地区20多个大城市，成为连通京津 唐工业带、环渤海经济圈以及唐山湾“四点一带”经 济区的交通地带。据记载，还乡河畔的鸦鸿桥早在明朝时期就设有水陆码头，依靠便利的水陆交通，形成繁荣的商贸圈，成为沟通天津、北京、东北、内蒙等地的商 品集散中心，享有“京东第一大集”美称。优越的历史人文，培育了鸦鸿桥人民不断自我超越的实干精神。鸦鸿桥镇积极承接北京市场转移、加强项目建设，逐步形成了 以小商品城、昌升商贸物流广场、国际商贸城、 日杂市场、针织市场、建材市场、废旧物资市场、 物流市场、新城市场、五洲商城、兴旺商城和五 合商贸城等 12个专业市场为骨干，以“四街三 路”沿街门店为依托的市场体系，以 “小、多、廉、快、广”的经营特色发展成为连接京津冀、吸纳江南、辐射三北的重要小商品集散 地，先后被确定为国家首批综合改革试点镇、全 国重点镇和全国十大小商品交易市场，同时也是 河北省首批确定的改革发展重点镇、百强乡镇、 农村现代化建设试点镇和唐山市重点中心镇建 设试点镇。近年，玉田绘制了“科创商贸名城京东魅力 玉田”的发展蓝图，鸦鸿桥市场的改造提升和玉南产 业新城建设加速推进。该县将大力引进新的战略投 资者，构建县城和高铁新城“双城多片区”发展格局， 鸦鸿桥商贸文旅示范片区建设将进入发展快车道。不远的将来，鸦鸿桥镇必将成为京唐秦发展轴上的 重要节点，一个市场繁荣、业态丰富、宜居宜商的“商 贸核心功能区”正在崛起。",
|
||||||
|
xin: false,
|
||||||
|
timer: "2025-06-01 16:22 玉田",
|
||||||
|
xinnum: 0,
|
||||||
|
xing: false,
|
||||||
|
xingnum: 0,
|
||||||
|
ping: false,
|
||||||
|
pingnum: 0,
|
||||||
|
pingcontent: [],
|
||||||
|
fen: false,
|
||||||
|
fennum: 0,
|
||||||
|
imglist: [l10, l11],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.name) {
|
||||||
|
this.passedName = options.name;
|
||||||
|
this.currentTitle = options.name; // 可以根据需求设置当前标题
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
shareContent(item, index) {
|
||||||
|
uni.share({
|
||||||
|
provider: "weixin",
|
||||||
|
scene: "WXSceneTimeline", // 指定分享到朋友圈
|
||||||
|
type: 0,
|
||||||
|
href: "https://example.com", // 分享的链接，需替换为实际链接
|
||||||
|
title: "商贸服务分享", // 分享标题
|
||||||
|
imageUrl: item.img || "https://example.com/default-image.jpg", // 分享图片，需替换为实际图片链接
|
||||||
|
success: () => {
|
||||||
|
this.list[index].fennum++;
|
||||||
|
this.list[index].fen = true;
|
||||||
|
uni.showToast({
|
||||||
|
title: "分享成功",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: "分享失败，请重试",
|
||||||
|
icon: "none",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addisredfun(item, index) {
|
||||||
|
this.list[index].xinnum--;
|
||||||
|
this.list[index].xin = !this.list[index].xin;
|
||||||
|
},
|
||||||
|
delisredfun(item, index) {
|
||||||
|
if (this.list[index].xinnum == 0) {
|
||||||
|
this.list[index].xinnum++;
|
||||||
|
}
|
||||||
|
this.list[index].xin = !this.list[index].xin;
|
||||||
|
},
|
||||||
|
addxingfun(item, index) {
|
||||||
|
this.list[index].xingnum--;
|
||||||
|
this.list[index].xing = !this.list[index].xing;
|
||||||
|
},
|
||||||
|
delxingfun(item, index) {
|
||||||
|
if (this.list[index].xingnum == 0) {
|
||||||
|
this.list[index].xingnum++;
|
||||||
|
}
|
||||||
|
this.list[index].xing = !this.list[index].xing;
|
||||||
|
},
|
||||||
|
showCommentInput(item, index) {
|
||||||
|
this.showCommentModal = true;
|
||||||
|
this.currentCommentIndex = index;
|
||||||
|
this.currentCommentItem = item;
|
||||||
|
},
|
||||||
|
cancelComment() {
|
||||||
|
this.showCommentModal = false;
|
||||||
|
this.commentContent = "";
|
||||||
|
},
|
||||||
|
submitComment() {
|
||||||
|
if (this.commentContent.trim()) {
|
||||||
|
const userInfo = this.$options.filters.isLogin();
|
||||||
|
const currentDate = new Date();
|
||||||
|
const time = `${currentDate.getFullYear()}-${String(
|
||||||
|
currentDate.getMonth() + 1
|
||||||
|
).padStart(2, "0")}-${String(currentDate.getDate()).padStart(
|
||||||
|
2,
|
||||||
|
"0"
|
||||||
|
)} ${String(currentDate.getHours()).padStart(2, "0")}:${String(
|
||||||
|
currentDate.getMinutes()
|
||||||
|
).padStart(2, "0")}`;
|
||||||
|
this.list[this.currentCommentIndex].pingcontent.push({
|
||||||
|
img: userInfo.face, //图片
|
||||||
|
name: userInfo.nickName, //名字
|
||||||
|
content: this.commentContent, //内容
|
||||||
|
time: time, //时间
|
||||||
|
zannum: 0, //点赞数
|
||||||
|
iszan: false, // 点赞状态，默认为未赞
|
||||||
|
});
|
||||||
|
this.list[this.currentCommentIndex].pingnum++;
|
||||||
|
this.list[this.currentCommentIndex].ping = true;
|
||||||
|
}
|
||||||
|
this.showCommentModal = false;
|
||||||
|
this.commentContent = "";
|
||||||
|
uni.showToast({
|
||||||
|
title: "提交成功",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// addpingfun(item, index) {
|
||||||
|
// this.list[index].pingnum--;
|
||||||
|
// this.list[index].ping = !this.list[index].ping;
|
||||||
|
// },
|
||||||
|
// delpingfun(item, index) {
|
||||||
|
// if (this.list[index].pingnum == 0) {
|
||||||
|
// this.list[index].pingnum++;
|
||||||
|
// }
|
||||||
|
// this.list[index].ping = !this.list[index].ping;
|
||||||
|
// },
|
||||||
|
|
||||||
|
torout(item) {
|
||||||
|
const itemJson = encodeURIComponent(JSON.stringify(item));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/tabbar/vlog/vlindexstr?item=${itemJson}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.nav-left,
|
||||||
|
.nav-right {
|
||||||
|
width: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
// font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.dropdown-icon {
|
||||||
|
margin-left: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 160rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1rpx solid #eee;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 10;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
.company-profile {
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
// margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
background: #ffcc00;
|
||||||
|
color: #333;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow-btn {
|
||||||
|
color: #1890ff;
|
||||||
|
border: 1px solid #1890ff;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.stafollow-btn {
|
||||||
|
color: #ffffff;
|
||||||
|
border: 1px solid red;
|
||||||
|
background: red;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-section {
|
||||||
|
// border-top: 1px solid #eee;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
// 新增样式控制两行显示
|
||||||
|
// overflow: hidden;
|
||||||
|
// display: -webkit-box;
|
||||||
|
// -webkit-box-orient: vertical;
|
||||||
|
// -webkit-line-clamp: 2; /* 限制显示两行 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1890ff;
|
||||||
|
display: flex; /* 弹性布局 */
|
||||||
|
justify-content: center; /* 水平居中 */
|
||||||
|
align-items: center; /* 垂直居中（关键） */
|
||||||
|
gap: 8rpx; /* 图片与文字间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
// 补充：确保图片和文字的垂直基准一致（可选）
|
||||||
|
.stat-number image {
|
||||||
|
vertical-align: middle; /* 图片垂直居中（兼容非 flex 场景） */
|
||||||
|
}
|
||||||
|
.comment-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.img-list {
|
||||||
|
display: flex;
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
gap: 10px; /* 图片之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-img {
|
||||||
|
// width: 250rpx; /* 图片宽度，根据需求调整 */
|
||||||
|
// height: 250rpx; /* 图片高度，根据需求调整 */
|
||||||
|
border-radius: 8rpx; /* 图片圆角 */
|
||||||
|
object-fit: cover; /* 图片填充方式 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
529
pages/tabbar/vlog/log/tlog.vue
Normal file
529
pages/tabbar/vlog/log/tlog.vue
Normal file
@ -0,0 +1,529 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 页面其他内容 -->
|
||||||
|
<view class="page-content">
|
||||||
|
<!-- 这里可以添加页面的主要内容 -->
|
||||||
|
<view class="company-profile">
|
||||||
|
<view class="header">
|
||||||
|
<view class="avatar">
|
||||||
|
<image :src="imgage" mode="aspectFill" class="avatar-img" />
|
||||||
|
</view>
|
||||||
|
<view class="title">玉田特色</view>
|
||||||
|
<view class="badge">达人标识</view>
|
||||||
|
<!-- <view
|
||||||
|
:class="istae == true ? 'follow-btn' : 'stafollow-btn'"
|
||||||
|
@click="istae = !istae"
|
||||||
|
>关注</view
|
||||||
|
> -->
|
||||||
|
</view>
|
||||||
|
<view class="info-section">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-content">
|
||||||
|
玉田烧鸡是河北唐山的传统美食，有悠久的历史，甚至曾是皇家贡品。</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="card" v-for="(item, index) in list" :key="index">
|
||||||
|
<view class="card-header" @click="torout(item)">
|
||||||
|
<text class="title">{{ item.title }}</text>
|
||||||
|
<text class="subtitle">{{ item.conent }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="card-body">
|
||||||
|
<view class="img-list">
|
||||||
|
<image
|
||||||
|
v-for="(imgUrl, imgIndex) in item.imglist"
|
||||||
|
:key="imgIndex"
|
||||||
|
:src="imgUrl"
|
||||||
|
mode="aspectFill"
|
||||||
|
class="list-img"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="stats-row">
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.xing"
|
||||||
|
@click="addxingfun(item, index)"
|
||||||
|
src="@/static/img/index/xing-2.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/xing.png"
|
||||||
|
@click="delxingfun(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.xingnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.fen"
|
||||||
|
@click="shareContent(item, index)"
|
||||||
|
src="@/static/img/index/fen.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/fen-2.png"
|
||||||
|
@click="shareContent(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.fennum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<!-- 评论 -->
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.ping"
|
||||||
|
@click="showCommentInput(item, index)"
|
||||||
|
src="@/static/img/index/ping.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/ping.png"
|
||||||
|
@click="showCommentInput(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.pingnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.xin"
|
||||||
|
@click="addisredfun(item, index)"
|
||||||
|
src="@/static/img/index/xin.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/xin-3.png"
|
||||||
|
@click="delisredfun(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.xinnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 自定义模态框 -->
|
||||||
|
<view v-if="showCommentModal" class="comment-modal">
|
||||||
|
<view class="modal-content">
|
||||||
|
<textarea
|
||||||
|
v-model="commentContent"
|
||||||
|
placeholder="请输入评论内容"
|
||||||
|
class="comment-input"
|
||||||
|
></textarea>
|
||||||
|
<view class="modal-buttons">
|
||||||
|
<button @click="cancelComment">取消</button>
|
||||||
|
<button @click="submitComment()">提交</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import imgage from "@/static/logn.png"; // 导入图片资源
|
||||||
|
import l12 from "@/static/img/index/l12.png"; // 导入图片资源
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
stylie: {
|
||||||
|
width: "20px", // 设置宽度为 20px
|
||||||
|
height: "20px", // 设置高度为 20px
|
||||||
|
marginRight: "10px", // 设置右边距为 10px
|
||||||
|
},
|
||||||
|
showCommentModal: false, // 控制模态框的显示
|
||||||
|
commentContent: "", // 评论内容
|
||||||
|
currentCommentIndex: -1,
|
||||||
|
currentCommentItem: null,
|
||||||
|
isred: false,
|
||||||
|
isrednum: 0,
|
||||||
|
imgage: imgage,
|
||||||
|
showDropdown: false,
|
||||||
|
currentTitle: "",
|
||||||
|
istae: true,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
tp: "玉田特色",
|
||||||
|
img: "",
|
||||||
|
title: "玉田烧鸡",
|
||||||
|
conent:
|
||||||
|
"玉田烧鸡的历史可以追溯到清末民初，马氏德盛斋熏鸡和老夏祖传熏鸡都是这一传统美食的代表。马氏德盛斋熏鸡选用120天以上散养的鸡，使用祖传调味料熏制，整个过程不添加任何防腐剂和添加剂，制成的熏鸡外皮油亮、红润有光泽，鸡肉质紧实，没有多余的脂肪1。老夏祖传熏鸡则起源于1918年，由夏氏熏鸡创始人夏连芳从东北名师处学得宫廷熏鸡秘方，经过几十年的传承和发展，形成了独特的制作工艺",
|
||||||
|
xin: false,
|
||||||
|
timer: "2025-06-01 14:01 玉田",
|
||||||
|
xinnum: 0,
|
||||||
|
xing: false,
|
||||||
|
xingnum: 0,
|
||||||
|
ping: false,
|
||||||
|
pingnum: 0,
|
||||||
|
pingcontent: [],
|
||||||
|
fen: false,
|
||||||
|
fennum: 0,
|
||||||
|
imglist: [l12],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.name) {
|
||||||
|
this.passedName = options.name;
|
||||||
|
this.currentTitle = options.name; // 可以根据需求设置当前标题
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
shareContent(item, index) {
|
||||||
|
uni.share({
|
||||||
|
provider: "weixin",
|
||||||
|
scene: "WXSceneTimeline", // 指定分享到朋友圈
|
||||||
|
type: 0,
|
||||||
|
href: "https://example.com", // 分享的链接，需替换为实际链接
|
||||||
|
title: "商贸服务分享", // 分享标题
|
||||||
|
imageUrl: item.img || "https://example.com/default-image.jpg", // 分享图片，需替换为实际图片链接
|
||||||
|
success: () => {
|
||||||
|
this.list[index].fennum++;
|
||||||
|
this.list[index].fen = true;
|
||||||
|
uni.showToast({
|
||||||
|
title: "分享成功",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: "分享失败，请重试",
|
||||||
|
icon: "none",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addisredfun(item, index) {
|
||||||
|
this.list[index].xinnum--;
|
||||||
|
this.list[index].xin = !this.list[index].xin;
|
||||||
|
},
|
||||||
|
delisredfun(item, index) {
|
||||||
|
if (this.list[index].xinnum == 0) {
|
||||||
|
this.list[index].xinnum++;
|
||||||
|
}
|
||||||
|
this.list[index].xin = !this.list[index].xin;
|
||||||
|
},
|
||||||
|
addxingfun(item, index) {
|
||||||
|
this.list[index].xingnum--;
|
||||||
|
this.list[index].xing = !this.list[index].xing;
|
||||||
|
},
|
||||||
|
delxingfun(item, index) {
|
||||||
|
if (this.list[index].xingnum == 0) {
|
||||||
|
this.list[index].xingnum++;
|
||||||
|
}
|
||||||
|
this.list[index].xing = !this.list[index].xing;
|
||||||
|
},
|
||||||
|
showCommentInput(item, index) {
|
||||||
|
this.showCommentModal = true;
|
||||||
|
this.currentCommentIndex = index;
|
||||||
|
this.currentCommentItem = item;
|
||||||
|
},
|
||||||
|
cancelComment() {
|
||||||
|
this.showCommentModal = false;
|
||||||
|
this.commentContent = "";
|
||||||
|
},
|
||||||
|
submitComment() {
|
||||||
|
if (this.commentContent.trim()) {
|
||||||
|
const userInfo = this.$options.filters.isLogin();
|
||||||
|
const currentDate = new Date();
|
||||||
|
const time = `${currentDate.getFullYear()}-${String(
|
||||||
|
currentDate.getMonth() + 1
|
||||||
|
).padStart(2, "0")}-${String(currentDate.getDate()).padStart(
|
||||||
|
2,
|
||||||
|
"0"
|
||||||
|
)} ${String(currentDate.getHours()).padStart(2, "0")}:${String(
|
||||||
|
currentDate.getMinutes()
|
||||||
|
).padStart(2, "0")}`;
|
||||||
|
this.list[this.currentCommentIndex].pingcontent.push({
|
||||||
|
img: userInfo.face, //图片
|
||||||
|
name: userInfo.nickName, //名字
|
||||||
|
content: this.commentContent, //内容
|
||||||
|
time: time, //时间
|
||||||
|
zannum: 0, //点赞数
|
||||||
|
iszan: false, // 点赞状态，默认为未赞
|
||||||
|
});
|
||||||
|
this.list[this.currentCommentIndex].pingnum++;
|
||||||
|
this.list[this.currentCommentIndex].ping = true;
|
||||||
|
}
|
||||||
|
this.showCommentModal = false;
|
||||||
|
this.commentContent = "";
|
||||||
|
uni.showToast({
|
||||||
|
title: "提交成功",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// addpingfun(item, index) {
|
||||||
|
// this.list[index].pingnum--;
|
||||||
|
// this.list[index].ping = !this.list[index].ping;
|
||||||
|
// },
|
||||||
|
// delpingfun(item, index) {
|
||||||
|
// if (this.list[index].pingnum == 0) {
|
||||||
|
// this.list[index].pingnum++;
|
||||||
|
// }
|
||||||
|
// this.list[index].ping = !this.list[index].ping;
|
||||||
|
// },
|
||||||
|
|
||||||
|
torout(item) {
|
||||||
|
const itemJson = encodeURIComponent(JSON.stringify(item));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/tabbar/vlog/vlindexstr?item=${itemJson}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.nav-left,
|
||||||
|
.nav-right {
|
||||||
|
width: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
// font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.dropdown-icon {
|
||||||
|
margin-left: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 160rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1rpx solid #eee;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 10;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
.company-profile {
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
// margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
background: #ffcc00;
|
||||||
|
color: #333;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow-btn {
|
||||||
|
color: #1890ff;
|
||||||
|
border: 1px solid #1890ff;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.stafollow-btn {
|
||||||
|
color: #ffffff;
|
||||||
|
border: 1px solid red;
|
||||||
|
background: red;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-section {
|
||||||
|
// border-top: 1px solid #eee;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
// 新增样式控制两行显示
|
||||||
|
// overflow: hidden;
|
||||||
|
// display: -webkit-box;
|
||||||
|
// -webkit-box-orient: vertical;
|
||||||
|
// -webkit-line-clamp: 2; /* 限制显示两行 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1890ff;
|
||||||
|
display: flex; /* 弹性布局 */
|
||||||
|
justify-content: center; /* 水平居中 */
|
||||||
|
align-items: center; /* 垂直居中（关键） */
|
||||||
|
gap: 8rpx; /* 图片与文字间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
// 补充：确保图片和文字的垂直基准一致（可选）
|
||||||
|
.stat-number image {
|
||||||
|
vertical-align: middle; /* 图片垂直居中（兼容非 flex 场景） */
|
||||||
|
}
|
||||||
|
.comment-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.img-list {
|
||||||
|
display: flex;
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
gap: 10px; /* 图片之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-img {
|
||||||
|
// width: 250rpx; /* 图片宽度，根据需求调整 */
|
||||||
|
// height: 250rpx; /* 图片高度，根据需求调整 */
|
||||||
|
border-radius: 8rpx; /* 图片圆角 */
|
||||||
|
object-fit: cover; /* 图片填充方式 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
531
pages/tabbar/vlog/log/ylog.vue
Normal file
531
pages/tabbar/vlog/log/ylog.vue
Normal file
@ -0,0 +1,531 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 页面其他内容 -->
|
||||||
|
<view class="page-content">
|
||||||
|
<!-- 这里可以添加页面的主要内容 -->
|
||||||
|
<view class="company-profile">
|
||||||
|
<view class="header">
|
||||||
|
<view class="avatar">
|
||||||
|
<image :src="imgage" mode="aspectFill" class="avatar-img" />
|
||||||
|
</view>
|
||||||
|
<view class="title">玉田医院</view>
|
||||||
|
<view class="badge">达人标识</view>
|
||||||
|
<!-- <view
|
||||||
|
:class="istae == true ? 'follow-btn' : 'stafollow-btn'"
|
||||||
|
@click="istae = !istae"
|
||||||
|
>关注</view
|
||||||
|
> -->
|
||||||
|
</view>
|
||||||
|
<view class="info-section">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="info-content"
|
||||||
|
>玉田县中医院始建于1982年7月1日，
|
||||||
|
1996年7月，被评为“二级甲等中医医院”，2013年9月，通过“国家二级甲等医院复审”，2019年1月，纳入“国家三级中医医院”管理，是玉田县唯一一家中医特色突出、中西医结合的国家三级中医医院。</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="card" v-for="(item, index) in list" :key="index">
|
||||||
|
<view class="card-header" @click="torout(item)">
|
||||||
|
<text class="title">{{ item.title }}</text>
|
||||||
|
<text class="subtitle">{{ item.conent }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="card-body">
|
||||||
|
<view class="img-list">
|
||||||
|
<image
|
||||||
|
v-for="(imgUrl, imgIndex) in item.imglist"
|
||||||
|
:key="imgIndex"
|
||||||
|
:src="imgUrl"
|
||||||
|
mode="aspectFill"
|
||||||
|
class="list-img"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="stats-row">
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.xing"
|
||||||
|
@click="addxingfun(item, index)"
|
||||||
|
src="@/static/img/index/xing-2.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/xing.png"
|
||||||
|
@click="delxingfun(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.xingnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.fen"
|
||||||
|
@click="shareContent(item, index)"
|
||||||
|
src="@/static/img/index/fen.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/fen-2.png"
|
||||||
|
@click="shareContent(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.fennum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<!-- 评论 -->
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.ping"
|
||||||
|
@click="showCommentInput(item, index)"
|
||||||
|
src="@/static/img/index/ping.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/ping.png"
|
||||||
|
@click="showCommentInput(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.pingnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.xin"
|
||||||
|
@click="addisredfun(item, index)"
|
||||||
|
src="@/static/img/index/xin.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/xin-3.png"
|
||||||
|
@click="delisredfun(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text>
|
||||||
|
{{ item.xinnum }}
|
||||||
|
</text>
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 自定义模态框 -->
|
||||||
|
<view v-if="showCommentModal" class="comment-modal">
|
||||||
|
<view class="modal-content">
|
||||||
|
<textarea
|
||||||
|
v-model="commentContent"
|
||||||
|
placeholder="请输入评论内容"
|
||||||
|
class="comment-input"
|
||||||
|
></textarea>
|
||||||
|
<view class="modal-buttons">
|
||||||
|
<button @click="cancelComment">取消</button>
|
||||||
|
<button @click="submitComment()">提交</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import imgage from "@/static/logn.png"; // 导入图片资源
|
||||||
|
import l7 from "@/static/img/index/l7.png"; // 导入图片资源
|
||||||
|
import l8 from "@/static/img/index/l8.png"; // 导入图片资源
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
stylie: {
|
||||||
|
width: "20px", // 设置宽度为 20px
|
||||||
|
height: "20px", // 设置高度为 20px
|
||||||
|
marginRight: "10px", // 设置右边距为 10px
|
||||||
|
},
|
||||||
|
showCommentModal: false, // 控制模态框的显示
|
||||||
|
commentContent: "", // 评论内容
|
||||||
|
currentCommentIndex: -1,
|
||||||
|
currentCommentItem: null,
|
||||||
|
isred: false,
|
||||||
|
isrednum: 0,
|
||||||
|
imgage: imgage,
|
||||||
|
showDropdown: false,
|
||||||
|
currentTitle: "",
|
||||||
|
istae: true,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
tp: "玉田医疗",
|
||||||
|
img: "",
|
||||||
|
title: "玉田县中医院",
|
||||||
|
conent:
|
||||||
|
"玉田县中医院是一家集医疗、教学、科研、预防保健、康复康养为一体，经过42年的奋斗发展，构建起了“一院多区”高质量发展的格局。院区全部开放运行后，总床位可达2662张，将实现区域医疗中心发展目标。",
|
||||||
|
xin: false,
|
||||||
|
timer: "2025-06-01 12:00 玉田",
|
||||||
|
xinnum: 0,
|
||||||
|
xing: false,
|
||||||
|
xingnum: 0,
|
||||||
|
ping: false,
|
||||||
|
pingnum: 0,
|
||||||
|
pingcontent: [],
|
||||||
|
fen: false,
|
||||||
|
fennum: 0,
|
||||||
|
imglist: [l7, l8],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.name) {
|
||||||
|
this.passedName = options.name;
|
||||||
|
this.currentTitle = options.name; // 可以根据需求设置当前标题
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
shareContent(item, index) {
|
||||||
|
uni.share({
|
||||||
|
provider: "weixin",
|
||||||
|
scene: "WXSceneTimeline", // 指定分享到朋友圈
|
||||||
|
type: 0,
|
||||||
|
href: "https://example.com", // 分享的链接，需替换为实际链接
|
||||||
|
title: "医疗服务分享", // 分享标题
|
||||||
|
imageUrl: item.img || "https://example.com/default-image.jpg", // 分享图片，需替换为实际图片链接
|
||||||
|
success: () => {
|
||||||
|
this.list[index].fennum++;
|
||||||
|
this.list[index].fen = true;
|
||||||
|
uni.showToast({
|
||||||
|
title: "分享成功",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: "分享失败，请重试",
|
||||||
|
icon: "none",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addisredfun(item, index) {
|
||||||
|
this.list[index].xinnum--;
|
||||||
|
this.list[index].xin = !this.list[index].xin;
|
||||||
|
},
|
||||||
|
delisredfun(item, index) {
|
||||||
|
if (this.list[index].xinnum == 0) {
|
||||||
|
this.list[index].xinnum++;
|
||||||
|
}
|
||||||
|
this.list[index].xin = !this.list[index].xin;
|
||||||
|
},
|
||||||
|
addxingfun(item, index) {
|
||||||
|
this.list[index].xingnum--;
|
||||||
|
this.list[index].xing = !this.list[index].xing;
|
||||||
|
},
|
||||||
|
delxingfun(item, index) {
|
||||||
|
if (this.list[index].xingnum == 0) {
|
||||||
|
this.list[index].xingnum++;
|
||||||
|
}
|
||||||
|
this.list[index].xing = !this.list[index].xing;
|
||||||
|
},
|
||||||
|
showCommentInput(item, index) {
|
||||||
|
this.showCommentModal = true;
|
||||||
|
this.currentCommentIndex = index;
|
||||||
|
this.currentCommentItem = item;
|
||||||
|
},
|
||||||
|
cancelComment() {
|
||||||
|
this.showCommentModal = false;
|
||||||
|
this.commentContent = "";
|
||||||
|
},
|
||||||
|
submitComment() {
|
||||||
|
if (this.commentContent.trim()) {
|
||||||
|
const userInfo = this.$options.filters.isLogin();
|
||||||
|
const currentDate = new Date();
|
||||||
|
const time = `${currentDate.getFullYear()}-${String(
|
||||||
|
currentDate.getMonth() + 1
|
||||||
|
).padStart(2, "0")}-${String(currentDate.getDate()).padStart(
|
||||||
|
2,
|
||||||
|
"0"
|
||||||
|
)} ${String(currentDate.getHours()).padStart(2, "0")}:${String(
|
||||||
|
currentDate.getMinutes()
|
||||||
|
).padStart(2, "0")}`;
|
||||||
|
this.list[this.currentCommentIndex].pingcontent.push({
|
||||||
|
img: userInfo.face, //图片
|
||||||
|
name: userInfo.nickName, //名字
|
||||||
|
content: this.commentContent, //内容
|
||||||
|
time: time, //时间
|
||||||
|
zannum: 0, //点赞数
|
||||||
|
iszan: false, // 点赞状态，默认为未赞
|
||||||
|
});
|
||||||
|
this.list[this.currentCommentIndex].pingnum++;
|
||||||
|
this.list[this.currentCommentIndex].ping = true;
|
||||||
|
}
|
||||||
|
this.showCommentModal = false;
|
||||||
|
this.commentContent = "";
|
||||||
|
uni.showToast({
|
||||||
|
title: "提交成功",
|
||||||
|
icon: "success",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// addpingfun(item, index) {
|
||||||
|
// this.list[index].pingnum--;
|
||||||
|
// this.list[index].ping = !this.list[index].ping;
|
||||||
|
// },
|
||||||
|
// delpingfun(item, index) {
|
||||||
|
// if (this.list[index].pingnum == 0) {
|
||||||
|
// this.list[index].pingnum++;
|
||||||
|
// }
|
||||||
|
// this.list[index].ping = !this.list[index].ping;
|
||||||
|
// },
|
||||||
|
|
||||||
|
torout(item) {
|
||||||
|
const itemJson = encodeURIComponent(JSON.stringify(item));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/tabbar/vlog/vlindexstr?item=${itemJson}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.nav-left,
|
||||||
|
.nav-right {
|
||||||
|
width: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
// font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.dropdown-icon {
|
||||||
|
margin-left: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 160rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1rpx solid #eee;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 10;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
.company-profile {
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
// margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
background: #ffcc00;
|
||||||
|
color: #333;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow-btn {
|
||||||
|
color: #1890ff;
|
||||||
|
border: 1px solid #1890ff;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.stafollow-btn {
|
||||||
|
color: #ffffff;
|
||||||
|
border: 1px solid red;
|
||||||
|
background: red;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-section {
|
||||||
|
// border-top: 1px solid #eee;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
// 新增样式控制两行显示
|
||||||
|
// overflow: hidden;
|
||||||
|
// display: -webkit-box;
|
||||||
|
// -webkit-box-orient: vertical;
|
||||||
|
// -webkit-line-clamp: 2; /* 限制显示两行 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1890ff;
|
||||||
|
display: flex; /* 弹性布局 */
|
||||||
|
justify-content: center; /* 水平居中 */
|
||||||
|
align-items: center; /* 垂直居中（关键） */
|
||||||
|
gap: 8rpx; /* 图片与文字间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
// 补充：确保图片和文字的垂直基准一致（可选）
|
||||||
|
.stat-number image {
|
||||||
|
vertical-align: middle; /* 图片垂直居中（兼容非 flex 场景） */
|
||||||
|
}
|
||||||
|
.comment-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.img-list {
|
||||||
|
display: flex;
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
gap: 10px; /* 图片之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-img {
|
||||||
|
// width: 100%; /* 图片宽度，根据需求调整 */
|
||||||
|
// height: 250rpx; /* 图片高度，根据需求调整 */
|
||||||
|
border-radius: 8rpx; /* 图片圆角 */
|
||||||
|
object-fit: cover; /* 图片填充方式 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
340
pages/tabbar/vlog/vlindex.vue
Normal file
340
pages/tabbar/vlog/vlindex.vue
Normal file
@ -0,0 +1,340 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- 头部原生导航栏 -->
|
||||||
|
<view class="native-header-nav">
|
||||||
|
<view class="nav-left" @click="goBack">
|
||||||
|
<text>←</text>
|
||||||
|
</view>
|
||||||
|
<view class="nav-title" @click="toggleDropdown">
|
||||||
|
<text>{{ currentTitle || "选择分类" }}</text>
|
||||||
|
<text class="dropdown-icon">{{ showDropdown ? "↑" : "↓" }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="nav-right">
|
||||||
|
<!-- <text>更多</text> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 下拉菜单 -->
|
||||||
|
<view class="dropdown-menu" v-if="showDropdown">
|
||||||
|
<view
|
||||||
|
class="dropdown-item"
|
||||||
|
v-for="item in navTitle"
|
||||||
|
:key="item.id"
|
||||||
|
@click="selectItem(item)"
|
||||||
|
>
|
||||||
|
<text>{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<flog v-if="currentTitle=='房地产'"></flog>
|
||||||
|
<ylog v-if="currentTitle=='医疗'"></ylog>
|
||||||
|
<jlog v-if="currentTitle=='教育'"></jlog>
|
||||||
|
<slog v-if="currentTitle=='商贸'"></slog>
|
||||||
|
<sclog v-if="currentTitle=='商超'"></sclog>
|
||||||
|
<tlog v-if="currentTitle=='特色'"></tlog>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import flog from "./log/flog.vue"; // 房地产
|
||||||
|
import jlog from "./log/jlog.vue"; // 房地产
|
||||||
|
import ylog from "./log/ylog.vue"; // 房地产
|
||||||
|
import slog from "./log/slog.vue"; // 房地产
|
||||||
|
import sclog from "./log/sclog.vue"; // 房地产
|
||||||
|
import tlog from "./log/tlog.vue"; // 房地产
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
flog, // 注册组件
|
||||||
|
ylog, // 注册组件
|
||||||
|
jlog, // 注册组件
|
||||||
|
slog,
|
||||||
|
sclog,
|
||||||
|
tlog
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
stylie: {
|
||||||
|
width: "20px", // 设置宽度为 20px
|
||||||
|
height: "20px", // 设置高度为 20px
|
||||||
|
marginRight: "10px", // 设置右边距为 10px
|
||||||
|
},
|
||||||
|
showCommentModal: false, // 控制模态框的显示
|
||||||
|
commentContent: "", // 评论内容
|
||||||
|
currentCommentIndex: -1,
|
||||||
|
currentCommentItem: null,
|
||||||
|
isred: false,
|
||||||
|
isrednum: 0,
|
||||||
|
navTitle: [
|
||||||
|
{ id: "tabs" + 1, name: "房地产", pageid: 9 },
|
||||||
|
{ id: "tabs" + 2, name: "医疗", pageid: 10 },
|
||||||
|
{ id: "tabs" + 3, name: "教育", pageid: 11 },
|
||||||
|
{ id: "tabs" + 4, name: "商贸", pageid: 12 },
|
||||||
|
{ id: "tabs" + 5, name: "商超", pageid: 13 },
|
||||||
|
{ id: "tabs" + 6, name: "特色", pageid: 14 },
|
||||||
|
],
|
||||||
|
showDropdown: false,
|
||||||
|
currentTitle: "",
|
||||||
|
istae: true,
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.name) {
|
||||||
|
this.passedName = options.name;
|
||||||
|
this.currentTitle = options.name; // 可以根据需求设置当前标题
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
goBack() {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
toggleDropdown() {
|
||||||
|
this.showDropdown = !this.showDropdown;
|
||||||
|
},
|
||||||
|
selectItem(item) {
|
||||||
|
this.currentTitle = item.name;
|
||||||
|
this.showDropdown = false;
|
||||||
|
},
|
||||||
|
torout(item) {
|
||||||
|
const itemJson = encodeURIComponent(JSON.stringify(item));
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/tabbar/vlog/vlindexstr?item=${itemJson}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.native-header-nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 100rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-bottom: 1rpx solid #eeeeee;
|
||||||
|
margin-top: 60rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-left,
|
||||||
|
.nav-right {
|
||||||
|
width: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
// font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.dropdown-icon {
|
||||||
|
margin-left: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 160rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1rpx solid #eee;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 10;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 1rpx solid #eee;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
.company-profile {
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
// margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
background: #ffcc00;
|
||||||
|
color: #333;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow-btn {
|
||||||
|
color: #1890ff;
|
||||||
|
border: 1px solid #1890ff;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.stafollow-btn {
|
||||||
|
color: #ffffff;
|
||||||
|
border: 1px solid red;
|
||||||
|
background: red;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-section {
|
||||||
|
// border-top: 1px solid #eee;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-content {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
// 新增样式控制两行显示
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2; /* 限制显示两行 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
.comment-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.img-list {
|
||||||
|
display: flex;
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
gap: 10px; /* 图片之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-img {
|
||||||
|
width: 250rpx; /* 图片宽度，根据需求调整 */
|
||||||
|
height: 250rpx; /* 图片高度，根据需求调整 */
|
||||||
|
border-radius: 8rpx; /* 图片圆角 */
|
||||||
|
object-fit: cover; /* 图片填充方式 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
442
pages/tabbar/vlog/vlindexstr.vue
Normal file
442
pages/tabbar/vlog/vlindexstr.vue
Normal file
@ -0,0 +1,442 @@
|
|||||||
|
<template>
|
||||||
|
<view class="article-container">
|
||||||
|
<!-- 头部信息 -->
|
||||||
|
<view class="header">
|
||||||
|
<view class="user-info">
|
||||||
|
<text class="username">{{ obj.tp }}</text>
|
||||||
|
<text class="post-time">{{ obj.timer }}</text>
|
||||||
|
</view>
|
||||||
|
<!-- <view :class="ista ? 'follow-btnfn' : 'follow-btn'" @click="ista = !ista"
|
||||||
|
>关注</view
|
||||||
|
> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 正文内容 -->
|
||||||
|
<view class="content">
|
||||||
|
<text class="intro-text"> </text>
|
||||||
|
|
||||||
|
<!-- 文章分段 -->
|
||||||
|
<view class="section">
|
||||||
|
<!-- <view class="section-number">01</view> -->
|
||||||
|
<view class="section-content">
|
||||||
|
<text class="section-title">{{ obj.title }}</text>
|
||||||
|
<text class="section-text">
|
||||||
|
{{ obj.conent }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="card-body">
|
||||||
|
<view class="img-list">
|
||||||
|
<image
|
||||||
|
v-for="(imgUrl, imgIndex) in obj.imglist"
|
||||||
|
:key="imgIndex"
|
||||||
|
:src="imgUrl"
|
||||||
|
mode="aspectFill"
|
||||||
|
class="list-img"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="article-container">
|
||||||
|
<!-- ... existing code ... -->
|
||||||
|
<view class="comment-count">评论{{ cont.length }}</view>
|
||||||
|
<view class="divider"></view>
|
||||||
|
<!-- ... existing code ... -->
|
||||||
|
</view>
|
||||||
|
<view class="comment-container">
|
||||||
|
<view class="comment-card" v-for="(item, index) in cont" :key="index">
|
||||||
|
<!-- 用户信息行 -->
|
||||||
|
<view class="user-row">
|
||||||
|
<view class="user-info">
|
||||||
|
<text class="username">{{ item.name }}</text>
|
||||||
|
<text class="post-time">{{ item.time }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 评论内容 -->
|
||||||
|
<text class="comment-content">{{ item.content }}</text>
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<view class="action-bar">
|
||||||
|
<!-- <view class="action-btn">
|
||||||
|
<uni-icons type="chat" size="16" color="#666"></uni-icons>
|
||||||
|
<text class="action-text">回复</text>
|
||||||
|
</view> -->
|
||||||
|
<view class="action-btn">
|
||||||
|
<uni-icons type="hand-up" size="16" color="#666"></uni-icons>
|
||||||
|
<text class="action-text">
|
||||||
|
<text class="stat-number">
|
||||||
|
<image
|
||||||
|
v-if="item.iszan"
|
||||||
|
@click="delmingdfun(item, index)"
|
||||||
|
src="@/static/img/index/xin.png"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
src="@/static/img/index/xin-3.png"
|
||||||
|
@click="mingdfun(item, index)"
|
||||||
|
:style="stylie"
|
||||||
|
></image>
|
||||||
|
<text> </text>
|
||||||
|
</text>
|
||||||
|
{{ item.zannum }}</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 分割线 -->
|
||||||
|
<view class="divider" v-if="index < cont.length - 1"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="comment-input-area">
|
||||||
|
<textarea
|
||||||
|
v-model="newComment"
|
||||||
|
placeholder="请输入评论内容"
|
||||||
|
class="comment-input"
|
||||||
|
auto-height
|
||||||
|
></textarea>
|
||||||
|
<button @click="submitNewComment" class="submit-btn">提交评论</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import imgage from "@/static/logn.png"; // 导入图片资源
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
newComment: "", // 用于存储新评论的内容
|
||||||
|
stylie: {
|
||||||
|
width: "40px", // 设置宽度为 20px
|
||||||
|
height: "40px", // 设置高度为 20px
|
||||||
|
marginRight: "10px", // 设置右边距为 10px
|
||||||
|
},
|
||||||
|
ista: false,
|
||||||
|
imgage: imgage,
|
||||||
|
obj: {},
|
||||||
|
cont: [
|
||||||
|
{
|
||||||
|
img: imgage, //图片
|
||||||
|
name: "aminf", //名字
|
||||||
|
content: "确实", //内容
|
||||||
|
time: "2025-06-2 13:00", //时间
|
||||||
|
zannum: 0, //点赞数
|
||||||
|
iszan: false, // 点赞状态，默认为未赞
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
if (options.item) {
|
||||||
|
try {
|
||||||
|
this.obj = {};
|
||||||
|
const item = JSON.parse(decodeURIComponent(options.item));
|
||||||
|
this.obj = item;
|
||||||
|
item.pingcontent.forEach((any) => {
|
||||||
|
this.cont.push(any);
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("解析参数出错:", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
submitNewComment() {
|
||||||
|
if (this.newComment.trim()) {
|
||||||
|
const userInfo = this.$options.filters.isLogin();
|
||||||
|
const currentDate = new Date();
|
||||||
|
const time = `${currentDate.getFullYear()}-${String(
|
||||||
|
currentDate.getMonth() + 1
|
||||||
|
).padStart(2, "0")}-${String(currentDate.getDate()).padStart(
|
||||||
|
2,
|
||||||
|
"0"
|
||||||
|
)} ${String(currentDate.getHours()).padStart(2, "0")}:${String(
|
||||||
|
currentDate.getMinutes()
|
||||||
|
).padStart(2, "0")}`;
|
||||||
|
// 添加新评论到列表（假设用户名为"匿名用户"，实际可替换为登录用户名）
|
||||||
|
this.cont.push({
|
||||||
|
img: userInfo.face, //图片
|
||||||
|
name: userInfo.nickName, //名字
|
||||||
|
content: this.newComment, //内容
|
||||||
|
time: time, //时间
|
||||||
|
zannum: 0, //点赞数
|
||||||
|
iszan: false, // 点赞状态，默认为未赞
|
||||||
|
});
|
||||||
|
|
||||||
|
// 清空输入框
|
||||||
|
this.newComment = "";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mingdfun(item, index) {
|
||||||
|
if (!this.cont[index].iszan) {
|
||||||
|
this.cont[index].zannum++;
|
||||||
|
this.cont[index].iszan = true; // 点赞状态改为已赞
|
||||||
|
}
|
||||||
|
},
|
||||||
|
delmingdfun(item, index) {
|
||||||
|
if (this.cont[index].iszan) {
|
||||||
|
this.cont[index].zannum--;
|
||||||
|
this.cont[index].iszan = false; // 点赞状态改为已赞
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.article-container {
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
margin: 20rpx;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
.avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.username {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-time {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow-btn {
|
||||||
|
color: #1890ff;
|
||||||
|
border: 1rpx solid #1890ff;
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
.follow-btnfn {
|
||||||
|
color: #ffffff;
|
||||||
|
border: 1rpx solid red;
|
||||||
|
background: red;
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
.intro-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
// display: flex;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
|
||||||
|
.section-number {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1890ff;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-content {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
border-top: 1rpx solid #eee;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.img-list {
|
||||||
|
display: flex;
|
||||||
|
// flex-wrap: wrap;
|
||||||
|
gap: 10px; /* 图片之间的间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-img {
|
||||||
|
width: 200rpx; /* 图片宽度，根据需求调整 */
|
||||||
|
height: 200rpx; /* 图片高度，根据需求调整 */
|
||||||
|
border-radius: 8rpx; /* 图片圆角 */
|
||||||
|
object-fit: cover; /* 图片填充方式 */
|
||||||
|
}
|
||||||
|
.comment-container {
|
||||||
|
// padding: 20rpx;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
|
||||||
|
.comment-card {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.user-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.username {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-time {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-content {
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-section {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 16rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.reply-item {
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
|
||||||
|
.reply-user {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1890ff;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-content {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 30rpx;
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.action-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-left: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height: 1rpx;
|
||||||
|
background-color: #eee;
|
||||||
|
margin: 24rpx -24rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-more {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.divider {
|
||||||
|
height: 1rpx;
|
||||||
|
background-color: #eee;
|
||||||
|
margin: 24rpx -24rpx 0;
|
||||||
|
}
|
||||||
|
.comment-count {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 15rpx 0;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
.comment-input-area {
|
||||||
|
width: 95%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// padding-bottom: 220rpx;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 12rpx 12rpx 0 0; /* 顶部圆角，底部贴边 */
|
||||||
|
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05); /* 顶部阴影 */
|
||||||
|
|
||||||
|
/* 新增固定定位样式 */
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0; /* 底部对齐 */
|
||||||
|
left: 0; /* 左侧对齐 */
|
||||||
|
right: 0; /* 右侧对齐 */
|
||||||
|
margin: 0 20rpx; /* 左右保留边距 */
|
||||||
|
box-sizing: border-box; /* 内边距不影响宽度 */
|
||||||
|
}
|
||||||
|
.submit-btn {
|
||||||
|
width: 160rpx; /* 按钮固定宽度 */
|
||||||
|
padding: 12rpx 0;
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.comment-container {
|
||||||
|
padding-bottom: 130rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
static/img/index/fen-2.png
Normal file
BIN
static/img/index/fen-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 996 B |
BIN
static/img/index/fen.png
Normal file
BIN
static/img/index/fen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 950 B |
BIN
static/img/index/l1.png
Normal file
BIN
static/img/index/l1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
BIN
static/img/index/l10.png
Normal file
BIN
static/img/index/l10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 KiB |
BIN
static/img/index/l11.png
Normal file
BIN
static/img/index/l11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 420 KiB |
BIN
static/img/index/l12.png
Normal file
BIN
static/img/index/l12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 980 KiB |
BIN
static/img/index/l13.png
Normal file
BIN
static/img/index/l13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 320 KiB |
BIN
static/img/index/l14.png
Normal file
BIN
static/img/index/l14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
static/img/index/l15.png
Normal file
BIN
static/img/index/l15.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
BIN
static/img/index/l2.png
Normal file
BIN
static/img/index/l2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
BIN
static/img/index/l3.png
Normal file
BIN
static/img/index/l3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
BIN
static/img/index/l4.png
Normal file
BIN
static/img/index/l4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
static/img/index/l5.png
Normal file
BIN
static/img/index/l5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
static/img/index/l6.png
Normal file
BIN
static/img/index/l6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
BIN
static/img/index/l7.png
Normal file
BIN
static/img/index/l7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
BIN
static/img/index/l8.png
Normal file
BIN
static/img/index/l8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
BIN
static/img/index/l9.png
Normal file
BIN
static/img/index/l9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
BIN
static/img/index/ping.png
Normal file
BIN
static/img/index/ping.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 690 B |
BIN
static/img/index/xing-2.png
Normal file
BIN
static/img/index/xing-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
static/img/index/xing.png
Normal file
BIN
static/img/index/xing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 777 B |
Loading…
x
Reference in New Issue
Block a user