cnic_buyer/pages/productDetails/goodsReview.vue

<template>
	<view class="body">
		<template v-if="list.length!=0">
			<view class="reviews_item" v-for="(item,index) in list"  :key="index">
				<view class="reviews_item_title">
					<view class="reviews_item_img"><image mode="" :src="item.avatar_img_small"></image></view>
					<view class="reviews_item_one">
						<view class="reviews_title_user">
							<view class="reviews_title_user_name">{{item.user_name}}</view>
							<uni-rate  style="margin-left: 2rpx;margin-top: 10rpx;"size="18" :disabled="true" disabledColor="#B22234" :value="item.comment_rank"  active-color="#B22234" :is-fill="false"/>
						</view>
						<!-- <view class="reviews_title_color">Color:###</view> -->
					</view>
					 
					<view class="reviews_title_time">{{item.add_time | date}}</view>
				</view>
				<view class="reviews_item_color">{{item.commentlabels}}</view>
				<view class="reviews_item_content">{{item.content}}</view>
				<view class="reviews_item_image">
					<view class="reviews_image_content" v-for="(item1,index1) in item.attachments"  :key="item1.afile">
					<!-- <text> {{ item1.afile}}</text>		
								 -->
						<video :src="item1.afile" v-if="item1.afile.includes('mp4')"
						:autoplay="false"
						:muted="true"
						controls
						:show-mute-btn="true"
						:id="item1.afile"
						object-fit="contain"
						:poster="item1.afile"
						@play="play(item1.afile)"
						class="comment_video"></video>
						<image mode=" " :src="item1.afile" @click="clickImg(index1,item.attachments)"></image>
						
					</view>
				</view>
			</view>
		</template>
		<view class="noreview" v-else>No comment for the time being</view>
		<!-- <view class="mask" v-show="isShwo" @click="isShwo=false"></view> -->
	</view>
</template>

<script>
	import {defaultRequest,defaultRequest2} from '../../api/index.js'
	export default {
		data() {
			return {
				isShwo:false,
				query:{
					_action:'getgoodscomment',
					goods_id:'',
					page_index:1,
					page_size:100,
					commentlabel:'',
					videoContext:''
				},
				list:[]
			}
		},
		filters:{
			date(e){
					let str = e
					str=str.substring(0,10);
					const year = str.substring(0,4)
					let date = str.substring(5,10)
					date = date.replace('-','/')
					let time = date + '/'+year
					return time
				
			}
		},
		methods:{
			getList(){
				defaultRequest(this.query).then(res=>{
					console.info(res.data,'list')
					if(res.error==0){
						if(res.data)this.list=res.data
					}
				})
			},
			play(src) {
				 plus.screen.lockOrientation('portrait');
				console.log(111)
				// this.is_play = item.is_play		
				if(!this.is_play){
					this.videoContext = uni.createVideoContext(src, this)
					this.videoContext.requestFullScreen()
				}
			},
			clickImg(index,e) {
				
				let list = []	
					for(let i in e ){
						console.log(e[i].afile)
						list.push(e[i].afile)
						console.log(list)
						}
				wx.previewImage({
					urls: list, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: index, // 当前显示图片的http链接，默认是第一个
					indicator:'number',
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			}			
		},
		onLoad(e) {
			let that = this;
			let s = 0;
			let time = setInterval(() => {
				uni.getNetworkType({
					success: (res) => {
						console.log(res.networkType, s);
						if (res.networkType == 'none') {
							uni.showToast({
								icon: 'none',
								title: 'Please connect to the network',
								duration: 3000,
							})
						} else if (res.networkType !== 'none') {
							that.typee = 2;
							clearInterval(time);
							// uni.showToast({
							// 	icon: 'none',
							// 	title: 'Please connect to the network',
							// 	duration: 3000,
							// })
						}
					}
				})
				s++;
			}, 1000);
			 plus.screen.lockOrientation('portrait') //锁定竖屏
			this.query.goods_id=e.goods_id
			this.getList()
		}
	}
</script>
<style>
	page{
		border-top: 14.67rpx #F6F5FA solid;
	}
</style>
<style lang="scss" scoped>
	.body{
		padding: 0 32rpx;
	}
	.noreview{
		text-align: center;
		margin-top: 100rpx;
		color: #767575;
		
	}
	.more{
		text-align: right;
		position: relative;
		// margin-top: 20rpx;
		image{
			width: 24rpx;
			height: 6.67rpx;
		}
		.more_delete{
			background-image: url(@/static/img/more_bf.png);
			background-size: 100% 100%;
			width: 102.67rpx;
			height: 67.33rpx;
			position: absolute;
			right: 0;
			bottom: 20rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 24rpx;
			z-index: 999;
		}
	}
	.mask{
		background-color: white;
		opacity: 0;
	}
	.reviews_item{
		border-bottom: #f0f0f0 1rpx solid;
	}
</style>