pika_shangjia/components/product_footer/index.vue

<template>
	<view class="detail mt20 bgfff">
		<view class="tab dflex">
			<view :class="'li ' + (currentTab == 0 ? 'active' : '')" data-current="0" @tap="tab">图文详情</view>
			<view :class="'li ' + (currentTab == 1 ? 'active' : '')" data-current="1" @tap="tab" v-if=""
				v-if="config.is_hide_product_parameter != 1">产品说明</view>
			<view :class="'li ' + (currentTab == 2 ? 'active' : '')" data-current="2" @tap="tab"
				v-if="isOpenComments == 1">买家评价</view>
		</view>
		<view :class="currentTab == 0 ? 'show' : 'hide'">
			<view class="tabcon details det-text">
				<!-- <rich-text :nodes="detail"></rich-text> -->

				<mp-html :content="detail" :lazy-load="true" @imgtap="choose"></mp-html>
			</view>
			<!-- 		<view class="tabcon details">
			<block v-for="(item, index) in imgs" :key="index">
					<image class="img" :src="item + '?x-oss-process=style/w750-auto'" mode="widthFix" @tap="chooseImg" :data-src="item"></image>
			</block>
		</view> -->
			<block v-if="diyNodes || diyImgs.length > 0">
				<view class="tabcon details">
					<rich-text :nodes="diyNodes" @tap="richImg"></rich-text>
				</view>
				<view class="tabcon details">
					<block v-for="(item, index) in diyImgs" :key="index">
						<image class="img" :src="item + '?x-oss-process=style/w750-auto'" mode="widthFix"
							@tap="chooseImg1" :data-src="item"></image>
					</block>
				</view>
			</block>
		</view>
		<view :class="[currentTab == 1? 'show' : 'hide','tabcon']">
			<view class="canshu" v-if="params.length > 0">
				<view v-for="(item, index) in params" :key="index" class="li dflex">
					<label class="label">{{item.name}}</label>
					<view class="view flex">{{item.value}}</view>
				</view>
			</view>
			<view class="nodata" v-else>
				<image :src="picUrlss+'empty.png'" mode="aspectFit"></image>
				<text>暂无记录~</text>
			</view>
		</view>
		<view :class="[currentTab == 2 ? 'show' : 'hide','tabcon']">
			<view class="fen dflex">
				<view class="zong"><text class="text">{{overallRating}}</text>综合评分</view>
				<view class="xing flex">
					<view class="ping dflex">
						<view class="view">服务态度</view>
						<image v-for="(item, index) in [1,2,3,4,5]" :key="index" class="image"
							:src="score.serviceAttitude >= item ? '/static/pages/images/star_h.png' : '/static/pages/images/star.png'">
						</image>
						<text class="text">{{score.serviceAttitude}}分</text>
					</view>
					<view class="ping dflex">
						<view class="view">商品评分</view>
						<image v-for="(item, index) in [1,2,3,4,5]" :key="index" class="image"
							:src="score.productRating >= item ? '/static/pages/images/star_h.png' : '/static/pages/images/star.png'">
						</image>
						<text class="text">{{score.productRating}}分</text>
					</view>
				</view>
			</view>
			<view class="pltab dflex">
				<view :class="'li ' + (scoreTab == 0 ? 'active' : '')" @tap="scoreTabFun" data-current="0">
					全部({{score.ratingAll}})</view>
				<view :class="'li ' + (scoreTab == 3 ? 'active' : '')" @tap="scoreTabFun" data-current="3">
					好评({{score.ratingGood}})</view>
				<view :class="'li ' + (scoreTab == 2 ? 'active' : '')" @tap="scoreTabFun" data-current="2">
					中评({{score.ratingMedium}})</view>
				<view :class="'li ' + (scoreTab == 1 ? 'active' : '')" @tap="scoreTabFun" data-current="1">
					差评({{score.ratingBad}})</view>
			</view>
			<view class="plcon">
				<block v-if="scoreList.length > 0">
					<view v-for="(item, index) in scoreList" :key="index" class="li dflex">
						<image :src="item.avatar" mode="aspectFit" class="user"></image>
						<view class="flex">
							<view class="name dflex">{{item.nickName.replace(/^(.).*(.)$/,"$1***$2")}}<text class="time">{{item.createDate}}</text>
							</view>
							<view class="pinglun">{{item.evaluateText ? item.evaluateText : '此用户没有填写评价。'}}</view>
							<view class="plimg dflex" v-if="item.buyShow.length > 0">
								<image v-for="(it, index2) in item.buyShow" :key="index2" :src="it" mode="aspectFit"
									@tap="previewImg" :data-src="it" :data-list="item.buyShow"></image>
							</view>
							<!-- <view class="huifu">商家回复：感谢您对我们的支持，我们更加用心的服务好每一位客户！</view> -->
						</view>
					</view>
				</block>
				<view class="nodata" v-else>
					<image :src="picUrlss+'empty_dd.png'"></image>
					<text>商品还没有人评价</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const req = require("../../utils/request");
	import mpHtml from "../mp-html/components/mp-html/mp-html";
	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				picUrlss: req.public.picUrls,
				currentTab: 0,
				params: [],
				scoreList: [],
				isLoad: true,
				scoreTab: 0,
				overallRating: '0' //综合评分
					,
				diyImgs: "",
				diyNodes: "",
				score: "",
				isOpenComments: "",
				config: {}
			};
		},
		props: {
			detail: String,
			proId: String,
			imgs: Array,
			form: {
				type: Object,
				default: () => ({})
			}
		},
		watch: {
			'proId': function(oldValue, newValue) {
				// console.log(oldValue, newValue);
			},
		},
		options: {
			addGlobalClass: true
		},

		mounted() {
			// console.log(this.detail,"7899879")
			let that = this;
			that.isOpenCommentsFun();
			that.loadParams();
			that.joinFootprint();

			if (req.getStorage('productDiy')) {
				//富文本图片放大
				var diyNodes = req.getStorage('productDiy');

				if (diyNodes) {
					if (diyNodes.indexOf("src") >= 0) {
						//正则匹配所有图片路径
						var diyImgs = [];
						diyNodes = diyNodes.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
							diyImgs.push(capture);
							that.setData({
								diyImgs: diyImgs
							});
							return '';
						});
					}
				} // console.log(diyNodes,this.data.imgs,this.data.diyImgs)

				// console.log(this.detail,"================");
				that.setData({
					diyNodes: diyNodes
				});
			}
			this.config = JSON.parse(req.getStorage('configRes'));
		},

		methods: {
			choose: function() {
				// console.log(123);
				let freshen = false;
				this.$emit('freshen', {
					detail: freshen
				});
			},
			tab(event) {
				const tabIndex = event.currentTarget.dataset.current;
				if (this.currentTab === tabIndex) return false;
				this.setData({
					currentTab: tabIndex
				});
				this.$emit('showTab', {
					detail: tabIndex
				});
			},

			joinFootprint() {
				req.postRequest('/api/footprint', {
					bindId: this.proId,
					type: 1
				}, () => {}, true);
			},

			loadParams() {
				let _ts = this;

				req.getRequest('/api/product/params', {
					id: this.proId
				}, data => {
					_ts.setData({
						params: data
					});
				});
			},

			loadScore(scoreType, from) {
				//买家评价
				let _ts = this;

				// console.log(this.isLoad, scoreType,this.form);

				// if (scoreType) {
				//   this.isLoad = true; // this.setData({['form.page']:1})
				// }

				if (!this.isLoad) return false;
				this.isLoad = false;
				let userInfo = req.getStorage('userInfo');
				let form
				if (from) {
					form = from;
				} else {
					form = _ts.form;
				}
				form.bindId = _ts.proId; // form.uid = userInfo.id;

				form.type = scoreType;
				req.getRequest('/api/sysScore/getList', form, res => {
					if (res.list && res.list.length == 10) _ts.isLoad = true;
					if (_ts.form.page > 1) res.list = _ts.scoreList.concat(res.list);
					res.list.map(item => {
						if (typeof item.buyShow != 'object') {
							if (!item.buyShow) {
								item.buyShow = [];
							} else {
								item.buyShow = item.buyShow.split(',');
							}
						} // item.buyShow = !item.buyShow ? [] : item.buyShow.split(',');


						return item;
					});

					_ts.setData({
						scoreList: res.list
					});

					// console.log('评价列表', _ts.scoreList, _ts.isLoad);
				});
			},

			loadScoreData() {
				req.getRequest('/api/sysScore/statisticsScore', {
					productId: this.proId
				}, res => {
					// console.log('评价统计', res);
					res.serviceAttitude = res.serviceAttitude.toFixed(0) == 0 ? '5' : res.serviceAttitude.toFixed(
						0);
					res.productRating = res.productRating.toFixed(0) == 0 ? '5' : res.productRating.toFixed(0);
					let overallRating = (Number(res.serviceAttitude) + Number(res.productRating)) / 2;
					this.setData({
						score: res,
						overallRating: overallRating
					});
				});
			},

			scoreTabFun(event) {
				this.form.page = 1
				this.isLoad = true
				let current = event.currentTarget.dataset.current;
				this.setData({
					scoreTab: current
				});
				this.$emit('scoreTab', {
					detail: current
				});
				this.$emit('getForm', {
					detail: this.form.page
				});
				this.loadScore(current);
			},

			chooseImg: function(e) {
				//预览
				var src = e.currentTarget.dataset.src;
				let freshen = false;
				this.$emit('freshen', {
					detail: freshen
				});
				uni.previewImage({
					current: src,
					// 当前显示图片的http链接  
					urls: this.imgs
				});
			},
			chooseImg1: function(e) {
				//预览
				var src = e.currentTarget.dataset.src;
				let freshen = false;
				this.$emit('freshen', {
					detail: freshen
				});
				uni.previewImage({
					current: src,
					// 当前显示图片的http链接  
					urls: this.diyImgs
				});
			},
			previewImg: function(e) {
				//预览评论买家秀
				var src = e.currentTarget.dataset.src;
				let list = e.currentTarget.dataset.list;
				let freshen = false;
				this.$emit('freshen', {
					detail: freshen
				});
				uni.previewImage({
					current: src,
					// 当前显示图片的http链接  
					urls: list
				});
			},

			isOpenCommentsFun() {
				//是否开启评论
				let that = this;

				if (req.getStorage('configRes') && JSON.parse(req.getStorage('configRes')).is_open_comments) {
					let isOpenCommentss = JSON.parse(req.getStorage('configRes')).is_open_comments;

					if (isOpenCommentss == 1) {
						that.loadScore(that.scoreType);
						that.loadScoreData();
					}

					this.setData({
						isOpenComments: isOpenCommentss
					});
				} else {
					req.g('/api/config', res => {
						let isOpenCommentss = res.is_open_comments;

						if (isOpenCommentss == 1) {
							that.loadScore(that.scoreType);
							that.loadScoreData();
						}

						this.setData({
							isOpenComments: isOpenCommentss
						});
						req.setStorage('configRes', JSON.stringify(res));
					});
				}
			}

		}
	};
</script>
<style>
	@import "./index.css";
</style>