Feat;旅居评价列表
This commit is contained in:
LinCyJang
@@ -155,6 +155,26 @@
|
||||
<image :src="img" class="v12-radius-40" style="width: 100%;" mode="aspectFill" @click="previewHero(detail.detailImages, img)" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-mt-3">
|
||||
<view class="section v12-white review-section">
|
||||
<view class="review-header" @click="goEvaluateList">
|
||||
<text class="v12-pl-2 v12-font-bold v12-font-36 v12-align-center title-wrap">店铺评价</text>
|
||||
<text class="iconfont icon-jiantou review-arrow"></text>
|
||||
</view>
|
||||
<view v-if="reviewList.length">
|
||||
<UserEvaluation :reply="reviewList" />
|
||||
<view class="review-load-more" v-if="!reviewLoadEnd" @click="fetchReviewList()">
|
||||
{{ reviewLoading ? '加载中...' : '查看更多评价' }}
|
||||
</view>
|
||||
<view class="review-load-more review-no-more" v-else>
|
||||
没有更多评价了
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="review-empty">
|
||||
暂无评价
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-space"></view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -198,13 +218,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getJiaLouProductDetail, getJiaLouCalendar,getJiaLouBookingRules } from '@/api/qianxian'
|
||||
import { getJiaLouProductDetail, getJiaLouCalendar,getJiaLouBookingRules, getJiaLouProductReply } from '@/api/qianxian'
|
||||
import {getGiftCardSendBackground} from "@/api/gift"
|
||||
import DateRangePicker from '@/components/DateRangePicker/DateRangePicker.vue'
|
||||
import UserEvaluation from '@/components/UserEvaluation'
|
||||
export default {
|
||||
name: 'GroupBuyDetails',
|
||||
components: {
|
||||
DateRangePicker
|
||||
DateRangePicker,
|
||||
UserEvaluation
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -218,7 +240,13 @@ export default {
|
||||
calendar: [],
|
||||
currentWeek: [],
|
||||
rules: "",
|
||||
rangeDate: {}
|
||||
rangeDate: {},
|
||||
reviewActiveType: 0,
|
||||
reviewList: [],
|
||||
reviewPage: 1,
|
||||
reviewLimit: 5,
|
||||
reviewLoading: false,
|
||||
reviewLoadEnd: false
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
@@ -231,6 +259,7 @@ export default {
|
||||
onLoad(query) {
|
||||
this.id = (query && query.id) || ''
|
||||
this.getDetail()
|
||||
this.fetchReviewList(true)
|
||||
// this.getCalendar()
|
||||
getJiaLouBookingRules(this.id).then(res => {
|
||||
if (res.status === 200) {
|
||||
@@ -238,6 +267,11 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
onReachBottom() {
|
||||
if (!this.reviewLoadEnd) {
|
||||
this.fetchReviewList()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
previewHero(urls, current) {
|
||||
console.log(urls);
|
||||
@@ -369,6 +403,16 @@ export default {
|
||||
}
|
||||
uni.navigateTo({ url: '/pkg_product/views/submitOrder?id=' + this.id + '&orderStartDate=' + this.dateRange[0] + '&orderEndDate=' + this.dateRange[1] })
|
||||
},
|
||||
goEvaluateList() {
|
||||
if (!this.id) return
|
||||
this.$yrouter.push({
|
||||
path: '/pages/shop/EvaluateList/index',
|
||||
query: {
|
||||
id: this.id,
|
||||
isTravelGroup: 1
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 查找指定日期的预约状态
|
||||
* @param {string} dateStr YYYY-MM-DD格式的日期字符串
|
||||
@@ -392,47 +436,49 @@ export default {
|
||||
return '不可订'
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理日期点击事件
|
||||
* @param {Object} date 日期对象
|
||||
*/
|
||||
handleDateClick(date) {
|
||||
// 如果是不可订的日期，直接返回
|
||||
if (date.status === '不可订') {
|
||||
uni.showToast({
|
||||
title: '该日期不可预订',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
async fetchReviewList(reset = false) {
|
||||
if (this.reviewLoading) return
|
||||
if (!reset && this.reviewLoadEnd) return
|
||||
if (!this.id) return
|
||||
if (reset) {
|
||||
this.reviewPage = 1
|
||||
this.reviewLoadEnd = false
|
||||
this.reviewList = []
|
||||
}
|
||||
|
||||
// 检查是否已选中
|
||||
const index = this.rangeDate.indexOf(date.date)
|
||||
if (index > -1) {
|
||||
// 如果已选中，则取消选中
|
||||
this.rangeDate.splice(index, 1)
|
||||
} else {
|
||||
// 如果未选中，则添加到选中列表
|
||||
this.rangeDate.push(date.date)
|
||||
// 对日期进行排序
|
||||
this.rangeDate.sort()
|
||||
|
||||
// 检查日期连续性
|
||||
if (this.rangeDate.length > 1) {
|
||||
const isConsecutive = this.checkConsecutiveDates(this.rangeDate)
|
||||
if (!isConsecutive) {
|
||||
uni.showToast({
|
||||
title: '请选择连续的日期',
|
||||
icon: 'none'
|
||||
})
|
||||
// 移除最后添加的日期
|
||||
this.rangeDate.pop()
|
||||
this.reviewLoading = true
|
||||
try {
|
||||
const res = await getJiaLouProductReply({
|
||||
travelGroupProductId: this.id,
|
||||
type: this.reviewActiveType,
|
||||
page: this.reviewPage,
|
||||
limit: this.reviewLimit
|
||||
})
|
||||
if (res && res.status === 200 && res.data) {
|
||||
const pageData = res.data
|
||||
const rawList = Array.isArray(pageData.records) ? pageData.records : []
|
||||
const list = rawList.map(item => {
|
||||
const productScore = Number(item.productScore) || 0
|
||||
const serviceScore = Number(item.serviceScore) || 0
|
||||
let star = productScore || serviceScore || 5
|
||||
const skuText = '默认'
|
||||
const picturesArr = Array.isArray(item.pics) ? item.pics : []
|
||||
return {
|
||||
...item,
|
||||
star,
|
||||
sku: skuText,
|
||||
picturesArr
|
||||
}
|
||||
})
|
||||
this.reviewList = this.reviewList.concat(list)
|
||||
this.reviewLoadEnd = list.length === 0 || this.reviewPage >= (pageData.pages || 0)
|
||||
if (!this.reviewLoadEnd) {
|
||||
this.reviewPage += 1
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
this.reviewLoading = false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 检查日期是否被选中
|
||||
* @param {string} date 日期字符串
|
||||
@@ -562,6 +608,56 @@ export default {
|
||||
.gift-wrap{
|
||||
position: relative;
|
||||
}
|
||||
.review-section{
|
||||
padding-top: 20rpx;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
.review-header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.review-arrow{
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
.review-title{
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
.review-tabs{
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.review-tab-item{
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 40rpx;
|
||||
background: #f5f5f5;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.review-tab-item.active{
|
||||
background: #C52733;
|
||||
color: #fff;
|
||||
}
|
||||
.review-load-more{
|
||||
margin-top: 24rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
.review-no-more{
|
||||
color: #ccc;
|
||||
}
|
||||
.review-empty{
|
||||
margin-top: 32rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
.intro-text{
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
|
||||
Reference in New Issue
Block a user