eduepos_ui_store/pages/evaluate/index.vue

<template>
	<view>
		<u-sticky bgColor="#fff" class="tabs-wrap">
		    <u-tabs
		        class="tabs"
		        :list="tabs"
		        :itemStyle="itemStyle"
		        :is-scroll="false"
		        :current="params.active"
		        @change="handTabhange">
		    </u-tabs>
		</u-sticky>
		<view class="content-wrap" v-if="params.active == 0" style="padding-top: 20rpx;">
			<scroll-view scroll-y class="evaluation-info-wrap" @scrolltolower="scrolltolower">
			    <view class="evaluation-list">
			        <view class="item" v-for="item in evaluationList" :key="item.evaluateId">
			            <view class="user-info">
			                <view class="user">
			                    <image class="avatr" :src="item.headimgurl || ''"/>
			                    <view class="user-wrap">
			                        <view class="top">
			                            <view class="user-name">{{ item.memberName || '会员' }}</view>
			                            <view class="date">{{ item.evaDateStr }}</view>
			                        </view>
									<!-- <view class="evaluation-rate">
									    <text class="label" style="white-space: nowrap;">商品:</text>
									    <view class="goods-name" style="margin-left: 8rpx;">{{ item.goodsName || '' }}</view>
									</view> -->
			                        <view class="evaluation-rate">
			                            <text class="label" style="white-space: nowrap;">评分</text>
			                            <u-rate size="20" readonly active-color="#F57119" v-model="item.goodsScore"></u-rate>
			                        </view>
			                    </view>
			                </view>
			            </view>
			            <view class="evaluation-text">
			                {{ item.content || '' }}
			            </view>
			            <view class="evaluation-image" v-if="item.pictureUrl">
			                <image :src="item.pictureUrl" />
			            </view>
						<view style="margin-top: 10rpx;margin-left: 80rpx;">
							<button type="primary" size="mini" @click="reply(item)">回复</button>
						</view>
			        </view>
			    </view>
			</scroll-view>
		</view>
		<view class="content-wrap" v-if="params.active == 1" style="padding-top: 20rpx;">
			<scroll-view scroll-y class="evaluation-info-wrap" @scrolltolower="scrolltolower">
			    <view class="evaluation-list">
			        <view class="item" v-for="item in evaluationList" :key="item.evaluateId">
			            <view class="user-info">
			                <view class="user">
			                    <image class="avatr" :src="item.headimgurl || ''"/>
			                    <view class="user-wrap">
			                        <view class="top">
			                            <view class="user-name">{{ item.memberName || '会员' }}</view>
			                            <view class="date">{{ item.evaDateStr }}</view>
			                        </view>
									<!-- <view class="evaluation-rate">
									    <text class="label" style="white-space: nowrap;">商品:</text>
									    <view class="goods-name" style="margin-left: 8rpx;">{{ item.goodsName || '' }}</view>
									</view> -->
			                        <view class="evaluation-rate">
			                            <text class="label" style="white-space: nowrap;">评分</text>
			                            <u-rate size="20" readonly active-color="#F57119" v-model="item.goodsScore"></u-rate>
			                        </view>
			                    </view>
			                </view>
			            </view>
			           
			            <view class="evaluation-text">
			                {{ item.content }}
			            </view>
			            <view class="evaluation-image" v-if="item.pictureUrl">
			                <image :src="item.pictureUrl" />
			            </view>
			            <view class="sotre-recover" v-if="item.reply && item.reply.length">
			                <view class="name">商家回复:</view>
			                <view>
			                    {{ item.reply }}
			                </view>
			            </view>
			        </view>
			    </view>
			</scroll-view>
		</view>
		<uni-popup ref="popup" :maskClick="true" @change="closePopup">
			<view  style="background-color: #FFF;">
				<view class="reply-title">回复内容</view>
				<textarea :value="content" maxlength="45" class="reply-content" @input="inputChange"></textarea>
				<button @click="sumbit">提交</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import {mapState} from 'vuex';
