评论中心

apis/comment.js

@@ -3,20 +3,22 @@ import { request } from "@/lib/service"
 /**
  * @desc 查询用户待评价sku商品评论列表接口
  */
-export function unCommentList() {
+export function unCommentList(params) {
 	return request({
 		url: 'zsxcx/getDpjComments.htm',
-		method: 'post'
+		method: 'post',
+		data: params
 	})
 }
 
 /**
  * @desc 查询用户已评价sku商品评论列表接口
  */
-export function hadCommentList() {
+export function hadCommentList(params) {
 	return request({
 		url: 'zsxcx/getYpjComments.htm',
-		method: 'post'
+		method: 'post',
+		data: params
 	})
 }
 
@@ -29,4 +31,27 @@ export function commentList(params) {
 		method: 'post',
 		data: params
 	})
+}
+
+/**
+ * @desc 获取商品评论详情接口
+ */
+export function commentDetail(id) {
+	return request({
+		url: 'zsxcx/getGoodsCommentsDetail.htm',
+		method: 'post',
+		data: {
+			id
+		}
+	})
+}
+
+/**
+ * @desc 获取用户待评价商品数量接口
+ */
+export function uncommentNum(id) {
+	return request({
+		url: 'zsxcx/getDpjCommentsCount.htm',
+		method: 'post'
+	})
 }
\ No newline at end of file

components/comments/media-view.vue

@@ -3,50 +3,55 @@
 		class="wrap-scroll w-100"
 		scroll-x
 	>
-		<video
-			class="r-8"
-			:class="className"
-			:style="itemSize"
-			src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
-			:controls="controls"
-			:autoplay="false"
-			:show-play-btn="false"
-			@click="handlePreview(0)"
-		/>
-		<image
-			v-for="(item, idx) in 4"
-			:key="item"
-			class="item r-8"
-			:class="className"
-			:style="itemSize"
-			src="https://www.gelifood.com/upload/goods/20210301/7432e042823c1ea4dc08eb1614575307goods_thumb.png"
-			mode="aspectFit"
-			@click="handlePreview(idx+1)"
-		/>
+		<template
+			v-for="(e, i) in media"
+		>
+			<video
+				v-if="e.type === 'video'"
+				class="item r-8"
+				:key="i"
+				:style="itemSize"
+				:src="e.url"
+				:controls="controls"
+				:autoplay="false"
+				:show-play-btn="false"
+				@click.stop="handlePreview(i)"
+			/>
+			<image
+				v-else
+				:key="i"
+				class="item r-8"
+				:style="itemSize"
+				:src="e.url"
+				mode="aspectFit"
+				lazy-load
+				@click.stop="handlePreview(i)"
+			/>
+		</template>
 	</scroll-view>
 </template>
 
-<script module="utils" lang="wxs">
-	function itemSize(arr) {
-		var len = arr.length;
-		var size = 150; // 当大于三张时的宽度
-		switch(len) {
-			case 1:
-				size = 410; 
-				breck;
-			case 2:
-				size = 330;
-				break;
-			default:
-				break;
-		}
-		return 'width:' + size + 'rpx;height:' + size + 'rpx;';
-	}
+// <script module="utils" lang="wxs">
+// 	function itemSize(arr) {
+// 		var len = arr.length;
+// 		var size = 150; // 当大于三张时的宽度
+// 		switch(len) {
+// 			case 1:
+// 				size = 410; 
+// 				breck;
+// 			case 2:
+// 				size = 330;
+// 				break;
+// 			default:
+// 				break;
+// 		}
+// 		return 'width:' + size + 'rpx;height:' + size + 'rpx;';
+// 	}
 	
-	module.exports = {
-		itemSize: itemSize
-	}
-</script>
+// 	module.exports = {
+// 		itemSize: itemSize
+// 	}
+// </script>
 
 <script>
 	export default {
@@ -55,9 +60,9 @@
 				type: [String , Number],
 				default: '150'
 			},
-			className: {
-				type: String,
-				default: 'mr-2'
+			media: {
+				type: Array,
+				default: () => []
 			}
 		},
 		
@@ -67,24 +72,12 @@
 				return `width: ${size}rpx; height:${size}rpx;`
 			}
 		},
