132 lines
3.0 KiB
Vue
132 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<view class="comment">
|
||
|
|
<Tips v-if="messageShow" />
|
||
|
|
<view class="comment-input">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
confrim-type="done"
|
||
|
|
placeholder="输入评论内容……"
|
||
|
|
class="input-field"
|
||
|
|
v-model="comment"
|
||
|
|
@confirm="handleSubmit"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<!-- <view class="input-field">输入评论内容……</view> -->
|
||
|
|
</view>
|
||
|
|
<view class="comment-count">
|
||
|
|
<view class="count" @click="handleClickLike">
|
||
|
|
<image :src="props.data.isLike ? IconLikeActive : IconLike" class="icon" />
|
||
|
|
<text class="num">{{ props.data.likeNums }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="count" @click="handleClickStar">
|
||
|
|
<image :src="props.data.isFav ? IconStarActive : IconStar" class="icon" />
|
||
|
|
<text class="num">{{ props.data.favNums }}</text>
|
||
|
|
</view>
|
||
|
|
<!-- <view class="count">
|
||
|
|
<image src="@/static/icon_message.png" class="icon" />
|
||
|
|
<text class="num">{{
|
||
|
|
props.data.comment > 1000 ? "999+" : props.data.comment
|
||
|
|
}}</text>
|
||
|
|
</view> -->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, watch } from "vue";
|
||
|
|
// import { likeNews } from "@/api";
|
||
|
|
import IconLike from "@/static/icon_like.png";
|
||
|
|
import IconStar from "@/static/icon_star.png";
|
||
|
|
import IconLikeActive from "@/static/icon_like_active.png";
|
||
|
|
import IconStarActive from "@/static/icon_star_active.png";
|
||
|
|
const emit = defineEmits(["handleClickLike", "handleClickStar"]);
|
||
|
|
const messageShow = ref(false);
|
||
|
|
const props = defineProps({
|
||
|
|
data: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const isLike = ref(false);
|
||
|
|
const isStar = ref(false);
|
||
|
|
const comment = ref("");
|
||
|
|
|
||
|
|
// 用户点赞
|
||
|
|
const handleClickLike = () => {
|
||
|
|
emit("handleClickLike");
|
||
|
|
};
|
||
|
|
// 用户收藏
|
||
|
|
const handleClickStar = () => {
|
||
|
|
// isStar.value = !isStar.value;
|
||
|
|
emit("handleClickStar");
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSubmit = () => {
|
||
|
|
comment.value = "";
|
||
|
|
uni.showToast({
|
||
|
|
title: "提交成功",
|
||
|
|
icon: "none",
|
||
|
|
duration: 1500,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.comment {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 112rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
box-shadow: 0 0 10rpx rgba(51, 51, 51, 0.3);
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 20rpx 24rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
.comment-input {
|
||
|
|
width: 100%;
|
||
|
|
.input-field {
|
||
|
|
height: 72rpx;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
border-radius: 52rpx;
|
||
|
|
// font-size: 24rpx;
|
||
|
|
font-size: var(--h4-font-size);
|
||
|
|
color: #333;
|
||
|
|
padding: 0 24rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.input-placeholder {
|
||
|
|
color: rgba(51, 51, 51, 0.6);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.comment-count {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: center;
|
||
|
|
.count {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-left: 24rpx;
|
||
|
|
|
||
|
|
.num {
|
||
|
|
margin-left: 12rpx;
|
||
|
|
// font-size: 24rpx;
|
||
|
|
font-size: var(--h4-font-size);
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
width: 48rpx;
|
||
|
|
height: 48rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|