root/uniapp-im-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

评论需要添加功能，提交订单有问题

Browse Source
This commit is contained in:
bobobobo
2025-12-26 02:15:32 +08:00
parent 1aab94bbc3
commit bb02cb22c0
32 changed files with 2844 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
pages/mall/comment.vue Normal file
View File

@@ -0,0 +1,186 @@
<script setup>
import { ref, reactive } from 'vue'
const topNav = ref([
{ name: '全部', id: '1' },
{ name: '好评(54)', id: '2' },
{ name: '差评(43)', id: '3' },
{ name: '有图(23)', id: '4' }
])
const formData = reactive({
type: '1'
})
</script>
<template>
<view class="comment-box">
<view class="top-options">
<view
v-for="(item, index) in topNav"
:key="index"
:class="{ active: item.id === formData.type }"
class="text"
@click="onTop(item.id)"
>
{{ item.name }}
</view>
</view>
<!-- 卡片位置 -->
<view class="card-box">
<image
src="/static/images/public/random1.png"
mode="scaleToFill"
class="avatar"
></image>
<!-- 右边 -->
<view class="right-box">
<text class="name">名字</text>
<view class="rate-box">
<view class="date">
<text>2022-2-2</text>
<text>重庆市</text>
</view>
<view class="star">
<view class="like">
<uni-icons
type="hand-up"
size="16"
color="#74747480"
></uni-icons>
22
</view>
<uni-icons
type="chat"
size="16"
color="#74747480"
></uni-icons>
</view>
</view>
<text class="content">
视频讲的真好，全面升级，讲的真的全面，老师 徒弟吗？
</text>
<view class="img-box">
<image
v-for="item in 5"
src="/static/images/public/random1.png"
mode="scaleToFill"
class="bottom-img"
></image>
</view>
<view class="bottom-content">
<view class="name-box">
<text>名字：</text>
<text>内容</text>
</view>
<text class="expand">共三条回复></text>
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
@import './styles/public.scss';
.comment-box {
padding: 32rpx 24rpx;
.card-box {
margin-top: 36rpx;
display: flex;
.avatar {
width: 64rpx;
height: 64rpx;
flex-shrink: 0;
margin-right: 16rpx;
}
.right-box {
width: 100%;
display: flex;
flex-direction: column;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
text-align: left;
font-style: normal;
text-transform: none;
.name {
font-size: 28rpx;
color: #333333;
}
.rate-box {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10rpx 0 20rpx;
.date {
font-weight: 400;
font-size: 24rpx;
color: #74747480;
text {
&:first-child {
margin-right: 20rpx;
}
}
}
.star {
display: flex;
align-items: center;
.like {
display: flex;
align-items: center;
font-weight: 400;
font-size: 22rpx;
color: #74747480;
margin-right: 86rpx;
}
}
}
.content {
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
.img-box {
margin-top: 16rpx;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 16rpx;
.bottom-img {
width: 128rpx;
height: 128rpx;
}
}
.bottom-content {
margin-top: 32rpx;
background: #f9f9f9;
border-radius: 8rpx;
padding: 0 16rpx 16rpx;
font-family: PingFang SC, PingFang SC;
font-style: normal;
text-transform: none;
.name-box {
margin-top: 16rpx;
text {
font-weight: 400;
font-size: 28rpx;
color: #333333;
&:last-child {
font-weight: 500;
font-size: 28rpx;
color: #999999;
}
}
}
.expand {
display: block;
margin-top: 14rpx;
font-weight: 400;
font-size: 24rpx;
color: #00d993;
}
}
}
}
}
</style>