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:
aixianling
2022-08-08 10:33:18 +08:00
parent e912b6d00c
commit 91abd76323
109 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
src/project/caw/AppCountryAlbum/components/watermark/Watermark1.vue Normal file
View File

@@ -0,0 +1,197 @@
<template>
<div class="Watermark1" @click.stop="linkTo('./WatermarkConfig')">
<div class="top">
<h2>打卡记录</h2>
<p>{{ time }}</p>
</div>
<div class="info">
<p>{{ date }} {{ weekCn }}</p>
<p>{{ address }}</p>
<p v-if="isShowWeather">{{ weather }}</p>
</div>
<div class="text" v-if="isShowRemark">{{ remark }}</div>
</div>
</template>
<script>
export default {
props: ['config', 'addressInfo'],
data () {
return {
date: '',
time: '',
week: '',
weather: '',
remark: '',
address: '',
timer: null,
configList: [],
isShowWeather: false,
isShowRemark: false
}
},
computed: {
weekCn() {
if (this.week === 1) {
return '星期一'
}
if (this.week === 2) {
return '星期二'
}
if (this.week === 3) {
return '星期三'
}
if (this.week === 4) {
return '星期四'
}
if (this.week === 5) {
return '星期五'
}
if (this.week === 6) {
return '星期六'
}
return '星期天'
}
},
watch: {
configList: {
handler: function (v) {
if (v.length) {
const weather = v.filter(v => v.type === '2')[0]
const remark = v.filter(v => v.type === '4')[0]
this.isShowWeather = weather.status === '1'
this.isShowRemark = remark.status === '1'
this.remark = remark.defaultValue || ''
this.address = uni.getStorageSync('address').address || ''
this.weather = uni.getStorageSync('address').weather || ''
}
},
deep: true
},
addressInfo: {
handler: function (v) {
if (v.address) {
this.address = uni.getStorageSync('address').address || ''
this.weather = uni.getStorageSync('address').weather || ''
this.configList = JSON.parse(JSON.stringify(this.config)).map(v => {
if (v.fieldType === '3') {
v.defaultValue = uni.getStorageSync('address').address || ''
}
if (v.fieldType === '2') {
v.defaultValue = uni.getStorageSync('address').weather || ''
}
return v
})
}
},
deep: true
}
},
created () {
this.configList = JSON.parse(JSON.stringify(this.config)).map(v => {
if (v.fieldType === '3') {
v.defaultValue = uni.getStorageSync('address').address || ''
}
if (v.fieldType === '2') {
v.defaultValue = uni.getStorageSync('address').weather || ''
}
if (v.fieldType === '7') {
v.defaultValue = this.$dayjs().format('YYYY-MM-DD')
this.week = new Date().getDay()
}
if (v.fieldType === '6') {
v.defaultValue = this.$dayjs().format('HH:mm')
}
return v
})
this.date = this.$dayjs(new Date).format('YYYY-MM-DD')
this.time = this.$dayjs().format('HH:mm')
this.timer = setInterval(() => {
this.date = this.$dayjs().format('YYYY-MM-DD')
this.time = this.$dayjs().format('HH:mm')
this.week = new Date().getDay()
}, 1000)
uni.$on('change', e => {
this.configList = e
})
},
destroyed () {
clearInterval(this.timer)
},
methods: {
linkTo (url) {
uni.setStorageSync('waterConfig', this.configList)
uni.navigateTo({
url
})
}
}
}
</script>
<style lang="scss" scoped>
.Watermark1 {
* {
box-sizing: border-box;
}
.text {
min-width: 274px;
height: 48px;
line-height: 48px;
margin-top: 32px;
padding: 0 16px;
font-size: 28px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.top {
width: 184px;
background: #FEFFFE;
border-radius: 16px;
text-align: center;
overflow: hidden;
h2 {
height: 64px;
line-height: 64px;
background: #1ABDA6;
font-size: 34px;
font-weight: normal;
}
p {
height: 72px;
line-height: 72px;
font-weight: 600;
color: #333333;
font-size: 48px;
}
}
.info {
line-height: 40px;
margin: 32px 0 0;
padding-left: 22px;
border-left: 6px solid #F8BC58;
p:nth-of-type(2) {
margin: 8px 0;
}
}
}
</style>

208
src/project/caw/AppCountryAlbum/components/watermark/Watermark2.vue Normal file
View File

@@ -0,0 +1,208 @@
<template>
<div class="Watermark3" @click.stop="linkTo('./WatermarkConfig')">
<div class="top">
<h2 v-if="isShowTitle">{{ title }}</h2>
<span v-if="isShowName">{{ name }}</span>
</div>
<div class="middle">
<h2 v-if="isShowTime">{{ time }}</h2>
<span v-if="isShowWeather">{{ weather }}</span>
</div>
<p v-if="isShowDate">{{ date }} {{ weekCn }}</p>
<div class="text" v-if="isShowMatters && matters">
<span>{{ matters }}</span>
<image src="./../../images/quotes.png" />
</div>
</div>
</template>
<script>
export default {
props: ['config'],
data () {
return {
date: '',
time: '',
week: '',
timer: null,
name: '',
weather: '',
title: '巡检水印',
configList: [],
matters: '',
isShowWeather: false,
isShowDate: false,
isShowTitle: false,
isShowTime: false,
isShowName: false,
isShowMatters: false
}
},
computed: {
weekCn() {
if (this.week === 1) {
return '星期一'
}
if (this.week === 2) {
return '星期二'
}
if (this.week === 3) {
return '星期三'
}
if (this.week === 4) {
return '星期四'
}
if (this.week === 5) {
return '星期五'
}
if (this.week === 6) {
return '星期六'
}
return '星期天'
}
},
watch: {
configList: {
handler: function (v) {
if (v.length) {
const weather = v.filter(v => v.type === '2')[0]
const date = v.filter(v => v.type === '1')[0]
const time = v.filter(v => v.type === '0')[0]
const title = v.filter(v => v.type === '5')[0]
const name = v.filter(v => v.type === '6')[0]
const matters = v.filter(v => v.type === '7')[0]
this.isShowWeather = weather.status === '1'
this.isShowDate = date.status === '1'
this.isShowTitle = title.status === '1'
this.isShowTime = time.status === '1'
this.isShowName = name.status === '1'
this.isShowMatters = matters.status === '1'
this.title = title.defaultValue || ''
this.name = name.defaultValue || ''
this.date = date.defaultValue || this.$dayjs(new Date).format('YYYY-MM-DD')
this.time = time.defaultValue || this.$dayjs().format('HH:mm')
this.weather = uni.getStorageSync('address').weather || ''
this.matters = matters.defaultValue || ''
this.week = date.defaultValue ? this.$dayjs(date.defaultValue).day() : new Date().getDay()
}
},
deep: true
},
},
created () {
this.configList = JSON.parse(JSON.stringify(this.config)).map(v => {
if (v.fieldType === '7') {
v.defaultValue = this.$dayjs().format('YYYY-MM-DD')
this.week = new Date().getDay()
}
if (v.fieldType === '6') {
v.defaultValue = this.$dayjs().format('HH:mm')
}
if (v.fieldType === '2') {
v.defaultValue = uni.getStorageSync('address').weather || ''
}
return v
})
uni.$on('change', e => {
this.configList = e
})
},
destroyed () {
clearInterval(this.timer)
},
methods: {
linkTo (url) {
uni.setStorageSync('waterConfig', this.configList)
uni.navigateTo({
url
})
}
}
}
</script>
<style lang="scss" scoped>
.Watermark3 {
width: 348px;
line-height: 1;
padding: 16px;
background: rgba(56, 167, 255, 0.6);
border-radius: 4px;
* {
box-sizing: border-box;
}
.text {
position: relative;
margin-top: 20px;
padding-left: 10px;
font-size: 28px;
image {
position: absolute;
top: -6px;
left: 0;
width: 28px;
height: 24px;
}
}
.middle {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
h2 {
font-size: 68px;
font-weight: normal;
}
span {
color: #53FBFF;
font-size: 28px;
}
}
& > p {
margin-top: 16px;
font-weight: 500;
font-size: 28px;
}
.top {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 6px 0 0 6px;
border-bottom: 4px solid #FFE97A;
h2 {
height: 56px;
line-height: 56px;
padding: 0 6px;
text-align: center;
color: #498abe;
font-size: 30px;
border-radius: 6px 6px 0 0;
background: #FFE97A;
}
span {
font-size: 28px;
}
}
}
</style>

199
src/project/caw/AppCountryAlbum/components/watermark/Watermark3.vue Normal file
View File

@@ -0,0 +1,199 @@
<template>
<div class="Watermark2" @click.stop="linkTo('./WatermarkConfig')">
<div class="top">
<div class="left">
<h2>{{ time }}</h2>
</div>
<div class="right">
<h2>{{ date }} </h2>
<p>{{ weekCn }}</p>
</div>
</div>
<p>{{ address }}</p>
<div class="text" v-if="isShowRemark">{{ remark }}</div>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
props: ['config'],
data () {
return {
date: '',
time: '',
week: '',
timer: null,
address: '',
remark: '',
configList: [],
isShowRemark: false
}
},
computed: {
weekCn() {
if (this.week === 1) {
return '星期一'
}
if (this.week === 2) {
return '星期二'
}
if (this.week === 3) {
return '星期三'
}
if (this.week === 4) {
return '星期四'
}
if (this.week === 5) {
return '星期五'
}
if (this.week === 6) {
return '星期六'
}
return '星期天'
}
},
watch: {
configList: {
handler: function (v) {
if (v.length) {
const remark = v.filter(v => v.type === '4')[0]
this.isShowRemark = remark.status === '1'
this.remark = remark.defaultValue || ''
this.address = uni.getStorageSync('address').address || ''
}
},
deep: true
},
},
created () {
this.configList = JSON.parse(JSON.stringify(this.config)).map(v => {
if (v.fieldType === '3') {
v.defaultValue = uni.getStorageSync('address').address || ''
}
if (v.fieldType === '7') {
v.defaultValue = this.$dayjs().format('YYYY-MM-DD')
this.week = new Date().getDay()
}
if (v.fieldType === '6') {
v.defaultValue = this.$dayjs().format('HH:mm')
}
return v
})
this.date = this.$dayjs(new Date).format('YYYY-MM-DD')
this.time = this.$dayjs().format('HH:mm')
this.timer = setInterval(() => {
this.date = this.$dayjs().format('YYYY-MM-DD')
this.time = this.$dayjs().format('HH:mm')
this.week = new Date().getDay()
}, 1000)
uni.$on('change', e => {
this.configList = e
})
},
destroyed () {
clearInterval(this.timer)
},
methods: {
...mapActions(['injectJWeixin']),
linkTo (url) {
uni.setStorageSync('waterConfig', this.configList)
uni.navigateTo({
url
})
}
}
}
</script>
<style lang="scss" scoped>
.Watermark2 {
* {
box-sizing: border-box;
}
.text {
min-width: 274px;
height: 48px;
line-height: 48px;
padding: 0 16px;
font-size: 28px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
}
.top {
display: flex;
align-items: center;
.left {
position: relative;
margin-right: 38px;
&:after {
position: absolute;
top: 50%;
right: -16px;
z-index: 1;
width: 6px;
height: 72px;
background: #F8BC58;
transform: translateY(-50%);
content: '';
}
h2 {
font-size: 68px;
font-weight: 500;
color: #FFFFFF;
line-height: 80px;
}
}
.right {
font-size: 24px;
font-weight: 500;
color: #FFFFFF;
h2 {
margin-bottom: 8px;
font-weight: 500;
font-size: 24px;
}
}
}
& > p {
margin: 20px 0 16px;
font-weight: 600;
color: #fff;
font-size: 24px;
}
.info {
line-height: 40px;
margin: 32px 0;
padding-left: 22px;
border-left: 6px solid #F8BC58;
p:nth-of-type(2) {
margin: 8px 0;
}
}
}
</style>

