530 lines
13 KiB
Vue
530 lines
13 KiB
Vue
<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>
|