222 lines
7.6 KiB
Vue
222 lines
7.6 KiB
Vue
<template>
|
||
<view class="page"><view class="m-tab">
|
||
<view class="m-navbar">
|
||
<view :class="['m-navbar-item', (TapIndex==1?'m-navbar-item-on':'')]" @click="picDetail">
|
||
{{__('好评')}}（{{PraiseNum}}）
|
||
</view>
|
||
<view :class="['m-navbar-item', (TapIndex==2?'m-navbar-item-on':'')]" @click="spcParam">
|
||
{{__('中评')}}（{{SatisfiedNum}}）
|
||
</view>
|
||
<view :class="['m-navbar-item', (TapIndex==3?'m-navbar-item-on':'')]" @click="packingList">
|
||
{{__('差评')}}（{{BadNum}}）
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y="true" class="m-panel-bd scroll-box" @scrolltolower="scrollPage">
|
||
<view class="m-media-box m-media-box-appmsg" v-for="(item, index) in CommentList" :key="index">
|
||
<view class="m-media-box-hd">
|
||
<image lazy-load class="m-media-box-thumb" :src="(item.user_avatar)" />
|
||
</view>
|
||
<view class="m-media-box-bd">
|
||
<label class="m-media-box-title">{{item.user_name}}</label>
|
||
<view class="m-media-box-desc">
|
||
<view style="margin-bottom:20rpx;">
|
||
<label style="margin-right:10rpx;font-size:24rpx;">
|
||
{{item.item_name}}
|
||
</label>
|
||
</view>
|
||
<label style="font-size: 28rpx;" v-if="(item.comment_content!=null)" >{{item.comment_content}}</label>
|
||
</view>
|
||
<view class="m-media-box-info">
|
||
<view class="m-media-box-info-meta m-start" v-for="(itemIndex, ii) in [1, 2, 3, 4, 5]" :key="ii">
|
||
<label :class="'iconfont icon-start ' + (itemIndex<=item.comment_scores)?'sel':''" :data-index="(itemIndex)" :data-type="1" @click="ServiceStart"></label>
|
||
</view>
|
||
<view class="m-media-box-info-meta m-tiem">{{item.comment_time}}</view>
|
||
<view class="m-media-list">
|
||
<image lazy-load :data-id="(item.comment_id)" v-for="(items, ii) in item.comment_image" :key="ii" :src="(items)" @click="ImgTap"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="m-loading-box">
|
||
<block v-if="(ispage)">
|
||
<view class="u-loadmore">
|
||
<label class="u-loading"></label>
|
||
<text class="u-loadmore-tips">{{__('正在加载')}}</text>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="u-loadmore u-loadmore-line">
|
||
<text class="u-loadmore-tips">{{__('没有更多数据啦！')}}</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapMutations
|
||
} from 'vuex'
|
||
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
isStoreFlag: 0,
|
||
viewtype: 1,
|
||
CommentList: [],
|
||
TapIndex:1,
|
||
pdlist: [],
|
||
fglist: [],
|
||
sort: 2,
|
||
flag: true,
|
||
sku: '',
|
||
ispage: true,
|
||
scposition: "",
|
||
istop: false,
|
||
isdata: false,
|
||
isVirtual: false,
|
||
post: {sidx: 'product_sale_num', sord: 'DESC', isnew: false, keywords: "", store_category_ids: 0, curpage: 1, store_id:null},
|
||
PraiseNum: 0,
|
||
SatisfiedNum: 0,
|
||
BadNum: 0,
|
||
pageIndex: 1,
|
||
rows: 10,
|
||
}
|
||
},
|
||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||
onLoad: function(options) {
|
||
uni.setNavigationBarTitle({
|
||
title:this.__('评价列表')
|
||
});
|
||
|
||
this.setData({sku: options.id});
|
||
this.initData();
|
||
},
|
||
methods: {
|
||
|
||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||
picDetail: function () {
|
||
this.setData({TapIndex: 1, pageIndex: 1, flag: true, ispage: true, CommentList: []}), this.initData()
|
||
},
|
||
spcParam: function () {
|
||
this.setData({TapIndex: 2, pageIndex: 1, flag: true, ispage: true, CommentList: []}), this.initData()
|
||
},
|
||
packingList: function () {
|
||
this.setData({TapIndex: 3, pageIndex: 1, flag: true, ispage: true, CommentList: []}), this.initData()
|
||
},
|
||
initData: function () {
|
||
var that = this;
|
||
var params = {
|
||
item_id: this.sku,
|
||
|
||
comment_type: this.TapIndex,
|
||
page: this.pageIndex,
|
||
rows: this.rows,
|
||
};
|
||
that.$.request({
|
||
url: this.Config.URL.product.product_comment,
|
||
data: params,
|
||
success: function (data, status, msg, code) {
|
||
if (status == 200) {
|
||
that.setData({
|
||
PraiseNum: data.comment_num.good,
|
||
SatisfiedNum: data.comment_num.satisfied,
|
||
BadNum: data.comment_num.bad
|
||
});
|
||
if (data.page * that.rows >= data.records) {
|
||
that.setData({
|
||
flag: false,
|
||
ispage: false,
|
||
CommentList: that.CommentList.concat(data.items)
|
||
})
|
||
} else {
|
||
that.setData({
|
||
flag: true,
|
||
ispage: true,
|
||
CommentList: that.CommentList.concat(data.items)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
/*
|
||
that.$.xsr(that.$.makeUrl(api.getProductCommentList, params), function (t) {
|
||
//console.log("商品评论列表：", t), that.setData({
|
||
PraiseNum: t.Info.PraiseNum,
|
||
SatisfiedNum: t.Info.SatisfiedNum,
|
||
BadNum: t.Info.BadNum
|
||
}), t.Info != null ? t.Info.ProductCommentList.length < 10 ? that.setData({
|
||
flag: false,
|
||
ispage: false,
|
||
CommentList: that.CommentList.concat(t.Info.ProductCommentList)
|
||
}) : that.setData({
|
||
flag: true,
|
||
CommentList: that.CommentList.concat(t.Info.ProductCommentList)
|
||
}) : that.setData({flag: false, ispage: false})
|
||
})
|
||
*/
|
||
},
|
||
scrollPage: function (e) {
|
||
if (this.flag)
|
||
{
|
||
this.setData({flag: false});
|
||
var t = this;
|
||
clearTimeout(n);
|
||
var n = setTimeout(function () {
|
||
t.setData({pageIndex: parseInt(t.pageIndex) + 1}), t.initData()
|
||
},
|
||
500)
|
||
}
|
||
},
|
||
ImgTap: function (e) {
|
||
var that = this, n = [];
|
||
for (var r in this.CommentList)
|
||
{
|
||
if (this.CommentList[r].comment_id == e.target.dataset.id)
|
||
{
|
||
for (var i in this.CommentList[r].comment_image)
|
||
{
|
||
n.push(this.CommentList[r].comment_image[i]);
|
||
}
|
||
}
|
||
}
|
||
var s = e.target.dataset.src;
|
||
that.$.previewImage({current: s, urls: n})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
@import "../../styles/_variables";
|
||
|
||
.m-navbar-item {padding: 20rpx 0;font-size: 24rpx;}
|
||
.m-navbar-item:after {border: none;}
|
||
.m-navbar-item.m-navbar-item-on {background-color: #fff;color: $default-skin-bg;}
|
||
.m-navbar-item.m-navbar-item-on::before {content: " ";position: absolute;left: 0;bottom: 0;right: 0;height: 6rpx;border-bottom: 6rpx solid $default-skin-bg;color: #CCCCCC;-webkit-transform-origin: 0 100%;transform-origin: 0 100%;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);z-index: 3;}
|
||
.m-tips{margin: 40rpx auto;}
|
||
.m-tab{position: fixed;top: var(--window-top);left: 0;width: 100%;z-index: 10;background-color: #fff;}
|
||
.scroll-box{position: absolute;width: 100%;height: 100%;padding-top: 80rpx;box-sizing: border-box;background-color: #f8f8f8 !important;}
|
||
.m-start label{font-size: 24rpx;}
|
||
.m-media-box-info-meta{padding-right: 5rpx;}
|
||
.sel{color: $default-skin-bg;font-size: 24rpx}
|
||
.m-tiem{float: right;}
|
||
.m-panel-hd label{float: right;}
|
||
.m-panel-hd text{color: $default-skin-bg;margin-left: 10rpx;}
|
||
.m-comment .m-media-box-info-meta{font-size: 24rpx;font-weight: 100;}
|
||
.m-comment .m-media-box-hd{border-radius: 100%;overflow: hidden;vertical-align:top; }
|
||
.m-media-list{float: left;width: 100%;}
|
||
.m-media-list image{width: 115rpx;height: 115rpx;box-sizing: border-box;margin: 10rpx;border: 1rpx solid #eee;}
|
||
.m-panel-bd{background-color: #fff;}
|
||
.m-media-box-appmsg{align-items:initial;background-color: #fff;}
|
||
.m-media-box-thumb{border-radius: 100%;}
|
||
.m-media-box-desc{display: block; }
|
||
|
||
</style>
|