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 @@
@@ -1,198 +1,125 @@
|
||||
<template> |
||||
<div class="play-feedback"> |
||||
<div class="feedback-header"> |
||||
<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 class="test" @click="click"> |
||||
<img class="left" src="../assets/img/icon/loved.svg" alt=""> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import FromBottomDialog from "../components/dialog/FromBottomDialog"; |
||||
import Check from "../components/Check"; |
||||
import BaseButton from "../components/BaseButton"; |
||||
import Dom from "../utils/dom"; |
||||
|
||||
export default { |
||||
name: "Test", |
||||
props: {}, |
||||
components: { |
||||
BaseButton, |
||||
FromBottomDialog, |
||||
Check |
||||
}, |
||||
components: {}, |
||||
data() { |
||||
return { |
||||
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: { |
||||
falseOther(cb) { |
||||
this.type1 = false |
||||
this.type2 = false |
||||
this.type3 = false |
||||
this.type4 = false |
||||
this.type5 = false |
||||
this.type6 = false |
||||
this.type7 = false |
||||
cb() |
||||
click(e) { |
||||
let id = 'a' + Date.now() |
||||
let elWidth = 80 |
||||
let rotate = this.randomNum(0, 1) |
||||
let template = `<img class="${rotate ? 'left' : 'right'}" id="${id}" src="${require('../assets/img/icon/loved.svg')}" alt="">` |
||||
let el = new Dom().create(template) |
||||
el.css({top: e.y - elWidth, left: e.x - elWidth / 2,}) |
||||
new Dom().find('.test').append(el) |
||||
|
||||
setTimeout(() => { |
||||
new Dom().find(`#${id}`).remove() |
||||
}, 1000) |
||||
}, |
||||
cancel() { |
||||
|
||||
}, |
||||
submit() { |
||||
if (this.disabled) return |
||||
this.cancel() |
||||
this.$notice('感谢你的反馈，我们会尽快答复！') |
||||
randomNum(minNum, maxNum) { |
||||
switch (arguments.length) { |
||||
case 1: |
||||
return parseInt(Math.random() * minNum + 1, 10); |
||||
case 2: |
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); |
||||
default: |
||||
return 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
<style lang="less"> |
||||
@import "../assets/scss/index"; |
||||
|
||||
.play-feedback { |
||||
max-height: 49rem; |
||||
overflow: auto; |
||||
background: #fff; |
||||
color: black; |
||||
.test { |
||||
position: fixed; |
||||
bottom: 5rem; |
||||
left: 0; |
||||
right: 0; |
||||
|
||||
.feedback-header { |
||||
position: fixed; |
||||
left: 0; |
||||
right: 0; |
||||
background: white; |
||||
height: 3rem; |
||||
padding: 1.5rem; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: flex-start; |
||||
font-weight: bold; |
||||
font-size: 1.8rem; |
||||
} |
||||
|
||||
.content { |
||||
padding: 6rem 1.5rem 1.5rem 1.5rem; |
||||
} |
||||
|
||||
.notice { |
||||
font-size: 1.2rem; |
||||
color: @second-text-color; |
||||
} |
||||
|
||||
.l-row { |
||||
display: flex; |
||||
align-items: center; |
||||
min-height: 5rem; |
||||
font-size: 1.4rem; |
||||
border-bottom: 1px solid #f1f1f1; |
||||
|
||||
|
||||
.check { |
||||
width: 2rem; |
||||
height: 2rem; |
||||
margin-right: 1rem; |
||||
bottom: 0; |
||||
top: 0; |
||||
overflow: auto; |
||||
font-size: 1.4rem; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
img { |
||||
position: absolute; |
||||
@width: 8rem; |
||||
width: @width; |
||||
height: @width; |
||||
|
||||
&.left { |
||||
animation: loveLeft 1.1s linear; |
||||
} |
||||
} |
||||
|
||||
.no-border { |
||||
border-bottom: none; |
||||
} |
||||
|
||||
.other { |
||||
.textarea-ctn { |
||||
width: 100%; |
||||
background: #eae8e8; |
||||
padding: 1.5rem; |
||||
box-sizing: border-box; |
||||
margin-top: 1rem; |
||||
border-radius: 2px; |
||||
|
||||
&.right { |
||||
animation: loveRight 1.1s linear; |
||||
} |
||||
|
||||
textarea { |
||||
font-family: "Microsoft YaHei UI"; |
||||
outline: none; |
||||
width: 100%; |
||||
border: none; |
||||
background: transparent; |
||||
color: black; |
||||
@scale: scale(1.2); |
||||
@rotate: 10deg; |
||||
|
||||
&::placeholder { |
||||
color: @second-text-color; |
||||
} |
||||
@keyframes loveLeft { |
||||
0% { |
||||
opacity: 0; |
||||
transform: scale(2) rotate(0-@rotate); |
||||
} |
||||
10% { |
||||
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; |
||||
} |
||||
} |
||||
|
||||
.text-num { |
||||
margin-top: .8rem; |
||||
margin-bottom: .8rem; |
||||
font-size: 1rem; |
||||
color: @second-text-color; |
||||
text-align: right; |
||||
@keyframes loveRight { |
||||
0% { |
||||
opacity: 0; |
||||
transform: scale(2) rotate(0+@rotate); |
||||
} |
||||
10% { |
||||
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> |
||||
|
||||
@ -0,0 +1,69 @@
@@ -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