204
src/project/caw/AppCountryAlbum/components/watermark/Watermark4.vue Normal file
View File

@@ -0,0 +1,204 @@
<template>
<div class="Watermark6" @click.stop="linkTo('./WatermarkConfig')">
<div class="title">
<h2>{{ title }}</h2>
</div>
<div class="info">
<div class="info-item">
<label>时间：</label>
<span>{{ date }} {{ weekCn}} {{ time }}</span>
</div>
<div class="info-item">
<label>地点：</label>
<span>{{ address }}</span>
</div>
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
props: ['config'],
data () {
return {
date: '',
timer: null,
week: '',
title: '定格在这一刻',
address: '',
configList: []
}
},
computed: {
weekCn() {
if (this.week === 1) {
return '星期一'
}
if (this.week === 2) {
return '星期二'
}
if (this.week === 3) {
return '星期三'
}
if (this.week === 4) {
return '星期四'
}
if (this.week === 5) {
return '星期五'
}
if (this.week === 6) {
return '星期六'
}
return '星期天'
}
},
watch: {
configList: {
handler: function (v) {
if (v && v.length) {
const date = v.filter(v => v.type === '1')[0]
const time = v.filter(v => v.type === '0')[0]
const title = v.filter(v => v.type === '5')[0]
this.title = title.defaultValue || ''
this.date = date.defaultValue || this.$dayjs(new Date).format('YYYY-MM-DD')
this.time = time.defaultValue || this.$dayjs().format('HH:mm')
this.week = date.defaultValue ? this.$dayjs(date.defaultValue).day() : new Date().getDay()
this.address = uni.getStorageSync('address').address || ''
}
},
deep: true
},
},
created () {
this.configList = JSON.parse(JSON.stringify(this.config)).map(v => {
if (v.fieldType === '3') {
v.defaultValue = uni.getStorageSync('address').address || ''
this.address = uni.getStorageSync('address').address || ''
}
if (v.fieldType === '7') {
v.defaultValue = this.$dayjs().format('YYYY-MM-DD')
this.week = new Date().getDay()
}
if (v.fieldType === '6') {
v.defaultValue = this.$dayjs().format('HH:mm')
}
return v
})
this.date = this.$dayjs(new Date).format('YYYY-MM-DD')
this.time = this.$dayjs().format('HH:mm')
this.week = new Date().getDay()
uni.$on('change', e => {
this.configList = e
})
},
destroyed () {
clearInterval(this.timer)
},
methods: {
...mapActions(['injectJWeixin']),
linkTo (url) {
uni.setStorageSync('waterConfig', this.configList)
uni.navigateTo({
url
})
}
}
}
</script>
<style lang="scss" scoped>
.Watermark6 {
width: 450px;
box-sizing: border-box;
h2 {
font-weight: normal;
}
* {
box-sizing: border-box;
}
.info {
padding: 24px;
background: rgba(255, 255, 255, 0.7);
.info-item {
display: flex;
line-height: 1.3;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
label {
color: #333;
font-size: 28px;
}
span {
flex: 1;
text-align: justify;
color: #000000;
font-size: 28px;
}
}
}
.title {
position: relative;
height: 60px;
line-height: 60px;
text-align: center;
color: #fff;
background: rgba(23, 91, 255, 0.7);
h2 {
font-size: 32px;
}
&::after {
position: absolute;
left: 16px;
top: 50%;
z-index: 1;
width: 12px;
height: 12px;
border-radius: 50%;
background: #FFCA32;
content: ' ';
transform: translateY(-50%);
}
&::before {
position: absolute;
right: 16px;
top: 50%;
z-index: 1;
width: 12px;
height: 12px;
border-radius: 50%;
background: #FFCA32;
content: ' ';
transform: translateY(-50%);
}
}
}
</style>

206
src/project/caw/AppCountryAlbum/components/watermark/Watermark5.vue Normal file
View File

@@ -0,0 +1,206 @@
<template>
<div class="Watermark4" @click.stop="linkTo('./WatermarkConfig')">
<div class="top">
<image src="./../../images/fangyishuiyin.png" />
<h2>{{ title }}</h2>
</div>
<div class="Watermark4-body">
<h2 v-if="isShowTime">{{ time }}</h2>
<p v-if="isShowDate">{{ date }} {{ weekCn }}</p>
<div class="info">
<div class="info-item" v-if="isShowAddress">
<label>地点：</label>
<span>{{ address }}</span>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
props: ['config'],
data () {
return {
date: '',
time: '',
week: '',
timer: null,
title: '日常消杀',
address: '',
configList: [],
isShowAddress: true,
isShowDate: true,
isShowTime: true
}
},
computed: {
weekCn() {
if (this.week === 1) {
return '星期一'
}
if (this.week === 2) {
return '星期二'
}
if (this.week === 3) {
return '星期三'
}
if (this.week === 4) {
return '星期四'
}
if (this.week === 5) {
return '星期五'
}
if (this.week === 6) {
return '星期六'
}
return '星期天'
}
},
watch: {
configList: {
handler: function (v) {
if (v.length) {
const title = v.filter(v => v.type === '5')[0]
const address = v.filter(v => v.type === '3')[0]
const date = v.filter(v => v.type === '1')[0]
const time = v.filter(v => v.type === '0')[0]
this.isShowAddress = address.status === '1'
this.isShowDate = date.status === '1'
this.isShowTime = time.status === '1'
this.title = title.defaultValue || ''
this.date = date.defaultValue || this.$dayjs(new Date).format('YYYY-MM-DD')
this.time = time.defaultValue || this.$dayjs().format('HH:mm')
this.week = date.defaultValue ? this.$dayjs(date.defaultValue).day() : new Date().getDay()
this.address = address.defaultValue || ''
}
},
deep: true
},
},
created () {
this.configList = JSON.parse(JSON.stringify(this.config)).map(v => {
if (v.fieldType === '3') {
v.defaultValue = uni.getStorageSync('address').address || ''
}
if (v.fieldType === '7') {
v.defaultValue = this.$dayjs().format('YYYY-MM-DD')
this.week = new Date().getDay()
}
if (v.fieldType === '6') {
v.defaultValue = this.$dayjs().format('HH:mm')
}
return v
})
this.date = this.$dayjs(new Date).format('YYYY-MM-DD')
this.time = this.$dayjs().format('HH:mm')
this.week = new Date().getDay()
uni.$on('change', e => {
this.configList = e
})
},
destroyed () {
clearInterval(this.timer)
},
methods: {
...mapActions(['injectJWeixin']),
linkTo (url) {
uni.setStorageSync('waterConfig', this.configList)
uni.navigateTo({
url
})
}
}
}
</script>
<style lang="scss" scoped>
.Watermark4 {
width: 400px;
line-height: 1;
border-radius: 4px;
* {
box-sizing: border-box;
}
.top {
position: relative;
width: 400px;
height: 60px;
line-height: 60px;
padding-left: 60px;
background: linear-gradient(270deg, rgba(67, 60, 255, 0) 0%, rgba(60, 163, 255, 0.8) 50%, #3B92FF 100%);
image {
position: absolute;
left: -32px;
top: -16px;
z-index: 1;
width: 92px;
height: 112px;
}
h2 {
font-weight: 500;
font-size: 32px;
color: #fff;
}
}
.Watermark4-body {
padding: 24px 20px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 100%);
& > h2 {
line-height: 56px;
font-size: 48px;
font-weight: bold;
color: #FFFFFF;
}
& > p {
line-height: 36px;
margin-bottom: 16px;
font-size: 26px;
color: #FFFFFF;
}
.info {
.info-item {
display: flex;
line-height: 1.4;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
label {
color: #BADCFF;
font-size: 28px;
}
span {
flex: 1;
font-size: 28px;
}
}
}
}
}
</style>

262
src/project/caw/AppCountryAlbum/components/watermark/Watermark6.vue Normal file
View File

@@ -0,0 +1,262 @@
<template>
<div class="Watermark5" @click.stop="linkTo('./WatermarkConfig')">
<div class="top">
<h2>{{ title }}</h2>
<div class="right">
<h2>{{ time }}</h2>
<p>{{ date }}</p>
</div>
</div>
<div class="info">
<div class="info-item">
<label>网格员：</label>
<span>{{ gridUserName }}</span>
</div>
<div class="info-item" v-if="isShowGridName">
<label>网格：</label>
<span>{{ gridName }}</span>
</div>
<div class="info-item" v-if="isShowAddress">
<label>地点：</label>
<span>{{ address }}</span>
</div>
<div class="info-item" v-if="isServiceName">
<label>服务对象：</label>
<span>{{ serviceName }}</span>
</div>
</div>
<div class="bottom" v-if="isShowText">
<span>工作纪实</span>
<i>{{ text }}</i>
</div>
<div class="line"></div>
</div>
</template>
<script>
import {mapActions} from 'vuex'
export default {
props: ['config'],
data () {
return {
date: '',
time: '',
week: '',
address: '',
title: '',
timer: null,
gridUserName: '',
gridName: '',
isShowAddress: true,
isShowDate: true,
isShowTime: true,
isShowGridName: true,
serviceName: '',
isServiceName: false,
text: '',
isShowText: '',
configList: []
}
},
computed: {
weekCn() {
if (this.week === 1) {
return '星期一'
}
if (this.week === 2) {
return '星期二'
}
if (this.week === 3) {
return '星期三'
}
if (this.week === 4) {
return '星期四'
}
if (this.week === 5) {
return '星期五'
}
if (this.week === 6) {
return '星期六'
}
return '星期天'
}
},
watch: {
configList: {
handler: function (v) {
if (v.length) {
const address = v.filter(v => v.type === '3')[0]
const gridUserName = v.filter(v => v.type === '9')[0]
const gridName = v.filter(v => v.type === '10')[0]
const title = v.filter(v => v.type === '8')[0]
const serviceName = v.filter(v => v.type === '11')[0]
const text = v.filter(v => v.type === '12')[0]
this.isShowAddress = address.status === '1'
this.isShowGridName = gridName.status === '1'
this.isServiceName = serviceName.status === '1'
this.isShowText = text.status === '1'
this.title = title.defaultValue || ''
this.gridUserName = gridUserName.defaultValue || ''
this.gridName = gridName.defaultValue || ''
this.serviceName = serviceName.defaultValue || ''
this.text = text.defaultValue || ''
this.address = address.defaultValue || ''
}
},
deep: true
},
},
created () {
this.configList = JSON.parse(JSON.stringify(this.config)).map(v => {
if (v.fieldType === '3') {
v.defaultValue = uni.getStorageSync('address').address || ''
this.address = uni.getStorageSync('address').address || ''
}
return v
})
uni.$on('change', e => {
this.configList = e
})
this.date = this.$dayjs(new Date).format('YYYY-MM-DD')
this.time = this.$dayjs().format('HH:mm')
this.timer = setInterval(() => {
this.date = this.$dayjs().format('YYYY-MM-DD')
this.time = this.$dayjs().format('HH:mm')
this.week = new Date().getDay()
}, 1000)
},
destroyed () {
clearInterval(this.timer)
uni.$off('change')
},
methods: {
...mapActions(['injectJWeixin']),
linkTo (url) {
uni.setStorageSync('waterConfig', this.configList)
uni.navigateTo({
url
})
}
}
}
</script>
<style lang="scss" scoped>
.Watermark5 {
width: 440px;
padding: 0 16px 22px;
color: #000;
box-sizing: border-box;
background: #fff;
h2 {
font-weight: normal;
}
* {
box-sizing: border-box;
}
.line {
margin-top: 4px;
height: 4px;
background: #2145C4;
}
.bottom {
display: flex;
align-items: center;
border: 3px solid #2145C4;
span {
width: 120px;
height: 48px;
line-height: 48px;
text-align: center;
color: #fff;
font-size: 26px;
background: #2145C4;
}
i {
flex: 1;
color: #2145C4;
font-size: 26px;
font-style: normal;
text-align: center;
}
}
.info {
margin-bottom: 16px;
.info-item {
display: flex;
line-height: 1.3;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
label {
color: #333;
font-size: 26px;
}
span {
flex: 1;
color: #000000;
font-size: 26px;
font-weight: 600;
}
}
}
.top {
display: flex;
align-items: center;
justify-content: space-between;
height: 90px;
margin-bottom: 20px;
color: #2145C4;
border-bottom: 4px solid #2145C4;
& > h2 {
font-size: 32px;
font-weight: 600;
}
.right {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
h2 {
width: 96px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 30px;
background: #2145C4;
}
p {
font-size: 24px;
}
}
}
}
</style>

183
src/project/caw/AppCountryAlbum/components/watermark/Watermark7.vue Normal file
View File

@@ -0,0 +1,183 @@
<template>
<div class="Watermark7" @click.stop="linkTo('./WatermarkConfig')">
<image src="../../images/hjws.png" />
<h2 v-if="isShowTitle">{{ title }}</h2>
<div class="middle">
<div class="top">
<h2>{{ time }}</h2>
<span>{{ weather }}</span>
</div>
<div class="bottom">{{ date }} {{ weekCn }}</div>
</div>
<div class="bottom" v-if="isShowAddress">{{ address }}</div>
</div>
</template>
<script>
import {mapActions} from 'vuex'
export default {
props: ['config'],
data () {
return {
date: '',
time: '',
title: '',
week: '',
weather: '',
address: '',
timer: null,
isShowTitle: true,
isShowAddress: true,
configList: []
}
},
computed: {
weekCn() {
if (this.week === 1) {
return '星期一'
}
if (this.week === 2) {
return '星期二'
}
if (this.week === 3) {
return '星期三'
}
if (this.week === 4) {
return '星期四'
}
if (this.week === 5) {
return '星期五'
}
if (this.week === 6) {
return '星期六'
}
return '星期天'
}
},
watch: {
configList: {
handler: function (v) {
if (v.length) {
const address = v.filter(v => v.type === '3')[0]
const title = v.filter(v => v.type === '5')[0]
this.isShowAddress = address.status === '1'
this.isShowTitle = title.status === '1'
this.title = title.defaultValue || ''
this.address = address.defaultValue || ''
}
},
deep: true
},
},
created () {
this.configList = JSON.parse(JSON.stringify(this.config)).map(v => {
if (v.fieldType === '3') {
v.defaultValue = uni.getStorageSync('address').address || ''
}
if (v.fieldType === '2') {
v.defaultValue = uni.getStorageSync('address').weather || ''
}
if (v.fieldType === '7') {
v.defaultValue = this.$dayjs().format('YYYY-MM-DD')
this.week = new Date().getDay()
}
if (v.fieldType === '6') {
v.defaultValue = this.$dayjs().format('HH:mm')
}
return v
})
this.date = this.$dayjs(new Date).format('YYYY-MM-DD')
this.time = this.$dayjs().format('HH:mm')
this.week = new Date().getDay()
uni.$on('change', e => {
this.configList = e
})
},
destroyed () {
clearInterval(this.timer)
},
methods: {
linkTo (url) {
uni.setStorageSync('waterConfig', this.configList)
uni.navigateTo({
url
})
}
}
}
</script>
<style lang="scss" scoped>
.Watermark7 {
width: 400px;
font-size: 0;
box-sizing: border-box;
h2 {
font-weight: normal;
}
* {
box-sizing: border-box;
}
& > image {
width: 100%;
height: 64px;
}
& > .bottom {
line-height: 1.3;
padding: 10px 16px;
font-size: 26px;
text-align: justify;
background: rgba(27, 120, 65, 0.8);
}
.middle {
line-height: 1;
padding: 16px;
background: rgba(0, 0, 0, 0.5);
.top {
display: flex;
align-items: center;
margin-bottom: 6px;
h2 {
margin-right: 16px;
color: #FFFFFF;
font-size: 48px;
}
span {
color: #62CD8B;
font-size: 26px;
}
}
.bottom {
font-size: 26px;
}
}
& > h2 {
height: 64px;
line-height: 64px;
text-align: center;
color: #fff;
font-size: 32px;
background: #1B7841;
}
}
</style>

