zyronon
4 years ago
19 changed files with 360 additions and 83 deletions
@ -0,0 +1,72 @@ |
|||||||
|
<template> |
||||||
|
<div class="lookHistory"> |
||||||
|
<BaseHeader> |
||||||
|
<template v-slot:center> |
||||||
|
<span class="f16">观看历史</span> |
||||||
|
</template> |
||||||
|
<template v-slot:right> |
||||||
|
<span class="second-text-color f13" @click="clear">清空</span> |
||||||
|
</template> |
||||||
|
</BaseHeader> |
||||||
|
<div class="content"> |
||||||
|
<Indicator |
||||||
|
style="width: calc(100vw - 2rem); margin-left: 1rem;" |
||||||
|
tabStyleWidth="50%" |
||||||
|
:tabTexts="['熟人列表','发现熟人']" |
||||||
|
v-model:active-index="currentSlideItemIndex"> |
||||||
|
</Indicator> |
||||||
|
<SlideRowList v-model:active-index="currentSlideItemIndex" style="height: calc(100vh - 6rem);"> |
||||||
|
<SlideItem class="tab1"> |
||||||
|
<Posters></Posters> |
||||||
|
<NoMore></NoMore> |
||||||
|
</SlideItem> |
||||||
|
<SlideItem class="tab2"> |
||||||
|
</SlideItem> |
||||||
|
</SlideRowList> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import Posters from "../../../components/Posters"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "lookHistory", |
||||||
|
components: { |
||||||
|
Posters |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
currentSlideItemIndex: 0 |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
clear() { |
||||||
|
this.$showConfirmDialog('确定清空？',()=>{ |
||||||
|
|
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
@import "../../../assets/scss/index"; |
||||||
|
|
||||||
|
.lookHistory { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
top: 0; |
||||||
|
overflow: auto; |
||||||
|
color: white; |
||||||
|
font-size: 1.4rem; |
||||||
|
|
||||||
|
.content { |
||||||
|
padding-top: 6rem; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,121 @@ |
|||||||
|
<template> |
||||||
|
<div class="edit-item"> |
||||||
|
<BaseHeader @back="back"> |
||||||
|
<template v-slot:center> |
||||||
|
<span class="f16">修改备注名</span> |
||||||
|
</template> |
||||||
|
<template v-slot:right> |
||||||
|
<div> |
||||||
|
<span class="f16" :class="isChanged?'save-yes':'save-no'" @click="save">保存</span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</BaseHeader> |
||||||
|
|
||||||
|
<div class="content"> |
||||||
|
<div class="notice">备注名</div> |
||||||
|
<div class="input-ctn" style="margin-bottom: 1rem;"> |
||||||
|
<input type="text" v-model="remark" placeholder="请输入备注名"> |
||||||
|
<img v-if="remark.length" class="close" src="../../assets/img/icon/close.svg" alt="" @click="remark = ''"> |
||||||
|
</div> |
||||||
|
<div class="num">{{ remark.length }}/20</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
import {mapState} from "vuex"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "SetRemark", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
remark: '', |
||||||
|
oldRemark: '', |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
isChanged() { |
||||||
|
return this.remark !== this.oldRemark; |
||||||
|
}, |
||||||
|
}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
back() { |
||||||
|
if (this.isChanged) { |
||||||
|
this.$showConfirmDialog('是否保存修改', this.save, this.$back) |
||||||
|
} else { |
||||||
|
this.$back() |
||||||
|
} |
||||||
|
}, |
||||||
|
async save() { |
||||||
|
if (!this.isChanged) return |
||||||
|
this.$showLoading() |
||||||
|
// this.$store.commit('setUserinfo', this.remark) |
||||||
|
await this.$sleep(500) |
||||||
|
this.$hideLoading() |
||||||
|
this.$back() |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
@import "../../assets/scss/index"; |
||||||
|
|
||||||
|
.edit-item { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
top: 0; |
||||||
|
|
||||||
|
.save-yes { |
||||||
|
color: $primary-btn-color; |
||||||
|
} |
||||||
|
|
||||||
|
.save-no { |
||||||
|
color: $disable-primary-btn-color; |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
padding: 2rem; |
||||||
|
padding-top: 7rem; |
||||||
|
|
||||||
|
.notice, .num { |
||||||
|
font-size: 1.2rem; |
||||||
|
color: $second-text-color; |
||||||
|
} |
||||||
|
|
||||||
|
.input-ctn { |
||||||
|
position: relative; |
||||||
|
border-bottom: 1px solid $line-color; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
input { |
||||||
|
margin: .5rem 0; |
||||||
|
color: white; |
||||||
|
height: 3rem; |
||||||
|
width: 100%; |
||||||
|
outline: none; |
||||||
|
border: none; |
||||||
|
background: transparent; |
||||||
|
|
||||||
|
&::placeholder { |
||||||
|
color: $second-text-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.close { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 1.5rem; |
||||||
|
width: 1rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue