1.创建子组件wxpup.vue
<template>
<view class="wxpup">
<view class="shade" v-show="showPup" @click="hidePop">
<view class="pop" :style="popStyle" :class="{
'show':showClass}">
<view v-for="(item,index) in navList" :key="index" @click="change(item)">
<image src="../../static/img/25.png" mode="" v-if="item.text == '删除'"></image>
<image src="../../static/img/51.png" mode="" v-if="item.text == '撤回'"></image>
<image src="../../static/img/50.png" mode="" v-if="item.text == '转发'"></image>
<image src="../../static/img/23.png" mode="" v-if="item.text == '预览'"></image>
<image src="../../static/img/24.png" mode="" v-if="item.text == '下载'"></image>
<image src="../../static/img/47.png" mode="" v-if="item.text == '收藏'"></image>
<image src="../../static/img/25.png" mode="" v-if="item.text == '取消收藏'"></image>
<text>{
{item.text}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'wxpup',
props: {
wxPupData: {
type: Object,
required: true,
default: 1
},
},
watch:{
wxPupData(e,oldVal){
let [touches, style, index, ] = [e.touches[0], "", e.currentTarget.dataset.index];
/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
if (touches.clientY > (this.winSize.height / 2)) {
style = `bottom:${
this.winSize.height-touches.clientY}px;`;
} else {
style = `top:${
touches.clientY}px;`;
}
if (touches.clientX > (this.winSize.witdh / 2)) {
style += `right:32rpx`;
} else {
style += `left:32rpx`;
}
// style：计算出弹窗在页面显示的位置
this.popStyle = style;
/*
* 计算时长，m<2：2分钟以内可以撤回，用户id用来判断只能撤回我自己发送的内容
* type：0删除，1撤回，2转发，3预览，4下载，5收藏，6取消收藏，
* navList：可根据数据信息，自行组合navList需要显示的内容。
*/
let timestamp = Date.parse(new Date());
let start = e.item.createtime * 1000; //2017-4-10 10:00
let end = timestamp; //2017-5-10 10:00
let utc = end - start;
let m = this.$toFixed(utc / (60 * 1000), 0)
if(e.item.user_id == e.my_user_id && m<2){
this.navList = [{
text: '预览',type:3},{
text: '删除',type:0}, {
text: '撤回',type:1}]
}else{
this.navList = [{
text: '预览',type:3},{
text: '删除',type:0}]
}
// 显示弹窗
this.showPup = true;
this.$nextTick(() => {
setTimeout(() => {
this.showClass = true;
}, 10);
});
},
},
data() {
return {
navList:[],
popStyle: "",
showPup: false,
showClass: false,
winSize: {
},
}
},
mounted() {
this.getWindowSize();
// #ifdef H5
document.onLong = function(e) {
var e = e || window.event;
e.preventDefault();
};
// #endif
},
methods: {
/*
* change(item)
* item.type：0删除，1撤回，2转发，3预览，4下载，5收藏，6取消收藏，
* item.msg_type：消息类型video,text,image,
* change方法中，根据type操作类型和msg_type消息类型，来判断需要进行的具体操作。
*/
change(item){
console.log(item.type)
console.log(item.msg_type)
// 根据type和msg_type来判断具体需要调用下方哪个方法。
},
// 图片操作
changeImg(type){
if(type == 3){
// 图片预览
let arr = [];
arr.push(this.$imgUrl+this.wxPupData.item.content)
uni.previewImage({
urls: arr,
});
}else if(type == 4){
// 图片下载
// #ifdef H5
location.href = this.$imgUrl+this.wxPupData.item.content;
// #endif
// #ifdef APP-PLUS
this.$saveImageToPhotosAlbum(this.$imgUrl+this.wxPupData.item.content)
// #endif
}
},
// 文件视频操作
changeFile(type) {
if(type == 4){
// 下载
// #ifdef H5
location.href = this.$imgUrl + this.wxPupData.item.content;
// #endif
// #ifdef APP-PLUS
uni.showLoading({
title: '正在下载'
});
var url = this.$imgUrl + this.wxPupData.item.content;
let dtask = plus.downloader.createDownload(url, {
//本地路径开头使用file://，跟上手机文件本地目录storage/emulated/0，这时用户文件管理器能看到的了，之后创建连信作为文件夹，后缀是用于文件命名和格式修改，大家可以使用变量。
filename: "file://storage/emulated/0/我的APP/" + this.wxPupData.item.file_name //利用保存路径，实现下载文件的重命名
},(d, status)=> {
//d为下载的文件对象
if (status == 200) {
uni.hideLoading();
uni.showToast({
icon: 'none',
mask: true,
title: '已保存到文件夹：/我的APP/' + this.wxPupData.item.file_name, //保存路径
duration: 3000,
});
//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
setTimeout(()=>{
plus.runtime.openFile(d.filename); //选择软件打开文件
},1500)
} else {
//下载失败
uni.hideLoading();
plus.downloader.clear(); //清除下载任务
uni.showToast({
icon:'none',
mask:true,
title: '下载失败，请稍后重试',
});
}
})
dtask.start();
// #endif
}
},
// 撤回
msgRevoke(){
this.$http.post("/api/***",{
id:this.wxPupData.item.id,
}).then(res=>{
if(res.code == 1){
this.$emit('getNewList')
}
})
},
// 删除
msgDelete(){
this.$http.post("/api/***",{
id:this.wxPupData.item.id,
session_id:this.wxPupData.item.session_id,
}).then(res=>{
if(res.code == 1){
this.$emit('getNewList')
}
})
},
// 收藏
msgFavAdd(){
this.$http.post("/api/***",{
msg_id:this.wxPupData.item.id,
}).then(res=>{
if(res.code == 1){
uni.showToast({
icon:'none',
title: '收藏成功',
});
this.$emit('getNewList');
}
})
},
// 取消收藏
msgFavCancel(){
this.$http.post("/api/***",{
msg_id:this.wxPupData.item.msg_id,
}).then(res=>{
if(res.code == 1){
uni.showToast({
icon:'none',
title: '已取消',
});
this.$emit('getNewList');
}
})
},
/* 获取窗口尺寸 */
getWindowSize() {
uni.getSystemInfo({
success: (res) => {
this.winSize = {
"witdh": res.windowWidth,
"height": res.windowHeight
}
}
})
},
/* 隐藏弹窗 */
hidePop() {
this.showClass = false;
this.showPup = false;
},
}
}
</script>
<style lang="scss" scoped>
.wxpup {
/* 遮罩 */
.shade {
position: fixed;
z-index: 100;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-touch-callout: none;
.pop {
position: fixed;
z-index: 101;
color: #333;
background: #596084;
border-radius: 12rpx;
transition: transform 0.15s ease-in-out 0s;
user-select: none;
-webkit-touch-callout: none;
transform: scale(0, 0);
display: flex;
align-items: center;
&.show {
transform: scale(1, 1);
}
uni-view{
width: 120rpx;
height: 140rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
uni-image{
width: 36rpx;
height: 36rpx;
display: block;
margin:0 auto 8rpx;
}
uni-text{
display: block;
font-size: 26rpx;
color: #fff;
}
}
}
}
}
</style>
2.父组件
<template>
<view class="list">
<view class="item" v-for="(item,index) in list" :key="index">
<!-- 具体的消息内容，自行设计页面 -->
<!-- longpress：长按操作 -->
<view class="text" @longpress="onLongPress($event,item)">{
{item.content}}</view>
</view>
<!--
弹窗子组件：
wxPupData：子组件需要接收的数据
getNewList：通知父组件，更新数据。
-->
<wxpup :wxPupData="wxPupData" @getNewList="getNewList"></wxpup>
</view>
</template>
<script>
export default {
data() {
return {
list:[],
wxPupData:{
},
}
},
methods: {
/* 长按监听 */
onLongPress(e,item) {
e.item = item;
e.my_user_id = this.my_userInfo.id;
this.wxPupData = e;
console.log(this.wxPupData)
},
getNewList(){
// 接口请求，重新获取 list
}
}
}
</script>