102
src/project/caw/AppCountryAlbum/components/watermark/Watermark8.vue Normal file
View File

@@ -0,0 +1,102 @@
<template>
<div class="Watermark8">
<h2>{{ date }}</h2>
<div>{{ day }}</div>
<p>{{ lunar }} {{ weekCn }}</p>
</div>
</template>
<script>
import lunar from '../../config/calendar'
export default {
data () {
return {
date: '',
week: '',
day: '',
lunar: '',
timer: null
}
},
computed: {
weekCn() {
if (this.week === 1) {
return '星期一'
}
if (this.week === 2) {
return '星期二'
}
if (this.week === 3) {
return '星期三'
}
if (this.week === 4) {
return '星期四'
}
if (this.week === 5) {
return '星期五'
}
if (this.week === 6) {
return '星期六'
}
return '星期天'
}
},
created () {
const date = this.$dayjs(new Date)
const result = lunar.solarToLunar(date.format('YYYY'), date.format('MM'), date.format('DD'))
this.date = date.format('YYYY年MM月')
this.day = date.format('DD')
this.lunar = `${result.monthStr}${result.dayStr}`
this.week = new Date().getDay()
},
destroyed () {
clearInterval(this.timer)
},
methods: {
linkTo (url) {
uni.navigateTo({
url
})
}
}
}
</script>
<style lang="scss" scoped>
.Watermark8 {
width: 292px;
height: 376px;
color: #FF5643;
box-sizing: border-box;
text-align: center;
background-image: url(../../images/rili.png);
background-size: 100% 100%;
h2 {
height: 68px;
padding-top: 106px;
text-align: center;
font-size: 32px;
color: #fff;
font-weight: normal;
}
div {
line-height: 1;
margin: 10px 0 8px;
font-size: 100px;
font-weight: 600;
}
p {
font-size: 26px;
}
}
</style>