205 lines
4.3 KiB
Vue
205 lines
4.3 KiB
Vue
<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>
|