<template>
<view>
<view class="userCard">
<view class="header">
<view
class="avatar"
@click="toStore"
>
<simage
:src="avatarUrl"
width="80rpx"
shape="circle"
height="80rpx"
></simage>
</view>
<view class="right ">
<view
class="userInfo"
@click="toStore"
>
<view class="top"><text
class="bigTag"
v-if="bigTag"
>{{bigTag}}</text><text>{{userId===0?'高桥大市场':nickname}}</text></view>
<view class="bottom">
<view
class="level"
v-for="item in level"
:key="item"
></view>
<view
v-if="level||level&&otherTags.length"
style="width:2rpx;border:1rpx solid #ccc;height:28rpx;"
></view>
<text
class="otherTag"
v-for="(otherTag, i) in otherTagArr"
:key="i"
>{{otherTag}}</text>
</view>
</view>
<view
class="button"
v-if="!cardType"
>
<button
v-if="!concerned"
@click="follow"
class="operateBtn"
>关注</button>
<button
v-else
@click="toStore"
class="operateBtnActive"
>进店</button>
</view>
<view
class="button"
v-else-if="cardType==='collection'"
>
<view
v-if="collected"
class="icon iconCollected"
@click="cancelCollect"
></view>
<view
v-else
class="icon iconCollect"
@click="collect"
></view>
</view>
<view
class="button"
v-else-if="cardType==='concern'"
>
<button
v-if="!concerned"
@click="follow"
class="operateBtn"
>关注</button>
<button
v-else
@click="cancelConcern"
class="operateBtnActive"
>取消关注</button>
</view>
<view
class="button"
v-else-if="cardType==='authorized'"
>
<button
v-if="authorized"
class="operateBtn"
@click="cancelAuthorized"
>取消授权</button>
<button
v-else
class="operateBtnActive"
@click="toStore"
>进店</button>
</view>
<view
class="button"
v-else-if="cardType==='homeCard'&&closable"
>
<view
class="icon iconClose"
@click.stop="closeItem"
></view>
</view>
</view>
</view>
<view @click="toDynamic">
<text
class="title"
v-if="title"
>{{title}}</text>
<view class="content">
{{content}}
</view>
</view>
<view
class="pics"
v-if="pics&&pics.length>0"
>
<simage
v-for="(pic, i) in images"
:key="i"
class="image"
width="226rpx"
height="226rpx"
:src="pic"
@click.native.stop="previewImgs(images,i)"
></simage>
</view>
<!-- #ifdef APP-PLUS -->
<view
class="video"
v-else
>
<view style="position: relative; background-color: #000000;"@click="palyVideo()">
<image :src="BaseHost+poster"
:lazy-load="true"
style="width: 100%;height: 320rpx;"
mode="aspectFill"
>
</image>
<image :src="BaseHost+'/static/image/paly.png'"
:lazy-load="true"
mode="scaleToFill"
class="play-icon"
></image>
</view>
<video
class="video-content"
:id="`videoItem${itemId}`"
:enable-play-gesture="true"
:src="BaseHost+video"
:poster="poster?BaseHost+poster:''"
@fullscreenchange="fullScreen"
controls
></video>
</view>
<!-- #endif -->
<view
class="tags"
v-if="tags.length>0"
>
<text
class="tag"
v-for="(tag, i) in tags"
:key="i"
>{{tag}}</text>
</view>
<view
class="operate"
v-if="operate"
>
<!-- <view
class="button"
@click="forward()"
>
<view class="icon iconForward"></view>
<view>{{forwardCount}}</view>
</view> -->
<view
class="button"
@click="toDynamic()"
>
<view class="icon iconComment"></view>
<view>{{commentCount}}</view>
</view>
<view
class="button"
@click="like()"
>
<view
class="icon iconLiked"
v-show="isPraised"
></view>
<view
v-show="!isPraised"
class="icon iconLike"
></view>
<view>{{likeCount}}</view>
</view>
</view>
<forward
class="forward-box"
v-if="isForward"
@cancel="cancelForward"
:dynamicId="itemId"
:name="nickname"
:mes="content"
>
</forward>
</view>
<view class="division"></view>
</view>
</template>
<script>
import { previewImg } from "../../utils/index";
import { BaseHost, SourceType,GqAvatar } from "../../utils/const";
import Forward from "../../pages/components/forward";
import { CURRENT_NEWS } from "../../store/type";
export default {
components: {
Forward
},
props: {
sourceObj: {
type: Object,
default: null
},
level:{
type:Number,
default:0
},
poster:{
type:String,
default:""
},
mine: {
type: Boolean,
default: false
},
operate: {
type: Boolean,
default: true
},
sourceType: {
type: Number,
default: SourceType.news,
required: true
},
end: {
type: Boolean,
default: false
},
cardType: {
type: String,
default: ""
},
avatar: {
type: String,
default: ""
},
isCollect: {
type: Boolean,
default: true
},
index: {
type: Number,
default: 0
},
itemId: {
type: Number,
default: 0,
required: true
},
title: {
type: String,
default: ""
},
userId: {
type: Number,
default: 0,
required: true
},
groupId: {
type: Number,
default: 0
},
isConcern: {
type: Boolean,
default: true
},
pics: {
type: Array,
default: () => []
},
video: {
type: String,
default: ""
},
content: {
type: String,
default: ""
},
bigTag: {
type: String,
default: ""
},
forwardCount: {
type: Number,
default: 0
},
commentCount: {
type: Number,
default: 0
},
praiseCount: {
type: Number,
default: 0
},
praised: {
type: Boolean,
default: false
},
otherTags: {
type: [Array,String],
default: () => []
},
tags: {
type: Array,
default: () => []
},
nickname: {
type: String,
default: ""
},
newsId: {
type: Number,
default: 0,
required: true
},
authorized: {
type: Boolean,
default: false
},
closable: {
type: Boolean,
default: false
},
},
computed: {
avatarUrl() {
return this.userId === 0 ? GqAvatar : this.avatar;
},
images() {
return this.pics ? this.pics.slice(0, 3) : [];
},
otherTagArr(){
return typeof this.otherTags === 'string'?this.otherTags.split(' '):this.otherTags
}
},
data() {
return {
isPraised: false,
likeCount: 0,
BaseHost,
concerned: false,
collected: false,
isForward: false,
videoContext:null,
};
},
created() {
this.isPraised = this.praised;
this.likeCount = this.praiseCount;
},
mounted() {
this.$nextTick(()=>{
this.videoContext = uni.createVideoContext(`videoItem${this.itemId}`);
})
},
watch: {
isCollect:{
handler(val){
this.collected = val;
},
immediate: true
},
isConcern: {
handler(val) {
this.concerned = val;
},
immediate: true
}
},
methods: {
closeItem() {
this.$emit("addNew");
},
cancelAuthorized() {
uni.showModal({
title: "提示",
content: "确定要取消对此用户的授权吗?",
success: res => {
if (res.confirm) {
uni.showLoading();
this.$u.api
.cancelAuthorized({
authTo: this.userId
})
.then(() => {
this.$emit("cancelAuthorized", {
userId: this.userId,
index: this.index
});
uni.hideLoading();
})
.finally(() => {
});
}
}
});
},
toStore() {
uni.navigateTo({ url: "/pages/dynamic/storeDynamic?id=" + this.userId });
},
toDynamic() {
if (this.mine === true) {
uni.navigateTo({
url: `/pages/supply/releaseMatchSuccess?id=${this.newsId ||
this.itemId}&user_id=${this.userId}`
});
} else {
uni.navigateTo({
url: `/pages/dynamic/dynamic?id=${this.newsId ||
this.itemId}&group_id=${this.groupId}&source_type=${
this.sourceType
}`
});
}
if(this.sourceObj){
getApp().globalData.currentNews = JSON.parse(JSON.stringify(this.sourceObj));
}
},
collect() {
uni.showLoading();
this.$u.api
.collect({
sourceId: this.newsId || this.itemId,
sourceType: this.sourceType
})
.then(res => {
if (res.code === 1) {
uni.showToast({
title: "收藏成功",
icon: "none"
});
this.collected = true;
uni.hideLoading();
}
})
.finally(() => {
});
},
cancelCollect() {
uni.showModal({
title: "提示",
content: "确定要取消此收藏吗?",
success: res => {
if (res.confirm) {
uni.showLoading();
this.$u.api
.collect({
sourceId: this.newsId || this.itemId,
sourceType: this.sourceType
})
.then(res => {
if (res.code === 1) {
uni.showToast({
title: "已取消收藏",
icon: "none"
});
this.collected = false;
this.$emit("remove", { index: this.index });
}
})
.finally(() => {
// uni.hideLoading();
});
}
}
});
},
palyVideo(){
this.videoContext.requestFullScreen();
this.videoContext.play();
},
fullScreen(event){
if(event.detail.direction === 'vertical'){
this.videoContext.stop();
}
},
cancelConcern() {
uni.showLoading({
title: "请稍后...."
});
this.$u.api
.concern({
userId: this.userId
})
.then(res => {
if (res.code === 1) {
uni.showToast({
icon: "none",
title: "取消成功"
});
this.concerned = false;
this.$emit("remove", {
index: this.index
});
}
})
.finally(() => {
// uni.hideLoading();
});
},
async follow() {
uni.showLoading({
title: "关注中...."
});
this.$u.api
.concern({
userId: this.userId
})
.then(res => {
if (res.code === 1) {
uni.showToast({
icon: "none",
title: "关注成功"
});
this.concerned = true;
this.$emit("concerned", {
userId: this.userId
});
}
})
.finally(() => {
// uni.hideLoading();
});
},
cancelForward() {
this.isForward = false;
},
async like() {
this.$u.api
.savePraise({
sourceId: this.newsId || this.itemId,
sourceType: this.sourceType
})
.then(res => {
if (res.code === 1) {
this.isPraised = !this.isPraised;
if (this.isPraised) {
this.likeCount += 1;
} else {
if(this.likeCount>0){
this.likeCount -= 1;
}else{
this.likeCount = 0;
}
}
this.$emit('updateLike', {
praisedCount:this.likeCount,
praised:this.isPraised
}, this.sourceObj);
}
});
},
forward() {
this.isForward = true;
},
previewImgs(pics, index) {
previewImg([...pics], index);
}
}
};
</script>
<style>
/* .uni-video-cover{
z-index:-1;
} */
</style>
<style lang="scss" scoped>
.video-content {
min-height: 320rpx;
display: none;
}
.userCard {
width: 690rpx;
padding: 30rpx 30rpx 20rpx;
box-sizing: content-box;
background-color: #ffffff;
}
.title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000;
line-height: 42rpx;
}
.video {
width: 100%;
height: 320rpx;
margin-top: 30rpx;
video {
width: 100%;
height: 320rpx;
}
.play-icon{
width: 80rpx;
height: 80rpx;
left: 50%;
top: 50%;
margin-left: -40rpx;
margin-top: -40rpx;
display: block;
position: absolute;
z-index: 10;
}
}
.userInfo {
height: 80rpx;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 400;
color: #333333;
margin-left: 26rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bigTag {
padding: 0rpx 13rpx;
height: 36rpx;
background: #fff6eb;
border: 1rpx solid #ffd49d;
border-radius: 4rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: #fe7226;
text-align: center;
line-height: 36rpx;
margin-right: 15rpx;
box-sizing: content-box;
}
.header {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 26rpx;
.top {
display: flex;
font-weight: bold;
color: #555;
align-items: center;
}
.bottom {
display: flex;
}
.right {
display: flex;
width: 100%;
justify-content: space-between;
}
}
.operateBtn {
margin-left: auto;
height: 45rpx;
background: #fe7226;
border-radius: 22rpx;
min-width: 90rpx;
font-size: 24rpx;
padding: 0 16rpx;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
line-height: 45rpx;
text-align: center;
}
.operateBtnActive {
margin-left: auto;
height: 45rpx;
background-color: #fff;
padding: 0 16rpx;
border: 1rpx solid #fe7226;
border-radius: 22rpx;
box-sizing: border-box;
min-width: 90rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: #fe7226;
line-height: 43rpx;
text-align: center;
}
.level {
width: 24rpx;
height: 28rpx;
background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0i5Zu+5bGCXzEiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA5MzguOTkgNzMxLjQ3Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6NTZweDtzdHJva2U6dXJsKCPmnKrlkb3lkI3nmoTmuJDlj5hfMjApO30uY2xzLTJ7ZmlsbDp1cmwoI+acquWRveWQjeeahOa4kOWPmF84KTt9LmNscy0ze2ZpbGw6dXJsKCPmnKrlkb3lkI3nmoTmuJDlj5hfMjAtMik7fS5jbHMtNHtmaWxsOnVybCgj5pyq5ZG95ZCN55qE5riQ5Y+YXzIwLTMpO30uY2xzLTV7Zm9udC1zaXplOjUwMHB4O2ZpbGw6IzAxODNmZTtmb250LWZhbWlseTpBZG9iZVNvbmdTdGQtTGlnaHQtR0JwYy1FVUMtSCwgQWRvYmUgU29uZyBTdGQ7fTwvc3R5bGU+PGxpbmVhckdyYWRpZW50IGlkPSLmnKrlkb3lkI3nmoTmuJDlj5hfMjAiIHgxPSI3OTEiIHkxPSI2MTMuNzQiIHgyPSIxNDI0IiB5Mj0iNjEzLjc0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDA4MmZmIi8+PHN0b3Agb2Zmc2V0PSIwLjk5IiBzdG9wLWNvbG9yPSIjMjlhYmUyIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9IuacquWRveWQjeeahOa4kOWPmF84IiB4MT0iMTM1MyIgeTE9IjkwOSIgeDI9IjEzNTMiIHkyPSI5MDkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNkOGI1NjUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNiYTdiNGQiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0i5pyq5ZG95ZCN55qE5riQ5Y+YXzIwLTIiIHgxPSI5MjIuNzciIHkxPSI0MTYuMjIiIHgyPSIxMzY4IiB5Mj0iNDE2LjIyIiB4bGluazpocmVmPSIj5pyq5ZG95ZCN55qE5riQ5Y+YXzIwIi8+PGxpbmVhckdyYWRpZW50IGlkPSLmnKrlkb3lkI3nmoTmuJDlj5hfMjAtMyIgeDE9Ijg0NiIgeTE9IjczNy45NSIgeDI9IjEyOTEuNDkiIHkyPSI3MzcuOTUiIHhsaW5rOmhyZWY9IiPmnKrlkb3lkI3nmoTmuJDlj5hfMjAiLz48L2RlZnM+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNODE5LDI3Nmg1NzdWNjIycy01NCwyNzktMjg4LDMyOWMtNjMtMTAtMjI5LTcxLTI4OS0zMTZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzkxIC0yNDgpIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTM1Myw5MDkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03OTEgLTI0OCkiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0xMzY4LDQzNXMtMjkwLTI2MC00NDUsMGMtNywxMSwxNDMtMjM0LDQ0NSw3OFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03OTEgLTI0OCkiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik04ODEsNzM1czI1Ni4xMiwyNDEuMjIsNDEwLjI2LTE5LjNjNy0xMS0xNDIuMjIsMjM0LjQ4LTQ0NS4yNi03Ni41MVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03OTEgLTI0OCkiLz48dGV4dCB4PSItNzkxIiB5PSItMjQ4Ii8+PHRleHQgY2xhc3M9ImNscy01IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDAuMTUgNDk2LjIpIj5TPC90ZXh0Pjwvc3ZnPg==);
background-repeat: no-repeat;
background-size: cover;
margin-left: 1rpx;
}
.otherTag {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 400;
color: #b1b1b1;
:nth-of-type(n + 1) {
margin-right: 20rpx;
}
}
.pics {
width: 100%;
height: 226rpx;
display: flex;
justify-content: flex-start;
margin: 18rpx 0rpx 30rpx;
.image {
width: 226rpx;
height: 226rpx;
margin: 5rpx 3rpx;
}
}
.tags {
display: flex;
margin-top: 18rpx;
padding-bottom: 19rpx;
flex-wrap: wrap;
.tag {
margin-right: 12rpx;
box-sizing: border-box;
padding: 0rpx 20rpx;
height: 36rpx;
background: #f5f5f5;
border-radius: 4px;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: rgba(0, 130, 255, 1);
text-align: center;
line-height: 36rpx;
}
}
.operate {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 20rpx 130rpx 0rpx;
border-top: 1rpx solid #f7f7f7;
.button {
display: flex;
align-items: center;
font-size: 24rpx;
font-family: PingFang SC;
color: #555555;
}
}
.content {
margin-top: 21rpx;
font-size: 30rpx;
font-family: PingFang SC;
color: #333333;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.icon {
margin-right: 4rpx;
}
</style>
- 发布:2021-02-04 14:48
- 更新:2021-02-04 15:27
- 阅读:806
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 3.0.7
手机系统: iOS
手机系统版本号: iOS 13.4
手机厂商: 苹果
手机机型: iphone7
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
以上组件,是放在一个新闻动态列表中,为了防止video原生组件遮住其他元素,利用image遮挡它,点击图片后全屏播放
this.$nextTick(()=>{
this.videoContext = uni.createVideoContext(`videoItem${this.itemId}`);
})
palyVideo(){
this.videoContext.requestFullScreen();
this.videoContext.play();
},
fullScreen(event){
if(event.detail.direction === 'vertical'){
this.videoContext.stop();
}
},
使用此法实现全屏播放,安卓正常,ios有声音无图像
我尝试了打开一个新页面,全屏播放视频,但是底部的控制条不能再操作,这样就不能退回之前的页面
<template>
<view>
<video
id="playVideo"
:enable-play-gesture="true"
:src="video"
:poster="poster?poster:''"
@fullscreenchange="fullScreen"
controls
:autoplay="true"
></video>
</view>
</template>
<script>
import {
BaseHost
} from "../../utils/const"
export default {
data() {
return {
video: '',
poster: '',
videoContext: null,
isFullScreen: false
}
},
onLoad({
video,
poster
}) {
this.video = BaseHost+ video;
this.poster = BaseHost+ poster;
},
mounted(){
},
onShow() {
this.$nextTick(() => {
this.videoContext = uni.createVideoContext('playVideo');
this.videoContext.requestFullScreen();
})
},
methods: {
fullScreen(event) {
console.log(event)
this.isFullScreen = event.detail.fullScreen;
if (!this.isFullScreen) {
this.videoContext.stop();
uni.navigateBack();
}else{
// this.videoContext.play();
}
},
}
}
</script>
<style>
</style>
以上组件,是放在一个新闻动态列表中,为了防止video原生组件遮住其他元素,利用image遮挡它,点击图片后全屏播放
this.$nextTick(()=>{
this.videoContext = uni.createVideoContext(`videoItem${this.itemId}`);
})
palyVideo(){
this.videoContext.requestFullScreen();
this.videoContext.play();
},
fullScreen(event){
if(event.detail.direction === 'vertical'){
this.videoContext.stop();
}
},
使用此法实现全屏播放,安卓正常,ios有声音无图像
我尝试了打开一个新页面,全屏播放视频,但是底部的控制条不能再操作,这样就不能退回之前的页面
<template>
<view>
<video
id="playVideo"
:enable-play-gesture="true"
:src="video"
:poster="poster?poster:''"
@fullscreenchange="fullScreen"
controls
:autoplay="true"
></video>
</view>
</template>
<script>
import {
BaseHost
} from "../../utils/const"
export default {
data() {
return {
video: '',
poster: '',
videoContext: null,
isFullScreen: false
}
},
onLoad({
video,
poster
}) {
this.video = BaseHost+ video;
this.poster = BaseHost+ poster;
},
mounted(){
},
onShow() {
this.$nextTick(() => {
this.videoContext = uni.createVideoContext('playVideo');
this.videoContext.requestFullScreen();
})
},
methods: {
fullScreen(event) {
console.log(event)
this.isFullScreen = event.detail.fullScreen;
if (!this.isFullScreen) {
this.videoContext.stop();
uni.navigateBack();
}else{
// this.videoContext.play();
}
},
}
}
</script>
<style>
</style>
预期结果:
。。。
。。。
实际结果:
。。。
。。。
1***@qq.com (作者)
我尝试了,当要播放视频是,跳往另一个叫playVideo的页面,来解决这个问题,但是,底部的控制条不能操作
2021-02-05 14:53
1***@qq.com (作者)
你可以看一下最新更新的一块代码,只有十几行的样子
2021-02-05 14:56
1***@qq.com (作者)
视频全屏播放,退出全屏后,发现字体被放大
2021-02-05 16:13
1***@qq.com (作者)
类似的问题以及被其他人发现过
https://ask.dcloud.net.cn/question/89070
https://ask.dcloud.net.cn/question/79717
2021-02-05 16:49