1561 lines
41 KiB
Plaintext
1561 lines
41 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 v-if="!isUser" class="header">
|
||
<!-- #ifdef H5 -->
|
||
<view class="tool-bar">
|
||
<view class='iconfont icon-xiangzuo' @tap='goBack'></view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<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>
|
||
<swiper :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>
|
||
<!--
|
||
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"
|
||
:custom-cache="false"
|
||
: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: '+ windowWidth +'px; height: '+ windowHeight +'px;z-index: -1;'"
|
||
|
||
></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">HK$<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">HK$<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>
|
||
<view class="noVideo acea-row row-center-wrapper" v-if="!dataList.length && !loadVideo">
|
||
<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>
|
||
</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 { videoList, myVideoList, graphicStartApi, followAuthorApi, getVideoCode, deletePlantApi, focusArticleLst } from '@/api/community.js';
|
||
import { getUserInfo, imgToBase } from '@/api/user.js';
|
||
import ClipboardJS from "@/plugin/clipboard/clipboard.js";
|
||
export default {
|
||
components:{
|
||
comment,
|
||
mentioned,
|
||
},
|
||
computed: configMap({community_reply_status:0},mapGetters(['isLogin', 'uid'])),
|
||
data() {
|
||
return {
|
||
imgHost: HTTP_REQUEST_URL,
|
||
videoID:0,
|
||
pinlunNum:0,
|
||
windowWidth: 0,
|
||
windowHeight: 0,
|
||
platform: "",
|
||
deleteHeight: 0,
|
||
dataList: [],
|
||
shareItem: null,
|
||
k: 0,
|
||
max: 2,
|
||
oldVideo: "",
|
||
voice: "",
|
||
timeout: "",
|
||
authorUid: 0,
|
||
current: 0,
|
||
// 引入评论 - 参数
|
||
heightNum: 1.3,
|
||
// 双击点赞参数
|
||
touchNum: 0,
|
||
aixinLeft: 0,
|
||
aixinTop: 0,
|
||
Rotate: 0,
|
||
currentNav:1,
|
||
limit: 6,
|
||
page: 1,
|
||
oldCurrent: 1,
|
||
H5ShareBox: false,
|
||
showComment: false,
|
||
loadVideo: true,
|
||
loadend: false,
|
||
userInfo: {},
|
||
moreList: [],
|
||
posters: false,
|
||
weixinStatus: 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
|
||
}
|
||
},
|
||
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
|
||
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.get() //刚进入页面加载数据
|
||
if(this.isLogin){
|
||
this.getUserInfo();
|
||
this.downloadFilePromotionCode(this.videoID);
|
||
}
|
||
// #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() {
|
||
this.windowWidth = uni.getSystemInfoSync().windowWidth
|
||
this.windowHeight = uni.getSystemInfoSync().windowHeight
|
||
},
|
||
//发送给朋友
|
||
onShareAppMessage(res) {
|
||
let uid = this.uid?this.uid:0;
|
||
return {
|
||
title: this.shareItem.title || '',
|
||
path: '/pages/short_video/nvueSwiper/index?id='+this.shareItem.community_id+'&pid='+uid,
|
||
imageUrl: this.shareItem.image[0] || '' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
|
||
}
|
||
},
|
||
//分享到朋友圈
|
||
onShareTimeline(res) {
|
||
return {
|
||
title: this.shareItem.title || '',
|
||
query:{
|
||
id: this.shareItem.community_id,
|
||
pid: this.uid
|
||
},//页面参数
|
||
imageUrl: this.shareItem.image[0] || '' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
|
||
}
|
||
},
|
||
methods: {
|
||
//#ifdef MP
|
||
videoShare(item){
|
||
this.shareItem = item;
|
||
if(item && item.status == 1){
|
||
uni.showShareMenu({
|
||
withShareTicket: true,
|
||
menus: ['shareAppMessage','shareTimeline'],
|
||
})
|
||
}else{
|
||
uni.hideShareMenu()
|
||
}
|
||
},
|
||
// #endif
|
||
//#ifdef H5
|
||
goBack: function() {
|
||
uni.navigateBack();
|
||
},
|
||
//#endif
|
||
navTap(n) {
|
||
this.currentNav = n;
|
||
this.dataList.forEach(item=>{
|
||
item.state = 'pause';
|
||
})
|
||
this.k = 0;
|
||
this.page = 1;
|
||
this.loadVideo = true;
|
||
this.loadend = false;
|
||
this.dataList = [];
|
||
n == 1 ? this.get() : this.getFocusList()
|
||
},
|
||
/**
|
||
* 获取个人用户信息
|
||
*/
|
||
getUserInfo: function() {
|
||
let that = this;
|
||
getUserInfo().then(res => {
|
||
that.userInfo = res.data;
|
||
});
|
||
},
|
||
// 关注作者
|
||
followAuthor: function(item) {
|
||
if (this.isLogin === false) {
|
||
toLogin()
|
||
}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('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
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 = item.count_reply+1;
|
||
}
|
||
})
|
||
},
|
||
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){
|
||
// 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;
|
||
if(this.isLogin && this.dataList[this.k]){
|
||
this.downloadFilePromotionCode(this.dataList[this.k]['community_id']);
|
||
}
|
||
},
|
||
animationfinish(event){
|
||
// 1.这里进行判断，如果是最后一个视频就进入 get() 方法加载视频进入列表
|
||
if(this.k == this.dataList.length - 1){
|
||
this.loadVideo = true;
|
||
this.currentNav == 1 ? this.GET() : this.getFocusList()
|
||
}
|
||
},
|
||
//每一组结束时新的请求
|
||
GET(){
|
||
let that = this
|
||
if(!that.loadVideo) return
|
||
if(that.loadend) return
|
||
that.loadVideo = true
|
||
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)
|
||
that.loadVideo = false
|
||
that.loadend = res.data.list.length < that.limit
|
||
}).catch(err=>{
|
||
return uni.showToast({
|
||
title: err,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}) :
|
||
videoList({
|
||
page: that.page,
|
||
limit: that.limit,
|
||
id: that.videoID
|
||
}).then(res=>{
|
||
that.loadVideo = false
|
||
that.videoData(res.data.list)
|
||
that.loadend = res.data.list.length < that.limit
|
||
}).catch(err=>{
|
||
return uni.showToast({
|
||
title: err,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
})
|
||
},
|
||
get(){
|
||
let that = this
|
||
// 1.这里引入后端请求数据
|
||
that.isUser ?
|
||
myVideoList(that.userUid,{
|
||
page: that.page,
|
||
limit: that.limit,
|
||
is_star: that.isSatrt,
|
||
community_id: that.videoID
|
||
}).then(res=>{
|
||
that.page = that.page + 1;
|
||
that.videoData(res.data.list)
|
||
}).catch(err=>{
|
||
return uni.showToast({
|
||
title: err,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}) :
|
||
videoList({
|
||
page: that.page,
|
||
limit: that.limit,
|
||
id: that.videoID
|
||
}).then(res=>{
|
||
that.page = that.page + 1;
|
||
that.videoData(res.data.list)
|
||
}).catch(err=>{
|
||
return uni.showToast({
|
||
title: err,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
})
|
||
},
|
||
getFocusList(){
|
||
let that = this;
|
||
if(!that.loadVideo) return
|
||
if(that.loadend) return
|
||
that.loadVideo = true
|
||
focusArticleLst({
|
||
page: that.page,
|
||
limit: that.limit,
|
||
}).then(res=>{
|
||
that.loadVideo = false
|
||
that.loadend = res.data.list.length < that.limit
|
||
that.page = that.page + 1;
|
||
that.videoData(res.data.list)
|
||
}).catch(err=>{
|
||
return uni.showToast({
|
||
title: err,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
})
|
||
},
|
||
videoData(list){
|
||
if(list.length == 0)return
|
||
let that = this;
|
||
|
||
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) {
|
||
toLogin()
|
||
} 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() {
|
||
if(!this.isLogin){
|
||
|
||
}
|
||
if (this.posterImage) {
|
||
this.posterImageStatus = true
|
||
this.posters = false
|
||
return
|
||
}
|
||
let that = this;
|
||
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: 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{
|
||
toLogin()
|
||
}
|
||
},
|
||
/*查看提到的宝贝*/
|
||
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>
|
||
.header {
|
||
position: fixed;
|
||
z-index: 9;
|
||
width: 750rpx;
|
||
height: 86rpx;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
top: 20rpx;
|
||
.tool-bar{
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 60rpx;
|
||
height: 86rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
.icon-xiangzuo {
|
||
margin-right: 40rpx;
|
||
margin-left: 20rpx;
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.items {
|
||
margin: 0 30rpx;
|
||
.tName {
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
&.on{
|
||
font-size: 38rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
.playState{
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
opacity: 0.2;
|
||
}
|
||
.userInfo{
|
||
position: absolute;
|
||
bottom:60rpx;
|
||
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;
|
||
}
|
||
}
|
||
</style> |