首页视频圈，增加跳转，点赞，评论

pages/index/index.vue

@@ -244,7 +244,7 @@
 		</view>
 		<!-- 经验筛选 -->
 		<u-select v-model="Cityshow" style="height: auto;" :list="cityList" @confirm="getCity"></u-select>
-		<uni-popup style="width: 100%;height: 100vh;" type="center" ref="pinglun" @touchmove.stop.prevent="moveHandle">
+		<uni-popup style="width: 100%;height: 100vh;" type="center" ref="bofang" @touchmove.stop.prevent="moveHandle">
 			<view style="width: 100%;height: 100%;position: relative;">
 				<video
 					id="myVideo"
@@ -266,6 +266,26 @@
 				<view class="guanbi" @click="guanbi">
 					<image src="@/static/closeimg.png"></image>
 				</view>
+				<view class="userInfo">
+					<!-- 1.头像 -->
+					<image @click="tozuozhe(artificerItem)" class="userAvatar" :src="artificerItem.artificerImg" mode="aspectFill"></image>
+					<!-- 2.点赞 -->
+					<view class="list-view" @click="cLike(artificerItem);" style="opacity: 0.9; margin-top: 17px;">
+						<image v-if="artificerItem.sfdz==1" src="@/static/img/index/xin.png" style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
+						<image v-if="artificerItem.sfdz==0" src="@/static/img/index/xin-2.png" style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
+						<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; margin-top: 40px; font-weight: bold;" :class="{'likeNumActive':artificerItem.sfdz}">{{artificerItem.dzs}}</text>
+					</view>
+					<!-- 3.评论 -->
+					<view class="comment list-view" @click="toComment(artificerItem)" style="opacity: 0.9; margin-top: 17px;">
+						<image src="@/static/img/index/liaotian-2.png" style="width:38px; height:36px; position: absolute; right: 7px;"></image>
+						<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">{{artificerItem.pls}}</text>
+					</view>
+				</view>
+			</view>
+		</uni-popup>
+		<uni-popup class="uni-popup" type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle">
+			<view class="popup-content-pl" :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px;'">
+				<CComment ref="ccRef" :showPopup="showPopup" :userInfo="userInfo" :tableData="tableData" :tableTotal="tableTotal" likeFun="likeFun" @replyFun="replyFun" @deleteFun="deleteFun" :deleteMode="deleteMode"></CComment>
 			</view>
 		</uni-popup>
 		<view>
@@ -308,6 +328,7 @@
 </template>
 
 <script>
+	import CComment from "@/components/XJ-comment/index";
 	import commonConfig from 'common/config.js';
 
 	import * as webMap from 'utils/webMap.js';
@@ -315,10 +336,12 @@
 	// 调用手机系统权限
 	// #ifdef APP-PLUS
 	import permision from "@/components/permission.js";
+
 	// #endif
 	let audo = uni.createInnerAudioContext()
 	audo.loop = true
 	export default {
+		components:{CComment},
 		data() {
 			return {
 				checkboxShow:1,
@@ -410,7 +433,26 @@
 				contentVideo:'',
 				Key2:'ad684a15ebbb6f5d12c407a3d593c949',
 				latadd:'',
-				cityname:''
+				cityname:'',
+				artificerItem:{},
+				showPopup:false,
+				ccRef: null,
+				userInfo: {
+					id: 120,
+					user_name: "🍁",
+					user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp",
+				},
+				tableTotal: 4,
+				tableData: [],
+				deleteMode: "all",
+				windowWidth: 0,
+				windowHeight: 0,
+				heightNum: 1.18,
+				deleteHeight: 0,
+				boxStyle:{//视频，图片封面样式🌟💗
+					'height': 0,
+					'width': 0,
+				},
 			}
 		},
 		onShareAppMessage(res) { //发送给朋友
@@ -429,6 +471,13 @@
 		},
 		onLoad(e) {
 			let that = this
+			if(this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !== 'iPhone8')){
+				this.deleteHeight = 0//有 tabbar的 修改这里可以改变视频高度
+			}
+			this.windowWidth = uni.getSystemInfoSync().windowWidth;
+			this.windowHeight = uni.getSystemInfoSync().windowHeight;
+			this.boxStyle.width = this.windowWidth + 'px';//给宽度加px
+			this.boxStyle.height = this.windowHeight - this.deleteHeight;//有 tabbar的 修改这里可以改变视频高度
 			that.getBannerList()
 			that.remen()
 			// that.getKTCityList();
@@ -598,7 +647,7 @@
 				this.playShow=false;
 				const videoContext = uni.createVideoContext('myVideo', this);
 				videoContext.pause(); // 播放视频
-				this.$refs.pinglun.close("center");
+				this.$refs.bofang.close("center");
 			},
 			jieshu(){
 				this.playShow=true;
@@ -615,13 +664,14 @@
 				this.playShow=true;
 				this.filePath=item.filePath;
 				this.contentVideo=item.content;
+				this.artificerItem=item;
 				this.videoId=item.id;
 				// const videoContext = uni.createVideoContext('myVideo', this);
 				// videoContext.src = this.filePath; // 设置视频源
 				// setTimeout(()=>{
 				// 	videoContext.play(); // 播放视频
 				// },100)
-				this.$refs.pinglun.open("center")
+				this.$refs.bofang.open("center")
 			},
 			swichMenu(index,id) {//视频导航
 				this.currentTab = index;
@@ -1282,8 +1332,171 @@
 					}
 				});
 			},
