zyronon
4 years ago
6 changed files with 244 additions and 190 deletions
|
Before Width: | Height: | Size: 786 B After Width: | Height: | Size: 786 B |
@ -1,198 +1,125 @@ |
|||||||
<template> |
<template> |
||||||
<div class="play-feedback"> |
<div class="test" @click="click"> |
||||||
<div class="feedback-header"> |
<img class="left" src="../assets/img/icon/loved.svg" alt=""> |
||||||
<span> </span> |
|
||||||
<div class="title">播放反馈</div> |
|
||||||
<back mode="dark" img="close" @click="cancel"></back> |
|
||||||
</div> |
|
||||||
<div class="content"> |
|
||||||
<div class="notice">请选择要反馈的问题</div> |
|
||||||
<div class="l-row" @click="falseOther(()=>{this.type1 = true} )"> |
|
||||||
<Check mode="red" :modelValue="type1" @change="falseOther(()=>{this.type1 = true} )"/> |
|
||||||
<span>网络正常无法播放视频</span> |
|
||||||
</div> |
|
||||||
<div class="l-row" @click="falseOther(()=>{this.type2 = true} )"> |
|
||||||
<Check mode="red" :modelValue="type2" @change="falseOther(()=>{this.type2 = true} )"/> |
|
||||||
<span>视频画面正常没声音</span> |
|
||||||
</div> |
|
||||||
<div class="l-row" @click="falseOther(()=>{this.type3 = true} )"> |
|
||||||
<Check mode="red" :modelValue="type3" @change="falseOther(()=>{this.type3 = true} )"/> |
|
||||||
<span>播放几秒/中途卡信</span> |
|
||||||
</div> |
|
||||||
<div class="l-row" @click="falseOther(()=>{this.type4 = true} )"> |
|
||||||
<Check mode="red" :modelValue="type4" @change="falseOther(()=>{this.type4 = true} )"/> |
|
||||||
<span>画面内容不全</span> |
|
||||||
</div> |
|
||||||
<div class="l-row" @click="falseOther(()=>{this.type5 = true} )"> |
|
||||||
<Check mode="red" :modelValue="type5" @change="falseOther(()=>{this.type5 = true} )"/> |
|
||||||
<span>播放过程中闪退回桌面</span> |
|
||||||
</div> |
|
||||||
<div class="l-row" @click="falseOther(()=>{this.type6 = true} )"> |
|
||||||
<Check mode="red" :modelValue="type6" @change="falseOther(()=>{this.type6 = true} )"/> |
|
||||||
<span>画面模糊不清晰</span> |
|
||||||
</div> |
|
||||||
<div class="l-row" @click="falseOther(()=>{this.type7 = true} )"> |
|
||||||
<Check mode="red" :modelValue="type7" @change="falseOther(()=>{this.type7 = true} )"/> |
|
||||||
<span>视频播放其他问题或建议</span> |
|
||||||
</div> |
|
||||||
<div v-if="type7" class="other"> |
|
||||||
<div class="textarea-ctn"> |
|
||||||
<textarea name="" id="" cols="30" rows="10" |
|
||||||
v-model="desc" |
|
||||||
placeholder="详输入内容"></textarea> |
|
||||||
</div> |
|
||||||
<div class="text-num">{{ desc.length }}/300</div> |
|
||||||
</div> |
|
||||||
<b-button type="primary" :disabled="!disabled" @click="submit">提交</b-button> |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
<script> |
<script> |
||||||
import FromBottomDialog from "../components/dialog/FromBottomDialog"; |
import Dom from "../utils/dom"; |
||||||
import Check from "../components/Check"; |
|
||||||
import BaseButton from "../components/BaseButton"; |
|
||||||
|
|
||||||
export default { |
export default { |
||||||
name: "Test", |
name: "Test", |
||||||
props: {}, |
props: {}, |
||||||
components: { |
components: {}, |
||||||
BaseButton, |
|
||||||
FromBottomDialog, |
|
||||||
Check |
|
||||||
}, |
|
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
showShareDialog: true, |
showShareDialog: true, |
||||||
type1: false, |
|
||||||
type2: false, |
|
||||||
type3: false, |
|
||||||
type4: false, |
|
||||||
type5: false, |
|
||||||
type6: false, |
|
||||||
type7: false, |
|
||||||
disabled: false, |
|
||||||
desc: '' |
|
||||||
} |
} |
||||||
}, |
}, |
||||||
computed: { |
|
||||||
disabled() { |
|
||||||
if (this.type7 && this.desc) return true |
|
||||||
return this.type1 || this.type2 || this.type3 || this.type4 || this.type5 || this.type6 |
|
||||||
} |
|
||||||
}, |
|
||||||
created() { |
|
||||||
}, |
|
||||||
methods: { |
methods: { |
||||||
falseOther(cb) { |
click(e) { |
||||||
this.type1 = false |
let id = 'a' + Date.now() |
||||||
this.type2 = false |
let elWidth = 80 |
||||||
this.type3 = false |
let rotate = this.randomNum(0, 1) |
||||||
this.type4 = false |
let template = `<img class="${rotate ? 'left' : 'right'}" id="${id}" src="${require('../assets/img/icon/loved.svg')}" alt="">` |
||||||
this.type5 = false |
let el = new Dom().create(template) |
||||||
this.type6 = false |
el.css({top: e.y - elWidth, left: e.x - elWidth / 2,}) |
||||||
this.type7 = false |
new Dom().find('.test').append(el) |
||||||
cb() |
|
||||||
|
setTimeout(() => { |
||||||
|
new Dom().find(`#${id}`).remove() |
||||||
|
}, 1000) |
||||||
}, |
}, |
||||||
cancel() { |
randomNum(minNum, maxNum) { |
||||||
|
switch (arguments.length) { |
||||||
}, |
case 1: |
||||||
submit() { |
return parseInt(Math.random() * minNum + 1, 10); |
||||||
if (this.disabled) return |
case 2: |
||||||
this.cancel() |
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); |
||||||
this.$notice('感谢你的反馈，我们会尽快答复！') |
default: |
||||||
|
return 0; |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped lang="less"> |
<style lang="less"> |
||||||
@import "../assets/scss/index"; |
@import "../assets/scss/index"; |
||||||
|
|
||||||
.play-feedback { |
.test { |
||||||
max-height: 49rem; |
|
||||||
overflow: auto; |
|
||||||
background: #fff; |
|
||||||
color: black; |
|
||||||
position: fixed; |
|
||||||
bottom: 5rem; |
|
||||||
left: 0; |
|
||||||
right: 0; |
|
||||||
|
|
||||||
.feedback-header { |
|
||||||
position: fixed; |
position: fixed; |
||||||
left: 0; |
left: 0; |
||||||
right: 0; |
right: 0; |
||||||
background: white; |
bottom: 0; |
||||||
height: 3rem; |
top: 0; |
||||||
padding: 1.5rem; |
overflow: auto; |
||||||
|
font-size: 1.4rem; |
||||||
display: flex; |
display: flex; |
||||||
justify-content: space-between; |
justify-content: center; |
||||||
align-items: flex-start; |
align-items: center; |
||||||
font-weight: bold; |
|
||||||
font-size: 1.8rem; |
|
||||||
} |
|
||||||
|
|
||||||
.content { |
img { |
||||||
padding: 6rem 1.5rem 1.5rem 1.5rem; |
position: absolute; |
||||||
} |
@width: 8rem; |
||||||
|
width: @width; |
||||||
|
height: @width; |
||||||
|
|
||||||
.notice { |
&.left { |
||||||
font-size: 1.2rem; |
animation: loveLeft 1.1s linear; |
||||||
color: @second-text-color; |
|
||||||
} |
} |
||||||
|
|
||||||
.l-row { |
&.right { |
||||||
display: flex; |
animation: loveRight 1.1s linear; |
||||||
align-items: center; |
} |
||||||
min-height: 5rem; |
|
||||||
font-size: 1.4rem; |
|
||||||
border-bottom: 1px solid #f1f1f1; |
|
||||||
|
|
||||||
|
@scale: scale(1.2); |
||||||
|
@rotate: 10deg; |
||||||
|
|
||||||
.check { |
@keyframes loveLeft { |
||||||
width: 2rem; |
0% { |
||||||
height: 2rem; |
opacity: 0; |
||||||
margin-right: 1rem; |
transform: scale(2) rotate(0-@rotate); |
||||||
} |
} |
||||||
|
10% { |
||||||
|
opacity: 1; |
||||||
|
transform: scale(1) rotate(0-@rotate); |
||||||
} |
} |
||||||
|
15% { |
||||||
.no-border { |
opacity: 1; |
||||||
border-bottom: none; |
transform: @scale rotate(0-@rotate); |
||||||
} |
} |
||||||
|
40% { |
||||||
.other { |
opacity: 1; |
||||||
.textarea-ctn { |
transform: @scale rotate(0-@rotate); |
||||||
width: 100%; |
|
||||||
background: #eae8e8; |
|
||||||
padding: 1.5rem; |
|
||||||
box-sizing: border-box; |
|
||||||
margin-top: 1rem; |
|
||||||
border-radius: 2px; |
|
||||||
|
|
||||||
|
|
||||||
textarea { |
|
||||||
font-family: "Microsoft YaHei UI"; |
|
||||||
outline: none; |
|
||||||
width: 100%; |
|
||||||
border: none; |
|
||||||
background: transparent; |
|
||||||
color: black; |
|
||||||
|
|
||||||
&::placeholder { |
|
||||||
color: @second-text-color; |
|
||||||
} |
} |
||||||
|
100% { |
||||||
|
transform: translateY(-10rem) scale(2) rotate(0-@rotate); |
||||||
|
opacity: 0; |
||||||
} |
} |
||||||
} |
} |
||||||
|
@keyframes loveRight { |
||||||
.text-num { |
0% { |
||||||
margin-top: .8rem; |
opacity: 0; |
||||||
margin-bottom: .8rem; |
transform: scale(2) rotate(0+@rotate); |
||||||
font-size: 1rem; |
} |
||||||
color: @second-text-color; |
10% { |
||||||
text-align: right; |
opacity: 1; |
||||||
|
transform: scale(1) rotate(0+@rotate); |
||||||
|
} |
||||||
|
15% { |
||||||
|
opacity: 1; |
||||||
|
transform: @scale rotate(0+@rotate); |
||||||
|
} |
||||||
|
40% { |
||||||
|
opacity: 1; |
||||||
|
transform: @scale rotate(0+@rotate); |
||||||
|
} |
||||||
|
100% { |
||||||
|
transform: translateY(-10rem) scale(2) rotate(0+@rotate); |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
</style> |
</style> |
||||||
|
|||||||
@ -0,0 +1,69 @@ |
|||||||
|
export default class Dom { |
||||||
|
|
||||||
|
constructor() { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
find(tag) { |
||||||
|
let els = document.querySelectorAll(tag) |
||||||
|
if (els.length) { |
||||||
|
this.els = els |
||||||
|
} |
||||||
|
return this |
||||||
|
} |
||||||
|
|
||||||
|
create(template) { |
||||||
|
let tempNode = document.createElement('div'); |
||||||
|
tempNode.innerHTML = template; |
||||||
|
this.els = [tempNode.firstChild] |
||||||
|
return this; |
||||||
|
} |
||||||
|
|
||||||
|
append(that) { |
||||||
|
this.els.forEach(el => { |
||||||
|
that.els.map(v => { |
||||||
|
el.appendChild(v) |
||||||
|
}) |
||||||
|
}) |
||||||
|
return this |
||||||
|
} |
||||||
|
|
||||||
|
remove() { |
||||||
|
this.els.forEach(el => { |
||||||
|
el.parentNode.removeChild(el) |
||||||
|
}) |
||||||
|
return this |
||||||
|
} |
||||||
|
|
||||||
|
css(style, value = null) { |
||||||
|
if (!value) { |
||||||
|
Object.keys(style).map(key => { |
||||||
|
this.els.map(el => { |
||||||
|
el.style[key] = this.getStyleValue(key, style[key]) |
||||||
|
}) |
||||||
|
} |
||||||
|
) |
||||||
|
} else { |
||||||
|
this.els.map(el => { |
||||||
|
el.style[style] = this.getStyleValue(style, value) |
||||||
|
}) |
||||||
|
} |
||||||
|
return this |
||||||
|
} |
||||||
|
|
||||||
|
getStyleValue(key, value) { |
||||||
|
let whiteList = [ |
||||||
|
'top', |
||||||
|
'left', |
||||||
|
'right', |
||||||
|
'bottom', |
||||||
|
] |
||||||
|
if (whiteList.find(v => v === key)) { |
||||||
|
if (typeof value === 'number') { |
||||||
|
return value + 'px' |
||||||
|
} |
||||||
|
} else { |
||||||
|
return value |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue