zh_order_food_xcx/pages-my/my-appraise.vue

<template>
	<view class="flex-common-css">
		<Nav title="我的评价" titleColor="#333" bgckgroundBox='#fff'></Nav>
		<view class="tab-box flex-justify-around bgc-f ">
			<view class="tab-but flex-1 flex-direction align-items-center" @click="tabStitle(index)"
				v-for="(item, index) in tabList" :key="index">
				<view class="fs-32 mb-18" :class="tabNum==index?'fc-41ABF5':'fc-3'">
					{{item}}
				</view>
				<view v-show="tabNum==index" class="tab-hr bgc-41ABF5"></view>
			</view>
		</view>
		<scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			<view class="list-box" v-if="tabNum == 0">
				<view class="item-box bgc-f b-rad-20 mb-20" v-for="(item,index) in itemData" :key="index">
					<view class="fw-600 fs-32 fc-3 mb-16">
						{{item.shop_name}}
					</view>
					<view class="goods-box align-items-center mb-24">
						<image class="goods-img mr-16" :src="item.shop_logo" mode=""></image>
						<view class="">
							<view class="mb-8 fs-24 fc-6">
								{{item.created_date}} 下单
							</view>
							<view class="fc-FF7F00 fs-24">
								你个这次外卖体验打多少分吗？
							</view>
						</view>
					</view>
					<view class="flex-justify-end">
						<view class="fc-41ABF5 fs-28 item-but" @click="goToUrl(item)">
							评价
						</view>
					</view>
				</view>
			</view>
			<view class="list-box" v-else>
				<view class="item-box bgc-f p-24 box-border-box display-flex b-rad-20 mb-20" v-for="(itemTwo,indexTwo) in itemData">
					<image class="item-head-img flex-shrink0 b-rad-12 mr-16" :src="itemTwo.shop_logo" mode="">
					</image>
					<view class="item-r-box flex-1">
						<view class="item-name align-items-center flex-justify-space mb-8">
							<view class="item-name-t fs-32 fc-3 fw-600 text-overflow-ellipsis-one">
								{{itemTwo.shop_name}}
							</view>
							<view class="fs-24 fc-9">
								{{itemTwo.created_date}}
							</view>
						</view>
						<view class="align-items-center mb-12">
							<view class="fs-24 fc-9">
								商家：
							</view>
							<uni-rate class="mr-4" size="12" :value="itemTwo.grade" active-color="#FF7F00" />
						</view>
						<view class="text-overflow-ellipsis-t fs-28 fc-3 mb-20">
							{{itemTwo.content}}
						</view>
						<view class="item-img-box mb-20 align-items-center flex-wrap-wrap">
							<image class="b-rad-12" v-for="imgUrl in itemTwo.images" :src="imgUrl" mode="aspectFill"
								:class="itemTwo.images.length==1?'item-img-one':itemTwo.images.length==2?'item-img-two':'item-img-three'">
							</image>
						</view>
						<view class="merchant-hf-box bgc-F3F4F6 p-20 box-border-box b-rad-16" v-if="itemTwo.shop_reply">
							<view class="align-items-center flex-justify-space mb-10">
								<view class="fs-24 fc-6">
									商家回复
								</view>
								<view class="fs-20 fc-9">
									{{itemTwo.reply_time}}
								</view>
							</view>
							<view class="fs-24 fc-6">
								{{itemTwo.shop_reply}}
							</view>
						</view>
						<view class="but-box align-items-center flex-justify-end">
							<uni-icons class="fc-9 mr-10 fs-28" type="trash"></uni-icons>
							<view class="fs-28 fc-3 mr-10" @click="del(itemTwo.id)">
								删除
							</view>
						</view>
					</view>
				</view>
			</view>
			<EnBlank :customSrc='true' v-if="itemData.length <= 0">
				<template v-slot:blankImg>
					<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
				</template>
			</EnBlank>
		</scroll-view>
	</view>
</template>

<script>
	import {
		commentWait,
		commentMyList,
		commentDel
	} from '@/api/comment.js'
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	import tools from '@/service/tools';
	export default {
		components: {
			EnBlank
		},
		data() {
			return {
				tabNum: 0,
				// tabOneNum: 0,
				// tabTwoNum: 0,
				tabList: ['待评价', '已评价'],
				itemData: [],
				page: 1
			};
		},
		computed: {
			// tabList() {
			// 	return ['待评价(' + this.tabOneNum + ')', '已评价(' + this.tabTwoNum + ')'];
			// }
		},
		onShow() {
			this.getListData()
		},
		onLoad(data) {},
		mounted() {},
		methods: {
			del(id) {
				commentDel({id: id}).then((res) => {
					if(res.code == 1) {
						tools.success(res.msg)
						this.getListData()
					}else {
						tools.error(res.msg)
					}
				})
			},
			tabStitle(index) {
				if (this.tabNum == index) {
					return
				}
				this.tabNum = index
				this.getListData()
			},
			getListData() {
				this.itemData = []
				this.page = 1
				if (this.tabNum == 0) {
					this.commentWait()
				} else {
					this.commentMyList()
				}
			},
			scrolltolower() {
				console.log('触底');
			},
			goToUrl(item) {
				uni.navigateTo({
					url: `/pages-my/appraise?orderId=` + item.order_id + '&shopName=' + item.shop_name + '&shopLogo=' + item.shop_logo
				})
			},
			commentWait() {
				// 获取待评价列表
				commentWait({
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							this.itemData.push(...res.data.items)
						}
					}
				})
			},
			commentMyList() {
				commentMyList({
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							this.itemData.push(...res.data.items)
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tab-box {
		padding: 22rpx 0 4rpx 0;
	}

	.tab-hr {
		width: 40rpx;
		height: 4rpx;
		border-radius: 2rpx;
	}

	.list-box {
		padding: 24rpx;
		box-sizing: border-box;
	}

	.item-box {
		padding: 24rpx;
		box-sizing: border-box;
	}

	.goods-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 8rpx;
	}

	.item-but {
		width: 152rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		border: 2rpx solid #41ABF5;
		border-radius: 200rpx;
	}
	.item-head-img {
		width: 80rpx;
		height: 80rpx;
	}
	
	.item-name-t {
		max-width: 348rpx;
	}
	.item-img-box {
		width: calc(100% + 6rpx);
	}
	.item-img-one {
		width: 360rpx;
		height: 360rpx;
	}
	
	.item-img-two {
		width: 276rpx;
		height: 276rpx;
		margin: 0 6rpx 0 0;
	}
	
	.item-img-three {
		width: 182rpx;
		height: 182rpx;
		margin: 0 6rpx 6rpx 0;
	}
	.but-box{
		padding: 24rpx 0 0 0;
		border-top: 2rpx solid #F9F9F9;
	}
</style>