Kaynağa Gözat

阿里云播放器尺寸适配

release
HolyKnightIX 2 yıl önce
ebeveyn
işleme
5cdf2bb170
5 değiştirilmiş dosya ile 29 ekleme ve 263 silme
  1. +1
    -1
      src/components/home/home.vue
  2. +7
    -0
      src/utils/index.js
  3. +1
    -1
      src/views/login/login.vue
  4. +20
    -3
      src/views/model/downloadVideo.vue
  5. +0
    -258
      src/views/model/getPaper copy.vue

+ 1
- 1
src/components/home/home.vue Dosyayı Görüntüle

@@ -820,7 +820,7 @@ export default {
overflow: hidden;
transform: translateX(100%);
opacity: 0;
transition: all 0.3s;
transition: all 0.5s;
&.active {
opacity: 1;
transform: translateX(0);


+ 7
- 0
src/utils/index.js Dosyayı Görüntüle

@@ -106,3 +106,10 @@ export function timestampToTime(timestamp, format) {
}
}

/**
* @description:获取设备类型
* @returns PC端为null,移动端为设备类型(Array)
*/
export function getDeviceType() {
return navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
}

+ 1
- 1
src/views/login/login.vue Dosyayı Görüntüle

@@ -326,7 +326,7 @@ export default {
.page {
transform: translateX(100%);
opacity: 0;
transition: all 0.3s;
transition: all 0.5s;
&.active {
opacity: 1;
transform: translateX(0);


+ 20
- 3
src/views/model/downloadVideo.vue Dosyayı Görüntüle

@@ -23,7 +23,7 @@ import Vue from "vue";
import { Toast } from "vant";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import { scrollToID, deepCopy } from "../../utils";
import { scrollToID, getDeviceType } from "../../utils";

import { doGetVideoDetialById } from "../../api/downloadVideo";

@@ -79,13 +79,30 @@ export default {
},

open() {
// 检测设备类型
const deviceType = getDeviceType();
let isAndroid = false;
if (!deviceType) {
// 设备类型为pc
isAndroid = false;
} else {
if (deviceType[0] == "Android") {
// 设备类型为安卓
isAndroid = true;
} else {
// 其他设备
isAndroid = false;
}
}

new Aliplayer(
{
id: "J_prismPlayer",
cover: this.coverUrl,
source: this.videoUrl,
width: "480px",
height: "854px",
// 安卓设备尺寸比其他设备小一半,需适配
width: isAndroid ? "260px" : "480px",
height: isAndroid ? "427px" : "854px",
// 以下可选设置
isLive: false, // 直播
rePlay: false, // 循环播放


+ 0
- 258
src/views/model/getPaper copy.vue Dosyayı Görüntüle

@@ -1,258 +0,0 @@
<template>
<div :class="inPage ? 'page active' : 'page'">
<div id="top"></div>
<HeadTop />
<div class="title">录入文案</div>

<div class="titleBox" @click="showTitleInputBox">
<span>标题:</span>
<span class="titleInput">{{ title }}</span>
</div>

<div class="content">
<div class="img">
<img
:class="isActive ? 'active' : ''"
:src="modelDetail.coverImg"
@click="expandImg"
/>
</div>
<div class="textarea">
<textarea
v-model="paperwork"
cols="55"
rows="15"
placeholder="写点什么"
></textarea>
<div class="limit">已录入150字 约1分钟</div>
</div>
</div>

<div class="bottomBtn">
<div class="back" @click="back">上一步</div>
<div class="next" @click="goNext">下一步</div>
</div>
</div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import { scrollToID } from "../../utils";

import {
getModelDetailById,
saveOrUpdateUserVideo,
} from "../../api/getPaper.js";

Vue.use(Toast);
export default {
components: {
HeadTop,
},
data() {
return {
inPage: false,
isActive: false,
paperwork: "",
title: "",
modelDetail: {},
id: "",
saveID: "",
};
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},

methods: {
...mapActions(["setCharacters"]),

go(url) {
this.$router.push(url);
},

back() {
this.$router.back();
},

showTitleInputBox() {},

expandImg() {},

goNext() {
let data = {
id: this.saveID,
type: 1,
personMouldId: this.modelDetail.id, //模板id
personMouldSmId: this.modelDetail.mouldSmId, //模板标识
paperwork: this.paperwork,
title: this.title,
};

if (this.id) {
data.id = this.id;
}

if (!this.title) {
Toast.fail("请输入标题!");
return;
}

if (!this.paperwork) {
Toast.fail("请输入文案!");
return;
}

this.saveOrUpdate(data);
},

/**
* @description:根据id获取用户作品详情
*/
async getDetailById(id) {
try {
const res = await getModelDetailById(id);
console.log(res, "根据id获取用户作品详情");
this.modelDetail = res.data.personMould;
this.paperwork = res.data.paperwork || "";
this.title = res.data.title || "";
} catch (error) {
console.log(error, "error");
Toast.fail(error.message);
}
},

/**
* @description:保存或修改用户作品
*/
async saveOrUpdate(data) {
try {
const res = await saveOrUpdateUserVideo(data);
console.log(res, "保存或修改用户作品");
this.$router.push({
path: "/generateVideo",
query: {
id: res.data.id,
coverImg: this.modelDetail.coverImg,
paperwork: this.paperwork,
saveData: data,
},
});
} catch (error) {
console.log(error, "error");
Toast.fail(error.message);
}
},
},
created() {
this.id = this.$route.query.id;
if (this.id) {
this.getDetailById(this.id);
} else {
this.modelDetail = this.$route.query.modelDetail;
console.log(this.modelDetail, "modelDetail");
}
this.saveID = this.$route.query.saveID;
},
mounted() {
this.inPage = true;
scrollToID("top");
},
};
</script>

<style lang="scss" scoped>
.page {
transform: translateX(100%);
opacity: 0;
transition: all 0.3s;
padding-bottom: 25px;
&.active {
opacity: 1;
transform: translateX(0);
}
.title {
text-align: center;
width: 70px;
font-size: 16px;
font-weight: 600;
border-bottom: 3px solid #0068b7;
padding-bottom: 7px;
margin: 10px auto;
margin-bottom: 25px;
}
.titleBox {
font-size: 14px;
font-weight: 600;
margin: 15px 0;
text-align: center;
.titleInput {
width: fit-content;
}
}
.content {
display: flex;
justify-content: space-between;
padding: 0 15px;
.img {
img {
width: 76px;
height: 135.5px;
border: 1px solid #999999;
border-radius: 8px;
}
.title {
font-size: 15px;
margin-top: 15px;
}
}
.textarea {
position: relative;
text-align: center;
margin-bottom: 60px;
textarea {
width: 250px;
height: 367.5px;
border: 1px solid #00000080;
border-radius: 8px;
}
.limit {
position: absolute;
left: 0px;
bottom: -15px;
}
}
}

.bottomBtn {
display: flex;
justify-content: space-between;
padding: 0 32.5px;
margin-top: 50px;
margin-bottom: 30px;
div {
width: 142px;
height: 42px;
color: #fff;
line-height: 42px;
text-align: center;
border: 1px solid #d2d2d2;
border-radius: 7px;
background-color: #d2d2d2;
&.next {
color: #fff;
border: 1px solid #0068b7;
background-color: #0068b7;
}
}
}
.van-popup {
background-color: #ffffff00 !important;
}
}
</style>

Yükleniyor…
İptal
Kaydet