crmeb_b2b2c/crmeb_src/mer_uniapp/pages/discover/components/operationBtn.vue

<template>
	<view>
		<view class="userInfo">
			<!-- 1.头像 -->
			<navigator v-show="isShowCent" hover-class="none"
				:url="'/pages/discover/discover_user/index?id='+list.authorId" class="pictrue">
				<image class="userAvatar" :src="list.authorAvatar || urlDomain+'crmebimage/presets/morenT.png'"
					mode="aspectFill">
				</image>
				<view v-if="!list.isConcerned && list.authorId!==uid" class="guanzhu" @click.stop="followAuthor(list)">
					<text class="iconfont icon-ic_increase"></text></view>
				<view v-else class="yiguanzhu"><text class="iconfont"></text></view>
			</navigator>
			<!-- 其他按钮 -->
			<view v-for="(item, index) in operationButton(list, isShowCent)" :key="index"
				@click.stop="handleButton(item);" class="flex-column" :style="{ marginTop : item.top}">
        <!-- 提到的商品 -->
        <view v-if="item.type==='collection'" @click="openMore(list)" class="mention"
              style="opacity: 0.9; margin-top: 18px;">
          <image src="../static/images/collection.png"></image>
          <text class="count">{{list.productList.length}}</text>
        </view>
				<view :class="item.style">
					<text class="iconfont" :class="( item.type === 'like' && list.userIsLike ? 'likeNumActive' : '') + ' ' + item.icon"></text>
				</view>
				<text class="info-text">{{item.num && item.num > 0 ? item.num : item.text}}</text>
			</view>
      <view class="manage" v-show="showManage">
        <view v-for="(item, index) in myOperationButton(list)" :key="index" class="items" @click.stop="handleMyOperationButton(item)">
          <text class="iconfont" :class="item.icon"></text>
          <text>{{item.text}}</text>
        </view>
      </view>
		</view>

		<!-- 评论 -->
		<tui-bottom-popup :zIndex="98" :maskZIndex="97" :show="showComment" @close="closeComment">
			<view
				:style="'width: 100%; background-color: #fff; border-top-left-radius: 40rpx; border-top-right-radius: 40rpx;'">
				<discoverComment v-if="showComment" fromTo="popupView" :noteId="noteId" :noteDetails="noteDetail"
					@close="closeComment">
				</discoverComment>
			</view>
		</tui-bottom-popup>
		<!-- 他提到的宝贝弹窗 -->
		<uni-popup type="bottom" ref="pinglunMentioned">
			<view
				:style="'width: '+ windowWidth +'px;background-color: #F5F5F5;max-height:1200rpx; border-top-left-radius: 40rpx; border-top-right-radius: 40rpx;overflow-y: scroll;'">
				<mentioned ref="mentioned" :list="proList" @close="popup" fromType="video" :goodsStyle="goodsStyle">
				</mentioned>
			</view>
		</uni-popup>

		<!-- 分享按钮 -->
		<image v-if="H5ShareBox" class="shareImg" :src="urlDomain+'crmebimage/presets/share-info.png'"
			@click="H5ShareBox = false"></image>
		<!-- 分享按钮 -->
		<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
			<!-- #ifndef MP -->
			<button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' v-if="weixinStatus === true"
				@click="H5ShareBox = true">
				<view class="iconfont icon-icon_WeChat_1"></view>
				<view class="">发送给朋友</view>
			</button>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<button class="item" :class="weixinStatus ? 'item3' : ''" open-type="share" hover-class='none'
				@click="goFriend">
				<view class="iconfont icon-icon_WeChat_1"></view>
				<view class="">发送给朋友</view>
			</button>
			<!-- #endif -->
			<button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' @click="goPoster">
				<view class="iconfont icon-a-ic_picture1"></view>
				<view class="">生成海报</view>
			</button>
		</view>
		<view class="mask" v-if="posters" @click="listenerActionClose"></view>
		<!-- 海报展示 -->
		<view class='mask' v-if="posterImageStatus"></view>
		<view class='poster-pop' v-if="posterImageStatus">
			<image src='../static/images/poster-close.png' class='close' @click="posterImageClose"></image>
			<image :src='posterImage' class="image"></image>
			<!-- #ifndef H5 -->
			<view class="keep" @click="handleSavePosterPath">保存到相册</view>
			<!-- #endif -->
		</view>
		<view class="canvas" v-if="canvasStatus">
			<canvas style="width:750px;height:1190px;" canvas-id="myCanvas"></canvas>

		</view>

		<canvas v-if="qrcodecanvasStatus" class="qrcodecanvasStatus" canvas-id="qrcode"
			:style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		discoverFollowAuthor,
		discoverNoteLike
	} from "../../../libs/follow";
	import {
		Debounce
	} from "../../../utils/validate";
	import {
		toLogin
	} from "../../../libs/login";
  import {
    myOperationButton,
    operationButton
  } from "./config";
  import tuiBottomPopup from "./tui-bottom-popup";
  import mentioned from "./mentioned";
  import discoverComment from "./discoverComment";
  import BaseTextMore from "./BaseTextMore";
  import {goodsStyle} from "../discover_video/default";
  import {imageBase64} from "../../../api/public";
  import uQRCode from "../../../js_sdk/Sansnn-uQRCode/uqrcode";
  import {noteDelApi, noteReplySwitchApi} from "../../../api/discover";
  import {workOrderServiceEndApi} from "../../admin/workOrder_manage/workOrder";
  import util from "../../../utils/util";
  import {mpQrcode} from "../../../api/api";
  import {base64src} from "../../../utils/base64src";
	export default {
		name: "operationBtn",
    components: {
      tuiBottomPopup,
      mentioned,
      discoverComment,
      BaseTextMore
    },
		computed: {
      ...mapGetters(['userInfo', 'isLogin', 'uid', 'globalData']),
      windowWidth() {
        const vars = this.$getCssVarStyle();
        return vars['--screen-width'] || '100%';
      },
    },
		props: {
			list: {
				type: Object,
				default: function() {
					return {};
				}
			},
      noteId: {
        type: [String, Number],
        default: ''
      }
		},
		data() {
			return {
        goodsStyle, //商品样式
				isShowCent: true, //是否展示内容
				urlDomain: this.$Cache.get("imgHost"),
				H5ShareBox: false,
				statusTop: 0, //审核状态样式
				showManage: false, //是否显示操作
				posters: false,
				weixinStatus: false, //是否是微信
				posterImageStatus: false,
				storeImage: '', //海报产品图
				PromotionCode: '', //二维码图片
				canvasStatus: false, //海报绘图标签
				posterImage: '', //海报路径
				posterbackgd: '../static/images/posterbackgd.png',
				codeImg: "",
				qrcodeSize: 600,
        proList: [], //商品列表
        popupShow: false, //商品弹窗
        showComment: false,
        noteDetail: {},
        qrcodecanvasStatus: true, //h5分享二维码
			}
		},
    mounted() {
      //#ifdef H5
      this.make(this.uid,  this.noteId);
      this.ShareInfo(this.list);
      // #endif
      // #ifdef MP
      this.imgTop = this.list.cover;
      this.getQrcode(this.noteId);
      // #endif
    },
		methods: {
      // 视频编辑
      myOperationButton,
			// 视频操作按钮
			operationButton,
      // 操作自己视频
      handleMyOperationButton: Debounce(function(item) {
        switch (item.type) {
          case 'edit':
            this.handleEdit(this.list)
            break;
          case 'delete':
            this.deleteTopic(this.list)
            break;
          case 'message':
            this.replySwitch(this.list)
            break;
        }
      }),
      // 编辑
      handleEdit(){
        this.$util.navigateTo(`/pages/discover/discover_release/index?noteId=${this.noteId}`);
      },
      //禁止评论
      replySwitch(item) {
        if (!item.platReplySwitch && item.replyStatus === 3) {
          this.$util.Tips({
            title: '平台设置不可评论'
          });
        } else {
          noteReplySwitchApi(item.id).then(res => {
            if (item.replyStatus === 1) {
              this.$set(item, 'replyStatus', 2)
              this.$util.Tips({
                title: '禁止成功'
              });
            } else {
              this.$set(item, 'replyStatus', 1)
              this.$util.Tips({
                title: '开启成功'
              });
            }
          }).catch(err => {
            uni.showToast({
              title: err,
              icon: 'none'
            })
          });
        }
      },
      // 删除内容
      async deleteTopic(item) {
        const result = await uni.showModal({
          content: "确定要删除该内容么?",
        });
        if (result[0] || result[1].cancel) return;
        try {
           await noteDelApi(item.id)
          util.Tips({
            title: '删除成功'
          });
          setTimeout(function() {
            uni.redirectTo({
              url: '/pages/discover/discover_user/index'
            })
          }, 1000);
        }catch (err) {
          uni.showToast({
            title: err,
            icon: 'none'
          })
        }
      },
      // 小程序二维码
      getQrcode(id) {
        let data = {
          scene: 'id=' + id + '&sd=' + this.uid,
          page: 'pages/discover/discover_video/routineVideo/index'
        }
        mpQrcode(data).then(res => {
          base64src(res.data.code, Date.now(), res => {
            this.PromotionCode = res;
          });

        }).catch(err => {
          this.errT = err;
        });
      },
      //微信分享
      ShareInfo(noteDetail) {
        let data = noteDetail;
        let href = location.href;
        if (this.$wechat.isWeixin()) {
          href = href.indexOf("?") === -1 ? href + "?sd=" + this.uid + '&id=' + noteDetail.id : href +
              "&sd=" + this.uid + '&id=' + this.noteId;
          let configAppMessage = {
            desc: data.content,
            title: data.title,
            link: href,
            imgUrl: data.cover
          };
          this.$wechat.wechatEvevt([
            "updateAppMessageShareData",
            "updateTimelineShareData",
            "onMenuShareAppMessage",
            "onMenuShareTimeline"
          ], configAppMessage).then(res => {}).catch(err => {
            console.log(err);
          })
        }
      },
			// 关注作者
			followAuthor: Debounce(function(item) {
				if (this.isLogin) {
					discoverFollowAuthor(item.authorId).then(() => {
						this.$set(item, 'isConcerned', !item.isConcerned);
					});
				} else {
					toLogin();
				}
			}),
			handleButton: Debounce(function(item) {
				switch (item.type) {
					case 'like':
						this.likeToggle(this.list)
						break;
					case 'comment':
						this.toComment(this.list)
						break;
					case 'share':
						this.listenerActionSheet()
						break;
					case 'more':
						this.showManage = !this.showManage
						break;
					case 'collection':
						this.openMore(this.list);
						break;
					case 'enlarge':
						this.onHideCent();
						break;
				}
			}),
			//收起内容
			onHideCent() {
				this.isShowCent = !this.isShowCent;
        this.showManage = false
			},
			// 查看提到的宝贝
			openMore(item) {
				this.proList = item.productList;
				this.$refs.pinglunMentioned.open('bottom');
			},
      //关闭提到的宝贝
      popup() {
        this.$refs.pinglunMentioned.close();
      },
			// 分享
			listenerActionSheet() {
				// #ifdef H5
				if (this.$wechat.isWeixin() === true) {
					this.weixinStatus = true;
				}
				// #endif
				this.posters = true;
			},
			//点赞
			likeToggle(item) {
				if (this.isLogin) {
					discoverNoteLike(item.id).then(() => {
						this.$set(item, 'userIsLike', !item.userIsLike);
						if (!item.userIsLike) {
							item.likeNum--;
							item.likeNum = item.likeNum == 0 ? 0 : item.likeNum
						} else {
							item.likeNum++;
						}
					});
				} else {
					toLogin();
				}
			},
			//打开评论
			toComment(item) {
				this.noteDetail = item;
				uni.showToast({
					title: '加载中...',
					icon: 'none',
					position: 'bottom',
					duration: 300
				})
				this.showComment = true
			},
      //关闭评论
      closeComment(){
        this.showComment = false
      },
			// 生成二维码；
			make(uid, id) {
				let href = location.href.split('?')[0] + '?noteId=' + id + "&sd=" + uid;
				uQRCode.make({
					canvasId: 'qrcode',
					text: href,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						this.PromotionCode = res;
					},
					complete: () => {},
					fail: res => {
						this.$util.Tips({
							title: '海报二维码生成失败！'
						});
					}
				})
			},
			//h5 转base64
			async getImageBase64(images) {
				let res = await imageBase64({
					url: images
				})
				return res.data.code
			},
			/**
			 * 生成海报
			 */
			async goPoster() {
				let that = this;
				if (that.posterImage) {
					that.posterImageStatus = true
					that.posters = false
					return
				}
				let arr2
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});
				that.posters = false;
				that.qrcodecanvasStatus = true;
				that.$set(that, 'canvasStatus', true);
				// #ifdef MP
				arr2 = [that.posterbackgd, await this.$util.downloadFilestoreImage(that.list.cover), that
					.PromotionCode, await this.$util.downloadFilestoreImage(that.list.authorAvatar)
				];
				// #endif
				// #ifdef H5
				arr2 = [that.posterbackgd, await that.getImageBase64(that.list.cover), that.PromotionCode,
					await that.getImageBase64(that.list.authorAvatar)
				];
				// #endif
				//生成推广海报
				that.$util.videoPosterCanvas(arr2, that.list.content, that.list.authorName,
					function(tempFilePath) {
						that.qrcodecanvasStatus = false
						that.$set(that, 'posterImage', tempFilePath);
						that.$set(that, 'posterImageStatus', true);
						that.$set(that, 'canvasStatus', false);
						uni.hideLoading();
					}, (err) => {
						that.qrcodecanvasStatus = false
						that.$set(that, 'canvasStatus', false);
						uni.hideLoading();
					});
			},
      //保存海报
      handleSavePosterPath(){
        this.$util.savePosterPath(this.posterImage).then(userInfo => {
          this.posterImageClose();
        });
      },
			share() {
				this.H5ShareBox = true;
			},
			// 分享关闭
			listenerActionClose: function() {
				this.posters = false;
			},
			//隐藏海报
			posterImageClose: function() {
				this.posterImageStatus = false
			},
			// 小程序关闭分享弹窗；
			goFriend: function() {
				this.posters = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
.onHide {
  width: 66rpx;
  height: 66rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .4);
  color: #fff;
  text-align: center;
  line-height: 66rpx;
  margin: auto;
}
.icon-ic_enlarge2, .icon-ic_reduce{
  font-size: 40rpx;
}
.icon-ic_love_2, .icon-ic_love_2{
  font-size: 68rpx;
}
.icon-icon_comment{
  font-size: 60rpx;
}
.icon-icon_transmit{
  font-size: 64rpx;
}
.generate-posters {
  width: 100%;
  height: 170rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 388;
  transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  border-top: 1px solid #eee;
  align-content: center;
  align-items: center;
  flex-direction: row;
  .item {
    /* #ifdef H5 */
    flex: 100%;
    /* #endif */
    /* #ifndef H5 */
    flex: 33.33%;
    /* #endif */
    text-align: center;
    font-size: 30rpx;

    &.item3 {
      flex: 33.33%;
    }
    .iconfont {
      font-size: 80rpx;
      color: #5eae72;
      .icon-a-ic_picture1 {
        color: #5391f1;
      }
    }
  }
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9;
}
.generate-posters.on {
  transform: translate3d(0, 0, 0);
}
	.flex-column {
		display: flex;
		flex-direction: column;
	}

	.userInfo {
		position: absolute;
		bottom: 100rpx;
		right: 24rpx;
		flex-direction: column;
		text-align: center;
		display: flex;
    width: 92rpx;

		.pictrue {
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;

			// margin-bottom: 18rpx;
			image {
				width: 92rpx;
				height: 92rpx;
			}

			.guanzhu {
				width: 42rpx;
				height: 42rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background: #E93323;
				border-radius: 100%;
				position: relative;
				top: -20rpx;
				left: 29rpx;

				.iconfont {
					font-size: 20rpx;
				}
			}

			.yiguanzhu {
				width: 42rpx;
				height: 42rpx;
			}
		}

		.mention {
			width: 92rpx;
			height: 92rpx;
			position: relative;

			image {
				width: 58rpx;
				height: 58rpx;
				position: absolute;
				right: 16rpx;
			}

			.count {
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				background: #fff;
				border-radius: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #E93323;
				position: absolute;
				right: 8rpx;
				top: -12rpx;
				font-size: 20rpx;
			}
		}

		.iconfont {
			color: #ffffff;

			&.likeNumActive {
				color: #E93323;
			}
		}
	}

	.info-text {
		margin-top: 10rpx;
		color: #ffffff;
		font-size: 22rpx;
	}

	.userAvatar {
		border-radius: 500%;
		border-style: solid;
		border-width: 2px;
		border-color: #ffffff;
		width: 80rpx;
		height: 80rpx;
		display: block;
	}

	.video-dian {
		position: relative;
		width: 66rpx;
		height: 66rpx;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		left: 12rpx;

		.dian {
			display: inline-block;
			width: 13rpx;
			height: 13rpx;
			background-color: #fff;
			border-radius: 100%;
			margin-right: 10rpx;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.product {
		display: block;
		margin-top: 27rpx;

		.product-item {
			display: inline-block;
			width: 444rpx;
			height: 136rpx;
			background: rgba(0, 0, 0, .55);
			border-radius: 16rpx;
			padding: 16rpx 15rpx;
			margin-right: 30rpx;
		}

		::v-deep uni-swiper,
		::v-deep swiper {
			display: block;
			width: 500rpx !important;
			height: 136rpx !important;

			.swiper-count {
				display: block;
				width: 444rpx !important;
				height: 136rpx !important;
				background: rgba(0, 0, 0, .55);
				border-radius: 12rpx;
				padding: 16rpx 15rpx;
			}

			.swiper-item {
				display: block;
			}
		}

		.item-count {
			width: 414rpx;
			flex-direction: row;
			justify-content: space-between;
			border-radius: 12rpx;

			.picture {
				width: 104rpx;
				height: 104rpx;
				border-radius: 16rpx;

				image {
					width: 104rpx;
					height: 104rpx;
					border-radius: 10rpx;
				}
			}

			.product-text {
				width: 296rpx;
				justify-content: space-between;

				.buy {
					padding: 4rpx 7rpx;
					background: #5D5747;
					border-radius: 3px 3px 3px 3px;
					font-size: 16rpx;
					display: inline-block;
				}

				.name {
					width: 266rpx;
					font-size: 26rpx;
				}

				.product-price {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.price {
						display: flex;
						flex-direction: row;
						align-items: flex-end;
						font-size: 24rpx;

						text {
							font-size: 26rpx;
						}
					}

					.buy-btn {
						width: 89rpx;
						height: 36rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						border-radius: 26rpx;
						background: #E93323;
						font-size: 20rpx;
					}
				}
			}
		}
	}

	.content {
		width: 590rpx;
		position: absolute;
		bottom: 80rpx;
		/* justify-content: center; */
		padding: 15rpx 0;
		flex-direction: column;
		justify-content: flex-start;
		color: #ffffff;
		left: 24rpx;

		.time {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.5);
			margin-left: 12rpx;
		}

		.cart {
			height: 48rpx;
			flex-direction: row;

			.cartName {
				font-size: 28rpx;
				color: #fff;
			}
		}
	}

	.manage {
		width: 210rpx;
		background: #ffffff;
		box-shadow: 0 2rpx 15rpx rgba(0, 0, 0, 0.1);
		padding: 0 15rpx;
		position: absolute;
		bottom: -65rpx;
		right: 113rpx;
		z-index: 10;
		border-radius: 16rpx;

		.iconfont {
			color: #333 !important;
		}

		&::before {
			content: "";
			display: inline-block;
			width: 26rpx;
			height: 26rpx;
			background: #ffffff;
			transform: rotate(137deg);
			position: absolute;
			top: 102rpx;
			right: -8rpx;
			box-shadow: -1rpx -1rpx 1rpx rgba(0, 0, 0, 0.05);
		}

		.items {
			border-bottom: 1px solid #EEEEEE;
			color: #282828;
			font-size: 26rpx;
			padding: 20rpx 0;
			display: flex;
			align-items: center;

			&:last-child {
				border-bottom: none;
			}

			.iconfont {
				margin: 0 16rpx 0;
			}
		}
	}
</style>