130 lines
2.9 KiB
Vue
130 lines
2.9 KiB
Vue
<template>
|
|
<view class="comment">
|
|
|
|
<view class="comment-count">
|
|
<view class="count" @click="handleClickLike">
|
|
<image
|
|
:src="props.data.isLike ? 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/zan_like_fill%402x.png' : 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/zan_like_normal%402x.png'"
|
|
class="icon" />
|
|
<text class="num">点赞</text>
|
|
</view>
|
|
<!-- <view class="count" @click="handleClickStar">
|
|
<image
|
|
:src="props.data.isFav ? 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/star_icon_fill%402x.png' : 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/star_icon_normal%402x.png'"
|
|
class="icon" />
|
|
<text class="num">收藏</text>
|
|
</view>
|
|
<button class="count" style="background-color: transparent;" open-type="share">
|
|
<image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/share_icon%402x.png" class="icon" />
|
|
<text class="num">分享</text>
|
|
</button> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
|
|
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: 160rpx;
|
|
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;
|
|
width: 100vw;
|
|
|
|
|
|
.count {
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: 24rpx;
|
|
width: 100%;
|
|
|
|
.num {
|
|
margin-left: 12rpx;
|
|
// font-size: 24rpx;
|
|
font-size: var(--h4-font-size);
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
button::after {
|
|
border: 0;
|
|
}
|
|
</style>
|