mkm/nk-shop2.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

h5视频处理及客服聊天界面优化

Browse Source
This commit is contained in:
jia 2023-10-07 11:36:08 +08:00
parent 635a166bf5
commit 11c8d1fdd1
3 changed files with 117 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
pages/chat/customer_list/chat.vue
View File

@ -143,7 +143,7 @@
<!--拼团商品链接--> <!--拼团商品链接-->
<div class="conter acea-row row-middle" <div class="conter acea-row row-middle"
v-if="item.msn_type === 8 && item.productGroup && item.productGroup.product"> v-if="item.msn_type === 8 && item.productGroup && item.productGroup.product">
<div class=" noPad"> <div class="noPad">
<navigator class="acea-row row-column-around noPad" <navigator class="acea-row row-column-around noPad"
v-if="item.productGroup.product_group_id" v-if="item.productGroup.product_group_id"
:url="`/pages/activity/combination_details/index?id=${item.productGroup.product_group_id}`" :url="`/pages/activity/combination_details/index?id=${item.productGroup.product_group_id}`"
@ -216,6 +216,7 @@
</div> </div>
</div> </div>
</navigator> </navigator>
<!--订单链接--> <!--订单链接-->
<div v-if="item.msn_type === 5 && item.orderInfo.order_id"> <div v-if="item.msn_type === 5 && item.orderInfo.order_id">
<div class="broadcast-details_num acea-row row-middle"> <div class="broadcast-details_num acea-row row-middle">
@ -358,6 +359,7 @@
<block v-for="(items,index) in history" v-if="userId == 0" :key="items.time"> <block v-for="(items,index) in history" v-if="userId == 0" :key="items.time">
<div class="create_time">{{items.time}}</div> <div class="create_time">{{items.time}}</div>
<block v-for="(item,j) in items.children" :key="item.service_log_id"> <block v-for="(item,j) in items.children" :key="item.service_log_id">
<!-- 左边 --> <!-- 左边 -->
<div class="item acea-row row-top" v-if="item.send_type == 1"> <div class="item acea-row row-top" v-if="item.send_type == 1">
<div v-if="item.msn_type !== 100" class="pictrue"> <div v-if="item.msn_type !== 100" class="pictrue">
@ -684,7 +686,7 @@
</block> </block>
</block> </block>
<view class="footer_box" v-if="productId || orderId || refund_order_id"></view> <view class="footer_box" v-if="productId || orderId || refund_order_id"></view>
<div class="broadcast-details_order footer_count"> <div class="broadcast-details_order footer_count" >
<!-- 商品信息 --> <!-- 商品信息 -->
<div class="broadcast-details_box" v-if="productId && productInfo.product_id"> <div class="broadcast-details_box" v-if="productId && productInfo.product_id">
<text class="iconfont icon-guanbi" @click.stop="productId = ''"></text> <text class="iconfont icon-guanbi" @click.stop="productId = ''"></text>
@ -778,7 +780,7 @@
</view> </view>
</div> </div>
</form> </form>
<div class="banner slider-banner"> <div class="banner slider-banner" >
<swiper class="swiper-wrapper" :autoplay="autoplay" :circular="circular" :interval="interval" <swiper class="swiper-wrapper" :autoplay="autoplay" :circular="circular" :interval="interval"
:duration="duration" v-if="emojiGroup.length > 0"> :duration="duration" v-if="emojiGroup.length > 0">
<block v-for="(emojiList, index) in emojiGroup" :key="index"> <block v-for="(emojiList, index) in emojiGroup" :key="index">
@ -1603,7 +1605,7 @@
margin-top: 20rpx; margin-top: 20rpx;
width: 710rpx; width: 710rpx;
position: fixed; position: fixed;
bottom: 120rpx; bottom: 160rpx;
left: 20rpx; left: 20rpx;
.broadcast-details_box, .broadcast-details_box,
@ -1790,6 +1792,7 @@
.broadcast-details .chat .item .text { .broadcast-details .chat .item .text {
margin-left: 20rpx; margin-left: 20rpx;
} }
.broadcast-details .chat .item .text.textR { .broadcast-details .chat .item .text.textR {
@ -1945,12 +1948,12 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
margin-bottom: var(--status-bar-height);; padding-bottom: var(--status-bar-height);
} }
.broadcast-details .footerCon.on { .broadcast-details .footerCon.on {
position: relative; position: relative;
top: -300rpx; top: -250rpx;
transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important;
} }
@ -1980,6 +1983,8 @@
.broadcast-details .footerCon .slider-banner .swiper-pagination-bullet-active { .broadcast-details .footerCon .slider-banner .swiper-pagination-bullet-active {
background-color: #999; background-color: #999;
} }
.broadcast-details .recording { .broadcast-details .recording {
@ -2064,7 +2069,7 @@
display: inline-block; display: inline-block;
width: 50rpx; width: 50rpx;
height: 50rpx; height: 50rpx;
margin: 40rpx 0 0 50rpx; margin: 20rpx 0 0 40rpx;
} }
.emoji-outer { .emoji-outer {

68
pages/short_video/appSwiper/index.nvue
View File

@ -226,7 +226,8 @@
<text class="count">{{item.relevance.length}}</text> <text class="count">{{item.relevance.length}}</text>
</view> </view>
</view> </view>
<view v-if="showManage == item.author.uid || showManage " class="manage" :style="{'margin-top':item.relevance.length>0?'-115rpx':'0px'}"> <view v-if="showManage == item.author.uid || showManage " class="manage"
:style="{'margin-top':item.relevance.length>0?'-115rpx':'0px'}">
<view class="manage-gou"></view> <view class="manage-gou"></view>
<navigator hover-class="none" <navigator hover-class="none"
:url="'/pages/plantGrass/plant_release/index?id='+item.community_id+'&type=2'" :url="'/pages/plantGrass/plant_release/index?id='+item.community_id+'&type=2'"
@ -304,16 +305,16 @@
deleteAndroidHeight deleteAndroidHeight
这两个参数用于控制评论等的高度 这两个参数用于控制评论等的高度
--> -->
<douyin-scrollview ref="comments" :deleteIOSHeight="36" :deleteAndroidHeight="15" :userInfo="userInfo" <douyin-scrollview ref="comments" :deleteIOSHeight="36" :deleteAndroidHeight="15" :userInfo="userInfo"
@closeScrollview="closeScrollview" @successFul="pinlunFun"></douyin-scrollview> @closeScrollview="closeScrollview" @successFul="pinlunFun"></douyin-scrollview>
</view> </view>
</uni-popup> </uni-popup>
<!-- 他提到的宝贝弹窗 --> <!-- 他提到的宝贝弹窗 -->
<uni-popup type="bottom" ref="pinglunMentioned" > <uni-popup type="bottom" ref="pinglunMentioned">
<mentioned ref="mentioned" @close="closePopup" :list="moreList" :uid="authorUid" ></mentioned> <mentioned ref="mentioned" @close="closePopup" :list="moreList" :uid="authorUid"></mentioned>
</uni-popup> </uni-popup>
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
<view class="fixed-head"> <view class="fixed-head">
@ -361,6 +362,7 @@
import { import {
navigateBack navigateBack
} from '../../../libs/uniApi'; } from '../../../libs/uniApi';
import list from '../../../uni_modules/uview-ui/libs/config/props/list';
export default { export default {
computed: configMap({ computed: configMap({
statusBarHeight: 0, statusBarHeight: 0,
@ -718,14 +720,13 @@
// }); // });
// })' // })'
// that.isUser ? // that.isUser ?
videoList({ videoList({
page: that.page, page: that.page,
limit: that.limit, limit: that.limit,
id: this.videoID id: this.videoID
}).then(res => { }).then(res => {
console.log(res.data,'1')
that.getVideoData(res.data.list); that.getVideoData(res.data.list);
}) })
@ -898,11 +899,43 @@
// if(!this.loadVideo) return // if(!this.loadVideo) return
this.loadVideo = true this.loadVideo = true
// 这个方法主要就是用来第一次进入视频播放时用来处理 // 这个方法主要就是用来第一次进入视频播放时用来处理
deoList(this.videoID).then(async (res) => { // deoList(this.videoID).then(async (res) => {
// this.loadVideo = false
// this.userUid = res.data.uid
// this.page = 1;
// var msg = [res.data];
// for (let i = 0; i < msg.length; i++) {
// msg[i]['isMore'] = false
// msg[i]['playIng'] = false
// msg[i]['state'] = false
// msg[i]['isplay'] = false
// msg[i]['loading'] = false
// msg[i]['community_id'] = msg[i]['community_id'].toString()
// }
// this.dataList = msg;
// if (this.dataList.length !== 0) {
// this.dataList[this.k].state = 'play';
// uni.createVideoContext(this.dataList[this.k].community_id, this).play()
// }
// }).catch(err => {
// return uni.showToast({
// title: err,
// icon: 'none',
// duration: 2000
// });
// })
videoList({
page: this.page,
limit: this.limit,
id: this.videoID
}).then(async (res) => {
this.page = that.page + 1
this.loadVideo = false this.loadVideo = false
this.userUid = res.data.uid this.userUid = res.data.uid
this.page = 1;
var msg = [res.data]; var msg =res.data.list;
for (let i = 0; i < msg.length; i++) { for (let i = 0; i < msg.length; i++) {
msg[i]['isMore'] = false msg[i]['isMore'] = false
msg[i]['playIng'] = false msg[i]['playIng'] = false
@ -926,7 +959,6 @@
}) })
// this.isUser ? // this.isUser ?
// myVideoList(this.userUid, { // myVideoList(this.userUid, {
// page: this.page, // page: this.page,
@ -1115,7 +1147,6 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// .video-list{ // .video-list{
// padding: 200rpx 28.07rpx 0 28.07rpx; // padding: 200rpx 28.07rpx 0 28.07rpx;
// display: flex; // display: flex;
@ -1135,7 +1166,7 @@
/* #ifdef MP */ /* #ifdef MP */
padding-top: 200rpx; padding-top: 200rpx;
/* #endif */ /* #endif */
// background-color: #000000; // background-color: #000000;
background-color: #F5F5F5; background-color: #F5F5F5;
@ -1258,18 +1289,19 @@
left: 0; left: 0;
top: 70rpx; top: 70rpx;
height: 86rpx; height: 86rpx;
.icon-xiangzuo { .icon-xiangzuo {
margin-left: 10px; margin-left: 10px;
width: 20px; width: 20px;
height: 20px; height: 20px;
color: #ffffff; color: #ffffff;
} }
padding-right: 30rpx; padding-right: 30rpx;
} }

100
pages/short_video/nvueSwiper/index.nvue
View File

@ -435,7 +435,9 @@
}, },
watch: { watch: {
k(new_k, old_k) { k(new_k, old_k) {
const max = new_k + 2; const max = new_k + 2;
if (this.max < max) { if (this.max < max) {
this.max = max; this.max = max;
} }
@ -451,7 +453,7 @@
uni.createVideoContext(this.dataList[old_k].community_id + '' + old_k, this) uni.createVideoContext(this.dataList[old_k].community_id + '' + old_k, this)
.pause() //如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题 .pause() //如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
// console.log('已经暂停 --> 第' + (old_k + 1) + '个视频～') //提示 // console.log('已经暂停 --> 第' + (old_k + 1) + '个视频～') //提示
// #ifdef MP
this.dataList[new_k].state = 'play' this.dataList[new_k].state = 'play'
this.dataList[new_k].isplay = false this.dataList[new_k].isplay = false
this.dataList[new_k].playIng = true this.dataList[new_k].playIng = true
@ -461,7 +463,7 @@
}, 250) }, 250)
} }
this.videoShare(this.dataList[new_k]) this.videoShare(this.dataList[new_k])
// #endif
} }
}, },
onLoad(options) { onLoad(options) {
@ -504,7 +506,7 @@
} }
}) })
}, },
//#ifdef MP
videoShare(item) { videoShare(item) {
if (item && item.status == 1) { if (item && item.status == 1) {
let uid = this.uid ? this.uid : 0; let uid = this.uid ? this.uid : 0;
@ -520,7 +522,7 @@
uni.hideShareMenu() uni.hideShareMenu()
} }
}, },
// #endif
goBack: function() { goBack: function() {
uni.navigateBack(); uni.navigateBack();
}, },
@ -752,43 +754,43 @@
let that = this let that = this
// 1.这里引入后端请求数据 // 1.这里引入后端请求数据
if (that.videoshow) { // if (that.videoshow) {
deoList(this.videoID).then(res => { // deoList(this.videoID).then(res => {
that.videoData([res.data]) // that.videoData([res.data])
if (res.data.list.length < that.limit) { // if (res.data.list.length < that.limit) {
this.loadMore = false; // this.loadMore = false;
} // }
}).catch(err => { // }).catch(err => {
return uni.showToast({ // return uni.showToast({
title: err, // title: err,
icon: 'none', // icon: 'none',
duration: 2000 // duration: 2000
}); // });
}) // })
this.videoshow = false // this.videoshow = false
} else { // } else {
// videoList().then(res=>{ // videoList().then(res=>{
// that.videoData(res.data.list); // that.videoData(res.data.list);
// }) // })
// console.log(that.userUid,that.videoID) // console.log(that.userUid,that.videoID)
videoList({ videoList({
page: that.page, page: that.page,
limit: that.limit, limit: that.limit,
id: this.videoID id: this.videoID
}).then(res => { }).then(res => {
that.videoData(res.data.list) that.videoData(res.data.list)
if (res.data.list.length < that.limit) { if (res.data.list.length < that.limit) {
this.loadMore = false; this.loadMore = false;
} }
}).catch(err => { }).catch(err => {
return uni.showToast({ return uni.showToast({
title: err, title: err,
icon: 'none', icon: 'none',
duration: 2000 duration: 2000
}); });
}) })
} // }
// that.isUser ? // that.isUser ?
// myVideoList(that.userUid, { // myVideoList(that.userUid, {
@ -851,7 +853,9 @@
this.communityId = list[0]['community_id'] this.communityId = list[0]['community_id']
if (list.length == 0) return if (list.length == 0) return
let that = this; let that = this;
that.page = that.page + 1; that.page = that.page + 1;
var msg = list var msg = list
// 2.这里把视频添加到视频列表 // 2.这里把视频添加到视频列表
for (let i = 0; i < msg.length; i++) { for (let i = 0; i < msg.length; i++) {
@ -861,15 +865,21 @@
msg[i]['isplay'] = true msg[i]['isplay'] = true
msg[i]['loading'] = false msg[i]['loading'] = false
that.dataList.push(msg[i]) that.dataList.push(msg[i])
//#ifndef H5
console.log(i, that.k)
if (i == 0 && that.k == 0) { if (i == 0 && that.k == 0) {
this.dataList[0].isplay = false this.dataList[0].isplay = false
this.dataList[0].playIng = true this.dataList[0].playIng = true
this.dataList[0].state = 'play' this.dataList[0].state = 'play'
this.dataList[0].loading = false this.dataList[0].loading = false
uni.createVideoContext(that.dataList[0].community_id + '' + 0, that).play() setTimeout(() => {
uni.createVideoContext(that.dataList[0].community_id + '' + 0, that).play()
// uni.createVideoContext(this.dataList[new_k].community_id + '' + new_k, this).play()
}, 250)
} }
//#endif
} }
//#ifdef MP //#ifdef MP
if (this.k == 0) { if (this.k == 0) {
@ -1767,7 +1777,7 @@
margin-top: 27rpx; margin-top: 27rpx;
.product-item { .product-item {
display: inline-block; display: inline-block;
width: 444rpx; width: 444rpx;
height: 136rpx; height: 136rpx;
background: rgba(0, 0, 0, .55); background: rgba(0, 0, 0, .55);