131 lines
3.4 KiB
Vue
131 lines
3.4 KiB
Vue
<template>
|
||
<view class="evaluationList" v-if="evaluateList.count">
|
||
<!-- 头部容器：显式设置flex方向为水平 -->
|
||
<view class="evaluationList-header">
|
||
<view class="evaluationList-header-left">
|
||
<!-- 文字样式必须写在text标签的class上 -->
|
||
<text class="header-left-text">评价({{evaluateList.count}})</text>
|
||
</view>
|
||
<view class="evaluationList-header-right" @click="goList">
|
||
<!-- 文字单独用text标签包裹并添加样式class -->
|
||
<text class="header-right-text">查看全部</text>
|
||
<image src="/static/images/evaluate/right.png" class="header-right-img" />
|
||
</view>
|
||
</view>
|
||
<evaluationDetail
|
||
v-for="(item, index) in evaluateList.list"
|
||
:key="index"
|
||
:evaluateObj="item"
|
||
></evaluationDetail>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from "@/utils/request";
|
||
import evaluationDetail from "./evaluationDetail.nvue"
|
||
export default {
|
||
components: {
|
||
evaluationDetail
|
||
},
|
||
data() {
|
||
return {
|
||
formData: {
|
||
page: 1,
|
||
limit: 2,
|
||
},
|
||
evaluateList: {
|
||
count: 0,
|
||
list: []
|
||
}
|
||
};
|
||
},
|
||
props: {
|
||
evaluated_id: { type: Number },
|
||
evaluated_type: { type: Number },
|
||
order_shop_id: { type: Number },
|
||
order_shop_type: { type: Number },
|
||
order_id: { type: Number },
|
||
search_type: { type: Number },
|
||
listUrl:{
|
||
type:String,
|
||
default:"/user/orderEvaluate/list"
|
||
}
|
||
},
|
||
mounted() {
|
||
if (this.order_shop_id) this.formData.order_shop_id = this.order_shop_id;
|
||
if (this.order_shop_type) this.formData.order_shop_type = this.order_shop_type;
|
||
if (this.evaluated_type) this.formData.evaluated_type = this.evaluated_type;
|
||
if (this.evaluated_id) this.formData.evaluated_id = this.evaluated_id;
|
||
if (this.order_id) this.formData.order_id = this.order_id;
|
||
if (this.search_type) this.formData.search_type = this.search_type;
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
getList() {
|
||
request.post(this.listUrl, this.formData).then(res => {
|
||
this.evaluateList = res.data || { count: 0, list: [] };
|
||
});
|
||
},
|
||
goList() {
|
||
this.$emit("goList");
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
/* 容器样式：仅保留布局相关（margin、padding、flex等） */
|
||
.evaluationList {
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
margin: 0rpx 24rpx 20rpx 24rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
/* 头部容器：显式设置flex方向为水平（解决nvue默认垂直的问题） */
|
||
.evaluationList-header {
|
||
padding: 0 20rpx;
|
||
margin-top: 21rpx;
|
||
margin-bottom: 6rpx;
|
||
display: flex;
|
||
flex-direction: row; /* 强制水平排列 */
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* 左侧容器：仅布局，无文字样式 */
|
||
.evaluationList-header-left {
|
||
/* 文字样式已移到text标签 */
|
||
}
|
||
|
||
/* 左侧文字：所有文字样式直接写在这里 */
|
||
.header-left-text {
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 42rpx;
|
||
}
|
||
|
||
/* 右侧容器：显式flex确保内部元素水平排列 */
|
||
.evaluationList-header-right {
|
||
display: flex;
|
||
flex-direction: row; /* 强制水平排列 */
|
||
align-items: center; /* 垂直居中对齐文字和图片 */
|
||
}
|
||
|
||
/* 右侧文字：所有文字样式直接写在这里 */
|
||
.header-right-text {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 33rpx;
|
||
}
|
||
|
||
/* 右侧图片 */
|
||
.header-right-img {
|
||
width: 10rpx;
|
||
height: 19rpx;
|
||
margin-left: 10rpx;
|
||
mode: widthFix; /* nvue图片必须指定mode */
|
||
}
|
||
</style> |