465 lines
9.1 KiB
Vue
Executable File
465 lines
9.1 KiB
Vue
Executable File
<style>
|
||
.page {
|
||
background-color: #000000;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.btn-cancel {
|
||
background-color: #1d1d1e;
|
||
border-color: #3a3a3d;
|
||
}
|
||
.btn-cancel-touched {
|
||
background-color: #515156;
|
||
border-color: #2b2b2f;
|
||
}
|
||
.all-box {
|
||
display: flex;
|
||
flex-direction: row;
|
||
/* justify-content: space-around; */
|
||
height: 280rpx;
|
||
}
|
||
.share-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 60rpx;
|
||
margin-left: 20rpx;
|
||
margin-right: 20rpx;
|
||
width: 120rpx;
|
||
}
|
||
.icon-wrapper {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
background-color: #343437;
|
||
border-radius: 100px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
opacity: 0.8;
|
||
}
|
||
.icon-image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
.icon-tag-text {
|
||
color: #ffffff;
|
||
width: 120rpx;
|
||
font-size: 14px;
|
||
margin-top: 10rpx;
|
||
lines: 1;
|
||
text-overflow: ellipsis;
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
|
||
<template>
|
||
<view class="page">
|
||
<view class="all-box">
|
||
<!-- <view
|
||
class="share-item"
|
||
@click="downloadVlog()"
|
||
>
|
||
<view
|
||
class="icon-wrapper"
|
||
style="align-self: center"
|
||
>
|
||
<image
|
||
class="icon-image"
|
||
src="/static/images/link.png"
|
||
style="align-self: center"
|
||
></image>
|
||
</view>
|
||
<text
|
||
class="icon-tag-text"
|
||
style="align-self: center"
|
||
>
|
||
复制口令
|
||
</text>
|
||
</view> -->
|
||
|
||
<view
|
||
v-if="userId == ''"
|
||
class="share-item"
|
||
@click="copyLink()"
|
||
>
|
||
<view
|
||
class="icon-wrapper"
|
||
style="align-self: center"
|
||
>
|
||
<image
|
||
class="icon-image"
|
||
src="/static/images/link.png"
|
||
style="align-self: center"
|
||
></image>
|
||
</view>
|
||
<text
|
||
class="icon-tag-text"
|
||
style="align-self: center"
|
||
>
|
||
复制链接
|
||
</text>
|
||
</view>
|
||
<!-- 会话列表 storage.getHasLogin() -->
|
||
<scroll-view
|
||
v-if="userId != ''"
|
||
:scroll-x="true"
|
||
:show-scrollbar="false"
|
||
class="all-box"
|
||
>
|
||
<view
|
||
class="share-item"
|
||
@click="copyLink()"
|
||
>
|
||
<view
|
||
class="icon-wrapper"
|
||
style="align-self: center"
|
||
>
|
||
<image
|
||
class="icon-image"
|
||
src="/static/images/link.png"
|
||
style="align-self: center"
|
||
></image>
|
||
</view>
|
||
<text
|
||
class="icon-tag-text"
|
||
style="align-self: center"
|
||
>
|
||
复制链接
|
||
</text>
|
||
</view>
|
||
<view
|
||
v-for="(i, index) in converList"
|
||
:key="index"
|
||
class="share-item"
|
||
@click="toIm(i)"
|
||
>
|
||
<view
|
||
class="icon-wrapper"
|
||
style="align-self: center"
|
||
>
|
||
<image
|
||
v-if="i.type == 'C2C'"
|
||
class="icon-image"
|
||
:src="i.userProfile.avatar || ''"
|
||
style="align-self: center"
|
||
></image>
|
||
<image
|
||
v-if="i.type == 'GROUP'"
|
||
class="icon-image"
|
||
:src="i.groupProfile.avatar || ''"
|
||
style="align-self: center"
|
||
></image>
|
||
</view>
|
||
<text
|
||
v-if="i.type == 'C2C'"
|
||
class="icon-tag-text"
|
||
style="align-self: center"
|
||
>
|
||
{{ i.userProfile.nick || '' }}
|
||
</text>
|
||
<text
|
||
v-if="i.type == 'GROUP'"
|
||
class="icon-tag-text"
|
||
style="align-self: center"
|
||
>
|
||
{{ i.groupProfile.name || '' }}
|
||
</text>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- <view
|
||
class="share-item"
|
||
@click="gotoQRCode()"
|
||
>
|
||
<view
|
||
class="icon-wrapper"
|
||
style="align-self: center"
|
||
>
|
||
<image
|
||
class="icon-image"
|
||
src="/static/images/icon-qrcode.png"
|
||
style="align-self: center"
|
||
></image>
|
||
</view>
|
||
<text
|
||
class="icon-tag-text"
|
||
style="align-self: center"
|
||
>
|
||
二维码
|
||
</text>
|
||
</view> -->
|
||
|
||
<!-- 判断只有我自己才能显示这个按钮 -->
|
||
<!-- <view
|
||
v-if="thisVlogerId == userId && isPrivate == 0"
|
||
class="share-item"
|
||
@click="changeVlogToPrivate()"
|
||
>
|
||
<view
|
||
class="icon-wrapper"
|
||
style="align-self: center"
|
||
>
|
||
<image
|
||
class="icon-image"
|
||
src="/static/images/icon-private.png"
|
||
style="align-self: center"
|
||
></image>
|
||
</view>
|
||
<text
|
||
class="icon-tag-text"
|
||
style="align-self: center"
|
||
>
|
||
转为私密
|
||
</text>
|
||
</view> -->
|
||
|
||
<!-- <view
|
||
v-if="thisVlogerId == userId && isPrivate == 1"
|
||
class="share-item"
|
||
@click="changeVlogToPublic()"
|
||
>
|
||
<view
|
||
class="icon-wrapper"
|
||
style="align-self: center"
|
||
>
|
||
<image
|
||
class="icon-image"
|
||
src="/static/images/icon-private.png"
|
||
style="align-self: center"
|
||
></image>
|
||
</view>
|
||
<text
|
||
class="icon-tag-text"
|
||
style="align-self: center"
|
||
>
|
||
转为公开
|
||
</text>
|
||
</view> -->
|
||
</view>
|
||
|
||
<view
|
||
class=""
|
||
style="padding: 0 20rpx"
|
||
>
|
||
<!-- :class="{'btn-preplay':!preplayTouched, 'btn-preplay-touched': preplayTouched}"
|
||
@click="preview"
|
||
@touchstart="touchstartPreplay"
|
||
@touchend="touchendPreplay" -->
|
||
|
||
<view
|
||
:class="{ 'btn-cancel': !cancelTouched, 'btn-cancel-touched': cancelTouched }"
|
||
@click="close"
|
||
@touchstart="touchstartCancel"
|
||
@touchend="touchendCancel"
|
||
style="height: 50px; display: flex; flex-direction: column; justify-content: center; border-width: 1rpx; border-radius: 10px"
|
||
>
|
||
<text
|
||
class=""
|
||
style="color: #ffffff; font-size: 16px; align-self: center; align-self: center"
|
||
>
|
||
取消
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import storage from '@/utils/storage.js'; //缓存
|
||
import config from '@/config/config.js';
|
||
import { vlogChangeToPublic, vlogChangeToPrivate } from '@/api/vlog';
|
||
import { dateFormat, graceNumber, getDateBeforeNow } from '@/utils/tools.js';
|
||
import { conversationData, sendVlogCustomMsg } from '@/utils/handleim.js';
|
||
import popup from '../uni-popup/popup.js';
|
||
export default {
|
||
name: 'UniPopupShare',
|
||
mixins: [popup],
|
||
emits: ['select'],
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
beforeClose: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
thisVlogerId: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
thisVlogId: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
vlogUrl: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
isPrivate: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
vlogItem: {}
|
||
},
|
||
data() {
|
||
return {
|
||
userId: '',
|
||
cancelTouched: false,
|
||
converList: [],
|
||
flag: true
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
console.log('挂载');
|
||
var info = storage.getVlogUserInfo();
|
||
if (info != null) {
|
||
console.log('登录了');
|
||
this.userId = info.id;
|
||
this.conversationList();
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取会话列表
|
||
async conversationList() {
|
||
var data = await conversationData();
|
||
console.log(data);
|
||
this.converList = data.data.conversationList;
|
||
console.log(this.converList);
|
||
},
|
||
toIm(i) {
|
||
if (this.flag) {
|
||
this.flag = false;
|
||
sendVlogCustomMsg(i, this.vlogItem)
|
||
.then((res) => {
|
||
console.log('发送成功，返回结果：', res);
|
||
uni.showToast({
|
||
icon: 'success',
|
||
title: '分享成功',
|
||
duration: 3000
|
||
});
|
||
var timer = setTimeout(() => {
|
||
clearTimeout(timer);
|
||
this.flag = true;
|
||
}, 3000);
|
||
})
|
||
.catch((err) => {
|
||
this.flag = true;
|
||
console.error('发送失败了', err);
|
||
// 这里可以做失败之后的处理，比如弹个错误提示
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: '云服务异常'
|
||
});
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '点太快了'
|
||
});
|
||
}
|
||
},
|
||
/**
|
||
* 选择内容
|
||
*/
|
||
select(item, index) {
|
||
this.$emit('select', {
|
||
item,
|
||
index
|
||
});
|
||
this.close();
|
||
},
|
||
/**
|
||
* 关闭窗口
|
||
*/
|
||
close() {
|
||
if (this.beforeClose) return;
|
||
this.popup.close();
|
||
uni.showTabBar({
|
||
animation: true
|
||
});
|
||
},
|
||
|
||
touchstartCancel() {
|
||
this.cancelTouched = true;
|
||
},
|
||
|
||
touchendCancel() {
|
||
this.cancelTouched = false;
|
||
},
|
||
|
||
downloadVlog() {
|
||
console.log('downloadVlog...thisVlogId = ' + this.vlogUrl);
|
||
uni.showLoading();
|
||
uni.downloadFile({
|
||
url: this.vlogUrl,
|
||
success: (res) => {
|
||
if (res.statusCode === 200) {
|
||
console.log('下载成功');
|
||
uni.saveVideoToPhotosAlbum({
|
||
filePath: res.tempFilePath,
|
||
success: function () {
|
||
console.log('save success');
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '保存成功~！',
|
||
duration: 5000
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
copyLink() {
|
||
// this.thisVlogId 视频id
|
||
var url = config.shareLink + '/pages/me/vlog?vlogId=' + this.thisVlogId;
|
||
uni.setClipboardData({
|
||
data: url,
|
||
success: () => {
|
||
uni.showToast({
|
||
//提示
|
||
title: '复制成功'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
gotoQRCode() {
|
||
uni.navigateTo({
|
||
url: '/pages/qrcode/qrcode?vlogId=' + this.thisVlogId
|
||
});
|
||
},
|
||
|
||
async changeVlogToPublic() {
|
||
var vlogId = this.thisVlogId;
|
||
var me = this;
|
||
var info = storage.getVlogUserInfo();
|
||
var userId = info.id;
|
||
var result = await vlogChangeToPublic(userId, vlogId);
|
||
if (result.data.status == 200) {
|
||
this.isPrivate = 0;
|
||
uni.showToast({
|
||
title: '设置完毕~'
|
||
});
|
||
}
|
||
},
|
||
|
||
async changeVlogToPrivate() {
|
||
var vlogId = this.thisVlogId;
|
||
var me = this;
|
||
var info = storage.getVlogUserInfo();
|
||
var userId = info.id;
|
||
var result = await vlogChangeToPrivate(userId, vlogId);
|
||
if (result.data.status == 200) {
|
||
this.isPrivate = 1;
|
||
uni.showToast({
|
||
title: '设置完毕~'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|