Skip to content

C
community_vote
Commit 533a719a authored by xhx's avatar xhx
Browse files
Options

日历关联

parent 775c2beb
Hide whitespace changes
Inline Side-by-side
Showing with 169 additions and 90 deletions
src/components/common/Calendar.vue
View file @ 533a719a
...@@ -3,39 +3,96 @@ ...@@ -3,39 +3,96 @@
<div class='flex justify-between'> <div class='flex justify-between'>
<div>{{ title }}</div> <div>{{ title }}</div>
<div class='flex items-center'> <div class='flex items-center'>
<span class=" text-xs">{{dateStart}}</span> <span class="mr-2 text-xs">{{ date }}</span>
<div @click="showStart = true"> <div @click="showStart = true">
<app-icon customize type='icon-rili' size='20px'> </app-icon> <app-icon customize type='icon-rili' size='20px'></app-icon>
</div> </div>
<van-calendar v-model="showStart" @confirm="onConfirmStart"/> <van-calendar
class="text-black"
v-model="showStart"
:default-date="new Date(date)"
:min-date="minDate"
:max-date="maxDate"
:show-confirm="false"
@select="onConfirm"/>
</div> </div>
</div> </div>
<input <input
type="number" type="number"
:placeholder="'请输入开始区块 当前区块' + blockHeight" :placeholder="placeholder + blockHeight"
class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1" class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1"
v-model="value" :value="value"
@blur="getDateTime"> @input="handleChange($event)"
@blur="getDateTime"
>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'
import { Calendar } from 'vant'
import { getPreDay } from '@/utils/date'
Vue.use(Calendar)
export default Vue.extend({ export default Vue.extend({
props: { props: {
title: { title: {
type: String, type: String,
default: '投票开始时间' default: '投票开始时间'
}, },
placeholder: {
type: String,
default: '请输入开始区块 当前区块'
},
blockHeight: { blockHeight: {
type: String type: String
},
blockTime: {
type: String
},
value: {
type: String
} }
}, },
data() { data() {
return { return {
date: '', date: getPreDay('YYYY-MM-DD'),
value: '' showStart: false,
minDate: new Date(2019, 0, 1),
maxDate: new Date(2023, 0, 1),
}
},
components: {
'app-icon':()=>import('@/components/common/Icon.vue'),
},
methods: {
handleChange(v: any) {
this.$emit('update:value', v.target.value)
},
onConfirm(v: any) {
const r = new Date(v).getFullYear() + '-' +
(new Date(v).getMonth() + 1 < 10 ? '0' + (new Date(v).getMonth() + 1) : new Date(v).getMonth() + 1) + '-' +
(new Date(v).getDate() < 10 ? '0' + (new Date(v).getDate()) : new Date(v).getDate())
this.date = r
this.showStart = false
const t = new Date(v).getTime()
const ra = t - +(this.blockTime + '000')
this.$emit('update:value', Math.round(+this.blockHeight + ra/5000) + '')
},
getDateTime() {
if (!this.value) return
let stamp = 0
const r = +this.value - +this.blockHeight
stamp = +(this.blockTime + '000') + r * 5000
const hour = new Date(stamp).getHours()
const t = hour === 23 ? 1 : 0
this.date = new Date(stamp).getFullYear() + '-' +
(new Date(stamp).getMonth() + 1 < 10 ? '0' + (new Date(stamp).getMonth() + 1) : new Date(stamp).getMonth() + 1) + '-' +
(new Date(stamp).getDate() < 10 ? '0' + (new Date(stamp).getDate() + t) : new Date(stamp).getDate() + t)
}
},
watch: {
blockHeight() {
this.getDateTime()
} }
} }
}) })
......
src/views/initiate_comp/founder_initiate.vue
View file @ 533a719a
...@@ -18,7 +18,11 @@ ...@@ -18,7 +18,11 @@
@blur="checkName"> @blur="checkName">
</div> </div>
<div class="time-picker py-3"> <div class="time-picker py-3">
<div class='flex justify-between'> <app-calendar
:blockTime="blockTime"
:blockHeight="blockHeight"
:value.sync="form.startHeight" />
<!-- <div class='flex justify-between'>
<div>投票开始时间</div> <div>投票开始时间</div>
<div class='flex items-center'> <div class='flex items-center'>
<span class="mr-2 text-xs">{{dateStart}}</span> <span class="mr-2 text-xs">{{dateStart}}</span>
...@@ -40,10 +44,16 @@ ...@@ -40,10 +44,16 @@
:placeholder="'请输入开始区块 当前区块' + blockHeight" :placeholder="'请输入开始区块 当前区块' + blockHeight"
class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1" class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1"
v-model="form.startHeight" v-model="form.startHeight"
@blur="getDateStart"> @blur="getDateStart"> -->
</div> </div>
<div class="time-picker py-3"> <div class="time-picker py-3">
<div class='flex justify-between'> <app-calendar
:blockTime="blockTime"
:blockHeight="blockHeight"
:value.sync="form.endHeight"
title="投票结束时间"
placeholder="请输入结束区块 当前区块" />
<!-- <div class='flex justify-between'>
<div>投票截止时间</div> <div>投票截止时间</div>
<div class='flex items-center'> <div class='flex items-center'>
<span class="mr-2 text-xs">{{dateEnd}}</span> <span class="mr-2 text-xs">{{dateEnd}}</span>
...@@ -65,7 +75,7 @@ ...@@ -65,7 +75,7 @@
:placeholder="'请输入结束区块 当前区块' + blockHeight" :placeholder="'请输入结束区块 当前区块' + blockHeight"
class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1" class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1"
v-model="form.endHeight" v-model="form.endHeight"
@blur="getDateEnd"> @blur="getDateEnd"> -->
</div> </div>
<div class="cell flex justify-between items-center border-b py-2 border-app-dark-4 "> <div class="cell flex justify-between items-center border-b py-2 border-app-dark-4 ">
<div>每人参与次数设置</div> <div>每人参与次数设置</div>
...@@ -128,7 +138,8 @@ export default Vue.extend({ ...@@ -128,7 +138,8 @@ export default Vue.extend({
components:{ components:{
// DatePick, // DatePick,
"app-icon":()=>import('@/components/common/Icon.vue'), "app-icon":()=>import('@/components/common/Icon.vue'),
"app-btn":()=>import('@/components/common/Btn.vue') "app-btn":()=>import('@/components/common/Btn.vue'),
'app-calendar': () => import('@/components/common/Calendar.vue')
}, },
data() { data() {
return { return {
......
src/views/initiate_comp/user_initiate.vue
View file @ 533a719a
...@@ -47,32 +47,42 @@ ...@@ -47,32 +47,42 @@
<div class="form-contianer w-11/12 mt-3 rounded-lg mx-auto border border-app-blue-3"> <div class="form-contianer w-11/12 mt-3 rounded-lg mx-auto border border-app-blue-3">
<div class="form p-3 text-sm"> <div class="form p-3 text-sm">
<div class="time-picker py-3"> <div class="time-picker py-3">
<div class='flex justify-between'> <app-calendar
<div>投票开始时间</div> :blockTime="blockTime"
<div class='flex items-center'> :blockHeight="blockHeight"
<span class="text-xs inline-block mr-2">{{dateStart}}</span> :value.sync="form.startHeight" />
<div @click="showStart = true"> <!-- <div class='flex justify-between'>
<app-icon customize type='icon-rili' size='20px'> </app-icon> <div>投票开始时间</div>
</div> <div class='flex items-center'>
<van-calendar <span class="text-xs inline-block mr-2">{{dateStart}}</span>
class="text-black" <div @click="showStart = true">
v-model="showStart" <app-icon customize type='icon-rili' size='20px'> </app-icon>
:default-date="new Date(dateStart)"
:min-date="minDate"
:max-date="maxDate"
:show-confirm="false"
@select="selectStart" />
</div> </div>
<van-calendar
class="text-black"
v-model="showStart"
:default-date="new Date(dateStart)"
:min-date="minDate"
:max-date="maxDate"
:show-confirm="false"
@select="selectStart" />
</div> </div>
<input </div>
type="number" <input
:placeholder="'请输入开始区块 当前区块' + blockHeight" type="number"
class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1" :placeholder="'请输入开始区块 当前区块' + blockHeight"
v-model="form.startHeight" class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1"
@blur="getDateStart"> v-model="form.startHeight"
@blur="getDateStart"> -->
</div> </div>
<div class="time-picker py-3"> <div class="time-picker py-3">
<div class='flex justify-between'> <app-calendar
:blockTime="blockTime"
:blockHeight="blockHeight"
:value.sync="form.endHeight"
title="投票结束时间"
placeholder="请输入结束区块 当前区块" />
<!-- <div class='flex justify-between'>
<div>投票截止时间</div> <div>投票截止时间</div>
<div class='flex items-center'> <div class='flex items-center'>
<span class="text-xs inline-block mr-2">{{dateEnd}}</span> <span class="text-xs inline-block mr-2">{{dateEnd}}</span>
...@@ -94,7 +104,7 @@ ...@@ -94,7 +104,7 @@
:placeholder="'请输入结束区块 当前区块' + blockHeight" :placeholder="'请输入结束区块 当前区块' + blockHeight"
class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1" class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1"
v-model="form.endHeight" v-model="form.endHeight"
@blur="getDateEnd"> @blur="getDateEnd"> -->
</div> </div>
<div class="cell flex justify-between items-center border-b py-2 border-app-dark-4 "> <div class="cell flex justify-between items-center border-b py-2 border-app-dark-4 ">
<div>每人参与次数设置</div> <div>每人参与次数设置</div>
...@@ -206,6 +216,7 @@ export default Vue.extend({ ...@@ -206,6 +216,7 @@ export default Vue.extend({
"app-btn":()=>import('@/components/common/Btn.vue'), "app-btn":()=>import('@/components/common/Btn.vue'),
'app-icon':()=>import('@/components/common/Icon.vue'), 'app-icon':()=>import('@/components/common/Icon.vue'),
'app-option':()=>import('@/components/common/Option.vue'), 'app-option':()=>import('@/components/common/Option.vue'),
'app-calendar': () => import('@/components/common/Calendar.vue')
}, },
methods:{ methods:{
init() { init() {
...@@ -331,47 +342,47 @@ export default Vue.extend({ ...@@ -331,47 +342,47 @@ export default Vue.extend({
this.$router.replace({path: '/Square', query: { t: Date.now() + '' }}) this.$router.replace({path: '/Square', query: { t: Date.now() + '' }})
}) })
}, },
getDateEnd() { // getDateEnd() {
if (!this.form.endHeight) return // if (!this.form.endHeight) return
let stamp = 0 // let stamp = 0
const r = +this.form.endHeight - +this.blockHeight // const r = +this.form.endHeight - +this.blockHeight
stamp = +(this.blockTime + '000') + r * 5000 // stamp = +(this.blockTime + '000') + r * 5000
this.dateEnd = new Date(stamp).getFullYear() + '-' + // this.dateEnd = new Date(stamp).getFullYear() + '-' +
(new Date(stamp).getMonth() + 1 < 10 ? '0' + (new Date(stamp).getMonth() + 1) : new Date(stamp).getMonth() + 1) + '-' + // (new Date(stamp).getMonth() + 1 < 10 ? '0' + (new Date(stamp).getMonth() + 1) : new Date(stamp).getMonth() + 1) + '-' +
(new Date(stamp).getDate() < 10 ? '0' + (new Date(stamp).getDate()) : new Date(stamp).getDate()) // (new Date(stamp).getDate() < 10 ? '0' + (new Date(stamp).getDate()) : new Date(stamp).getDate())
}, // },
getDateStart() { // getDateStart() {
if (!this.form.startHeight) return // if (!this.form.startHeight) return
let stamp = 0 // let stamp = 0
const r = +this.form.startHeight - +this.blockHeight // const r = +this.form.startHeight - +this.blockHeight
stamp = +(this.blockTime + '000') + r * 5000 // stamp = +(this.blockTime + '000') + r * 5000
this.dateStart = new Date(stamp).getFullYear() + '-' + // this.dateStart = new Date(stamp).getFullYear() + '-' +
(new Date(stamp).getMonth() + 1 < 10 ? '0' + (new Date(stamp).getMonth() + 1) : new Date(stamp).getMonth() + 1) + '-' + // (new Date(stamp).getMonth() + 1 < 10 ? '0' + (new Date(stamp).getMonth() + 1) : new Date(stamp).getMonth() + 1) + '-' +
(new Date(stamp).getDate() < 10 ? '0' + (new Date(stamp).getDate()) : new Date(stamp).getDate()) // (new Date(stamp).getDate() < 10 ? '0' + (new Date(stamp).getDate()) : new Date(stamp).getDate())
}, // },
selectStart(v: Date) { // selectStart(v: Date) {
const r = new Date(v).getFullYear() + '-' + // const r = new Date(v).getFullYear() + '-' +
(new Date(v).getMonth() + 1 < 10 ? '0' + (new Date(v).getMonth() + 1) : new Date(v).getMonth() + 1) + '-' + // (new Date(v).getMonth() + 1 < 10 ? '0' + (new Date(v).getMonth() + 1) : new Date(v).getMonth() + 1) + '-' +
(new Date(v).getDate() < 10 ? '0' + (new Date(v).getDate()) : new Date(v).getDate()) // (new Date(v).getDate() < 10 ? '0' + (new Date(v).getDate()) : new Date(v).getDate())
this.dateStart = r // this.dateStart = r
this.showStart = false // this.showStart = false
const t = new Date(v).getTime() // const t = new Date(v).getTime()
const ra = t - +(this.blockTime + '000') // const ra = t - +(this.blockTime + '000')
this.form.startHeight = Math.round(+this.blockHeight + ra/5000) + '' // this.form.startHeight = Math.round(+this.blockHeight + ra/5000) + ''
if (+this.form.startHeight < +this.blockHeight + this.length) { // if (+this.form.startHeight < +this.blockHeight + this.length) {
Toast('起始高度不得小于主链高度+'+ this.length + '的高度') // Toast('起始高度不得小于主链高度+'+ this.length + '的高度')
} // }
}, // },
selectEnd(v: Date) { // selectEnd(v: Date) {
const r = new Date(v).getFullYear() + '-' + // const r = new Date(v).getFullYear() + '-' +
(new Date(v).getMonth() + 1 < 10 ? '0' + (new Date(v).getMonth() + 1) : new Date(v).getMonth() + 1) + '-' + // (new Date(v).getMonth() + 1 < 10 ? '0' + (new Date(v).getMonth() + 1) : new Date(v).getMonth() + 1) + '-' +
(new Date(v).getDate() < 10 ? '0' + (new Date(v).getDate()) : new Date(v).getDate()) // (new Date(v).getDate() < 10 ? '0' + (new Date(v).getDate()) : new Date(v).getDate())
this.dateEnd = r // this.dateEnd = r
this.showEnd = false // this.showEnd = false
const t = new Date(v).getTime() // const t = new Date(v).getTime()
const ra = t - +(this.blockTime + '000') // const ra = t - +(this.blockTime + '000')
this.form.endHeight = Math.round(+this.blockHeight + ra/5000) + '' // this.form.endHeight = Math.round(+this.blockHeight + ra/5000) + ''
} // }
}, },
watch: { watch: {
$route: { $route: {
...@@ -398,12 +409,12 @@ export default Vue.extend({ ...@@ -398,12 +409,12 @@ export default Vue.extend({
this.checked = false this.checked = false
this.form = this.$store.state.app.form this.form = this.$store.state.app.form
this.options = this.form.options this.options = this.form.options
service.getHeight().then(res => { // service.getHeight().then(res => {
this.blockHeight = res.data.result.mainHeight // this.blockHeight = res.data.result.mainHeight
this.blockTime = res.data.result.mainBlockTime // this.blockTime = res.data.result.mainBlockTime
this.getDateStart() // this.getDateStart()
this.getDateEnd() // this.getDateEnd()
}) // })
} else { } else {
// 初始进入重新发起 // 初始进入重新发起
this.form = n this.form = n
...@@ -413,12 +424,12 @@ export default Vue.extend({ ...@@ -413,12 +424,12 @@ export default Vue.extend({
this.form.options = this.options this.form.options = this.options
delete (this.form as any).voteOptions delete (this.form as any).voteOptions
this.num = this.$store.state.app.members?.length this.num = this.$store.state.app.members?.length
service.getHeight().then(res => { // service.getHeight().then(res => {
this.blockHeight = res.data.result.mainHeight // this.blockHeight = res.data.result.mainHeight
this.blockTime = res.data.result.mainBlockTime // this.blockTime = res.data.result.mainBlockTime
this.getDateStart() // this.getDateStart()
this.getDateEnd() // this.getDateEnd()
}) // })
} }
// 检测名称是否重复 // 检测名称是否重复
this.checkName() this.checkName()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment