|
@@ -1,16 +1,104 @@
|
|
|
<template>
|
|
|
- <div>Home
|
|
|
+ <div>
|
|
|
+ <div class="time-box title-fs">
|
|
|
+ <div class="yarn-box">
|
|
|
+ <div class="year" @click="selectTime">{{ yearStr }}年</div>
|
|
|
+ <div>收入</div>
|
|
|
+ </div>
|
|
|
+ <div class="yarn-box space-between">
|
|
|
+ <div>支出</div>
|
|
|
+ <div><van-icon name="eye-o" /></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="time-box">
|
|
|
+ <div class="yarn-box">
|
|
|
+ <div class="year right-line" @click="selectTime">
|
|
|
+ {{ monthlyStr }}月
|
|
|
+ </div>
|
|
|
+ <div>0.00</div>
|
|
|
+ </div>
|
|
|
+ <div class="yarn-box">
|
|
|
+ <div>99999</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
+ <!-- 时间列表 -->
|
|
|
+ <div class="records-box">
|
|
|
+ <RecordInRow :time_record_list="time_record_list" :monthlyStr="monthlyStr" :yearStr=yearStr></RecordInRow>
|
|
|
+ </div>
|
|
|
|
|
|
- <div @click="getLogin">getget</div>
|
|
|
- </div>
|
|
|
+ <!-- 选择时间 -->
|
|
|
+ <van-action-sheet v-model:show="showSelectTime" title="" :closeable="false">
|
|
|
+ <van-date-picker
|
|
|
+ @cancel="cancelSelectTime"
|
|
|
+ @confirm="confirmSelectTime"
|
|
|
+ :columns-type="['year', 'month']"
|
|
|
+ v-model="currentDateAfter"
|
|
|
+ title="选择日期"
|
|
|
+ />
|
|
|
+ </van-action-sheet>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { ref, computed, watch, onMounted } from 'vue'
|
|
|
import {register} from '@/api/base'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import RecordInRow from "@/components/RecordInRow.vue"
|
|
|
+
|
|
|
+const showSelectTime = ref(false)
|
|
|
+const currentDate = ref([])
|
|
|
+const currentDateAfter = ref([])
|
|
|
+
|
|
|
+const time_record_list = ref([])
|
|
|
+
|
|
|
+const selectTime = () => {
|
|
|
+ if (!currentDate.value.length) {
|
|
|
+ const timeStr = dayjs().format('YYYY,MM')
|
|
|
+ currentDate.value = timeStr.split(',')
|
|
|
+ }
|
|
|
+ showSelectTime.value = true
|
|
|
+
|
|
|
+ currentDateAfter.value = currentDate.value
|
|
|
+}
|
|
|
+
|
|
|
+const cancelSelectTime = () => {
|
|
|
+ showSelectTime.value = false
|
|
|
+}
|
|
|
+
|
|
|
+const confirmSelectTime = ({ selectedValues }) => {
|
|
|
+ currentDate.value = selectedValues
|
|
|
+ cancelSelectTime()
|
|
|
+}
|
|
|
|
|
|
+const yearStr = computed(() => {
|
|
|
+ if (!currentDate.value.length) {
|
|
|
+ const timeStr = dayjs().format('YYYY,MM')
|
|
|
+ return timeStr.split(',')[0]
|
|
|
+ }
|
|
|
+ return `${currentDate.value[0]}`
|
|
|
+})
|
|
|
+const monthlyStr = computed(() => {
|
|
|
+ if (!currentDate.value.length) {
|
|
|
+ const timeStr = dayjs().format('YYYY,MM')
|
|
|
+ return timeStr.split(',')[1]
|
|
|
+ }
|
|
|
+ return `${currentDate.value[1]}`
|
|
|
+})
|
|
|
|
|
|
+onMounted(() => {
|
|
|
+ for (let index = 0; index < 40; index++) {
|
|
|
+ const elm = {
|
|
|
+ name: 'name' + index,
|
|
|
+ record_list: []
|
|
|
+ }
|
|
|
+ for (let j = 0; j < 10; j++) {
|
|
|
+ elm.record_list.push({})
|
|
|
+ }
|
|
|
|
|
|
+ time_record_list.value.push(elm)
|
|
|
+ }
|
|
|
+})
|
|
|
async function getLogin() {
|
|
|
await register({
|
|
|
"account": "x.czvufulcym@qqxhjl.ee",
|
|
@@ -19,3 +107,38 @@ async function getLogin() {
|
|
|
})
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.time-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 12px 12px;
|
|
|
+
|
|
|
+ .yarn-box {
|
|
|
+ width: 40%;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .year {
|
|
|
+ width: 60px;
|
|
|
+ &.right-line {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ font-size: 20px;
|
|
|
+ &.title-fs {
|
|
|
+ font-size: 12px;
|
|
|
+ padding-bottom: 0;
|
|
|
+ padding-top: 12px;
|
|
|
+ .yarn-box {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .yarn-box.space-between {
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
|
|
+>>>>>>> origin/master
|