kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

乡村相册

Browse Source
This commit is contained in:
yanran200730
2022-03-11 16:48:38 +08:00
parent 5e8f80482e
commit 625b2d88f9
5 changed files with 429 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.vue
View File

@@ -51,6 +51,13 @@ uni-page-body {
background: #f5f5f5;
position: relative;
}
.text-hover {
opacity: 0.7;
}
.bg-hover {
background: #eee;
}
div[bottom] {
position: fixed;

8
src/saas/AppCountryAlbum/AddAlbum.vue
View File

@@ -15,7 +15,7 @@
<label>*</label>
<span>水印</span>
</div>
<div class="right">
<div class="right" @click="linkTo('./WatermarkSetting')">
<span>请选择</span>
<image src="./images/right.png" />
</div>
@@ -25,15 +25,15 @@
<label>*</label>
<span>拍摄人</span>
</div>
<div class="right">
<div class="right" @click="linkTo('./PersonnelSetting')">
<span>请选择</span>
<image src="./images/right.png" />
</div>
</div>
<div class="form-group__item">
<div class="form-group__item" @click="linkTo('./SourceSetting')">
<div class="left">
<label>*</label>
<span>水印</span>
<span>照片来源</span>
</div>
<div class="right">
<span>请选择</span>

135
src/saas/AppCountryAlbum/PersonnelSetting.vue
View File

@@ -1,28 +1,153 @@
<template>
<div class="WatermarkSetting"></div>
<div class="PersonnelSetting">
<div class="title">
<h2>拍摄人</h2>
<span>*选择拍摄人后，相册只能上传该拍摄人照片</span>
</div>
<div class="cell-group">
<div class="cell-item" hover-class="bg-hover" @click="currIndex = 0">
<div class="cell-item__left">
<h2>不限</h2>
</div>
<div class="cell-item__check" :class="[currIndex === 0 ? 'active' : '']"></div>
</div>
<div class="cell-item" hover-class="bg-hover" @click="currIndex = 1">
<div class="cell-item__left">
<h2>根据条件选择</h2>
</div>
<div class="cell-item__check" :class="[currIndex === 1 ? 'active' : '']"></div>
</div>
</div>
<div class="form-btn" hover-class="text-hover">保存</div>
</div>
</template>
<script>
export default {
name: 'WatermarkSetting',
name: 'PersonnelSetting',
appName: '水印设置',
appName: '拍摄人选择',
data () {
return {
currIndex: 0
}
},
mounted () {
onLoad () {
},
methods: {
linkTo (url) {
uni.navigateTo({
url
})
}
}
}
</script>
<style lang="scss" scoped>
.PersonnelSetting {
padding-bottom: 130px;
* {
box-sizing: border-box;
}
.form-btn {
position: fixed;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 112px;
line-height: 112px;
text-align: center;
color: #fff;
font-size: 32px;
background: #1365DD;
&:active {
opacity: 0.8;
}
}
.tips {
line-height: 44px;
margin: 32px;
font-size: 28px;
color: #999999;
white-space: pre-line;
}
.title {
display: flex;
align-items: center;
height: 96px;
padding: 0 32px;
h2 {
font-weight: normal;
color: #666666;
font-size: 32px;
}
span {
margin-left: 16px;
color: #999999;
font-size: 30px;
}
}
.cell-group {
.cell-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 108px;
margin-bottom: 16px;
padding: 0 32px;
background: #FFFFFF;
&:active {
background: #eee;
}
image {
width: 32px;
height: 32px;
}
&:last-child {
margin-bottom: 0;
}
h2 {
margin-bottom: 12px;
color: #333333;
font-size: 32px;
}
p {
color: #999999;
font-size: 28px;
}
.cell-item__check {
flex-shrink: 1;
width: 32px;
height: 32px;
border-radius: 50%;
border: 4px solid #CCCCCC;
transition: all ease 0.3s;
&.active {
border: 10px solid #1365DD;
}
}
}
}
}
</style>

101
src/saas/AppCountryAlbum/SourceSetting.vue
View File

@@ -1,5 +1,26 @@
<template>
<div class="AlbumDetail"></div>
<div class="SourceSetting">
<div class="title">照片来源</div>
<div class="cell-group">
<div class="cell-item" hover-class="bg-hover" @click="currIndex = 0">
<div class="cell-item__left">
<h2>不限</h2>
</div>
<div class="cell-item__check" :class="[currIndex === 0 ? 'active' : '']"></div>
</div>
<div class="cell-item" hover-class="bg-hover" @click="currIndex = 1">
<div class="cell-item__left">
<h2>仅限乡村相册拍摄</h2>
</div>
<div class="cell-item__check" :class="[currIndex === 1 ? 'active' : '']"></div>
</div>
</div>
<div class="tips">
选择不限后：
1. 成员可以同步手机原相机、数码相机等拍摄的照片和视频；
2. 仅乡村相册裴舍的照片或者视频会计入考勤，保证考勤统计真实性。
</div>
</div>
</template>
<script>
@@ -10,19 +31,93 @@
data () {
return {
currIndex: 0
}
},
mounted () {
onLoad () {
},
methods: {
linkTo (url) {
uni.navigateTo({
url
})
}
}
}
</script>
<style lang="scss" scoped>
.SourceSetting {
* {
box-sizing: border-box;
}
.tips {
line-height: 44px;
margin: 32px;
font-size: 28px;
color: #999999;
white-space: pre-line;
}
.title {
height: 96px;
line-height: 96px;
padding: 0 32px;
color: #666666;
font-size: 32px;
}
.cell-group {
.cell-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 108px;
margin-bottom: 16px;
padding: 0 32px;
background: #FFFFFF;
&:active {
background: #eee;
}
image {
width: 32px;
height: 32px;
}
&:last-child {
margin-bottom: 0;
}
h2 {
margin-bottom: 12px;
color: #333333;
font-size: 32px;
}
p {
color: #999999;
font-size: 28px;
}
.cell-item__check {
flex-shrink: 1;
width: 32px;
height: 32px;
border-radius: 50%;
border: 4px solid #CCCCCC;
transition: all ease 0.3s;
&.active {
border: 10px solid #1365DD;
}
}
}
}
}
</style>

