zyronon
4 years ago
28 changed files with 1657 additions and 523 deletions
|
Before Width: | Height: | Size: 1019 B |
@ -0,0 +1,195 @@
@@ -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 @@
@@ -1,8 +1,8 @@
|
||||
export default { |
||||
// baseUrl: 'http://192.168.0.105//index.php/v1',
|
||||
// filePreview:'http://192.168.0.105/static/uploads/',
|
||||
baseUrl: 'http://192.168.0.105//index.php/v1', |
||||
filePreview:'http://192.168.0.105/static/uploads/', |
||||
// baseUrl: 'http://192.168.10.164//index.php/v1',
|
||||
// filePreview:'http://192.168.10.164/static/uploads/'
|
||||
baseUrl: 'http://localhost//index.php/v1', |
||||
filePreview:'http://localhost/static/uploads/' |
||||
// baseUrl: 'http://localhost//index.php/v1',
|
||||
// filePreview:'http://localhost/static/uploads/'
|
||||
} |
||||
@ -0,0 +1,153 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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