mplace_source/pages/goods/reviews.vue

<template>
	<view>
		<!--标题栏-->
		<bar-title bgColor='bg-white' title="商品评价">
			<block slot="content">商品评价</block>
			<block slot="right">
				
			</block>
		</bar-title>
		
		<view class="bg-white padding-sm zaiui-goods-info-view margin-bottom" v-if="info.id">
			<view class="cu-avatar lg" :style="[{backgroundImage:'url('+ info.pic[0] +')'}]"/>
			<view class="goods-info-view">
				<view class="text-cut text-black text-lg">{{info.name}}</view>
				<!-- <view class="text-cut text-gray">{{info.sku_name}}</view> -->
			</view>
		</view>
		
		<!--评论-->
		<view class="margin-top bg-white zaiui-comment-view-box" v-if="total">
			<view class="zaiui-border-view"/>
			<block v-for="(item, index) in reviewList">
				<view class="zaiui-view-box" :key="item.id">
					<view class="flex flex-wrap text-sm">
						<view class="basis-1">
							<view class="cu-avatar sm round" :style="`background-image:url(${item.user.avatar || '/static/images/avatar/1.jpg'})`"/>
						</view>
						<view class="basis-9 text-sm">
							<view>{{item.user.name}}</view>
							<view class="margin-top-xs">{{item.content}}</view>
							<view class="text-gray margin-top-sm">{{item.cdate_str}}</view>
						</view>
					</view>
				</view>
				<view class="zaiui-border-view" v-if="index != 1"/>
			</block>
		</view>
		
	</view>
</template>

<script>
	import barTitle from '@/components/zaiui-common/basics/bar-title';
	
	import _goods_data from '@/static/zaiui/data/goods.js';	//虚拟数据
	import _tool from '@/static/zaiui/util/tools.js';	//工具函数
	export default {
		components: {
			barTitle,
		},
		data() {
			return {
				bannerCur: 0, bannerList: [], bottomModal: false, modalTitle: '', modalType: 'promotion', selectType: '',
				goodsId: '',
				info: {},
				reviewList: [],
				total: 0,
				num: 10,
				pg: 1,
				hasNext: true
			}
		},
		onLoad(options) {
			this.goodsId = options.id;
			this.loadInfo()
			this.loadReviewList()
		},
		onReady() {
			_tool.setBarColor(true);
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		computed: {
		},
		methods: {
			loadInfo() {
				this.req({
					url: '?l=resource.view', 
					data: {type: 3, type_id: this.goodsId},
					success: res => {
						if(res.data.status == 1) {
							this.info = res.data.data.info;
						}else {
							uni.showToast({
								icon: 'error',
								title: res.data.msg
							})
						}
					}
				})
			},
			loadReviewList() {
				this.reqByuser({
					url: '?l=resource.getReviewList', 
					data: {
						type: 3,
						type_id: this.goodsId,
						num: this.num,
						pg: this.pg
					},
					success: res => {
						if(res.data.status == 1) {
							this.total = res.data.data.total;
							this.reviewList = this.pg == 1 ? res.data.data.list : this.reviewList.concat(res.data.data.list)
							this.hasNext = res.data.page.status
						}else {
							uni.showToast({
								icon: 'error',
								title: res.data.msg
							})
						}
					}
				})
			},
		},
		onReachBottom() {
			if(this.hasNext) {
				this.pg++;
				this.loadReviewList()
			}
		}
	}
</script>

<style lang="scss">
	/* #ifdef APP-PLUS */
		@import "../../static/colorui/main.css";
		@import "../../static/colorui/icon.css";
		@import "../../static/zaiui/style/app.scss";
	/* #endif */
	@import "../../static/zaiui/style/goods.scss";
	
	
</style>
<style scoped lang="scss">
	.zaiui-goods-info-view {
		position: relative;
		.cu-avatar {
			position: absolute;
		}
		.goods-info-view {
			position: relative;
			padding-left: 112.72upx;
			height: 94.54upx;
			line-height: 1.7;
		}
	}
</style>