194
src/saas/AppCountryAlbum/WatermarkSetting.vue
View File

@@ -1,28 +1,214 @@
<template>
<div class="AlbumDetail"></div>
<div class="WatermarkSetting">
<div class="title">
<h2>水印选择</h2>
<span>*选择水印后，相册只能上传该水印照片</span>
</div>
<div class="cell-group">
<div class="cell-item" hover-class="bg-hover" @click="currIndex = 0">
<div class="cell-item__left">
<h2>不限</h2>
</div>
<div class="cell-item__check" :class="[currIndex === 0 ? 'active' : '']"></div>
</div>
<div class="cell-item" hover-class="bg-hover" @click="currIndex = 1">
<div class="cell-item__left">
<h2>从库中选择水印</h2>
</div>
<div class="cell-item__check" :class="[currIndex === 1 ? 'active' : '']"></div>
</div>
</div>
<div class="title">
<h2>水印库</h2>
</div>
<div class="watermark-list">
<div class="item" @click="checkd(index)" v-for="(item, index) in 10" :key="index" :class="[checkedList.includes(index) ? 'active' : '']">
<image class="checked" v-if="checkedList.includes(index)" src="./images/xuanzhong.png" />
<image class="watermark" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fa50994a01ff415294729ac6e0623845~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?" />
</div>
</div>
<div class="form-btn" hover-class="text-hover">保存</div>
</div>
</template>
<script>
export default {
name: 'SourceSetting',
name: 'WatermarkSetting',
appName: '来源设置',
appName: '水印选择',
data () {
return {
currIndex: 0,
checkedList: [0, 1, 5]
}
},
mounted () {
onLoad () {
},
methods: {
linkTo (url) {
uni.navigateTo({
url
})
},
checkd (index) {
const i = this.checkedList.indexOf(index)
if (i > -1) {
this.checkedList.splice(i, 1)
} else {
this.checkedList.push(index)
}
}
}
}
</script>
<style lang="scss" scoped>
.WatermarkSetting {
padding-bottom: 130px;
* {
box-sizing: border-box;
}
.watermark-list {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
background: #fff;
padding: 16px;
.item {
position: relative;
margin-bottom: 16px;
width: 352px;
height: 240px;
border-radius: 8px;
font-size: 0;
&.active {
.watermark {
border: 4px solid #2477F1;
}
}
.checked {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 64px;
height: 64px;
}
.watermark {
width: 352px;
height: 240px;
}
&:nth-of-type(2n) {
margin-right: 0;
}
}
}
.form-btn {
position: fixed;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 112px;
line-height: 112px;
text-align: center;
color: #fff;
font-size: 32px;
background: #1365DD;
&:active {
opacity: 0.8;
}
}
.tips {
line-height: 44px;
margin: 32px;
font-size: 28px;
color: #999999;
white-space: pre-line;
}
.title {
display: flex;
align-items: center;
height: 96px;
padding: 0 32px;
h2 {
font-weight: normal;
color: #666666;
font-size: 32px;
}
span {
margin-left: 16px;
color: #999999;
font-size: 30px;
}
}
.cell-group {
.cell-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 108px;
margin-bottom: 16px;
padding: 0 32px;
background: #FFFFFF;
&:active {
background: #eee;
}
image {
width: 32px;
height: 32px;
}
&:last-child {
margin-bottom: 0;
}
h2 {
margin-bottom: 12px;
color: #333333;
font-size: 32px;
}
p {
color: #999999;
font-size: 28px;
}
.cell-item__check {
flex-shrink: 1;
width: 32px;
height: 32px;
border-radius: 50%;
border: 4px solid #CCCCCC;
transition: all ease 0.3s;
&.active {
border: 10px solid #1365DD;
}
}
}
}
}
</style>