349 lines
7.7 KiB
Vue
349 lines
7.7 KiB
Vue
<template>
|
|
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
|
<view class="content">
|
|
<view class="top-wrapper">
|
|
<view style="padding: 0 16px;background: #fff;">
|
|
<Tabs ref="tabs" :tabList="tabList" @changeTab="changeTab" />
|
|
</view>
|
|
</view>
|
|
<!-- 待评价 -->
|
|
<scroll-view style="width: 100%;height: 90vh;background: #fff;" @scrolltolower="onScrollTolower" scroll-y="true">
|
|
<view v-for="(item,index) in evaluaList" :key="index" style="width: 100%;height: auto;border-bottom: 1px solid #ccc;">
|
|
<view style="width: 94%;margin: 10rpx auto;display: flex;">
|
|
<view style="width: 100rpx;height: 100rpx;margin: 10rpx;">
|
|
<image :src="item.custPhotoUrl? item.custPhotoUrl:'../../static/images/user.png'" mode="" style="width: 100rpx;height: 100rpx;"></image>
|
|
</view>
|
|
<view style="width: 80%;height: 100rpx;">
|
|
<view style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-bottom: 20rpx;padding-top: 10rpx;">
|
|
<text>{{item.evaluaNickName}}</text>
|
|
<text>{{item.createTime}}</text>
|
|
</view>
|
|
<view style="display: flex;margin-bottom: 10rpx;">
|
|
<u-icon v-for="n in 5" :key="n" :name="n <= item.starLevel ? 'star-fill' : 'star-fill'"
|
|
:color="n <= item.starLevel ? '#ff9933' : '#ccc'" size="20"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;padding: 10rpx;padding-left: 20rpx;display: flex;align-items: center;" v-if="item.pictureList.length>0">
|
|
<view v-for="(imgItem,imgIndex) in item.pictureList" :key="imgIndex" style="margin-bottom: 10rpx;">
|
|
<image :src="imgItem" mode="" style="width: 100rpx;height: 100rpx;"></image>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;padding: 10rpx;padding-left: 20rpx;">
|
|
{{item.description||"该用户没做评价"}}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import Tabs from '@/pages/components/Tabs.vue'
|
|
import { getMenuEvaluaorderAPI } from '../../api/week-menu/index'
|
|
import { getDate } from '../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/util'
|
|
export default {
|
|
components: { Tabs },
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
fontValue:uni.getStorageSync('fontSize') || 8,
|
|
menuData:{},
|
|
tabIndex: 0,
|
|
tabList: ['全部'],
|
|
// tabList: ['全部','有图','最新'],
|
|
evaluaList:[],
|
|
//待评价
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
tableList: [],
|
|
status: 'loadmore',
|
|
sourceTypeList:[],
|
|
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.menuData = JSON.parse(options.params)
|
|
this.getMenuEvaluaorderList()
|
|
},
|
|
methods: {
|
|
//1-全部,2-有图,3-最新
|
|
changeTab(index) {
|
|
console.log('?? ~ changeTab ~ index:', index)
|
|
this.tabIndex = index+1;
|
|
this.getMenuEvaluaorderList()
|
|
},
|
|
async getMenuEvaluaorderList() {
|
|
let param = {
|
|
"pageNum": this.pageNum,
|
|
"pageSize": this.pageSize,
|
|
"mealId": this.menuData.dishesDetailList[0].dishesId,
|
|
}
|
|
const res = await getMenuEvaluaorderAPI(param)
|
|
console.log(res)
|
|
if(this.pageNum==1){
|
|
this.evaluaList = res.rows
|
|
}else{
|
|
this.evaluaList.push(...res.rows)
|
|
}
|
|
this.total = res.total
|
|
this.$forceUpdate()
|
|
},
|
|
// 翻页
|
|
onScrollTolower(){
|
|
console.log('?? ~ onReachBottom ~ ')
|
|
if(this.total>this.evaluaList.length){
|
|
this.pageNum++
|
|
this.getMenuEvaluaorderList()
|
|
}
|
|
},
|
|
|
|
//翻页
|
|
onReachBottom() {
|
|
console.log('?? ~ onReachBottom ~ ')
|
|
},
|
|
|
|
|
|
// 处理订单状态展示
|
|
handleOrderState(state) {
|
|
switch (state) {
|
|
case 1:
|
|
return '已下单'
|
|
case 2:
|
|
return '已完成'
|
|
case 3:
|
|
return '已退单'
|
|
|
|
}
|
|
},
|
|
formatDate(date) {
|
|
const year = date.getFullYear()
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
return `${year}-${month}-${day}`
|
|
},
|
|
// 跳转订单详情
|
|
goDetail(item) {
|
|
// console.log('跳转订单详情', item)
|
|
// uni.navigateTo({
|
|
// url: `/pages/work/details?params=${JSON.stringify(item)}`
|
|
// })
|
|
},
|
|
//评价按钮
|
|
goEvaluate(item) {
|
|
// console.log('跳转订单详情', item)
|
|
// uni.navigateTo({
|
|
// url: `/pages/work/evaluate?params=${JSON.stringify(item)}`
|
|
// })
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
// background: #f9fbff;
|
|
// height: 100%;
|
|
height: 88vh;
|
|
.top-wrapper {
|
|
width: 100vw;
|
|
height: 60rpx;
|
|
background: #f9fbff;
|
|
z-index: 999;
|
|
}
|
|
|
|
.top-cont {
|
|
padding: 0 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
.top-title {
|
|
font-weight: 500;
|
|
font-size: 40rpx;
|
|
color: #0f274b;
|
|
}
|
|
.top-ipt {
|
|
height: 31px;
|
|
background: #fff;
|
|
margin-left: 26px;
|
|
margin-right: 12px;
|
|
}
|
|
.top-filter {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.order-list {
|
|
padding: 8px;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
// margin-bottom: 12px;
|
|
margin-top: 10px;
|
|
|
|
.order-source {
|
|
margin-bottom: 12px;
|
|
font-weight: 500;
|
|
color: #0f274b;
|
|
}
|
|
|
|
.intervalName {
|
|
margin-left: 10px;
|
|
color: #ff6816;
|
|
border-radius: 1px 1px 1px 1px;
|
|
border: 1px solid #ff6816;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.img-cont {
|
|
margin: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.img {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
view {
|
|
margin-top: 8px;
|
|
color: #0f274b;
|
|
}
|
|
}
|
|
}
|
|
|
|
.price {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #0f274b;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.btn-cont {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
.evaluateCenter{
|
|
height: 30px;width: 100%;display: flex;justify-content: space-between;align-items: center;
|
|
.evaluateCenterLeft{
|
|
width: 25%;display: flex;justify-content: space-between;align-items: center;margin-left: 20px;
|
|
}
|
|
.evaluateCenterRight{
|
|
width: 60px;height: 24px;line-height:24px;border: 1px solid #ff6816;color: #ff6816;margin-right: 20px;font-size: 24rpx;text-align: center;border-radius: 8px;
|
|
}
|
|
}
|
|
.filter-popup {
|
|
padding: 30rpx;
|
|
min-height: 60vh;
|
|
max-height: 90vh;
|
|
.section {
|
|
margin-bottom: 40rpx;
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
.date-quick-select {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.date-option {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f8f8f8;
|
|
border-radius: 100rpx;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
|
|
&.active {
|
|
background-color: #fff2ef;
|
|
color: #ff6633;
|
|
}
|
|
}
|
|
}
|
|
|
|
.date-range {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
|
|
.date-input {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
background-color: #f8f8f8;
|
|
border-radius: 100rpx;
|
|
padding: 0 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
|
|
.date-placeholder {
|
|
color: #999999;
|
|
}
|
|
|
|
.selected-date {
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.date-separator {
|
|
color: #999999;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.order-type-item {
|
|
width: 200rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f8f8f8;
|
|
border-radius: 25px;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
margin: 10rpx auto;
|
|
|
|
&.active {
|
|
background-color: #fff2ef;
|
|
color: #ff6633;
|
|
}
|
|
}
|
|
|
|
.bottom-buttons {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 28px 16rpx;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
}
|
|
</style>
|