export default {
	data() {
		return {
			evaUrl: '/storeEvaluationApi/getEvaluateList',
			replyUrl: '/storeEvaluationApi/replyEvaluation',
			params: {
				active: 0
			},
			itemStyle: {
				width: '50vw',
				height: '80rpx'
			},
			tabs: [
				{
					name: '待回复',
					value: 0,
					badge: {
						value: 0,
					}
				},
				{
					name: '已回复',
					value: 10,
					badge: {
						value: 0,
					}
				},
				
			],
			evaluationList:[],
			page: 1,
			content: '',
			currentItem: null,
			loadingType: 0,
		}
	},
	computed: {
		...mapState(['storeInfo'])
	},
	methods: {
		closePopup () {
			this.content = ''
		},
		handTabhange (e) {
			this.params.active = e.index
			this.loadData()
		},
		reply(item) {
			this.currentItem = item;
			this.$refs.popup.open();
		},
		inputChange(e) {
			this.content = e.detail.value
		},
		sumbit() {
			uni.showLoading({
				title: '回复中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			this.requst({
				url: this.replyUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					evaluationId: this.currentItem.evaluateId,
					content: this.content
				},
				success: res => {
					uni.showToast({
						title: '回复成功',
						icon: 'none'
					})
					this.loadData();
					this.$refs.popup.close();
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
		},
		loadData() {
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			this.requst({
				url: this.evaUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					currentPage: this.page,
					storeId: this.storeInfo.storeId,
					status: (this.params.active + 1)
				},
				success: res => {
					if (res.data.rtnBean.rtnCode != undefined) {
						if (res.data.rtnBean.rtnCode == 0) {
							if (res.data.list != null && res.data.list.length > 0) {
								if (res.data.list != null && res.data.list.length > 0 && res.data.list
									.length <= 20) {
									this.evaluationList = res.data.list;
									if (res.data.page.pageCount == 1) {
										this.isShow = false
										this.loadingType = 2;
									} else {
										this.isShow = false
										this.loadingType = 0;
									}
								} else {
									this.isShow = true
									this.loadingType = 2;
								}
							} else {
								this.isShow = true
								this.evaluationList = [];
							}
						} else {
							this.isShow = true
							this.evaluationList = [];
						}
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				}
			})
		},
		scrolltolower() {
			if (this.loadingType != 0) { // loadingType!=0;直接返回
				return false
			}
			// this.loadingType_status = 'loading';
			this.page = this.page + 1;
			this.loadingType = 1;
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			this.requst({
				url: this.evaUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					currentPage: this.page,
					storeId: this.storeInfo.storeId,
					status: (this.params.active + 1)
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						uni.hideLoading();
						if (res.data.list != "" && res.data.list != null && res.data.list.length > 0) {						
							for (var i = 0; i < res.data.list.length; i++) {
								this.evaluationList.push(res.data.list[i]);
							}							
							if (res.data.page.currentPage == res.data.page.pageCount) {
								this.loadingType = 2;
							}else {
								this.isShow = false
								this.loadingType = 0;
							}
						} else {
							this.loadingType = 2;
						}
					} else {
						uni.hideLoading();
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
						}
					}
					
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				},
			});
		},
	},
	onLoad() {
		this.loadData()
	}
}
</script>

<style lang="scss" scoped>
	.content-wrap {
		height: calc(100vh - 80rpx);
	}
	.evaluation-info-wrap {
	    width: 100%;
	    max-height: 100%;
	    height: 100%;
	    overflow-y: auto;
	    background-color: #f5f5f5;
	}
	.evaluation-wrap {
	    width: 100%;
	    height: 246rpx;
	    @include between;
	    margin: 20rpx 0;
	    background-color: #fff;
	    .left, .right {
	        flex: 1;
	        text-align: center;
	        .count {
	            font-size: 56rpx;
	            font-weight: bold;
	            color: $light-color;
	        }
	        .name {
	            font-size: $font-lg;
	        }
	    }
	    .center {
	        flex: 2;
	        display: flex;
	        flex-direction: column;
	        .item {
	            @include flexStart;
	        }
	    }
	    .right {
	    }
	}
	.evaluation-list {
	    padding: 20rpx 0 0;
	    box-sizing: border-box;
	    background-color: #fff;
	    .item {
	        margin-bottom: 20rpx;
	        border-bottom: 2px solid #f5f5f5;
	        padding: 0 40rpx 20rpx;
	        box-sizing: border-box;
	    }
	    .item:last-child {
	        margin-bottom: 0;
	        border-bottom: none;
	    }
	    .user-info {
	        width: 100%;
	        @include between;
	    }
	    .user {
	        width: 100%;
	        @include flexStart;
	    }
	    .avatr {
	        width: 60rpx;
	        min-width: 60rpx;
	        height: 60rpx;
	        border-radius: 60rpx;
	        overflow: hidden;
	        margin-right: 20rpx;
	    }
	    .user-wrap {
	        width: calc(100% - 80rpx);
	        margin-bottom: 20rpx;
	        .top {
	            width: 100%;
	            @include between;
	        }
	        .date {
	            font-size: $font-base;
	        }
	        .evaluation-rate {
	            @include flexStart;
	            font-size: $font-base;
	        }
	    }
	    .evaluation-text, .evaluation-image, .sotre-recover {
	        margin-left: 80rpx;
			font-size: 26rpx;
	    }
	    .evaluation-image {
	        margin-top: 20rpx;
	        image {
	            width: 200rpx;
	            height: 200rpx;
	            margin-right: 20rpx;
	            margin-bottom: 20rpx;
	        }
	    }
	    .sotre-recover {
	        background-color: #f5f5f5;
	        padding: 20rpx;
			margin-top: 20rpx;
	        box-sizing: border-box;
	        font-size: $font-base;
	        color: $icon-color;
	    }
	
	}
	.reply-title {
		padding: 16rpx;
		border-bottom: 2rpx solid #E6E6E6;
	}
	.reply-content {
		border-bottom: 2rpx solid #E6E6E6;
		padding: 20rpx;
	}
	.user-name {
		 white-space: nowrap;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  display: inline-block;
		  max-width: 6em;
	}
</style>