Merge branch 'master' of http://git.luyuan.tk/luyuan/deming into zhy
This commit is contained in:
commit
8bf42a75dd
@ -5,7 +5,7 @@
|
||||
<view class="backes"></view>
|
||||
<image class="head" :src="item.article_pic" ></image>
|
||||
</view>
|
||||
<view class="title" v-if="!isguanzhu">{{ item.article_title }}</view>
|
||||
<view class="title" v-if="">{{ item.article_title }}</view>
|
||||
<view class="jianjie">{{ item.article_content }}</view>
|
||||
<view class="user">
|
||||
<view class="info">
|
||||
@ -50,11 +50,11 @@
|
||||
}
|
||||
.title{
|
||||
margin:0 auto;
|
||||
margin-top: 20rpx;
|
||||
margin-top: 4rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
line-height: 48rpx;
|
||||
line-height: 40rpx;
|
||||
width: 300rpx;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
@ -64,7 +64,7 @@
|
||||
}
|
||||
.jianjie{
|
||||
margin:0 auto;
|
||||
margin-top: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
line-height: 30rpx;
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="label">
|
||||
<u-tabs-swiper ref="group" :list="classifyList" name="gc_name" :is-scroll="true" active-color="#FF780F" :current="current" font-size="24" :show-bar="false" @change="tabsChange" height="88"></u-tabs-swiper>
|
||||
<u-tabs-swiper ref="group" :list="classifyList" name="gc_name" :is-scroll="true" active-color="#FF780F" :current="current" font-size="24" :show-bar="false" @change="tabsChange" height="60"></u-tabs-swiper>
|
||||
</view>
|
||||
<swiper :current="swiperCurrent" @animationfinish="animationfinish" style="height: 260rpx">
|
||||
<swiper-item class="swiper-item list" v-for="(_, i) in classifyList" :key="i">
|
||||
@ -82,7 +82,7 @@ export default {
|
||||
background-color: #ffffff;
|
||||
.top {
|
||||
padding: 0 30rpx;
|
||||
height: 90rpx;
|
||||
height:80rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -47,9 +47,9 @@ export default {
|
||||
width: 210rpx;
|
||||
overflow: hidden;
|
||||
.head{
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.title{
|
||||
display: inline-block;
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
> view:first-child{
|
||||
font-size: 26rpx;
|
||||
color: #FF3131;
|
||||
margin-bottom: 4rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
> view:last-child{
|
||||
font-size: 22rpx;
|
||||
|
||||
@ -129,8 +129,8 @@ export default {
|
||||
};
|
||||
.top {
|
||||
font-size: 30rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
height: 74rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@ -44,7 +44,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.item{
|
||||
width: 330rpx;
|
||||
height: 510rpx;
|
||||
height: 520rpx;
|
||||
margin-bottom: 26rpx;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 10rpx 10rpx 0rpx 0rpx;
|
||||
|
||||
@ -89,7 +89,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.connect{
|
||||
padding: 30rpx;
|
||||
padding:10rpx 30rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user {
|
||||
|
||||
@ -26,7 +26,7 @@ export default {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 20%;
|
||||
margin-bottom: 20rpx;
|
||||
margin-bottom:34rpx;
|
||||
>image{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<view class="title">全部优惠券</view>
|
||||
<view class="view-more" @click="toCouponPage">查看更多></view>
|
||||
</view>
|
||||
<u-tabs-swiper ref="coupon" :list="couponGroupList" name="gc_name" :is-scroll="true" active-color="#FF780F" :current="couponCurrent" font-size="24" :show-bar="false" @change="couponTabsChange" height="88" ></u-tabs-swiper>
|
||||
<u-tabs-swiper ref="coupon" :list="couponGroupList" name="gc_name" :is-scroll="true" active-color="#FF780F" :current="couponCurrent" font-size="24" :show-bar="false" @change="couponTabsChange" height="60" ></u-tabs-swiper>
|
||||
<!-- :style="{ height: swiperHeight }" -->
|
||||
<swiper :current="swiperCouponCurrent" @animationfinish="couponAnimationFinish" :style="{height: swiperHeight}">
|
||||
<swiper-item class="swiper-coupon-item" v-for="(_, i) in couponGroupList" :key="i">
|
||||
@ -97,7 +97,7 @@ export default {
|
||||
margin-bottom: 40rpx;
|
||||
.top {
|
||||
padding: 0 30rpx;
|
||||
height: 90rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<!-- 服务协议 -->
|
||||
<view class="pact" v-if="0">
|
||||
<view>
|
||||
<view></view>
|
||||
<view style="padding-bottom: 10px;"></view>
|
||||
<text>我已详细阅读并同意</text>
|
||||
<text class="pact_text" v-for="(item,index) in pact_text" :key="index" @click="pact_click(index)"> {{item.text}}
|
||||
</text>
|
||||
@ -432,6 +432,7 @@
|
||||
position: relative;
|
||||
padding-left: 40rpx;
|
||||
overflow: hidden;
|
||||
padding-bottom:10px
|
||||
// overflow: hidden; //超出的文本隐藏
|
||||
// text-overflow: ellipsis; //溢出用省略号显示
|
||||
// white-space: nowrap; //溢出不换行
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<u-icon name="arrow-down" color="#333" size="28" @click="is_comment=false"></u-icon>
|
||||
</view>
|
||||
<scroll-view class="scroll-box" scroll-y="true" @scrolltolower="scrollBottom">
|
||||
<block v-for="(item,index) in commentList" :key="index" v-if="commentList.length">
|
||||
<block v-for="(item,index) in commentList" :key="index">
|
||||
<view class="box">
|
||||
<image :src="item.member_avatar" mode="aspectFill"></image>
|
||||
<view class="info">
|
||||
@ -43,13 +43,19 @@
|
||||
{{ item.content }}
|
||||
</view>
|
||||
<view class="child-content">
|
||||
<view>
|
||||
|
||||
<view class="child-box" v-for="(child,cid) in allList[item.id]" :key="cid">
|
||||
<view class="info">
|
||||
<image :src="child.member_avatar" mode=""></image>
|
||||
<text>{{ child.member_nickname }}</text>
|
||||
<u-icon v-if="!child.is_nickanme" class="icon" name="play-right-fill" color="#666" size="10rpx"></u-icon>
|
||||
<text v-if="!child.is_nickanme">{{ child.reply_member_nickname }}</text>
|
||||
</view>
|
||||
<view class="child_content">{{ child.content }}</view>
|
||||
</view>
|
||||
<!-- <view class="more-reply" v-if="item.reply_count">展开更多回复<u-icon name="arrow-down"></u-icon></view> -->
|
||||
<view class="more-reply" v-if="item.reply_count" @click="getReplyList(item.id)">展开更多回复<u-icon name="arrow-down"></u-icon></view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="no-data" v-else>111</view>
|
||||
<!-- <view class="no-data" v-else>111</view> -->
|
||||
</scroll-view>
|
||||
<view class="editing" @click="openKeyInput">
|
||||
<input type="text" value="" :placeholder="edit_text" disabled="disabled" />
|
||||
@ -187,7 +193,7 @@
|
||||
}
|
||||
.scroll-box {
|
||||
z-index: 99;
|
||||
margin: 88rpx 0 150rpx 0;
|
||||
margin: 88rpx 0 100rpx 0;
|
||||
height: 100%;
|
||||
.box {
|
||||
display: flex;
|
||||
@ -223,6 +229,28 @@
|
||||
}
|
||||
.child-content {
|
||||
margin: 6rpx 90rpx 6rpx;
|
||||
.child-box {
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
color: #666;
|
||||
font-size: 20rpx;
|
||||
& > image {
|
||||
flex-shrink: 0;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.icon {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
}
|
||||
.child_content {
|
||||
margin: 18rpx 0 18rpx 30rpx;
|
||||
}
|
||||
}
|
||||
.more-reply {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
@ -373,7 +401,8 @@ export default {
|
||||
return {
|
||||
list:{},
|
||||
swiper_id: "",
|
||||
page: 1, //
|
||||
page: 0, // 主评论
|
||||
page_: [], // 子评论
|
||||
cart_type: false, // 显示购物车
|
||||
is_comment: false, // 显示评论
|
||||
is_focus: false, // 聚焦
|
||||
@ -385,7 +414,7 @@ export default {
|
||||
edit_text: "有爱评论，说点好听的 ~",
|
||||
edit_text_other: "有爱评论，说点好听的 ~",
|
||||
commentList: [], // 评论
|
||||
allList: {}, // 全部子评论
|
||||
allList: [], // 全部子评论
|
||||
}
|
||||
},
|
||||
onLoad(option){
|
||||
@ -419,25 +448,30 @@ export default {
|
||||
// console.log(e.detail.current);
|
||||
this.swiper_id = e.detail.current; // 储存swiper id
|
||||
},
|
||||
// 更改购物车状态
|
||||
// 更改弹框状态
|
||||
openPopup(data) {
|
||||
// console.log(data);
|
||||
this.cart_type = data.cart;
|
||||
this.is_comment = data.comment;
|
||||
if (this.is_comment) {
|
||||
this.page = 0;
|
||||
this.getComment(this.article_id,0);
|
||||
}
|
||||
},
|
||||
// 获取评论
|
||||
getComment(id,page) {
|
||||
getComment() {
|
||||
this.$u.post("article/articleCommentList",{
|
||||
article_id: id,
|
||||
page: page,
|
||||
article_id: this.article_id,
|
||||
page: this.page,
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
if (res.errCode == 0) {
|
||||
if (res.errCode == 0 && this.page == 0) {
|
||||
this.commentList = res.data;
|
||||
}
|
||||
} else if (res.errCode == 0 && this.page > 0) {
|
||||
this.commentList = this.commentList.concat(res.data);
|
||||
} else {
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
// 打开评论输入
|
||||
@ -479,6 +513,14 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
// 发现回复列表
|
||||
getReplyList(id) {
|
||||
this.page_[id] = 0;
|
||||
console.log(this.page_);
|
||||
this.$u.post("article/articleReplyList", {id: id, page: 0}).then(res => {
|
||||
this.allList[id] = res.data;
|
||||
})
|
||||
},
|
||||
// 预览图片
|
||||
viewImage(e) {
|
||||
let arr = [];
|
||||
@ -492,6 +534,8 @@ export default {
|
||||
},
|
||||
// 评论滚动到底部
|
||||
scrollBottom(e) {
|
||||
this.page++;
|
||||
this.getComment();
|
||||
console.log(e);
|
||||
},
|
||||
// 跳转到商品
|
||||
|
||||
@ -135,14 +135,14 @@
|
||||
</u-popup>
|
||||
<!-- 普通商品 tool -->
|
||||
<view class="tloos" v-if="type == 1">
|
||||
<view class="navs" @click="toOthersPage('pageC/merchant/index?id=' + storeInfo.store_id)">
|
||||
<view class="navs" @click="toOthersPage('pageC/merchant/index?id=' + storeInfo.store_id)">
|
||||
<image src="/static/image/common/18.png"></image>
|
||||
店铺
|
||||
</view>
|
||||
<view class="navs" style="margin-right:30rpx">
|
||||
<image src="/static/image/common/19.png"></image>
|
||||
客服
|
||||
</view>
|
||||
</view>
|
||||
<view class="button" style="background:rgba(253,211,96,0.6);" v-if="goodsInfo.goods_try == 1" @click="tryDress">试穿试送</view>
|
||||
<view class="button" style="background:rgba(253,211,96,1);" @click="addCart">加入购物车</view>
|
||||
<view class="button" style="background:rgba(255,120,15,1);" @click="settlementOrder">立即购买</view>
|
||||
|
||||
@ -292,6 +292,7 @@ export default {
|
||||
.info {
|
||||
width: 418rpx;
|
||||
height: 160rpx;
|
||||
line-height: 48rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -170,7 +170,7 @@ export default {
|
||||
align-items: center;
|
||||
> image {
|
||||
width: 220rpx;
|
||||
height: 170rpx;
|
||||
height: 200rpx;
|
||||
flex-shrink: 0;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
@ -184,7 +184,7 @@ export default {
|
||||
.briefing {
|
||||
font-size: 28rpx;
|
||||
color: rgba(102,102,102,1);
|
||||
line-height: 36rpx;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
62
pageD/components/GoEasyAudioPlayer/GoEasyAudioPlayer.vue
Normal file
62
pageD/components/GoEasyAudioPlayer/GoEasyAudioPlayer.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="goeasy-audio-player" @click="playAudio">
|
||||
<div class="audio-facade" :style="{width:Math.ceil(duration)*7 + 50 + 'px'}">
|
||||
<div class="audio-facade-bg" :class="{'play-icon':play}"> </div>
|
||||
<div>{{Math.ceil(duration) || 0}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const innerAudioContext = uni.createInnerAudioContext();
|
||||
export default {
|
||||
name: "GoEasyAudioPlayer",
|
||||
props : ['src', 'duration'],
|
||||
data () {
|
||||
return {
|
||||
play : false
|
||||
}
|
||||
},
|
||||
methods : {
|
||||
playAudio () {
|
||||
this.play = true;
|
||||
innerAudioContext.src = this.src;
|
||||
innerAudioContext.play();
|
||||
setTimeout(() => {
|
||||
this.play = false;
|
||||
}, this.duration*1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.goeasy-audio-player{
|
||||
margin-top: 12rpx;
|
||||
-webkit-tap-highlight-color:rgba(0,0,0,0);
|
||||
}
|
||||
.audio-facade{
|
||||
min-width: 20rpx;
|
||||
padding: 6rpx 10rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
background: #D02129;
|
||||
font-size: 24rpx;
|
||||
border-radius: 14rpx;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
}
|
||||
.audio-facade-bg{
|
||||
background: url("./images/voice.png") no-repeat center;
|
||||
background-size: 30rpx;
|
||||
width: 40rpx;
|
||||
}
|
||||
.audio-facade-bg.play-icon{
|
||||
background: url("./images/play.gif") no-repeat center;
|
||||
background-size: 30rpx;
|
||||
-moz-transform:rotate(180deg);
|
||||
-webkit-transform:rotate(180deg);
|
||||
-o-transform:rotate(180deg);
|
||||
transform:rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
BIN
pageD/components/GoEasyAudioPlayer/images/play.gif
Normal file
BIN
pageD/components/GoEasyAudioPlayer/images/play.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
pageD/components/GoEasyAudioPlayer/images/voice.png
Normal file
BIN
pageD/components/GoEasyAudioPlayer/images/voice.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 300 B |
55
pageD/components/GoEasyVideoPlayer/GoEasyVideoPlayer.vue
Normal file
55
pageD/components/GoEasyVideoPlayer/GoEasyVideoPlayer.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<video
|
||||
v-if="show"
|
||||
class="video-player"
|
||||
controls = ""
|
||||
@play="onPlayStart"
|
||||
id="videoPlayer"
|
||||
autoplay="true"
|
||||
@fullscreenchange="onVideoFullScreenChange"
|
||||
:src="url">
|
||||
</video>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "GoEasyVideoPlayer",
|
||||
data () {
|
||||
return {
|
||||
show : false,
|
||||
context: null,
|
||||
url: ''
|
||||
}
|
||||
},
|
||||
methods : {
|
||||
play (video) {
|
||||
this.show = true;
|
||||
this.url = video.url;
|
||||
this.context = uni.createVideoContext('videoPlayer');
|
||||
},
|
||||
onVideoFullScreenChange (e) {
|
||||
//当退出全屏播放时，隐藏播放器
|
||||
if(this.show && !e.detail.fullScreen){
|
||||
this.show = false;
|
||||
this.context.stop();
|
||||
}
|
||||
},
|
||||
onPlayStart () {
|
||||
//播放开始时，立即全屏
|
||||
this.context.requestFullScreen({
|
||||
direction : 0
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.video-player{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
BIN
pageD/components/GoEasyVideoPlayer/images/play.png
Normal file
BIN
pageD/components/GoEasyVideoPlayer/images/play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 560 B |
BIN
pageD/images/Arrow-Left.png
Normal file
BIN
pageD/images/Arrow-Left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 222 B |
BIN
pageD/images/Avatar-1.png
Normal file
BIN
pageD/images/Avatar-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
pageD/images/Avatar-2.png
Normal file
BIN
pageD/images/Avatar-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
pageD/images/Avatar-3.png
Normal file
BIN
pageD/images/Avatar-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
pageD/images/Avatar-4.png
Normal file
BIN
pageD/images/Avatar-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
pageD/images/GoEasyDemo-Vue-IM-Chat-gif.gif
Normal file
BIN
pageD/images/GoEasyDemo-Vue-IM-Chat-gif.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
pageD/images/Vector.png
Normal file
BIN
pageD/images/Vector.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 714 B |
BIN
pageD/images/file-content.png
Normal file
BIN
pageD/images/file-content.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 808 B |
BIN
pageD/images/file-icon.png
Normal file
BIN
pageD/images/file-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 372 B |
BIN
pageD/images/file.png
Normal file
BIN
pageD/images/file.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 463 B |
BIN
pageD/images/green-dot.png
Normal file
BIN
pageD/images/green-dot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 373 B |
BIN
pageD/images/group-icon.png
Normal file
BIN
pageD/images/group-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 502 B |
BIN
pageD/images/group.png
Normal file
BIN
pageD/images/group.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
pageD/images/im.gif
Normal file
BIN
pageD/images/im.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 758 KiB |
BIN
pageD/images/jianpan.png
Normal file
BIN
pageD/images/jianpan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 932 B |
BIN
pageD/images/loading.gif
Normal file
BIN
pageD/images/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
pageD/images/logo.png
Normal file
BIN
pageD/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
pageD/images/pending.gif
Normal file
BIN
pageD/images/pending.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 771 B |
BIN
pageD/images/play.png
Normal file
BIN
pageD/images/play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 560 B |
BIN
pageD/images/record-appearance-icon.png
Normal file
BIN
pageD/images/record-appearance-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 620 B |
BIN
pageD/images/recording-loading.gif
Normal file
BIN
pageD/images/recording-loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
pageD/images/vedio.png
Normal file
BIN
pageD/images/vedio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 472 B |
532
pageD/privateChat/privateChat.vue
Normal file
532
pageD/privateChat/privateChat.vue
Normal file
@ -0,0 +1,532 @@
|
||||
<template>
|
||||
<div class="chatInterface">
|
||||
<div class="chat-scroll-container">
|
||||
<scroll-view ref="myScroll" scroll-y="true" class="scroll-view" :scroll-into-view="contentPosition">
|
||||
<div :class="[allHistoryLoaded ? 'top gray' : 'top']" @click="loadMoreHistoryMessage">
|
||||
<span class="description">{{allHistoryLoaded ? '已经没有更多的历史消息' : '点击加载更多历史消息'}}</span>
|
||||
</div>
|
||||
<!--已经收到的消息-->
|
||||
<div v-for="(message, key) in messages || []"
|
||||
:id="'message_' + message.timestamp"
|
||||
:key="message.timestamp"
|
||||
class = "message-item"
|
||||
:class="{'self' : message.senderId == (currentUser && currentUser.uuid)}">
|
||||
<div :class="friend.online ? 'avatar' : 'avatar offline-gray'"
|
||||
v-if="message.senderId != (currentUser && currentUser.uuid)">
|
||||
<image :src="friend.avatar" ></image>
|
||||
</div>
|
||||
<div class="avatar" v-else>
|
||||
<image :src="currentUser.avatar"></image>
|
||||
</div>
|
||||
<div class="content">
|
||||
<span class="text-content" v-if="message.type =='text'">{{message.payload.text}}</span>
|
||||
<image class="image-content" v-if="message.type == 'image'" :src="message.payload.url" :data-url="message.payload.url" @click="showImageFullScreen" mode="widthFix" @load="scrollToBottom"></image>
|
||||
<div class="video-snapshot" v-if="message.type == 'video'" :data-url="message.payload.video.url" @click="playVideo">
|
||||
<image :src="message.payload.thumbnail.url" mode="aspectFit" @load="scrollToBottom"></image>
|
||||
<div class="video-play-icon"></div>
|
||||
</div>
|
||||
<GoEasyAudioPlayer v-if="message.type =='audio'" :src="message.payload.url" :duration="message.payload.duration" />
|
||||
</div>
|
||||
</div>
|
||||
<!--发送中的消息-->
|
||||
<div v-for="(message, index) in pendingMessages || []"
|
||||
:key="index"
|
||||
:id="'pendingMessage_' + index"
|
||||
class = "message-item"
|
||||
:class="{'self' : message.senderId == (currentUser && currentUser.uuid)}">
|
||||
<div :class="friend.online ? 'avatar' : 'avatar offline-gray'"
|
||||
v-if="message.senderId != (currentUser && currentUser.uuid)">
|
||||
<image :src="friend.avatar"></image>
|
||||
</div>
|
||||
<div class="avatar" v-else>
|
||||
<image :src="currentUser.avatar"></image>
|
||||
</div>
|
||||
<div class="content">
|
||||
<b class="pending"></b>
|
||||
<span class="text-content" v-if="message.type =='text'">{{message.payload.text}}</span>
|
||||
<image class="image-content" v-if="message.type == 'image'" :src="message.payload.url" mode="widthFix" @load="scrollToBottom"></image>
|
||||
<div v-if="message.type == 'video'" class="video-snapshot">
|
||||
<image :src="message.payload.thumbnail.url" mode="aspectFit" @load="scrollToBottom"></image>
|
||||
<div class="video-play-icon"></div>
|
||||
</div>
|
||||
<GoEasyAudioPlayer v-if="message.type =='audio'" :src="message.payload.url" :duration="message.payload.duration" />
|
||||
</div>
|
||||
</div>
|
||||
</scroll-view>
|
||||
</div>
|
||||
<div class="action-box" v-if="!video.visible">
|
||||
<div class="action-top">
|
||||
<div :class="[audio.visible ? 'record-icon record-open':'record-icon']" @click="switchAudioKeyboard"></div>
|
||||
<div class="record-input" @longpress="onRecordStart" @touchend="onRecordEnd" v-if="audio.visible" >{{audio.recording ? '松开发送' : '按住录音'}}</div>
|
||||
<div class="message-input" v-else>
|
||||
<input type="text" placeholder="发送消息" v-model="content">
|
||||
</div>
|
||||
<div class="file-icon img-video" @click="sendImage"></div>
|
||||
<div class="file-icon" @click="sendVideo"></div>
|
||||
<span class="send-message-btn" @click="sendMessage">发送</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-loading" v-if="audio.recording"></div>
|
||||
<video style="width:100%;height: 100%" :src="video.url" v-if="video.visible" id="videoPlayer" autoplay="true" @fullscreenchange="onVideoFullScreenChange" @play="onVideoPlayStart"></video>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GoEasyAudioPlayer from "../components/GoEasyAudioPlayer/GoEasyAudioPlayer";
|
||||
const recorderManager = uni.getRecorderManager();
|
||||
export default {
|
||||
name: "privateChat",
|
||||
components : {
|
||||
GoEasyAudioPlayer,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//聊天文本框
|
||||
content: '',
|
||||
friend: null,
|
||||
currentUser: null,
|
||||
//已经接收到的消息
|
||||
messages: [],
|
||||
//正在发送中的消息
|
||||
pendingMessages : [],
|
||||
//已经加载完所有历史消息
|
||||
allHistoryLoaded: false,
|
||||
|
||||
contentPosition : '',
|
||||
|
||||
audio : {
|
||||
//语音录音中
|
||||
recording : false,
|
||||
//录音按钮展示
|
||||
visible : false
|
||||
},
|
||||
video : {
|
||||
visible : false,
|
||||
url : '',
|
||||
context : null
|
||||
}
|
||||
}
|
||||
},
|
||||
watch : {
|
||||
//每当新增了发送中的消息，都滑动到底部
|
||||
pendingMessages(){
|
||||
this.scrollToBottom()
|
||||
}
|
||||
},
|
||||
onReady () {
|
||||
this.video.context = uni.createVideoContext('videoPlayer');
|
||||
},
|
||||
onLoad(options) {
|
||||
if(!this.imService.currentUser){
|
||||
uni.navigateTo({
|
||||
url : '../login/login'
|
||||
});
|
||||
}
|
||||
//对话数据
|
||||
this.friend = JSON.parse(options.id);
|
||||
this.currentUser = this.imService.currentUser;
|
||||
let privateMessages = this.imService.getPrivateMessages(this.friend.uuid);
|
||||
this.messages = privateMessages.sentMessages;
|
||||
this.pendingMessages = privateMessages.pendingMessages;
|
||||
|
||||
uni.setNavigationBarTitle({
|
||||
title : this.friend.name
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.setNavigationBarColor({
|
||||
backgroundColor : '#D02129',
|
||||
frontColor : '#ffffff'
|
||||
});
|
||||
}, 10);
|
||||
|
||||
this.initialListeners();
|
||||
|
||||
//每次进入聊天页面，总是滚动到底部
|
||||
this.scrollToBottom()
|
||||
|
||||
},
|
||||
onUnload() {
|
||||
//退出聊天页面之前，清空页面传入的监听器
|
||||
this.imService.onNewPrivateMessageReceive = (friendId, message)=> {};
|
||||
this.imService.onPrivateHistoryLoad = (friendId, messages) =>{};
|
||||
//将未读消息数清零
|
||||
this.imService.resetFriendUnReadMessage(this.friend);
|
||||
},
|
||||
methods: {
|
||||
initialListeners () {
|
||||
//传入监听器，收到一条私聊消息总是滚到到页面底部
|
||||
this.imService.onNewPrivateMessageReceive = (friendId, message)=> {
|
||||
if (friendId == this.friend.uuid) {
|
||||
//收到新消息，是滚动到最底部
|
||||
this.scrollToBottom()
|
||||
}
|
||||
};
|
||||
|
||||
//传入监听器，完成一次私聊历史加载时，如果加载结果为空，显示没有更多消息
|
||||
this.imService.onPrivateHistoryLoad = (friendId, messages) =>{
|
||||
if (messages.length == 0) {
|
||||
//灰色，就不能点击了
|
||||
this.allHistoryLoaded = true
|
||||
}
|
||||
};
|
||||
// 录音监听器
|
||||
this.initRecorderListeners();
|
||||
},
|
||||
initRecorderListeners(){
|
||||
var self = this;
|
||||
// 监听录音开始
|
||||
recorderManager.onStart(function(){
|
||||
self.audio.recording = true;
|
||||
});
|
||||
|
||||
//录音结束后，发送
|
||||
recorderManager.onStop(function(res){
|
||||
self.audio.recording = false;
|
||||
self.imService.sendPrivateAudioMessage(self.friend.uuid, res)
|
||||
});
|
||||
|
||||
// 监听录音报错
|
||||
recorderManager.onError(function(res){
|
||||
console.log("录音报错：",res);
|
||||
})
|
||||
},
|
||||
sendMessage() {//发送消息
|
||||
if (this.content.trim() != '') {
|
||||
this.imService.sendPrivateTextMessage(this.friend.uuid, this.content);
|
||||
}
|
||||
this.content = "";
|
||||
},
|
||||
loadMoreHistoryMessage() {//历史消息
|
||||
let lastMessageTimeStamp = Date.now();
|
||||
let lastMessage = this.messages[0];
|
||||
if (lastMessage) {
|
||||
lastMessageTimeStamp = lastMessage.timestamp;
|
||||
}
|
||||
this.imService.loadPrivateHistoryMessage(this.friend.uuid, lastMessageTimeStamp);
|
||||
},
|
||||
onRecordStart () {
|
||||
try{
|
||||
recorderManager.start();
|
||||
}catch(e){
|
||||
console.log("e:",e);
|
||||
uni.showModal({
|
||||
title: '录音错误',
|
||||
content : '请在app和小程序端体验录音，Uni官方明确H5不支持getRecorderManager, 详情查看Uni官方文档'
|
||||
});
|
||||
}
|
||||
},
|
||||
onRecordEnd () {
|
||||
try{
|
||||
recorderManager.stop();
|
||||
}catch(e){
|
||||
console.log("e:",e);
|
||||
uni.showModal({
|
||||
title: '录音错误',
|
||||
content : '请在app和小程序端体验录音，Uni官方明确H5不支持getRecorderManager, 详情查看Uni官方文档'
|
||||
});
|
||||
}
|
||||
},
|
||||
sendVideo () {//发送文件
|
||||
uni.chooseVideo({
|
||||
success : (res) => {
|
||||
console.log(res)
|
||||
this.imService.sendPrivateVideoMessage(this.friend.uuid, res)
|
||||
}
|
||||
})
|
||||
},
|
||||
sendImage() {
|
||||
uni.chooseImage({
|
||||
count :1,
|
||||
success :(res) => {
|
||||
console.log(res)
|
||||
this.imService.sendPrivateImageMessage(this.friend.uuid,res);
|
||||
}
|
||||
})
|
||||
},
|
||||
showImageFullScreen (e) {
|
||||
var imagesUrl = [e.currentTarget.dataset.url];
|
||||
uni.previewImage({
|
||||
urls: imagesUrl
|
||||
});
|
||||
},
|
||||
//语音录制按钮和键盘输入的切换
|
||||
switchAudioKeyboard() {
|
||||
this.audio.visible = !this.audio.visible;
|
||||
},
|
||||
playVideo (e) {
|
||||
this.video.visible = true;
|
||||
this.video.url =e.currentTarget.dataset.url;
|
||||
},
|
||||
onVideoPlayStart () {
|
||||
this.video.context.requestFullScreen({
|
||||
direction : 0
|
||||
});
|
||||
},
|
||||
onVideoFullScreenChange (e) {
|
||||
//当退出全屏播放时，隐藏播放器
|
||||
if(this.video.visible && !e.detail.fullScreen){
|
||||
this.video.visible = false;
|
||||
this.video.context.stop();
|
||||
}
|
||||
},
|
||||
scrollToBottom () {
|
||||
this.$nextTick(() => {
|
||||
if(this.messages && this.messages.length !=0){
|
||||
this.contentPosition = 'message_' + (this.messages[this.messages.length-1].timestamp || '');
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style >
|
||||
page {
|
||||
height: 100%;;
|
||||
}
|
||||
uni-page-body, uni-page-refresh {
|
||||
height: 100%;;
|
||||
}
|
||||
.chatInterface{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.chatInterface .chat-scroll-container{
|
||||
overflow: hidden;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
.chatInterface .scroll-view{
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.chatInterface .top{
|
||||
font-size: 24rpx;
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
color: blue;
|
||||
}
|
||||
.chatInterface .top .description{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.chatInterface .message-item{
|
||||
max-height: 400rpx;
|
||||
margin-top: 40rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chatInterface .avatar{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right:20rpx ;
|
||||
}
|
||||
.chatInterface .message-item.self .avatar{
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.chatInterface .message-item .avatar image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chatInterface .content{
|
||||
font-size: 34rpx;
|
||||
line-height: 44rpx;
|
||||
max-height: 400rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: right;
|
||||
}
|
||||
.chatInterface .content .image-content{
|
||||
padding: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
.chatInterface .content .text-content{
|
||||
padding: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
.chatInterface .content .pending{
|
||||
background: url("../images/pending.gif") no-repeat center;
|
||||
background-size: 30rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chatInterface .action-box{
|
||||
display: flex;
|
||||
height: 80rpx;
|
||||
padding-top: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
backdrop-filter: blur(0.27rpx);
|
||||
width: 100%;
|
||||
}
|
||||
.chatInterface .action-top{
|
||||
display: flex;
|
||||
padding-top: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
backdrop-filter: blur(0.27rem);
|
||||
height: 80rpx;
|
||||
width: 100%;
|
||||
}
|
||||
.chatInterface .record-icon{
|
||||
font-size: 32rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
background: url("../images/record-appearance-icon.png") no-repeat center;
|
||||
background-size: 50%;
|
||||
-webkit-tap-highlight-color:rgba(0,0,0,0);
|
||||
}
|
||||
.chatInterface .action-top .file-icon{
|
||||
background: url("../images/vedio.png") no-repeat center;
|
||||
background-size: 70%;
|
||||
color: #9D9D9D;
|
||||
position: relative;
|
||||
width:80rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
-webkit-tap-highlight-color:rgba(0,0,0,0);
|
||||
}
|
||||
.chatInterface .record-icon.record-open{
|
||||
background: url("../images/jianpan.png") no-repeat center;
|
||||
background-size: 70%;
|
||||
-webkit-tap-highlight-color:rgba(0,0,0,0);
|
||||
}
|
||||
.chatInterface .action-top .img-video{
|
||||
background: url("../images/file.png") no-repeat center;
|
||||
background-size: 74%;
|
||||
}
|
||||
.chatInterface .record-input{
|
||||
width: 480rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
background: #cccccc;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
.chatInterface .message-input{
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
.chatInterface .message-input input{
|
||||
width: 440rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
padding-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.chatInterface .send-message-btn{
|
||||
font-size: 32rpx;
|
||||
width: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
.record-loading{
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left: 50%;
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
margin: -150rpx -150rpx;
|
||||
background: #262628;
|
||||
background: url("../images/recording-loading.gif") no-repeat center;
|
||||
background-size: 100%;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
.chatInterface .img-layer{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #000000;
|
||||
z-index: 9999;
|
||||
padding: 6rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.chatInterface .img-layer uni-image {
|
||||
height: 100%!important;
|
||||
}
|
||||
.chatInterface .img-layer {
|
||||
height: 100%!important;
|
||||
width: 100%!important;
|
||||
}
|
||||
|
||||
|
||||
.chatInterface .content .file-content .file-info{
|
||||
height: 0.5rem;
|
||||
width: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 0.1rem;
|
||||
}
|
||||
.chatInterface .content .file-content .file-info .title{
|
||||
height: 0.3rem;
|
||||
line-height: 0.3rem;
|
||||
overflow: hidden;
|
||||
font-size: 0.16rem;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
color: #262628;
|
||||
text-align: left;
|
||||
}
|
||||
.chatInterface .content .file-content .file-info .size{
|
||||
font-size: 0.14rem;
|
||||
height: 0.2rem;
|
||||
line-height: 0.2rem;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
color: #999999;
|
||||
text-align: left;
|
||||
}
|
||||
.chatInterface .video-snapshot{
|
||||
position: relative;
|
||||
height: 300rpx;
|
||||
max-width: 400rpx;
|
||||
background: #000000;
|
||||
}
|
||||
.chatInterface .video-snapshot image{
|
||||
max-height: 300rpx;
|
||||
max-width: 400rpx;
|
||||
}
|
||||
.chatInterface .video-snapshot video{
|
||||
max-height: 300rpx;
|
||||
max-width: 400rpx;
|
||||
}
|
||||
|
||||
.video-snapshot .video-play-icon{
|
||||
position: absolute;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
background:url("../images/play.png") no-repeat center;
|
||||
background-size: 100%;
|
||||
top:50%;
|
||||
left: 50%;
|
||||
margin:-20rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -58,5 +58,6 @@ export default {
|
||||
min-height: calc(100vh - var(--window-top));
|
||||
background: #ECECEC;
|
||||
padding: 20rpx 35rpx 0;
|
||||
line-height: 45rpx;
|
||||
}
|
||||
</style>
|
||||
11
pages.json
11
pages.json
@ -420,6 +420,15 @@
|
||||
{
|
||||
"root": "pageD",
|
||||
"pages": [
|
||||
{
|
||||
"path": "privateChat/privateChat",
|
||||
"style": {
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"app-plus": {
|
||||
"titleNView": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "logistics/logistics",
|
||||
"style": {
|
||||
@ -1045,7 +1054,7 @@
|
||||
],
|
||||
"tabBar": {
|
||||
"color": "#999999",
|
||||
"selectedColor": "#FFC023",
|
||||
"selectedColor": "#FF780F",
|
||||
"borderStyle": "white",
|
||||
"backgroundColor": "#ffffff",
|
||||
"list": [{
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<!-- 消息通知 -->
|
||||
<view class="backes">
|
||||
<view id="information">
|
||||
<view class="information_dl" v-for="(item,index) in information_dl" :key="index" >
|
||||
<view class="information_dl" v-for="(item,index) in information_dl" :key="index" @click="gochat(item)" >
|
||||
<view>
|
||||
<image :src="item.avatar"></image>
|
||||
</view>
|
||||
@ -117,6 +117,15 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
gochat(id){
|
||||
this.$u.route({
|
||||
url:"/pageD/privateChat/privateChat",
|
||||
params:{
|
||||
id:JSON.stringify(id)
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
onFriendListChange(onlineFriends) {
|
||||
//todo:比较垃圾的处理方式，因为Uniapp的基于MAP的双向绑定在H5端不稳定，H5端偶尔会抽风
|
||||
// 下边这一行删掉，有时候页面可以更新，有时候不行，大家有优雅的方式，也欢迎跟我们沟通
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
<view class="title">
|
||||
<view class="title-text">我的订单</view>
|
||||
<view class="more" @click="toOtherPage('/order/Index')">
|
||||
<view>查看全部订单</view>
|
||||
<view class="title-text">查看全部订单</view>
|
||||
<image src="/static/image/mine/21.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
@ -355,7 +355,7 @@ export default {
|
||||
}
|
||||
.tool {
|
||||
@include common-mine(
|
||||
$content-padding-top: 8rpx,
|
||||
$content-padding-top: 24rpx,
|
||||
$content-padding-bottom: 25rpx,
|
||||
$image-height: 71rpx,
|
||||
$image-width: 71rpx
|
||||
@ -368,7 +368,7 @@ export default {
|
||||
}
|
||||
.more-tool {
|
||||
@include common-mine(
|
||||
$content-padding-top: 8rpx,
|
||||
$content-padding-top: 24rpx,
|
||||
$content-padding-bottom: 48rpx,
|
||||
$image-height: 71rpx,
|
||||
$image-width: 71rpx
|
||||
|
||||
@ -276,7 +276,7 @@
|
||||
}
|
||||
|
||||
.chengnuo {
|
||||
padding: 30rpx;
|
||||
padding:20rpx 30rpx;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -302,7 +302,7 @@
|
||||
.fenlei {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 30rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user