-		
+
 		methods: {
 			handlePreview(idx) {
-				wx.previewMedia({
-					sources: [
-						{
-							type: 'video',
-							url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
-						},
-						{
-							type: 'image',
-							url: 'https://www.gelifood.com/upload/goods/20210301/7432e042823c1ea4dc08eb1614575307goods_thumb.png'
-						},
-						{
-							type: 'image',
-							url: 'https://www.gelifood.com/upload/goods/20210301/7432e042823c1ea4dc08eb1614575307goods_thumb.png'
-						},
-					],
+				console.log(idx)
+				uni.previewMedia({
+					sources: this.media,
 					current: idx,
 					fail: err => console.log(err)
 				})
@@ -98,5 +91,8 @@
 		white-space: nowrap;
 		overflow-y: hidden;
 		font-size: 28rpx;
+		.item {
+			margin-right: 30rpx;
+		}
 	}
 </style>

components/comments/user.vue

@@ -4,13 +4,13 @@
 			<image
 				class="avatar mr-2 r-8"
 				:src="baseUrl + '/' + user.avatar"
-				mode="aspectFit"
+				mode="scaleToFill"
 			/>
 			<view class="flex-1">
 				<view class="font-24 mb-2">{{user.nickname}}</view>
 				<rate
 					readonly
-					value="user.grade"
+					:value="~~user.grade"
 					size="12"
 					margin="2"
 				/>

lib/service/index.js

@@ -39,7 +39,6 @@ async function successRes(res, options, resolve, reject) {
 						resolve({
 						    status: true,
 						    data: data.data,
-							test: data,
 						    msg: data.rep_msg
 						})
 						break;

pages.json

@@ -28,7 +28,8 @@
 			"path": "pages/mine/index",
 			"style": {
 				"navigationStyle": "custom",
-				"navigationBarTextStyle":"white"
+				"navigationBarTextStyle":"white",
+				"enablePullDownRefresh": true
 			}
 		},
 		{
@@ -167,7 +168,8 @@
 				{
 					"path": "comments/detail",
 					"style": {
-						"navigationBarTitleText": "评论详情"
+						"navigationBarTitleText": "评论详情",
+						"enablePullDownRefresh": true
 					}
 				}
 			]

pages/goods/comment-list.vue

@@ -5,10 +5,11 @@
 				@tolower="tolower"
 				@refresh="refresh"
 			>
-				<view
+				<navigator
 					class="comment-item"
+					hover-class="none"
 					v-for="(item, index) in list"
-					:data-index="index"
+					:url="'/subPages/comments/detail?id=' + item.id"
 					:key="index"
 				>
 					<view class="mb-2">
@@ -22,7 +23,7 @@
 					<media-view :media="item.media" />
 					
 					<view class="descColor font-24 mt-2">{{item.goods_attr}}</view>
-				</view>
+				</navigator>
 			</pull-list>
 		</view>
 		
@@ -82,12 +83,16 @@
 					if(status) {
 						const resetData = data.map(item => {
 							let media = []
+							const baseUrl = this.baseUrl
 							if(item.img_url) {
-								media = [...item.img_url.split(',')]
+								media = [...item.img_url.split(',').map(item => ({
+									url: `${baseUrl}/${item}`,
+									tpye: 'image'
+								}))]
 							}
 							if(item.video_url) {
 								media.unshift({
-									url: item.video_rul,
+									url: `${baseUrl}/${item.video_url}`,
 									type: 'video'
 								})
 							}
@@ -100,6 +105,7 @@
 								},
 								content: item.content,
 								media,
+								id: item.id,
 								reply: [],
 								goods_attr: item.goods_attr
 							}
@@ -118,6 +124,10 @@
 			
 			refresh() {
 				console.log("shuaxin")
+			},
+			
+			handleNav(e) {
+				console.log(e)
 			}
 		}
 	}

pages/goods/common.js

@@ -4,7 +4,7 @@ import { collectGoods } from '@/apis/goods.js'
 function handlePopup() {
 	const skuData = this.skuData
 	const detail = this.detail
-	if(!skuData & skuData.length) return this.$toast({title: '该商品暂无库存'})
+	if(!skuData || !skuData.length) return this.$toast({title: '该商品暂无库存'})
 	const params = {
 		goodsInfo: {
 			cover: `${this.baseUrl}/${detail.goods_thumb}`,

pages/mine/index.vue

@@ -68,7 +68,7 @@
 				>
 					<image class="icon mb-2" src="/static/images/mine/comment.png" mode="aspectFit"></image>
 					<view>待评价</view>
-				
+					<view v-if="commentCounts > 0" class="badge">{{commentCounts > 99 ? '99+' : commentCounts}}</view>
 				</view>
 				<view 
 					class="order-menu_item flex flex-column j-center a-center"
@@ -115,6 +115,7 @@ import { checkLogin } from '@/utils/modules/login.js'
 import { baseUrl } from '@/config/index.js'
 import { makePhoneCall } from '@/utils/common.js'
 import { orderNum } from '@/apis/order.js'
+import { uncommentNum } from '@/apis/comment.js'
 export default {
 	data() {
 		return {
@@ -123,7 +124,8 @@ export default {
 				wait_pay: 0,
 				wait_receive: 0,
 				wait_send: 0
-			}
+			},
+			commentCounts: 0
 		}
 	},
 	computed: {
@@ -132,16 +134,37 @@ export default {
 			userInfo: state => state.user.userInfo,
 		})
 	},
+	
 	onShow() { // 获取更新用户信息
-		if(this.token) {
-			this.setUserInfo()
-			this.getOrderNum()
-		}
+		this.init()
 	},
+	
+	onPullDownRefresh() {
+		uni.showLoading({
+			title: '加载中...',
+			mask: true
+		})
+		this.init()
+		let timer = setTimeout(() => {
+			uni.stopPullDownRefresh()
+			clearTimeout(timer)
+			timer = null
+			uni.hideLoading()
+		}, 800)
+	},
+	
 	methods: {
 		makePhoneCall,
 		...mapActions('user', ['setUserInfo']), 
 		
+		init() {
+			if(this.token) {
+				this.setUserInfo()
+				this.getOrderNum()
+				this.getCommentNum()
+			}
+		},
+		
 		nav(type, arg) {
 			checkLogin(() => {
 				switch (type) {
@@ -193,6 +216,19 @@ export default {
 			if(status) {
 				this.orderNum = data
 			}
+		},
+		
+		// 获取待评论数量
+		async getCommentNum() {
+			try{
+				const { status, data } = await uncommentNum()
+				if(status) {
+					this.commentCounts = data.count
+				}
+			}catch(e){
+				console.log(e)
+				//TODO handle the exception
+			}
 		}
 	}
 }
@@ -258,8 +294,9 @@ export default {
 			top: -16rpx;
 			width: 32rpx;
 			height: 32rpx;
-			line-height: 32rpx;
-			text-align: center;
+			display: flex;
+			justify-content: center;
+			align-items: center;
 			color: #fff;
 			background-color: $primary;
 			border: 1rpx solid $primary;

subPages/comments/center.vue

@@ -17,7 +17,10 @@
 		<!-- list -->
 		<swiper class="list-wrap" :current="cur_tab" @change="swiperChange">
 			<swiper-item>
-				<pull-list>
+				<pull-list
+					@tolower="tolower"
+					@refresh="refresh"
+				>
 					<view class="list-item w-100 p-2 r-8">
 						<view class="font-32 font-bold mb-2">这是一个店铺名称</view>
 						<view class="w-100 flex j-start a-center">
@@ -44,7 +47,10 @@
 				</pull-list>
 			</swiper-item>
 			<swiper-item>
-				<pull-list>
+				<pull-list
+					@tolower="tolower"
+					@refresh="refresh"
+				>
 					<view class="list-item w-100 p-2 r-8">
 						<view class="font-32 font-bold mb-2">这是一个店铺名称</view>
 						<view class="w-100 flex j-start a-center">
@@ -102,8 +108,16 @@
 		methods: {
 			async getList() {
 				try{
-					const { status, data, test } = await commentList()
-					console.log(status, test)
+					const { cur_tab } = this
+					console.log(cur_tab)
+					if(cur_tab === 0) {
+						const { status, data, test } = await unCommentList()
+						console.log(status, test)
+					} else {
+						const { status, data, test } = await hadCommentList()
+						console.log(status, test)
+					}
+					
 				}catch(e){
 					this.$toast({title: '程序错误，获取失败'})
 				}
@@ -117,6 +131,14 @@
 			
 			swiperChange(e) {
 				this.cur_tab = e.detail.current
+			},
+			
+			tolower() {
+				console.log(2)
+			},
+			
+			refresh() {
+				console.log(1)
 			}
 		}
 	}

subPages/comments/detail.vue

@@ -66,15 +66,44 @@
 
 <script>
 	import user from '@/components/comments/user.vue'
+	import { commentDetail } from '@/apis/comment.js'
 	export default {
 		components: {
 			user
 		},
 		
-		mounted() {
-			uni.showShareMenu({
-			  menus: ['shareAppMessage', 'shareTimeline']
+		onLoad(ops) {
+			this.id = ops.id
+			if(!this.id) return
+			this.getCommentDeatil()
+		},
+		
+		onPullDownRefresh() {
+			uni.showLoading({
+				title: '加载中...',
+				mask: true
 			})
+			this.getCommentDeatil()
+			let timer = setTimeout(() => {
+				uni.stopPullDownRefresh()
+				clearTimeout(timer)
+				timer = null
+				uni.hideLoading()
+			}, 800)
+		},
+		
+		methods: {
+			async getCommentDeatil() {
+				try{
+					if(!this.id) return
+					const { status, data } = await commentDetail(this.id)
+					if(status) {
+						console.log(data)
+					}
+				}catch(e){
+					console.log(e)
+				}
+			}
 		}
 	}
 </script>