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>
|