-
+			tozuozhe(item){
-
+				// console.log("itemitemitemitemitem",item)
+				uni.reLaunch({
+					url:'/pages/therapist/orderDetail?artificerId='+item.createBy+'&classifyId='+'undefined'
+				})
+				this.currents = 1//点击头像以后就会切换
+			},
+cLike(item){
+				var data={
+					createBy:uni.getStorageSync('userId'),
+					shipinquanId:item.id,
+				}
+				if(item.sfdz=='0'){
+					this.$Request.post("/app/shipinquan/addDianzan", data).then(res => {
+						if (res.code == 0) {
+							this.artificerItem.dzs += 1;
+							this.artificerItem.sfdz = '1';
+						} else {
+							uni.showToast({
+								title: res.msg,
+								icon: 'none'
+							})
+						}
+					});
+			
+				}else{//取消点赞
+					this.$Request.post("/app/shipinquan/delDianzan", data).then(res => {
+						if (res.code == 0) {
+							this.artificerItem.dzs -= 1;
+							this.artificerItem.sfdz = '0';
+						} else {
+							uni.showToast({
+								title: res.msg,
+								icon: 'none'
+							})
+						}
+					});	
+				}
+			},
+			likeFun(params, callback) {//评论点赞返回
+				console.log("likeFun", params);
+				// Implement your logic for likeFun
+			},
+			toComment(item){
+				// 注意点击评论之后会执行这里
+				/*
+				（1）先加载缓冲
+				（2）获取当前视频 ID 信息
+				（3）🌟🌟🌟🌟重要🌟🌟🌟🌟
+					- 一定要记得看 index.vue 里面
+					 uni.setStorageSync("user",this.peopleList[i]);
+					 这个东西，用于存储当前用户信息。在 插件里面会使用到这个东西，
+					 记得写一下。
+			
+				（4）打开评论
+				*/
+				uni.showToast({
+					title: '加载中...',
+					icon: 'none',
+					position: 'bottom',
+					duration: 300
+				})
+				uni.setStorageSync("videoID",item.id);
+				this.videoID = item.id;
+				this.$refs.pinglun.open('bottom');
+				this.getPingL(this.videoID);
+			},
+			getPingL(shipinquanId){//获取评论列表
+				var data={
+					page: this.page,
+					limit:310,
+					shipinquanId:shipinquanId
+				}
+				this.$Request.get("/app/shipinquan/contentlist", data).then(res => {
+					if (res.code == 0) {
+							var msg = res.data.records||{}
+							this.tableTotal=res.data.total;
+							var list=[];
+							// for (let i = 0; i < msg.length; i++) {
+							// 	list.push(msg[i])
+							// }
+			
+							this.tableData = msg.map(item => {
+							  return {
+							    ...item,
+							   parent_id: null,
+							   reply_id: null,
+							   reply_name: null,
+							   user_name: item.userName,
+							   user_avatar: item.userPhoto?item.userPhoto:'../../static/logo.png',
+							   user_content: item.content,
+							   is_like: true,
+							   like_count: 8,
+							   create_time: item.createTime
+							  };
+							});
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						})
+					}
+				});
+			},
+			replyFun(params, callback) {
+				// console.log("replyFun", params);
+				if(params.params.user_content==''){
+					uni.hideLoading();
+					uni.showToast({
+						icon:'error',
+						title:'请填写发布评论'
+					})
+				}else{
+					var data={
+						createBy:uni.getStorageSync('userId'),
+						content:params.params.user_content,
+						shipinquanId:this.videoID,
+					}
+					this.$Request.post("/app/shipinquan/addContent",data).then(res => {
+						if (res.code == 0) {
+							setTimeout(() => this.getPingL(this.videoID), 500);
+							this.showPopup==true;
+							uni.hideLoading();
+							this.artificerItem.pls++
+							 // callback(this.videoID);
+						} else {
+							uni.hideLoading();
+							uni.showToast({
+								title: res.msg,
+								icon: 'none'
+							})
+						}
+					});
+				}
+			},
+			deleteFun({ params, mode }, callback) {
+			
+			  console.log("deleteFun", { params, mode });
+			  // 当请求成功, 调用callback执行评论删除;
+			  switch (this.deleteMode) {
+				case "bind":
+				  // 逻辑: 调用接口进行评论内容修改 update
+				  setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
+				  break;
+				case "only":
+				  // 逻辑: 调用接口删除一个评论 delete
+				  setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
+				  break;
+				default:
+				  // all
+				  // 逻辑: 调用接口删除多个评论 [delete]
+				  // Demo如下:
+				  // axios.post("http://xxx/delete", { ids: params }).then((res) => {
+				  //   if (res.code === 0) {
+				  //     callback(res);
+				  //   }
+				  // });
+				  setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
+				  break;
+			  }
+			},
+			closeScrollview(){
+				// 点击评论里面的叉叉，就会关闭评论
+				this.$refs.pinglun.close('bottom');
+			},
 		}
 	}
 </script>
@@ -2338,4 +2551,40 @@
 		margin-bottom: 8rpx;
 		color: #f68607;
 	}
+	.userInfo{
+		position: absolute;
+		bottom:110px;
+		right: 10px;
+		display: flex;
+		flex-direction: column;
+		z-index: 18;
+	}
+	.userAvatar{
+		border-radius: 500%;
+		border-style: solid;
+		border-width: 2px;
+		border-color: #ffffff;
+		width : 100rpx;
+		height: 100rpx;
+	}
+	.list-view{
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.uni-popup{
+		width: 100%;
+		height: 500px;
+		overflow: auto;
+	}
+	.popup-content-pl{
+		width: 100%;
+		height: 100%;
+		background-color: #242424;
+		border-top-left-radius: 10px;
+		border-top-right-radius: 10px;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+	}
 </style>