You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1558 lines
40 KiB
1558 lines
40 KiB
<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"
|
|
: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">¥<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>
|
|
<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>
|
|
<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 { videoList, myVideoList, graphicStartApi, followAuthorApi, getVideoCode, deletePlantApi, focusArticleLst } 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 {
|
|
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: 3,
|
|
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
|
|
}
|
|
},
|
|
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.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();
|
|
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() {},
|
|
methods: {
|
|
//#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
|
|
//#ifdef H5
|
|
goBack: function() {
|
|
uni.navigateBack();
|
|
},
|
|
//#endif
|
|
navTap(n) {
|
|
this.currentNav = n;
|
|
this.timeout = "";
|
|
this.k = 0;
|
|
this.page = 1;
|
|
this.loadVideo = true;
|
|
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) {
|
|
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){
|
|
console.log('eeeee',event.detail.current);
|
|
this.k = event.detail.current;
|
|
this.posterImage = false;
|
|
if(this.isLogin){
|
|
this.downloadFilePromotionCode(this.dataList[this.k]['community_id']);
|
|
}
|
|
|
|
},
|
|
animationfinish(event){
|
|
// 1.这里进行判断，如果是最后一个视频就进入 get() 方法加载视频进入列表
|
|
if(this.k == this.dataList.length - 1){
|
|
this.loadVideo = true;
|
|
this.GET()
|
|
}
|
|
},
|
|
//每一组结束时新的请求
|
|
GET(){
|
|
let that = this
|
|
if(!that.loadVideo) 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
|
|
}).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)
|
|
}).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.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.videoData(res.data.list)
|
|
}).catch(err=>{
|
|
return uni.showToast({
|
|
title: err,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
})
|
|
},
|
|
getFocusList(){
|
|
let that = this;
|
|
if(!that.loadVideo) return
|
|
that.loadVideo = true
|
|
focusArticleLst({
|
|
page: that.page,
|
|
limit: that.limit,
|
|
}).then(res=>{
|
|
that.loadVideo = false
|
|
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;
|
|
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() {
|
|
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{
|
|
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>
|
|
.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> |