Delivery-merchant/pages/Evaluate.vue

<template>
	<view>
		<!-- <titlenav></titlenav> -->
		<view class="evaluate">
			<view class="title">评价管理</view>
			<view class="tab">
				<view class="tabs" :class="{ active: item === active }" v-for="(item, index) in tabs" :key="index" @click="tab(item)">
					{{ item }}
					<view style="margin-top:12px"><view class="slip" :class="{ active: item === active }"></view></view>
				</view>
			</view>
			<view class="evaluateCon" v-for="(item, index) in lists" :key="index">
				<!-- <image v-if="userInfo" class="imgBox" :src="userInfo.avatar" ></image> -->
				<image class="evaluateImg" src="https://bpic.588ku.com/illus_water_img/21/07/05/ecab6de5a7b2972500459ba95cf97deb.jpg"></image>
				<view class="conr">
					<view class="name">
						<!-- <view class="txt1" v-if="userInfo">{{ userInfo.nickname }}</view> -->
						<view class="text1">奥斯特洛夫斯基</view>
						<view class="text2">{{item.createdAt}}</view>
					</view>
					<view class="give">
						<image class="imgBox2" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-06-11-21-07FIiyRFOr.png"></image>
						<view class="text1">赞了该商品</view>
					</view>
					<view class="remark">{{item.remark}}</view>
					<view class="image">
						<view><image class="img" @click="preview(item.image, getImgs(lists))" :src="item.image" alt=""></image></view>
					</view>
					<view class="Yreply" v-if="item.reply">
						<text><span>已回复：</span>{{item.reply}}</text>
						<view class="dele" @click="dele">删除</view>
					</view>
					<view class="reply" @click="reply" v-else>
						<image class="img" src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-09-26-17-12-07ypKLdnaL.png"></image>
						<text class="text1">回复</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import Titlenav from '../components/Titlenav.vue';
export default {
	components: {
		Titlenav
	},
	data() {
		return {
			active: '全部',
			tabs: ['全部', '已回复', '未回复'],
			lists: [
				{
					image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-54-36URxMKUXs.jpg',
					reply:'感谢您的认可，祝您生活愉快，欢迎下次点餐，欢迎下次点餐…',
					remark:'好吃',
					createdAt: '2021-05-20',
				},
				{
					image: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-08-13-15-56-45UCHrCoTS.gif',
					reply:'',
					remark:'不好吃',
					createdAt: '2021-05-21',
				}
			]
		};
	},
	computed: {
		...mapState(['systemInfo', 'userInfo'])
	},
	methods: {
		tab(item) {
			this.active = item;
		},
		getImgs(list) {
			return list.map(item => {
				return item.image;
			});
		},
		dele(){},
		reply(){}
	}
};
</script>

<style lang="scss" scoped>
.evaluate {
	margin: 10px 20px 0 20px;
	.title {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
		line-height: 33px;
		margin-bottom: 20px;
	}
	.tab {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 0 7px;
		background: #fff;
		height: 44px;
		.tabs {
			font-size: 16px;
			font-weight: 400;
			color: #c8c9cc;
			line-height: 22px;
			z-index: 88;
			margin: 9px 34px 0 0;
			&.active {
				font-size: 18px;
				color: #214bbe;
				font-weight: bold;
			}
			.slip {
				width: 16px;
				margin: 0 auto;
				&.active {
					border-bottom: 2px solid #214bbe;
					border-radius: 2px;
				}
			}
		}
	}
	.evaluateCon {
		display: flex;
		margin-top: 20px;
		border-bottom: 1px solid #f5f7fa;
		.evaluateImg {
			width: 41px;
			height: 36px;
			border-radius: 50%;
			margin-right: 8px;
			display: block;
		}
		.conr {
			width: 100%;
			.name {
				display: flex;
				align-items: center;
				font-weight: 400;
				justify-content: space-between;
				.text1 {
					font-size: 15px;
					color: #000000;
					line-height: 24px;
				}
				.text2 {
					font-size: 13px;
					font-weight: 400;
					color: #939599;
					line-height: 22px;
				}
			}
			.give {
				display: flex;
				align-items: center;
				margin: 4px 0;
				.imgBox2 {
					width: 16px;
					height: 16px;
					border-radius: 0;
				}
				.text1 {
					font-size: 13px;
					font-weight: 400;
					color: #939599;
					line-height: 24px;
					margin-left: 4px;
				}
			}
			.remark {
				font-size: 13px;
				font-weight: 400;
				color: #000000;
				line-height: 22px;
			}
			.image {
				display: flex;
				align-items: center;
				.img {
					width: 80px;
					height: 80px;
					border-radius: 8px;
					margin: 5px 12px 0 0;
				}
			}
		}
		.reply {
			display: flex;
			align-items: center;
			place-content: flex-end;
			margin-bottom: 9px;
			.img {
				width: 24px;
				height: 24px;
			}
			.text1 {
				font-size: 14px;
				font-weight: bold;
				color: #214bbe;
				line-height: 24px;
				margin-left: 6px;
			}
		}
		.Yreply{
			width: 100%;
			padding: 12px;
			font-size: 13px;
			font-weight: 400;
			color: #000000;
			background: #F5F7FA;
			border-radius: 0px 8px 8px 8px;
			line-height: 22px;
			margin: 16px 0 10px;
			span{
				color: #939599;
			}
			.dele{
				color: #939599;
				text-align: right;
			}
		}
	}
}
</style>