1966 lines
47 KiB
Plaintext
1966 lines
47 KiB
Plaintext
<template>
|
||
<view class="shortVideo" @click="showManage = false">
|
||
<!--
|
||
注意：这是 H5、微信小程序界面，请勿和 new_index.nvue、index.nvue 混用
|
||
|
||
1. new_index.nvue、index.nvue这两个是App页面
|
||
|
||
2. 另外：data.js 是上一版本留下的假数据，这一版改成了 URL 请求了（如不需要可以删除，也可作为后端请求参考）
|
||
|
||
3. 请各位大神多多留手，我已经把请求内存开到最大了
|
||
|
||
4. 视频 id 切记是字符串类型
|
||
-->
|
||
<!-- 头部导航 -->
|
||
<!-- 头部导航 -->
|
||
|
||
|
||
|
||
<view class="header">
|
||
<view class="tool-bar">
|
||
<view class='xiangzuo' @tap='goBack'>
|
||
<!-- <image src="@/static/images/icon-back.png" mode="aspectFit"></image> -->
|
||
</view>
|
||
</view>
|
||
<!-- <view class="tool-bar">
|
||
<view class='iconfont icon-xiangzuo' @tap='goBack'></view>
|
||
</view>
|
||
<view class="items" @click.stop="navTap(2)">
|
||
<text class="tName" :class="currentNav==2?'on':''">关注</text>
|
||
</view>
|
||
<view class="items" @click.stop="navTap(1)">
|
||
<text class="tName" :class="currentNav==1?'on':''">推荐</text>
|
||
</view>
|
||
<view class="items" @click.stop="navTap(3)">
|
||
<text class="tName" :class="currentNav==3?'on':''">热点资讯</text>
|
||
</view>
|
||
<view class="items" @click.stop="navTap(4)">
|
||
<text class="tName" :class="currentNav==4?'on':''">社区</text>
|
||
</view> -->
|
||
|
||
</view>
|
||
<swiper v-show="currentNav !== 3&¤tNav != 4"
|
||
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'" :vertical="true"
|
||
@animationfinish="animationfinish" @change="change" :current="k" :indicator-dots="false">
|
||
<swiper-item v-for="(list,index) in dataList">
|
||
<view v-if="max > index">
|
||
|
||
|
||
|
||
|
||
<!-- <view style="width: 100px;height: 100px;background-color: red;">
|
||
|
||
5666
|
||
|
||
</view> -->
|
||
|
||
<view>
|
||
<!-- 这种视频背景模糊的效果怎么做呢 -->
|
||
<!--
|
||
1.v-if：用于控制视频在节点的渲染数
|
||
2.muted的默认值是 false，代表默认是禁音视频的
|
||
3.http-cache默认开启视频缓存
|
||
4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
|
||
5.show-loading：这里默认去掉播放转圈的标志
|
||
v-if="Math.abs(k-index)<=1"
|
||
-->
|
||
<video :id="list.community_id+''+index" :loop="true" :muted="list.isplay"
|
||
:autoplay="index == k && isRoutine" :controls="false" :http-cache="true"
|
||
:page-gesture="false" :show-fullscreen-btn="false" :show-loading="false"
|
||
:show-center-play-btn="false" :enable-progress-gesture="false" :src="list.video_link"
|
||
@ended="ended" @play="play(index)" @click="tapVideoHover(list.state,$event)"
|
||
@waiting="waiting(index)"
|
||
style="width: 100vw; height: 100vh;z-index: -1;transform: scale(4)">
|
||
|
||
|
||
|
||
</video>
|
||
|
||
</view>
|
||
<!-- 播放状态：pause 的时候就会暂停 -->
|
||
<!-- <view class="videoHover" @click="tapVideoHover(list.state,$event)"
|
||
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'">
|
||
<image v-if="list.state=='pause'" class="playState" src="../static/img/index/play.png"></image>
|
||
</view> -->
|
||
<!--审核状态-->
|
||
<view v-if="list.status==-1 || list.status==0 || list.status==-2" class="video-status">
|
||
<view v-if="list.status == -1 || list.status == -2" class="status-title">
|
||
<image class="image" src="../static/img/index/video-failed.png"></image>
|
||
<text class="title">{{list.status == -1 ? '审核未通过' : '已下架'}}，内容仅自己可见</text>
|
||
</view>
|
||
<view v-else class="status-title">
|
||
<image class="image" src="../static/img/index/video-review.png"></image>
|
||
<text class="title">正在审核，内容仅自己可见</text>
|
||
</view>
|
||
<view class="status_info">
|
||
<text
|
||
class="refusal">{{(list.status == -1 || list.status == -2) ? list.refusal : '发布的内容审核通过后，将在首页展示！'}}</text>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<!-- 最底下的文字部分 -->
|
||
<view class="content">
|
||
<view class="cart">
|
||
<text class="cartName">@{{list.author && list.author.nickname}}</text>
|
||
</view>
|
||
<view class="words" :style="'width: '+ (windowWidth - 120) +'px;'">
|
||
<view v-if="list.isMore || list.content.length<=15">
|
||
<text class="info">{{list.content}}</text>
|
||
<view class="close">
|
||
<text v-if="list.isMore" class="more" @click="moreTap(list)">收起</text>
|
||
</view>
|
||
</view>
|
||
<view class="wordsCon" v-else>
|
||
<text class="info">{{list.content.slice(0,15)}}...</text>
|
||
<text class="more" @click.stop="moreTap(list)">展开</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="list.relevance.length == 1 && k===index" class="product">
|
||
<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;"
|
||
scroll-with-animation show-scrollbar="true">
|
||
<view class="product-item" v-for="(goods,idx) in list.relevance" :key="idx"
|
||
v-if="goods.spu">
|
||
<view v-if="goods.spu" class="item-count acea-row" @click="goDetail(goods.spu)">
|
||
<view class="picture">
|
||
<image :src="goods.spu.image"></image>
|
||
</view>
|
||
<view class="product-text">
|
||
<view class="name line1">{{goods.spu.store_name}}</view>
|
||
<view class="product-price">
|
||
<view class="price">¥<text>{{goods.spu.price}}</text></view>
|
||
<view class="buy-btn">购买</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view v-else-if="list.relevance.length > 1 && k===index" class="product">
|
||
<swiper :autoplay="true" :circular="circular" :interval="interval" :duration="duration"
|
||
:loop="true" next-margin="20rpx" previous-margin="20rpx">
|
||
<block v-for="(goods,idx) in list.relevance" :key="idx" v-if="goods.spu">
|
||
<swiper-item class="swiper-item">
|
||
<view class="swiper-count">
|
||
<view v-if="goods.spu" class="item-count acea-row"
|
||
@click="goDetail(goods.spu)">
|
||
<view class="picture">
|
||
<image :src="goods.spu.image"></image>
|
||
</view>
|
||
<view class="product-text">
|
||
<view class="name line1">{{goods.spu.store_name}}</view>
|
||
<view class="product-price">
|
||
<view class="price">¥<text>{{goods.spu.price}}</text></view>
|
||
<view class="buy-btn">购买</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</block>
|
||
</swiper>
|
||
</view>
|
||
<navigator v-if="list.topic" hover-class="none" class="product_cate"
|
||
:url="'/pages/plantGrass/plant_search_list/index?id='+list.topic.topic_id">
|
||
<view>
|
||
<text class="icon">#</text><text class="text">{{list.topic.topic_name}}</text>
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
<view class="userInfo">
|
||
<!-- 1.头像 -->
|
||
<navigator v-if="list.author && userInfo.uid != list.author.uid" hover-class="none"
|
||
:url="'/pages/plantGrass/plant_user/index?id='+list.uid" class="pictrue">
|
||
<image class="userAvatar"
|
||
:src="list.author&&list.author.avatar || '/static/images/f.png'" mode="aspectFill">
|
||
</image>
|
||
<view v-if="!list.is_fans || !userInfo.uid" class="guanzhu"
|
||
@click.stop="followAuthor(list)"><text
|
||
class="iconfont icon-shangpinshuliang-jia"></text></view>
|
||
<view v-else class="yiguanzhu"><text class="iconfont"></text></view>
|
||
</navigator>
|
||
<!-- 2.点赞 -->
|
||
<view @click="cLike(list);" style="margin-top: 5px;"
|
||
:class="{'likeNumActive':list.relevance_id}">
|
||
<text class="iconfont icon-shipindianzan-yidian"
|
||
:class="{'likeNumActive':list.relevance_id}"></text>
|
||
<text class="info-text">{{list.count_start > 0 ? list.count_start : '点赞'}}</text>
|
||
</view>
|
||
<!-- 3.评论 -->
|
||
<view v-if="community_reply_status == 1 && list.status == 1" class="comment"
|
||
@click="toComment(list,index)" style="margin-top: 18px;">
|
||
<text class="iconfont icon-pinglun2"></text>
|
||
<text class="info-text">{{list.count_reply>0 ? list.count_reply : '评论'}}</text>
|
||
</view>
|
||
<!-- 4.分享 -->
|
||
<view v-if="list.status == 1" @click="listenerActionSheet" style="margin-top: 17px;">
|
||
<text class="iconfont icon-fenxiang3"></text>
|
||
<text class="info-text">分享</text>
|
||
</view>
|
||
<!-- 5.自己的视频 -->
|
||
<view v-if="list.author && userInfo.uid == list.author.uid && isUser"
|
||
style="margin-top: 17px;">
|
||
<view class="video-my">
|
||
<view class="video-dian" @click.stop="showManage = !showManage">
|
||
<text class="dian"></text>
|
||
<text class="dian"></text>
|
||
<text class="dian"></text>
|
||
</view>
|
||
|
||
<view class="manage" v-show="showManage">
|
||
<navigator hover-class="none"
|
||
:url="'/pages/plantGrass/plant_release/index?id='+list.community_id+'&type=2'"
|
||
class="items">
|
||
<image class="image" src="../static/img/index/video-edit.png"></image>
|
||
<text>编辑</text>
|
||
</navigator>
|
||
<view class="items" @click.stop="deleteTopic(list)">
|
||
<image class="image" src="../static/img/index/video-delete.png"></image>
|
||
<text>删除</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 提到的商品 -->
|
||
<view v-if="list.relevance.length>0 && k === index" @click="openMore(list)" class="mention"
|
||
style="opacity: 0.9; margin-top: 18px;">
|
||
<image src="../static/img/index/collection.png"></image>
|
||
<text class="count">{{list.relevance.length}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<scroll-view scroll-y="true" v-if="currentNav === 3" class="video-list"
|
||
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'" :refresher-triggered="isTriggered"
|
||
@scrolltolower="getGoods()">
|
||
<block v-for="(item,index) in cateGoods" :key="index">
|
||
<view class="goods_item" @click="gogogo(item)">
|
||
<image class="goods_img" :src="item.image[0]" mode="aspectFill"></image>
|
||
<view class="botm">
|
||
<view class="title">{{item.title}}</view>
|
||
<view class="goods_info flex_a_c">
|
||
<view class="l_info flex_a_c">
|
||
<image :src="(item.author && item.author.avatar) || '/static/images/f.png'"
|
||
mode="aspectFill" class="g_img"></image>
|
||
<view class="g_name">{{item.author && item.author.nickname}}</view>
|
||
</view>
|
||
<view class="nice_box flex_a_c" @click.stop="giveStart(item)">
|
||
<text class="iconfont"
|
||
:class="item.relevance_id ? 'icon-shoucang1' : 'icon-dianzan'"></text>
|
||
<text class="collect">{{item.count_start}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</scroll-view>
|
||
|
||
<!-- <view class="video-list" v-if="currentNav === 3"
|
||
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'">
|
||
|
||
</view> -->
|
||
<view class="noVideo acea-row row-center-wrapper" v-if="!dataList.length && !loadVideo && currentNav !== 3">
|
||
<view>
|
||
<image :src="imgHost+'/static/no-video.png'" class="pictrue"></image>
|
||
<text class="tips">暂无短视频内容哦~</text>
|
||
</view>
|
||
</view>
|
||
<comment ref="comments" :bottom="0" :isShow="showComment" :userInfo="userInfo" @successFul="pinlunFun"
|
||
@close="closeScrollview"></comment>
|
||
<!-- 他提到的宝贝弹窗 -->
|
||
<mentioned ref="mentioned" @close="closePopup" :list="moreList" :uid="authorUid"></mentioned>
|
||
<image v-if="H5ShareBox" class="shareImg" :src="imgHost + '/static/images/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-weixin3"></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-weixin3"></view>
|
||
<view class="">发送给朋友</view>
|
||
</button>
|
||
<!-- #endif -->
|
||
<button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' @click="goPoster">
|
||
<view class="iconfont icon-haibao"></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="savePosterPath">保存到相册</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
<canvas class="canvas" canvas-id='myCanvas' v-if="canvasStatus"></canvas>
|
||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const app = getApp();
|
||
import {
|
||
toLogin
|
||
} from '@/libs/login.js';
|
||
import {
|
||
mapGetters
|
||
} from 'vuex';
|
||
import {
|
||
configMap
|
||
} from '@/utils';
|
||
import comment from '@/components/comment.vue';
|
||
import mentioned from '@/components/mentioned.vue';
|
||
|
||
import {
|
||
HTTP_REQUEST_URL
|
||
} from '@/config/app';
|
||
import {
|
||
deoList,
|
||
videoList,
|
||
myVideoList,
|
||
graphicStartApi,
|
||
followAuthorApi,
|
||
getVideoCode,
|
||
deletePlantApi,
|
||
focusArticleLst,
|
||
graphicLstApi
|
||
} from '@/api/community.js';
|
||
import {
|
||
getUserInfo,
|
||
imgToBase
|
||
} from '@/api/user.js';
|
||
import authorize from '@/components/Authorize';
|
||
import ClipboardJS from "@/plugin/clipboard/clipboard.js";
|
||
export default {
|
||
components: {
|
||
comment,
|
||
mentioned,
|
||
authorize,
|
||
|
||
},
|
||
computed: configMap({
|
||
community_reply_status: 0
|
||
}, mapGetters(['isLogin', 'uid'])),
|
||
|
||
data() {
|
||
return {
|
||
isTriggered: false,
|
||
imgHost: HTTP_REQUEST_URL,
|
||
videoID: 0,
|
||
pinlunNum: 0,
|
||
windowWidth: 0,
|
||
windowHeight: 0,
|
||
platform: "",
|
||
deleteHeight: 0,
|
||
dataList: [],
|
||
k: 0,
|
||
max: 2,
|
||
oldVideo: "",
|
||
voice: "",
|
||
timeout: "",
|
||
authorUid: 0,
|
||
current: 0,
|
||
boxStyle: { //视频，图片封面样式🌟💗
|
||
'height': 0,
|
||
'width': 0,
|
||
},
|
||
// 引入评论 - 参数
|
||
heightNum: 1.3,
|
||
// 双击点赞参数
|
||
touchNum: 0,
|
||
aixinLeft: 0,
|
||
aixinTop: 0,
|
||
Rotate: 0,
|
||
currentNav: 1,
|
||
limit: 10,
|
||
page: 1,
|
||
oldCurrent: 1,
|
||
H5ShareBox: false,
|
||
showComment: false,
|
||
loadVideo: true,
|
||
userInfo: {},
|
||
moreList: [],
|
||
posters: false,
|
||
weixinStatus: false,
|
||
isShowAuth: false, //是否隐藏授权
|
||
isAuto: false, //没有授权的不会自动授权
|
||
showManage: false,
|
||
isUser: false,
|
||
isSatrt: 0,
|
||
userUid: 0,
|
||
posterImageStatus: false,
|
||
storeImage: '', //海报产品图
|
||
PromotionCode: '', //二维码图片
|
||
canvasStatus: false, //海报绘图标签
|
||
posterImage: '', //海报路径
|
||
posterbackgd: '../static/img/index/posterbackgd.png',
|
||
avatar: '/static/images/f.png',
|
||
codeImg: "",
|
||
autoplay: false,
|
||
circular: true,
|
||
interval: 3000,
|
||
duration: 500,
|
||
actionSheetHidden: false,
|
||
// #ifdef MP
|
||
isRoutine: true,
|
||
// #endif
|
||
// #ifndef MP
|
||
isRoutine: false,
|
||
// #endif
|
||
// 视频列表相关 变量
|
||
cateGoods: [],
|
||
where: {
|
||
category_id: -1,
|
||
page: 1,
|
||
limit: 5
|
||
},
|
||
communityId: '',
|
||
Listcount: '',
|
||
loadMore: true,
|
||
videoshow: true
|
||
}
|
||
},
|
||
watch: {
|
||
k(new_k, old_k) {
|
||
const max = new_k + 2;
|
||
if (this.max < max) {
|
||
this.max = max;
|
||
}
|
||
if (this.oldCurrent != this.currentNav) {
|
||
this.oldCurrent = this.currentNav
|
||
return false
|
||
}
|
||
this.dataList[old_k].playIng = false //如果视频暂停，就加载封面
|
||
this.dataList[old_k].isplay = true
|
||
this.dataList[old_k].state = 'pause'
|
||
// console.log('预留第' + (old_k + 1) + '个视频：' + this.dataList[old_k].community_id + '' + old_k)
|
||
// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
|
||
uni.createVideoContext(this.dataList[old_k].community_id + '' + old_k, this)
|
||
.pause() //如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
|
||
// console.log('已经暂停 --> 第' + (old_k + 1) + '个视频～') //提示
|
||
// #ifdef MP
|
||
this.dataList[new_k].state = 'play'
|
||
this.dataList[new_k].isplay = false
|
||
this.dataList[new_k].playIng = true
|
||
if (this.currentNav !== 3) {
|
||
setTimeout(() => {
|
||
uni.createVideoContext(this.dataList[new_k].community_id + '' + new_k, this).play()
|
||
}, 250)
|
||
}
|
||
this.videoShare(this.dataList[new_k])
|
||
// #endif
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.getOptions(options);
|
||
this.videoID = options.id;
|
||
this.isUser = options.user == 1 ? true : false;
|
||
this.userUid = options.uid ? options.uid : 0;
|
||
this.isSatrt = options.tab == 1 ? 1 : 0;
|
||
this.windowWidth = uni.getSystemInfoSync().windowWidth
|
||
this.windowHeight = uni.getSystemInfoSync().windowHeight
|
||
this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
|
||
this.boxStyle.height = this.windowHeight - this.deleteHeight; //有 tabbar的 修改这里可以改变视频高度
|
||
this.get() //刚进入页面加载数据
|
||
if (this.isLogin) {
|
||
this.getUserInfo();
|
||
}
|
||
// #ifdef H5
|
||
this.setOpenShare();
|
||
// #endif
|
||
},
|
||
onShow() {},
|
||
onHide() {
|
||
this.dataList[this.k].state = 'pause'; //界面隐藏也要停止播放视频
|
||
uni.createVideoContext(this.dataList[this.k].community_id + '' + this.k, this).pause(); //暂停以后继续播放
|
||
},
|
||
onReady: function() {},
|
||
methods: {
|
||
giveStart(item) {
|
||
let status = item.relevance_id ? 0 : 1
|
||
graphicStartApi(item.community_id, {
|
||
status: status
|
||
}).then(res => {
|
||
if (item.relevance_id) {
|
||
item.count_start--;
|
||
item.count_start = item.count_start == 0 ? 0 : item.count_start
|
||
item.relevance_id = false
|
||
} else {
|
||
item.count_start++;
|
||
item.relevance_id = true
|
||
}
|
||
})
|
||
},
|
||
//#ifdef MP
|
||
videoShare(item) {
|
||
if (item && item.status == 1) {
|
||
let uid = this.uid ? this.uid : 0;
|
||
let data = this.dataList[0];
|
||
uni.showShareMenu({
|
||
withShareTicket: true,
|
||
menus: ['shareAppMessage', 'shareTimeline'],
|
||
title: data.title || '',
|
||
imageUrl: data.image[0] || '',
|
||
path: '/pages/short_video/nvueSwiper/index?id=' + data.community_id + '&pid=' + uid
|
||
})
|
||
} else {
|
||
uni.hideShareMenu()
|
||
}
|
||
},
|
||
// #endif
|
||
goBack: function() {
|
||
uni.navigateBack();
|
||
},
|
||
navTap(n) {
|
||
this.currentNav = n;
|
||
this.timeout = "";
|
||
this.k = 0;
|
||
this.page = 1;
|
||
this.loadVideo = true;
|
||
this.dataList = [];
|
||
this.loadMore = true;
|
||
n == 1 ? this.get() : '';
|
||
n == 2 ? this.getFocusList() : '';
|
||
n == 3 ? this.getGoods() : '';
|
||
},
|
||
/**
|
||
* 视频列表相关方法
|
||
* 获取视频列表
|
||
*/
|
||
gogogo(item) {
|
||
this.flag = true
|
||
this.videoID = item.community_id
|
||
this.navTap(1)
|
||
},
|
||
async getGoods() {
|
||
if (!this.loadMore) {
|
||
return;
|
||
}
|
||
const {
|
||
data
|
||
} = await graphicLstApi(this.where)
|
||
this.cateGoods.push(...data.list)
|
||
this.where.page++
|
||
if (data.list.length < this.where.limit) {
|
||
this.loadMore = false
|
||
}
|
||
},
|
||
/**
|
||
* 获取个人用户信息
|
||
*/
|
||
getUserInfo: function() {
|
||
let that = this;
|
||
getUserInfo().then(res => {
|
||
that.userInfo = res.data;
|
||
});
|
||
},
|
||
// 关注作者
|
||
followAuthor: function(item) {
|
||
if (this.isLogin === false) {
|
||
this.isAuto = true;
|
||
this.isShowAuth = true
|
||
} else {
|
||
let status = 1
|
||
followAuthorApi(item.uid, {
|
||
status: status
|
||
}).then(res => {
|
||
if (res.status === 200) {
|
||
item.is_fans = true
|
||
}
|
||
this.$util.Tips({
|
||
title: res.message
|
||
});
|
||
}).catch(err => {
|
||
return uni.showToast({
|
||
title: err,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
});
|
||
}
|
||
},
|
||
// 删除话题
|
||
deleteTopic(item) {
|
||
let that = this;
|
||
uni.showModal({
|
||
content: '确定要删除该话题么？',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
deletePlantApi(item.community_id).then(res => {
|
||
if (res.status === 200) {
|
||
that.$util.Tips({
|
||
title: res.message
|
||
});
|
||
setTimeout(function() {
|
||
uni.redirectTo({
|
||
url: '/pages/plantGrass/plant_user/index?id=' +
|
||
item.uid
|
||
})
|
||
}, 1000);
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
// console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
|
||
},
|
||
// 授权回调
|
||
onLoadFun() {
|
||
this.isShowAuth = false
|
||
this.getUserInfo()
|
||
},
|
||
// 授权关闭
|
||
authColse: function(e) {
|
||
this.isShowAuth = e
|
||
},
|
||
play(k) {
|
||
// console.log(' 播放了', k)
|
||
this.dataList[k].isplay = false
|
||
this.dataList[k].playIng = true
|
||
this.dataList[k].state = 'play'
|
||
this.dataList[k].loading = false
|
||
},
|
||
waiting(k) {
|
||
// console.log('视频缓冲了', k)
|
||
this.dataList[k].loading = true
|
||
},
|
||
pinlunFun(e) {
|
||
this.pinlunNum = e;
|
||
this.dataList.forEach(item => {
|
||
if (item.community_id == this.videoID) {
|
||
item.count_reply = e;
|
||
}
|
||
})
|
||
},
|
||
getOptions(options) {
|
||
let that = this;
|
||
// #ifdef MP
|
||
if (options.scene) {
|
||
let value = that.$util.getUrlParams(decodeURIComponent(options.scene));
|
||
//记录推广人uid
|
||
if (value.pid) app.globalData.spid = value.pid;
|
||
}
|
||
// #endif
|
||
if (options.pid) app.globalData.spid = options.pid;
|
||
},
|
||
// #ifdef H5
|
||
// 微信分享；
|
||
setOpenShare: function() {
|
||
let that = this;
|
||
let uid = this.uid ? this.uid : 0;
|
||
if (that.$wechat.isWeixin()) {
|
||
let data = this.dataList[0];
|
||
let configAppMessage = {
|
||
desc: data.content,
|
||
title: data.title,
|
||
link: location.href + '?pid=' + uid + '&id=' + this.videoID,
|
||
imgUrl: data.image
|
||
};
|
||
that.$wechat.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData',
|
||
'onMenuShareAppMessage', 'onMenuShareTimeline'
|
||
],
|
||
configAppMessage);
|
||
}
|
||
},
|
||
// #endif
|
||
moreTap(item) {
|
||
item.isMore = !item.isMore;
|
||
},
|
||
moveHandle() {},
|
||
closeScrollview() {
|
||
// 点击评论里面的叉叉，就会关闭评论
|
||
this.showComment = false
|
||
},
|
||
toComment(item, index) {
|
||
// 注意点击评论之后会执行这里
|
||
/*
|
||
（1）先加载缓冲
|
||
（2）获取当前视频 ID 信息
|
||
（3）🌟🌟🌟🌟重要🌟🌟🌟🌟
|
||
- 一定要记得看 index.vue 里面
|
||
uni.setStorageSync("user",this.peopleList[i]);
|
||
这个东西，用于存储当前用户信息。在 插件里面会使用到这个东西，
|
||
记得写一下。
|
||
|
||
（4）打开评论
|
||
*/
|
||
this.showComment = true
|
||
this.$refs.comments.getData(item, index);
|
||
},
|
||
ended() {
|
||
// 1.播放当前视频结束时触发，自动切换下一个视频
|
||
// this.current = this.k+1
|
||
},
|
||
//点击播放&&暂停
|
||
tapVideoHover(state, event) {
|
||
// console.log('state--', state);
|
||
// 1.启用双击点赞 --- start
|
||
this.touchNum++;
|
||
setTimeout(() => {
|
||
if (this.touchNum == 1) {
|
||
if (state == 'play' || state == 'continue') {
|
||
this.dataList[this.k].state = 'pause';
|
||
} else {
|
||
this.dataList[this.k].state = 'continue';
|
||
}
|
||
if (this.dataList[this.k].state == 'continue') {
|
||
uni.createVideoContext(this.dataList[this.k].community_id + '' + this.k, this)
|
||
.play(); //暂停以后继续播放
|
||
}
|
||
if (this.dataList[this.k].state == 'pause') {
|
||
uni.createVideoContext(this.dataList[this.k].community_id + '' + this.k, this)
|
||
.pause(); //暂停以后继续播放
|
||
}
|
||
}
|
||
this.touchNum = 0;
|
||
}, 200)
|
||
},
|
||
change(event) {
|
||
this.k = event.detail.current;
|
||
this.posterImage = false;
|
||
this.communityId = this.dataList[this.k]['community_id'];
|
||
},
|
||
animationfinish(event) {
|
||
let that = this
|
||
if (!that.loadVideo || !that.loadMore) return
|
||
if (this.k == this.dataList.length - 1 && this.currentNav == 1) {
|
||
that.loadVideo = false
|
||
this.get()
|
||
}
|
||
if (this.k == this.dataList.length - 1 && this.currentNav === 2) {
|
||
that.loadVideo = false
|
||
this.getFocusList()
|
||
}
|
||
},
|
||
get() {
|
||
|
||
let that = this
|
||
|
||
// 1.这里引入后端请求数据
|
||
if (that.videoshow) {
|
||
deoList(this.videoID).then(res => {
|
||
that.videoData([res.data])
|
||
if (res.data.list.length < that.limit) {
|
||
this.loadMore = false;
|
||
}
|
||
}).catch(err => {
|
||
return uni.showToast({
|
||
title: err,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
})
|
||
this.videoshow = false
|
||
} else {
|
||
// videoList().then(res=>{
|
||
// that.videoData(res.data.list);
|
||
// })
|
||
// console.log(that.userUid,that.videoID)
|
||
videoList({
|
||
page: that.page,
|
||
limit: that.limit,
|
||
id: this.videoID
|
||
|
||
}).then(res => {
|
||
that.videoData(res.data.list)
|
||
if (res.data.list.length < that.limit) {
|
||
this.loadMore = false;
|
||
}
|
||
}).catch(err => {
|
||
return uni.showToast({
|
||
title: err,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
})
|
||
}
|
||
|
||
// that.isUser ?
|
||
// myVideoList(that.userUid, {
|
||
// page: that.page,
|
||
// limit: that.limit,
|
||
// is_star: that.isSatrt,
|
||
// community_id: that.videoID
|
||
// }).then(res => {
|
||
// that.videoData(res.data.list)
|
||
// if (res.data.list.length < that.limit) {
|
||
// this.loadMore = false;
|
||
// }
|
||
// }).catch(err => {
|
||
// return uni.showToast({
|
||
// title: err,
|
||
// icon: 'none',
|
||
// duration: 2000
|
||
// });
|
||
// })
|
||
//:
|
||
// graphicLstApi({
|
||
// page: that.page,
|
||
// limit: that.limit,
|
||
// category_id: -1
|
||
// }).then(res => {
|
||
// that.videoData(res.data.list)
|
||
// if (res.data.list.length < that.limit) {
|
||
// this.loadMore = false;
|
||
// }
|
||
// }).catch(err => {
|
||
// return uni.showToast({
|
||
// title: err,
|
||
// icon: 'none',
|
||
// duration: 2000
|
||
// });
|
||
// })
|
||
that.loadVideo = true
|
||
},
|
||
getFocusList() {
|
||
let that = this;
|
||
focusArticleLst({
|
||
page: that.page,
|
||
limit: that.limit,
|
||
type: 2
|
||
}).then(res => {
|
||
that.loadVideo = true
|
||
that.videoData(res.data.list)
|
||
if (res.data.list.length < that.limit) {
|
||
this.loadMore = false;
|
||
}
|
||
}).catch(err => {
|
||
return uni.showToast({
|
||
title: err,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
})
|
||
},
|
||
videoData(list) {
|
||
this.communityId = list[0]['community_id']
|
||
if (list.length == 0) return
|
||
let that = this;
|
||
that.page = that.page + 1;
|
||
var msg = list
|
||
// 2.这里把视频添加到视频列表
|
||
for (let i = 0; i < msg.length; i++) {
|
||
msg[i]['isMore'] = false
|
||
msg[i]['playIng'] = false
|
||
msg[i]['state'] = 'pause'
|
||
msg[i]['isplay'] = true
|
||
msg[i]['loading'] = false
|
||
that.dataList.push(msg[i])
|
||
//#ifndef H5
|
||
if (i == 0 && that.k == 0) {
|
||
this.dataList[0].isplay = false
|
||
this.dataList[0].playIng = true
|
||
this.dataList[0].state = 'play'
|
||
this.dataList[0].loading = false
|
||
uni.createVideoContext(that.dataList[0].community_id + '' + 0, that).play()
|
||
}
|
||
//#endif
|
||
}
|
||
//#ifdef MP
|
||
if (this.k == 0) {
|
||
this.videoShare(this.dataList[0]);
|
||
}
|
||
// #endif
|
||
// #ifdef H5
|
||
if (that.isLogin) {
|
||
that.setOpenShare(that.videoID);
|
||
}
|
||
// #endif
|
||
},
|
||
share() {
|
||
this.H5ShareBox = true;
|
||
},
|
||
/**
|
||
* 分享打开
|
||
*
|
||
*/
|
||
listenerActionSheet: function() {
|
||
if (this.isLogin === false) {
|
||
this.isAuto = true;
|
||
this.isShowAuth = true
|
||
} else {
|
||
// #ifdef H5
|
||
if (this.$wechat.isWeixin() === true) {
|
||
this.weixinStatus = true;
|
||
}
|
||
// #endif
|
||
this.posters = true;
|
||
}
|
||
},
|
||
// 分享关闭
|
||
listenerActionClose: function() {
|
||
this.posters = false;
|
||
},
|
||
//隐藏海报
|
||
posterImageClose: function() {
|
||
this.posterImageStatus = false
|
||
},
|
||
// 小程序关闭分享弹窗；
|
||
goFriend: function() {
|
||
this.posters = false;
|
||
},
|
||
/* 获取产品分销二维码
|
||
* @param function successFn 下载完成回调
|
||
*
|
||
*/
|
||
downloadFilePromotionCode: function(id) {
|
||
let that = this;
|
||
let type;
|
||
// #ifndef MP
|
||
type = 'wechat'
|
||
// #endif
|
||
// #ifdef MP
|
||
type = 'routine'
|
||
// #endif
|
||
getVideoCode(id, {
|
||
type: type
|
||
}).then(async res => {
|
||
that.codeImg = res.data.url
|
||
|
||
}).catch(err => {
|
||
that.$set(that, 'PromotionCode', '');
|
||
});
|
||
|
||
},
|
||
/*
|
||
* 保存到手机相册
|
||
*/
|
||
// #ifdef MP
|
||
savePosterPath: function() {
|
||
let that = this;
|
||
uni.getSetting({
|
||
success(res) {
|
||
if (!res.authSetting['scope.writePhotosAlbum']) {
|
||
uni.authorize({
|
||
scope: 'scope.writePhotosAlbum',
|
||
success() {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: that.posterImage,
|
||
success: function(res) {
|
||
that.posterImageClose();
|
||
that.$util.Tips({
|
||
title: '保存成功',
|
||
icon: 'success'
|
||
});
|
||
},
|
||
fail: function(res) {
|
||
that.$util.Tips({
|
||
title: '保存失败'
|
||
});
|
||
}
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: that.posterImage,
|
||
success: function(res) {
|
||
that.posterImageClose();
|
||
that.$util.Tips({
|
||
title: '保存成功',
|
||
icon: 'success'
|
||
});
|
||
},
|
||
fail: function(res) {
|
||
that.$util.Tips({
|
||
title: '保存失败'
|
||
});
|
||
},
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// #endif
|
||
/**
|
||
* 生成海报
|
||
*/
|
||
async goPoster() {
|
||
let that = this;
|
||
if (!that.isLogin) {}
|
||
let type;
|
||
// #ifndef MP
|
||
type = 'wechat'
|
||
// #endif
|
||
// #ifdef MP
|
||
type = 'routine'
|
||
// #endif
|
||
getVideoCode(that.communityId, {
|
||
type: type
|
||
}).then(async res => {
|
||
if (res.status !== 200) {
|
||
that.$util.Tips({
|
||
title: '生成海报失败'
|
||
});
|
||
return false;
|
||
}
|
||
that.codeImg = res.data.url
|
||
}).catch(err => {
|
||
that.$set(that, 'PromotionCode', '');
|
||
that.$util.Tips({
|
||
title: '生成海报失败'
|
||
});
|
||
return false;
|
||
});
|
||
|
||
// console.log(this.posterImage)
|
||
if (this.posterImage) {
|
||
this.posterImageStatus = true
|
||
this.posters = false
|
||
return
|
||
}
|
||
let arr2
|
||
that.posters = false;
|
||
that.$set(that, 'canvasStatus', true);
|
||
uni.showLoading({
|
||
title: '海报生成中',
|
||
mask: true
|
||
});
|
||
// #ifdef MP || APP-PLUS
|
||
if (that.dataList[that.k].author.avatar) {
|
||
arr2 = [that.posterbackgd, await that.fileStoreImage(that.dataList[that.k].image[0]), await that
|
||
.fileStoreImage(
|
||
that.codeImg), await that.fileStoreImage(that.dataList[that.k].author.avatar)
|
||
];
|
||
} else {
|
||
arr2 = [that.posterbackgd, await that.fileStoreImage(that.dataList[that.k].image[0]), await that
|
||
.fileStoreImage(
|
||
that.codeImg), that.avatar
|
||
];
|
||
}
|
||
// #endif
|
||
// #ifdef H5
|
||
if (that.dataList[that.k].author.avatar) {
|
||
arr2 = [that.posterbackgd, await that.imgToBase(that.dataList[that.k].image[0]), await that
|
||
.imgToBase(that
|
||
.codeImg), await that.imgToBase(that.dataList[that.k].author.avatar)
|
||
];
|
||
} else {
|
||
arr2 = [that.posterbackgd, await that.imgToBase(that.dataList[that.k].image[0]), await that
|
||
.imgToBase(that
|
||
.codeImg), that.avatar
|
||
];
|
||
}
|
||
// #endif
|
||
//生成推广海报
|
||
that.$util.videoPosterCanvas(arr2, that.dataList[that.k].content, that.dataList[that.k].author
|
||
.nickname,
|
||
function(tempFilePath) {
|
||
that.$set(that, 'posterImage', tempFilePath);
|
||
that.$set(that, 'posterImageStatus', true);
|
||
that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
|
||
that.$set(that, 'canvasStatus', false);
|
||
}, (err) => {
|
||
that.$set(that, 'canvasStatus', false);
|
||
});
|
||
},
|
||
//图片转符合安全域名路径
|
||
fileStoreImage(url) {
|
||
let that = this;
|
||
// #ifdef MP || APP-PLUS
|
||
let ishttps = url.split('//')[0] == 'https:'
|
||
if (!ishttps) {
|
||
url = 'https://' + url.split('//')[1]
|
||
}
|
||
// #endif
|
||
return new Promise((resolve, reject) => {
|
||
uni.downloadFile({
|
||
url,
|
||
success: function(res) {
|
||
resolve(res.tempFilePath);
|
||
},
|
||
fail: function() {
|
||
return that.$util.Tips({
|
||
title: ''
|
||
});
|
||
}
|
||
});
|
||
})
|
||
},
|
||
/*
|
||
* 保存到手机相册
|
||
*/
|
||
// #ifdef MP
|
||
savePosterPath: function() {
|
||
let that = this;
|
||
uni.getSetting({
|
||
success(res) {
|
||
if (!res.authSetting['scope.writePhotosAlbum']) {
|
||
uni.authorize({
|
||
scope: 'scope.writePhotosAlbum',
|
||
success() {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: that.posterImage,
|
||
success: function(res) {
|
||
that.posterImageClose();
|
||
that.$util.Tips({
|
||
title: '保存成功',
|
||
icon: 'success'
|
||
});
|
||
},
|
||
fail: function(res) {
|
||
that.$util.Tips({
|
||
title: '保存失败'
|
||
});
|
||
}
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: that.posterImage,
|
||
success: function(res) {
|
||
that.posterImageClose();
|
||
that.$util.Tips({
|
||
title: '保存成功',
|
||
icon: 'success'
|
||
});
|
||
},
|
||
fail: function(res) {
|
||
that.$util.Tips({
|
||
title: '保存失败'
|
||
});
|
||
},
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// #endif
|
||
async imgToBase(url) {
|
||
let res = await imgToBase({
|
||
image: url
|
||
})
|
||
return res.data.image
|
||
},
|
||
cLike(item) {
|
||
if (this.isLogin) {
|
||
let status = item.relevance_id ? 0 : 1
|
||
graphicStartApi(item.community_id, {
|
||
status: status
|
||
}).then(res => {
|
||
if (item.relevance_id) {
|
||
item.count_start--;
|
||
item.count_start = item.count_start == 0 ? 0 : item.count_start
|
||
item.relevance_id = false
|
||
} else {
|
||
item.count_start++;
|
||
item.relevance_id = true
|
||
}
|
||
}).catch(err => {
|
||
return uni.showToast({
|
||
title: err,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
})
|
||
} else {
|
||
this.isAuto = true;
|
||
this.isShowAuth = true;
|
||
}
|
||
|
||
},
|
||
/*查看提到的宝贝*/
|
||
openMore(item) {
|
||
this.$refs.mentioned.showPopup()
|
||
this.moreList = item.relevance;
|
||
this.authorUid = item.uid
|
||
},
|
||
closePopup() {
|
||
this.$refs.mentioned.closePopup()
|
||
},
|
||
goDetail(item) {
|
||
if (item.product_type === 1) {
|
||
uni.navigateTo({
|
||
url: `/pages/activity/goods_seckill_details/index?id=${item.product_id}&time=${item.stop_time}&spid=${this.uid}`
|
||
})
|
||
} else if (item.product_type === 2) {
|
||
uni.navigateTo({
|
||
url: `/pages/activity/presell_details/index?id=${item.activity_id}&spid=${this.uid}`
|
||
})
|
||
} else if (item.product_type === 0) {
|
||
uni.navigateTo({
|
||
url: `/pages/goods_details/index?id=${item.product_id}&spid=${this.uid}`
|
||
})
|
||
} else if (item.product_type === 4) {
|
||
uni.navigateTo({
|
||
url: `/pages/activity/combination_details/index?id=${item.activity_id}&spid=${this.uid}`
|
||
})
|
||
} else if (item.product_type === 40) {
|
||
uni.navigateTo({
|
||
url: `/pages/activity/combination_status/index?id=${item.activity_id}&spid=${this.uid}`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.video-list {
|
||
padding: 150rpx 28.07rpx 28.07rpx 28.07rpx;
|
||
/* #ifdef MP */
|
||
padding-top: 150rpx;
|
||
/* #endif */
|
||
background-color: #F5F5F5;
|
||
|
||
.goods_item {
|
||
width: 342.11rpx;
|
||
height: 491.23rpx;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
display: inline-block;
|
||
flex-direction: column;
|
||
margin-bottom: 10.53rpx;
|
||
margin-right: 10.53rpx;
|
||
|
||
&:nth-child(2n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.goods_img {
|
||
width: 100%;
|
||
height: 294.74rpx;
|
||
}
|
||
|
||
.botm {
|
||
flex: 1;
|
||
padding: 0 14.04rpx;
|
||
padding-bottom: 21.05rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
margin: 12px 0;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.goods_info {
|
||
flex-direction: initial;
|
||
justify-content: space-between;
|
||
|
||
.l_info {
|
||
flex-direction: initial;
|
||
align-items: center;
|
||
}
|
||
|
||
.g_img {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.g_name {
|
||
margin-left: 8.77rpx;
|
||
width: 100.63rpx;
|
||
text-overflow: ellipsis;
|
||
/* 溢出显示省略号 */
|
||
overflow: hidden;
|
||
/* 溢出隐藏 */
|
||
white-space: nowrap;
|
||
/* 强制不换行 */
|
||
}
|
||
|
||
.nice_box {
|
||
display: flex;
|
||
flex-direction: initial;
|
||
align-items: center;
|
||
|
||
.isshow {
|
||
color: #FE3530 !important;
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.icon-shoucang1 {
|
||
color: #F84221;
|
||
}
|
||
|
||
.collect {
|
||
font-size: 24rpx;
|
||
margin-left: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.header {
|
||
position: fixed;
|
||
z-index: 9;
|
||
width: 750rpx;
|
||
height: 120rpx;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-top: 20rpx;
|
||
/* #ifdef MP */
|
||
padding-top: 75rpx;
|
||
/* #endif */
|
||
|
||
.tool-bar {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 60rpx;
|
||
height: 86rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.xiangzuo {
|
||
width: 23rpx;
|
||
height: 42rpx;
|
||
margin-right: 40rpx;
|
||
margin-left: 20rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.items {
|
||
margin: 0 30rpx;
|
||
|
||
image {
|
||
width: 58rpx;
|
||
height: 58rpx;
|
||
|
||
}
|
||
|
||
.tName {
|
||
font-size: 33rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #737373;
|
||
line-height: 50px;
|
||
|
||
&.on {
|
||
font-size: 33rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.shareImg {
|
||
z-index: 1000;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.shortVideo,
|
||
.container {
|
||
background: linear-gradient(180deg, rgba(0, 0, 0, .8) 0%, #000000 100%);
|
||
|
||
}
|
||
|
||
.item {
|
||
position: relative;
|
||
}
|
||
|
||
.video-status {
|
||
width: 690rpx;
|
||
position: absolute;
|
||
left: 30rpx;
|
||
background: #000;
|
||
border-radius: 10rpx;
|
||
top: 60rpx;
|
||
padding: 30rpx;
|
||
|
||
.status-title {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.title {
|
||
margin-left: 20rpx;
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.refusal {
|
||
color: #ffffff;
|
||
font-size: 22rpx;
|
||
margin: 15rpx 0 0 48rpx;
|
||
}
|
||
|
||
.image {
|
||
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
}
|
||
|
||
.videoHover {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
flex: 1;
|
||
justify-content: center;
|
||
align-items: center;
|
||
// background-color: red;
|
||
}
|
||
|
||
.playState {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
opacity: 0.2;
|
||
}
|
||
|
||
.userInfo {
|
||
position: absolute;
|
||
bottom: 420rpx;
|
||
right: 20rpx;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
|
||
.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: 26rpx;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.icon-shipindianzan-yidian {
|
||
font-size: 64rpx;
|
||
}
|
||
|
||
.icon-pinglun2 {
|
||
font-size: 59rpx;
|
||
}
|
||
|
||
.icon-fenxiang3 {
|
||
font-size: 58rpx;
|
||
}
|
||
|
||
.info-text {
|
||
margin-top: 10rpx;
|
||
color: #ffffff;
|
||
|
||
}
|
||
|
||
.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 {
|
||
width: 13rpx;
|
||
height: 13rpx;
|
||
background-color: #fff;
|
||
border-radius: 100%;
|
||
margin-right: 10rpx;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.manage {
|
||
width: 210rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 2rpx 15rpx rgba(0, 0, 0, 0.1);
|
||
padding: 0 15rpx;
|
||
position: absolute;
|
||
bottom: -50rpx;
|
||
right: 110rpx;
|
||
z-index: 90;
|
||
border-radius: 16rpx;
|
||
|
||
&::before {
|
||
content: "";
|
||
display: inline-block;
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
background: #ffffff;
|
||
transform: rotate(140deg);
|
||
position: absolute;
|
||
top: 60rpx;
|
||
right: -14rpx;
|
||
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;
|
||
flex-direction: row;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.image {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin: 0 16rpx 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.likeNumActive {
|
||
color: #E93323;
|
||
}
|
||
|
||
.content {
|
||
width: 590rpx;
|
||
position: absolute;
|
||
bottom: 30rpx;
|
||
bottom: calc(30rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
||
bottom: calc(30rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
||
padding: 15rpx 0;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
color: #ffffff;
|
||
left: 50%;
|
||
margin-left: -345rpx;
|
||
|
||
.time {
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
margin-left: 12rpx;
|
||
}
|
||
|
||
.cart {
|
||
height: 48rpx;
|
||
flex-direction: row;
|
||
|
||
.cartName {
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.canvas {
|
||
z-index: 300;
|
||
width: 750px;
|
||
height: 1036px;
|
||
}
|
||
|
||
.poster-pop {
|
||
width: 600rpx;
|
||
/*#ifdef H5*/
|
||
height: 820rpx;
|
||
/*#endif*/
|
||
/*#ifndef H5*/
|
||
height: 910rpx;
|
||
/*#endif*/
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 399;
|
||
top: 50%;
|
||
margin-top: -410rpx;
|
||
border-radius: 30rpx;
|
||
}
|
||
|
||
.poster-pop .image {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.poster-pop .close {
|
||
width: 46rpx;
|
||
height: 75rpx;
|
||
position: fixed;
|
||
right: 0;
|
||
top: -73rpx;
|
||
display: block;
|
||
}
|
||
|
||
.poster-pop .keep {
|
||
text-align: center;
|
||
width: 600rpx;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
border-radius: 43rpx;
|
||
background: #E93323;
|
||
color: #ffffff;
|
||
font-size: 25rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
z-index: 9;
|
||
}
|
||
|
||
.words {
|
||
margin-top: 12rpx;
|
||
|
||
.close {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-right: 20rpx;
|
||
|
||
.imgClose {
|
||
width: 18rpx;
|
||
height: 10rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.wordsCon {
|
||
position: relative;
|
||
|
||
.more {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 40rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.img {
|
||
width: 18rpx;
|
||
height: 10rpx;
|
||
margin-left: 4rpx;
|
||
position: absolute;
|
||
bottom: 7rpx;
|
||
right: 15rpx;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.more {
|
||
font-size: 26rpx;
|
||
color: #ffffff;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
.product {
|
||
display: block;
|
||
margin-top: 27rpx;
|
||
|
||
.product-item {
|
||
display: inline-block;
|
||
width: 444rpx;
|
||
height: 136rpx;
|
||
background: rgba(0, 0, 0, .55);
|
||
border-radius: 12rpx;
|
||
padding: 16rpx 15rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
/deep/uni-swiper,
|
||
/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;
|
||
width: 480rpx !important;
|
||
}
|
||
}
|
||
|
||
.item-count {
|
||
width: 414rpx;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
border-radius: 12rpx;
|
||
|
||
.picture {
|
||
width: 104rpx;
|
||
height: 104rpx;
|
||
border-radius: 10rpx;
|
||
|
||
image {
|
||
width: 104rpx;
|
||
height: 104rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
|
||
.product-text {
|
||
width: 266rpx;
|
||
justify-content: space-between;
|
||
|
||
.name {
|
||
display: inline-block;
|
||
width: 266rpx;
|
||
}
|
||
|
||
.product-price {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.price {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: end;
|
||
|
||
text {
|
||
font-size: 34rpx;
|
||
}
|
||
}
|
||
|
||
.buy-btn {
|
||
width: 89rpx;
|
||
height: 36rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
border-radius: 26rpx;
|
||
background: #E93323;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.product_cate {
|
||
margin: 20rpx 0;
|
||
flex-direction: row;
|
||
|
||
>view {
|
||
display: inline-block;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
border-radius: 30rpx;
|
||
padding: 0 25rpx;
|
||
line-height: 40rpx;
|
||
border-radius: 29rpx;
|
||
border: 1px solid #ffffff;
|
||
|
||
.text {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.icon {
|
||
display: inline-block;
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
position: relative;
|
||
top: 2rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.generate-posters.on {
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
.generate-posters .item {
|
||
/* #ifdef H5 */
|
||
flex: 100%;
|
||
/* #endif */
|
||
/* #ifndef H5 */
|
||
flex: 33.33%;
|
||
/* #endif */
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
|
||
&.item3 {
|
||
flex: 33.33%;
|
||
}
|
||
}
|
||
|
||
.generate-posters .item .iconfont {
|
||
font-size: 80rpx;
|
||
color: #5eae72;
|
||
}
|
||
|
||
.generate-posters .item .iconfont.icon-haibao {
|
||
color: #5391f1;
|
||
}
|
||
|
||
.mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
z-index: 9;
|
||
}
|
||
|
||
.noVideo {
|
||
position: fixed;
|
||
top: 400rpx;
|
||
z-index: 9;
|
||
width: 750rpx;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
|
||
.pictrue {
|
||
width: 414rpx;
|
||
height: 256rpx;
|
||
}
|
||
|
||
.tips {
|
||
text-align: center;
|
||
margin-top: 14rpx;
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.videoa {
|
||
background-color: red;
|
||
}
|
||
</style> |