zyronon
4 years ago
28 changed files with 1657 additions and 523 deletions
|
Before Width: | Height: | Size: 1019 B |
@ -0,0 +1,195 @@ |
|||||||
|
<template> |
||||||
|
<transition name="fade"> |
||||||
|
<div class="DouyinCode" v-if="modelValue"> |
||||||
|
<div class="content"> |
||||||
|
<img class="top" src="../assets/img/icon/components/video/douyin-code-bg.png" alt=""> |
||||||
|
<div class="desc"> |
||||||
|
<div class="left"> |
||||||
|
<div class="user">@名字</div> |
||||||
|
<div class="title">#窃书不能算偷……窃书！……读书人的事，能算偷么？</div> |
||||||
|
</div> |
||||||
|
<img class="code" src="../assets/img/icon/components/video/douyin-code.jpg" alt=""> |
||||||
|
</div> |
||||||
|
<img class="bottom" src="../assets/img/icon/components/video/douyin-code-bottom.jpg" alt=""> |
||||||
|
|
||||||
|
<div class="video-poster"> |
||||||
|
<img src="../assets/img/poster/1.jpg" class="poster"> |
||||||
|
<img src="../assets/img/icon/play.svg" class="play"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="toolbar"> |
||||||
|
<div class="title">分享到</div> |
||||||
|
<div class="shares "> |
||||||
|
<div class="share-to" @click="$no"> |
||||||
|
<img src="../assets/img/icon/components/video/toqq.webp" alt=""> |
||||||
|
<span>QQ好友</span> |
||||||
|
</div> |
||||||
|
<div class="share-to" @click="$no"> |
||||||
|
<img src="../assets/img/icon/components/video/tozone.webp" alt=""> |
||||||
|
<span>QQ空间</span> |
||||||
|
</div> |
||||||
|
<div class="share-to" @click="$no"> |
||||||
|
<img src="../assets/img/icon/components/video/towechatchat.webp" alt=""> |
||||||
|
<span>微信好友</span> |
||||||
|
</div> |
||||||
|
<div class="share-to" @click="$no"> |
||||||
|
<img src="../assets/img/icon/components/video/towechat.webp" alt=""> |
||||||
|
<span>朋友圈</span> |
||||||
|
</div> |
||||||
|
<div class="share-to" @click="$no"> |
||||||
|
<img src="../assets/img/icon/components/video/todownload.webp" alt=""> |
||||||
|
<span>保存</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="cancel" @click="cancel">取消</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</transition> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "DouyinCode", |
||||||
|
props: { |
||||||
|
modelValue: false |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return {} |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
cancel() { |
||||||
|
this.$emit('update:modelValue', false) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
@import "../assets/scss/index"; |
||||||
|
|
||||||
|
.DouyinCode { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
top: 0; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: flex-end; |
||||||
|
background: transparent; |
||||||
|
|
||||||
|
.content { |
||||||
|
background: white; |
||||||
|
width: 80vw; |
||||||
|
margin-bottom: 2rem; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.top { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.desc { |
||||||
|
margin-bottom: 2rem; |
||||||
|
display: flex; |
||||||
|
padding: 1rem; |
||||||
|
|
||||||
|
.left { |
||||||
|
font-size: 1.8rem; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 1.4rem; |
||||||
|
color: @second-text-color; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.code { |
||||||
|
width: 6rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bottom { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.video-poster { |
||||||
|
width: 35vw; |
||||||
|
height: calc(35vw * 1.5); |
||||||
|
position: absolute; |
||||||
|
top: 8rem; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
.poster { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.play { |
||||||
|
position: relative; |
||||||
|
z-index: 9; |
||||||
|
width: 4rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.toolbar { |
||||||
|
width: 100vw; |
||||||
|
background: black; |
||||||
|
border-radius: 1rem 1rem 0 0; |
||||||
|
color: white; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 1.2rem; |
||||||
|
padding: 1rem; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
@space-width: 1.8rem; |
||||||
|
@icon-width: 4.5rem; |
||||||
|
|
||||||
|
.shares { |
||||||
|
display: flex; |
||||||
|
padding-right: @space-width * 2; |
||||||
|
|
||||||
|
.share-to { |
||||||
|
margin-left: @space-width; |
||||||
|
margin-bottom: @space-width; |
||||||
|
|
||||||
|
|
||||||
|
img { |
||||||
|
|
||||||
|
width: @icon-width; |
||||||
|
height: @icon-width; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
span { |
||||||
|
color: @second-text-color; |
||||||
|
font-size: 1rem; |
||||||
|
display: block; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.cancel { |
||||||
|
font-size: 1.6rem; |
||||||
|
background: rgb(38,38,38); |
||||||
|
padding: 1.5rem; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,8 +1,8 @@ |
|||||||
export default { |
export default { |
||||||
// baseUrl: 'http://192.168.0.105//index.php/v1',
|
baseUrl: 'http://192.168.0.105//index.php/v1', |
||||||
// filePreview:'http://192.168.0.105/static/uploads/',
|
filePreview:'http://192.168.0.105/static/uploads/', |
||||||
// baseUrl: 'http://192.168.10.164//index.php/v1',
|
// baseUrl: 'http://192.168.10.164//index.php/v1',
|
||||||
// filePreview:'http://192.168.10.164/static/uploads/'
|
// filePreview:'http://192.168.10.164/static/uploads/'
|
||||||
baseUrl: 'http://localhost//index.php/v1', |
// baseUrl: 'http://localhost//index.php/v1',
|
||||||
filePreview:'http://localhost/static/uploads/' |
// filePreview:'http://localhost/static/uploads/'
|
||||||
} |
} |
||||||
@ -0,0 +1,153 @@ |
|||||||
|
<template> |
||||||
|
<div class="Report"> |
||||||
|
<BaseHeader backMode="light"> |
||||||
|
<template v-slot:center> |
||||||
|
<span class="f16">视频举报</span> |
||||||
|
</template> |
||||||
|
</BaseHeader> |
||||||
|
<div class="content"> |
||||||
|
<div class="title"> |
||||||
|
<span>内容违规</span> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'色情低俗'})"> |
||||||
|
<span>色情低俗</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'时政不实信息'})"> |
||||||
|
<span>时政不实信息</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'违法犯罪'})"> |
||||||
|
<span>违法犯罪</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'垃圾广告、售卖假货等'})"> |
||||||
|
<span>垃圾广告、售卖假货等</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'造谣传播'})"> |
||||||
|
<span>造谣传播</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'涉嫌欺诈'})"> |
||||||
|
<span>涉嫌欺诈</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'侮辱漫骂'})"> |
||||||
|
<span>侮辱漫骂</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'危险行为'})"> |
||||||
|
<span>危险行为</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'涉嫌非法集资'})"> |
||||||
|
<span>涉嫌非法集资</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'价值观导向不良'})"> |
||||||
|
<span>价值观导向不良</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="line"></div> |
||||||
|
<!--todo 没做详细的举报 --> |
||||||
|
<div class="title"> |
||||||
|
<span>侵犯名誉</span> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'侵犯名誉、隐私、肖像权等'})"> |
||||||
|
<span>侵犯名誉、隐私、肖像权等</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'内容盗用本人作品'})"> |
||||||
|
<span>内容盗用本人作品</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'内容盗用他人作品'})"> |
||||||
|
<span>内容盗用他人作品</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="line"></div> |
||||||
|
<div class="title"> |
||||||
|
<span>未成年</span> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'未成年人不当行为'})"> |
||||||
|
<span>未成年人不当行为</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'内容不适合未成年观看'})"> |
||||||
|
<span>内容不适合未成年观看</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="line"></div> |
||||||
|
<div class="title"> |
||||||
|
<span>其他</span> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'引人不适'})"> |
||||||
|
<span>引人不适</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'疑似自我伤害'})"> |
||||||
|
<span>疑似自我伤害</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'诱导点赞、分享、关注'})"> |
||||||
|
<span>诱导点赞、分享、关注</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
<div class="row" @click="$nav('/home/submit-report',{type:'其他'})"> |
||||||
|
<span>其他</span> |
||||||
|
<back scale=".8" direction="right"></back> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "Report", |
||||||
|
props: {}, |
||||||
|
data() { |
||||||
|
return {} |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
methods: {} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
@import "../../assets/scss/index"; |
||||||
|
|
||||||
|
.Report { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
top: 0; |
||||||
|
overflow: auto; |
||||||
|
color: white; |
||||||
|
font-size: 1.4rem; |
||||||
|
|
||||||
|
.content { |
||||||
|
padding-top: 6rem; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 1.2rem; |
||||||
|
padding: 1rem 1.5rem; |
||||||
|
color: @second-text-color; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 1rem; |
||||||
|
height: 1rem; |
||||||
|
margin-right: .2rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.line { |
||||||
|
width: calc(100% - 3rem); |
||||||
|
margin-left: 1.5rem; |
||||||
|
background: @line-color; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,192 @@ |
|||||||
|
<template> |
||||||
|
<div class="Report"> |
||||||
|
<BaseHeader> |
||||||
|
<template v-slot:center> |
||||||
|
<span class="f16">视频举报</span> |
||||||
|
</template> |
||||||
|
</BaseHeader> |
||||||
|
<div class="content"> |
||||||
|
<div class="title"> |
||||||
|
<span>你的举报将在12小时内受理，若举报成功会第一时间告知处理结果，请尽量提交完整的举报描述及材料</span> |
||||||
|
</div> |
||||||
|
<div class="row"> |
||||||
|
<span> |
||||||
|
举报理由：{{ type }} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="l-row"> |
||||||
|
<div class="notice">举报描述(选填)</div> |
||||||
|
<div class="textarea-ctn"> |
||||||
|
<textarea name="" id="" cols="30" rows="10" |
||||||
|
v-model="desc" |
||||||
|
placeholder="详细描述举报理由"></textarea> |
||||||
|
</div> |
||||||
|
<div class="text-num">{{ desc.length }}/200</div> |
||||||
|
</div> |
||||||
|
<div class="upload-photo"> |
||||||
|
<div class="photo-wrapper" v-for="(index,item) in photos"> |
||||||
|
<img class="photo" src="../../assets/img/poster/1.jpg" alt=""> |
||||||
|
<img class="close" src="../../assets/img/icon/components/light-close.png" alt="" @click="photos.pop()"> |
||||||
|
</div> |
||||||
|
<div class="upload" @click="upload" v-if="photos.length !== 4"> |
||||||
|
<img src="../../assets/img/icon/home/camera-gray.png" alt=""> |
||||||
|
<span>{{ photos.length }}/4</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<b-button type="primary" @click="$no">提交</b-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "Report", |
||||||
|
props: {}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
type: '色情低俗', |
||||||
|
desc: '', |
||||||
|
photos: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
created() { |
||||||
|
this.type = this.$route.query.type |
||||||
|
}, |
||||||
|
activated() { |
||||||
|
this.type = this.$route.query.type |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
async upload() { |
||||||
|
this.$showLoading() |
||||||
|
await this.$sleep(500) |
||||||
|
this.$hideLoading() |
||||||
|
this.photos.push( |
||||||
|
require(`../../assets/img/poster/${this.photos.length}.jpg`) |
||||||
|
) |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
@import "../../assets/scss/index"; |
||||||
|
|
||||||
|
.Report { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
top: 0; |
||||||
|
overflow: auto; |
||||||
|
color: white; |
||||||
|
font-size: 1.4rem; |
||||||
|
|
||||||
|
.content { |
||||||
|
padding-top: 6rem; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 1.2rem; |
||||||
|
padding: 1rem 1.5rem; |
||||||
|
color: @second-text-color; |
||||||
|
border-bottom: 1px solid #cccccc11; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 1rem; |
||||||
|
height: 1rem; |
||||||
|
margin-right: .2rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.l-row { |
||||||
|
padding: 0 1.5rem; |
||||||
|
|
||||||
|
.textarea-ctn { |
||||||
|
width: 100%; |
||||||
|
background: @active-main-bg; |
||||||
|
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: white; |
||||||
|
|
||||||
|
&::placeholder { |
||||||
|
color: @second-text-color; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.text-num { |
||||||
|
margin-top: .5rem; |
||||||
|
font-size: 1rem; |
||||||
|
color: @second-text-color; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.upload-photo { |
||||||
|
margin-top: .5rem; |
||||||
|
display: flex; |
||||||
|
padding: 0 1.5rem; |
||||||
|
|
||||||
|
@width: calc((100vw - 3vw - 3rem) / 4); |
||||||
|
|
||||||
|
.photo-wrapper { |
||||||
|
width: @width; |
||||||
|
height: @width; |
||||||
|
position: relative; |
||||||
|
margin-right: 1vw; |
||||||
|
|
||||||
|
.photo { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.close { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
background: @second-btn-color; |
||||||
|
padding: .3rem; |
||||||
|
width: 1rem; |
||||||
|
height: 1rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.upload { |
||||||
|
width: @width; |
||||||
|
height: @width; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
color: @second-text-color; |
||||||
|
font-size: 1.2rem; |
||||||
|
align-items: center; |
||||||
|
background: @second-btn-color-tran; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 3.5rem; |
||||||
|
height: 3.5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.button { |
||||||
|
position: absolute; |
||||||
|
left: 1.5rem; |
||||||
|
right: 1.5rem; |
||||||
|
bottom: 1.5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,97 @@ |
|||||||
|
<template> |
||||||
|
<from-bottom-dialog |
||||||
|
v-model="modelValue" |
||||||
|
@cancel="cancel" |
||||||
|
maskMode="light" |
||||||
|
mode="light"> |
||||||
|
<div class="share-to-duoshan"> |
||||||
|
<img src="../../../assets/img/icon/components/video/duoshan-logo2.png" class="logo"> |
||||||
|
<div class="wrapper"> |
||||||
|
<div class="title2">多闪</div> |
||||||
|
<div class="subtitle">开发者：北京拍拍看看科技有限公司；版本：6.8.0</div> |
||||||
|
<div class="subtitle mb2r"> |
||||||
|
<span class="link" @click="$nav('/service-protocol',{type:'多闪权限申请与使用情况说明'})">应用权限</span>与 |
||||||
|
<span class="link" @click="$nav('/service-protocol',{type:'“抖音”隐私政策'})">隐私政策</span> |
||||||
|
</div> |
||||||
|
<b-button type="dark2"> |
||||||
|
<template v-slot:prefix> |
||||||
|
<img src="../../../assets/img/icon/components/video/duoshan-logo.webp"> |
||||||
|
</template> |
||||||
|
下载多闪 |
||||||
|
</b-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</from-bottom-dialog> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import FromBottomDialog from "../../../components/dialog/FromBottomDialog"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "Duoshan", |
||||||
|
components: { |
||||||
|
FromBottomDialog |
||||||
|
}, |
||||||
|
props: { |
||||||
|
modelValue: false |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return {} |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
cancel() { |
||||||
|
this.$emit('update:modelValue', false) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
@import "../../../assets/scss/index"; |
||||||
|
|
||||||
|
.share-to-duoshan { |
||||||
|
padding: 3rem 2rem; |
||||||
|
min-height: calc(50vh - 6rem); |
||||||
|
//min-height: 50vh; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
|
||||||
|
.logo { |
||||||
|
height: 12rem; |
||||||
|
width: 12rem; |
||||||
|
} |
||||||
|
|
||||||
|
.wrapper { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.title2 { |
||||||
|
margin-bottom: 2rem; |
||||||
|
text-align: center; |
||||||
|
font-size: 2rem; |
||||||
|
color: black; |
||||||
|
} |
||||||
|
|
||||||
|
.subtitle { |
||||||
|
text-align: center; |
||||||
|
font-size: 1.2rem; |
||||||
|
color: @second-text-color; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.button { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
img { |
||||||
|
height: 2.2rem; |
||||||
|
margin-right: .5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,210 @@ |
|||||||
|
<template> |
||||||
|
<transition name="fade"> |
||||||
|
<div class="play-feedback" v-if="modelValue"> |
||||||
|
<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> |
||||||
|
</transition> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import Check from "../../../components/Check"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "Test", |
||||||
|
props: { |
||||||
|
modelValue: false |
||||||
|
}, |
||||||
|
components: { |
||||||
|
Check |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
modelValue(newVal) { |
||||||
|
this.type1 = false |
||||||
|
this.type2 = false |
||||||
|
this.type3 = false |
||||||
|
this.type4 = false |
||||||
|
this.type5 = false |
||||||
|
this.type6 = false |
||||||
|
this.type7 = false |
||||||
|
this.desc = '' |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
type1: false, |
||||||
|
type2: false, |
||||||
|
type3: false, |
||||||
|
type4: false, |
||||||
|
type5: false, |
||||||
|
type6: false, |
||||||
|
type7: 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() |
||||||
|
}, |
||||||
|
cancel() { |
||||||
|
this.$emit('update:modelValue', false) |
||||||
|
}, |
||||||
|
async submit() { |
||||||
|
this.cancel() |
||||||
|
this.$showLoading() |
||||||
|
await this.$sleep(1000) |
||||||
|
this.$hideLoading() |
||||||
|
this.$notice('感谢你的反馈，我们会尽快答复！') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
@import "../../../assets/scss/index"; |
||||||
|
|
||||||
|
.play-feedback { |
||||||
|
max-height: 49rem; |
||||||
|
overflow: auto; |
||||||
|
background: #fff; |
||||||
|
color: black; |
||||||
|
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; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.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; |
||||||
|
|
||||||
|
|
||||||
|
textarea { |
||||||
|
font-family: "Microsoft YaHei UI"; |
||||||
|
outline: none; |
||||||
|
width: 100%; |
||||||
|
border: none; |
||||||
|
background: transparent; |
||||||
|
color: black; |
||||||
|
|
||||||
|
&::placeholder { |
||||||
|
color: @second-text-color; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.text-num { |
||||||
|
margin-top: .8rem; |
||||||
|
margin-bottom: .8rem; |
||||||
|
font-size: 1rem; |
||||||
|
color: @second-text-color; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,311 @@ |
|||||||
|
<template> |
||||||
|
<from-bottom-dialog |
||||||
|
page-id="home-index" |
||||||
|
v-model="showShareDialog" |
||||||
|
@cancel="cancel" |
||||||
|
maskMode="light" |
||||||
|
height="50vh" |
||||||
|
mode="white"> |
||||||
|
<div class="option-dialog"> |
||||||
|
<div class="buttons"> |
||||||
|
<b-button v-if="downloading" |
||||||
|
class="mb1r" |
||||||
|
:border="false" |
||||||
|
:progress="progress"> |
||||||
|
<img src="../../../assets/img/icon/components/video/download-gray.png" alt=""> |
||||||
|
<span class="second-text-color">下载中 9.2MB/{{ progress }}%</span> |
||||||
|
</b-button> |
||||||
|
|
||||||
|
<template v-if="canDownload"> |
||||||
|
<b-button type="green" v-if="showShare2WeChatZone" @click="$no"> |
||||||
|
<template v-slot:prefix> |
||||||
|
<img src="../../../assets/img/icon/components/video/wechatzone-white.webp" alt=""> |
||||||
|
</template> |
||||||
|
发送视频到朋友圈 |
||||||
|
</b-button> |
||||||
|
<b-button type="green" v-if="showShare2WeChat" @click="$no"> |
||||||
|
<template v-slot:prefix> |
||||||
|
<img src="../../../assets/img/icon/components/video/wechat-white.webp" alt=""> |
||||||
|
</template> |
||||||
|
发送视频到微信 |
||||||
|
</b-button> |
||||||
|
<b-button type="qqzone" v-if="showShare2QQZone" @click="$no"> |
||||||
|
<template v-slot:prefix> |
||||||
|
<img src="../../../assets/img/icon/components/video/qqzone-white.png" alt=""> |
||||||
|
</template> |
||||||
|
发送视频到QQ空间 |
||||||
|
</b-button> |
||||||
|
<b-button type="qq" v-if="showShare2QQ" @click="$no"> |
||||||
|
<template v-slot:prefix> |
||||||
|
<img src="../../../assets/img/icon/components/video/qq-white.webp" alt=""> |
||||||
|
</template> |
||||||
|
发送视频到QQ |
||||||
|
</b-button> |
||||||
|
<b-button type="webo" v-if="showShare2Webo" @click="$no"> |
||||||
|
<template v-slot:prefix> |
||||||
|
<img src="../../../assets/img/icon/components/video/webo-white.webp" alt=""> |
||||||
|
</template> |
||||||
|
发送视频到微博 |
||||||
|
</b-button> |
||||||
|
<b-button v-if="!showDownload" class="mt1r" type="white" @click="$no">复制口令发给好友</b-button> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template v-else> |
||||||
|
<b-button type="green" v-if="showShare2WeChatZone" @click="$no"> |
||||||
|
<template v-slot:prefix> |
||||||
|
<img src="../../../assets/img/icon/components/video/wechatzone-white.webp" alt=""> |
||||||
|
</template> |
||||||
|
复制口令发给好友 |
||||||
|
</b-button> |
||||||
|
<b-button type="green" v-if="showShare2WeChat" @click="$no"> |
||||||
|
<template v-slot:prefix> |
||||||
|
<img src="../../../assets/img/icon/components/video/wechat-white.webp" alt=""> |
||||||
|
</template> |
||||||
|
复制口令发给好友 |
||||||
|
</b-button> |
||||||
|
<b-button type="qqzone" v-if="showShare2QQZone" @click="$no"> |
||||||
|
<template v-slot:prefix> |
||||||
|
<img src="../../../assets/img/icon/components/video/qqzone-white.png" alt=""> |
||||||
|
</template> |
||||||
|
复制口令发给好友 |
||||||
|
</b-button> |
||||||
|
<b-button type="qq" v-if="showShare2QQ" @click="$no"> |
||||||
|
<template v-slot:prefix> |
||||||
|
<img src="../../../assets/img/icon/components/video/qq-white.webp" alt=""> |
||||||
|
</template> |
||||||
|
复制口令发给好友 |
||||||
|
</b-button> |
||||||
|
<b-button type="webo" v-if="showShare2Webo" @click="$no"> |
||||||
|
<template v-slot:prefix> |
||||||
|
<img src="../../../assets/img/icon/components/video/webo-white.webp" alt=""> |
||||||
|
</template> |
||||||
|
复制口令发给好友 |
||||||
|
</b-button> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template v-if="showDownload"> |
||||||
|
<b-button type="primary" @click="$no"> |
||||||
|
去相册查看 |
||||||
|
<back scale="0.7" mode="light" direction="right"></back> |
||||||
|
</b-button> |
||||||
|
|
||||||
|
<b-button class="mt1r" type="white" @click="$no"> |
||||||
|
<img src="../../../assets/img/icon/components/video/wechat.webp" alt=""> |
||||||
|
发送视频到微信 |
||||||
|
</b-button> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
<div class="dialog-friends"> |
||||||
|
<div class="dialog-friend" v-for="item in localFriends.all" @click="share(item)"> |
||||||
|
<img :src="$imgPreview(item.avatar)" alt=""> |
||||||
|
<div class="right"> |
||||||
|
<span>{{ item.name }}</span> |
||||||
|
<div class="share-btn" v-if="!item.select">分享</div> |
||||||
|
<div class="share-btn shared" v-else>已私信</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="more" @click="cancel($nav('/message/share-to-friend'))"> |
||||||
|
<img src="../../../assets/img/icon/components/video/more-dark.png"> |
||||||
|
<div class="right"> |
||||||
|
<span>更多好友</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</from-bottom-dialog> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import FromBottomDialog from "../../../components/dialog/FromBottomDialog"; |
||||||
|
import {mapState} from "vuex"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "ShareTo", |
||||||
|
components: { |
||||||
|
FromBottomDialog |
||||||
|
}, |
||||||
|
props: { |
||||||
|
type: { |
||||||
|
type: Number, |
||||||
|
default: -1 |
||||||
|
}, |
||||||
|
videoId: { |
||||||
|
type: String, |
||||||
|
default: null |
||||||
|
}, |
||||||
|
canDownload: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
type(newVal, oldVal) { |
||||||
|
this.change(newVal) |
||||||
|
}, |
||||||
|
showShareDialog() { |
||||||
|
this.localFriends = this.$clone(this.friends) |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
progress: 0, |
||||||
|
downloading: false, |
||||||
|
|
||||||
|
showShareDialog: false, |
||||||
|
showDownload: false, |
||||||
|
showShare2WeChatZone: false, |
||||||
|
showShare2WeChat: false, |
||||||
|
showShare2QQZone: false, |
||||||
|
showShare2QQ: false, |
||||||
|
showShare2Webo: false, |
||||||
|
localFriends: [], |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapState(['friends']), |
||||||
|
}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
async change(newVal) { |
||||||
|
if (newVal === -1) return |
||||||
|
this.showShareDialog = true |
||||||
|
if (this.canDownload) { |
||||||
|
let downloadedVideo = this.$storageGet('downloadedVideo', []) |
||||||
|
if (!downloadedVideo.find(v => v === this.videoId) && !this.downloading) { |
||||||
|
await this.downloadVideo() |
||||||
|
} |
||||||
|
} |
||||||
|
switch (newVal) { |
||||||
|
case 2: |
||||||
|
return this.showShare2WeChatZone = true |
||||||
|
case 3: |
||||||
|
return this.showShare2WeChat = true |
||||||
|
case 4: |
||||||
|
return this.showShare2QQZone = true |
||||||
|
case 5: |
||||||
|
return this.showShare2QQ = true |
||||||
|
case 8: |
||||||
|
return this.showShare2Webo = true |
||||||
|
case 9: |
||||||
|
return this.showDownload = true |
||||||
|
} |
||||||
|
}, |
||||||
|
cancel() { |
||||||
|
this.showShareDialog = false |
||||||
|
this.showDownload = false |
||||||
|
this.showShare2WeChatZone = false |
||||||
|
this.showShare2WeChat = false |
||||||
|
this.showShare2QQZone = false |
||||||
|
this.showShare2QQ = false |
||||||
|
this.showShare2Webo = false |
||||||
|
this.$emit('update:type', -1) |
||||||
|
}, |
||||||
|
downloadVideo() { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
this.progress = 0 |
||||||
|
this.downloading = true |
||||||
|
let time = setInterval(() => { |
||||||
|
if (this.progress >= 100) { |
||||||
|
let downloadedVideo = this.$storageGet('downloadedVideo', []) |
||||||
|
downloadedVideo.push(this.videoId) |
||||||
|
this.$storageSet('downloadedVideo', downloadedVideo) |
||||||
|
clearInterval(time) |
||||||
|
this.downloading = false |
||||||
|
resolve() |
||||||
|
} else { |
||||||
|
this.progress++ |
||||||
|
} |
||||||
|
}, 5) |
||||||
|
}) |
||||||
|
}, |
||||||
|
share(item) { |
||||||
|
if (item.select) { |
||||||
|
this.$notice('已分享给朋友') |
||||||
|
} |
||||||
|
item.select = true |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
@import "../../../assets/scss/index"; |
||||||
|
|
||||||
|
.option-dialog { |
||||||
|
.buttons { |
||||||
|
padding: 0 1.5rem; |
||||||
|
|
||||||
|
img { |
||||||
|
height: 2.2rem; |
||||||
|
margin-right: .5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.dialog-friends { |
||||||
|
color: black; |
||||||
|
margin: 1rem 1rem 0 1rem; |
||||||
|
width: calc(100% - 2rem); |
||||||
|
background: white; |
||||||
|
border-radius: 6px 6px 0 0; |
||||||
|
|
||||||
|
> .dialog-friend { |
||||||
|
box-sizing: border-box; |
||||||
|
padding: .8rem; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
border-bottom: 1px solid #efefef; |
||||||
|
|
||||||
|
img { |
||||||
|
border-radius: 50%; |
||||||
|
width: 3.8rem; |
||||||
|
height: 3.8rem; |
||||||
|
} |
||||||
|
|
||||||
|
.right { |
||||||
|
margin: 0 0.5rem 0 1.5rem; |
||||||
|
font-size: 1.4rem; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.share-btn { |
||||||
|
font-size: 1.3rem; |
||||||
|
color: white; |
||||||
|
height: 2.5rem; |
||||||
|
width: 6rem; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
background: @primary-btn-color; |
||||||
|
border-radius: 2px; |
||||||
|
|
||||||
|
&.shared { |
||||||
|
background: lightgray; |
||||||
|
color: @second-text-color; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.more { |
||||||
|
box-sizing: border-box; |
||||||
|
height: 5.5rem; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
border-bottom: 1px solid #efefef; |
||||||
|
font-size: 1.4rem; |
||||||
|
margin-bottom: 1.5rem; |
||||||
|
|
||||||
|
img { |
||||||
|
border-radius: 50%; |
||||||
|
width: 2rem; |
||||||
|
height: 2rem; |
||||||
|
margin: 0 2.2rem 0 1.5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue