dingdong-mall/components/goods-card/comments-card.vue

66 lines
1.7 KiB
Vue

<template>
<view>
<view class="cu-card dynamic no-card solid-bottom padding-bottom-sm " v-for="(reviewer, index) in reviewers" :key="item.id">
<view class="cu-item shadow">
<view class="cu-list menu-avatar no-border">
<view class="cu-item">
<view class="cu-avatar round" :style="'background-image:url(' + reviewer.avatarUrl + ');'">
</view>
<view class="content flex-sub">
<view>{{reviewer.name}}</view>
<view class="text-gray text-sm flex justify-between">
{{reviewer.reviewTime}}
</view>
</view>
</view>
</view>
<view class="text-content">
{{reviewer.comments}}
</view>
<view class="grid flex-sub padding-lr col-3 grid-square" v-if="reviewer.picList">
<view class="bg-img" :style="'background-image:url(' + item.url + ');'"
v-for="(item, index) in reviewer.picList" :key="index" v-if="index < 3" :data-url="item.url" :data-imgs="reviewer.picList" @click="viewImage($event)">
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "comments-card",
props: {
reviewers: {
type: Array,
default: []
}
},
data() {
return {
isCard: true
}
},
methods: {
viewImage(e) {
let imgList = e.currentTarget.dataset.imgs;
let curUrl = e.currentTarget.dataset.url;
let picList = [];
for(let i = 0; i < imgList.length; i++) {
picList.push(imgList[i].url);
}
uni.previewImage({
urls: picList,
current: curUrl
});
}
}
}
</script>
<style scoped>
.cu-list.menu-avatar.no-border>.cu-item:after {
border: none;
}
</style>