yangjun
/
sadjv3_user
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
曹磊 2024-09-14 15:20:40 +08:00
parent eeb950c47a
commit b88a40173c
1 changed files with 255 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

261
pages/index/index.vue
View File

@ -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>