|
|
@@ -28,31 +28,49 @@
|
|
|
<view class="diary-head">
|
|
|
<view class="date" @click="handleDate">
|
|
|
<image class="img" :src="`${config.BASIC_IMG}img/subTreePage/date-icon.png`"></image>
|
|
|
- <text>2025年7月28日</text>
|
|
|
+ <text>{{formatDate(dateVal)}}</text>
|
|
|
</view>
|
|
|
<view class="arrow-group">
|
|
|
- <view class="arrow-icon">
|
|
|
+ <view class="arrow-icon" @click="changeDay(-1)">
|
|
|
<up-icon name="arrow-left" size="17" bold color="#fff"></up-icon>
|
|
|
</view>
|
|
|
- <view class="arrow-icon">
|
|
|
+ <view class="arrow-icon" @click="changeDay(+1)">
|
|
|
<up-icon name="arrow-right" size="17" bold color="#fff"></up-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="diary-cont">
|
|
|
- <view class="text">今天是我开花的日子今天是我开花的日子今天是我开花的日子今天是我开花的日子</view>
|
|
|
- <view class="photo">
|
|
|
- <image class="img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
|
|
|
+ <template v-if="active === 0">
|
|
|
+ <view class="text">今天是我开花的日子今天是我开花的日子今天是我开花的日子今天是我开花的日子</view>
|
|
|
+ <view class="photo">
|
|
|
+ <image class="img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view class="template-1" v-else-if="active === 1">
|
|
|
+ <view class="photo-group">
|
|
|
+ <image class="img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
|
|
|
+ <image class="img float" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">今天是我开花的日子今天是我开花的日子今天是我开花的日子今天是我开花的日子</view>
|
|
|
+ </view>
|
|
|
+ <view class="template-2" v-else="active === 2">
|
|
|
+ <view class="photo-group">
|
|
|
+ <image class="img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
|
|
|
+ <image class="img float" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">今天是我开花的日子今天是我开花的日子今天是我开花的日子今天是我开花的日子</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<up-datetime-picker
|
|
|
:show="showDatetim"
|
|
|
- v-model="date"
|
|
|
+ v-model="dateVal"
|
|
|
mode="date"
|
|
|
+ :maxDate="Date.now()"
|
|
|
+ :formatter="formatter"
|
|
|
@cancel="cancel"
|
|
|
- @confirm="cancel"
|
|
|
+ @confirm="confirm"
|
|
|
></up-datetime-picker>
|
|
|
</template>
|
|
|
|
|
|
@@ -60,15 +78,56 @@
|
|
|
import config from "@/api/config.js"
|
|
|
import {ref} from "vue"
|
|
|
|
|
|
+ function formatDate(timestamp,type) {
|
|
|
+ const date = new Date(timestamp);
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = String(date.getMonth() + 1)
|
|
|
+ const day = String(date.getDate()).padStart(2, '0'); // 日期补零
|
|
|
+ return `${year}${type || '年'}${month}${type || '月'}${day}${type?'':'日'}`;
|
|
|
+ }
|
|
|
+
|
|
|
+ const currentDate = ref(new Date())
|
|
|
+ function changeDay(type) {
|
|
|
+ currentDate.value = new Date(currentDate.value);
|
|
|
+ currentDate.value.setDate(currentDate.value.getDate() + type);
|
|
|
+ if(currentDate.value > new Date()){
|
|
|
+ currentDate.value.setDate(currentDate.value.getDate() - 1);
|
|
|
+ return
|
|
|
+ }
|
|
|
+ dateVal.value = Date.parse(currentDate.value);
|
|
|
+ //获取 0-2 的随机整数
|
|
|
+ const randomInt = Math.floor(Math.random() * 3);
|
|
|
+ active.value = randomInt
|
|
|
+ }
|
|
|
+
|
|
|
const showDatetim = ref(false)
|
|
|
- const date = ref('')
|
|
|
+ const dateVal = ref(Date.now())
|
|
|
|
|
|
const handleDate = () =>{
|
|
|
showDatetim.value = true
|
|
|
}
|
|
|
const cancel = () =>{
|
|
|
showDatetim.value = false
|
|
|
- }
|
|
|
+ }
|
|
|
+ const confirm = ()=>{
|
|
|
+ const aaa = formatDate(date.value,'-')
|
|
|
+ console.log(date.value,aaa)
|
|
|
+ cancel()
|
|
|
+ }
|
|
|
+
|
|
|
+ const active = ref(2)
|
|
|
+ const formatter = (type, value) => {
|
|
|
+ if (type === 'year') {
|
|
|
+ return `${value}年`;
|
|
|
+ }
|
|
|
+ if (type === 'month') {
|
|
|
+ return `${value}月`;
|
|
|
+ }
|
|
|
+ if (type === 'day') {
|
|
|
+ return `${value}日`;
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -128,7 +187,7 @@
|
|
|
width: 100%;
|
|
|
min-height: 960rpx;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 70rpx 0 56rpx 34rpx;
|
|
|
+ padding: 70rpx 0 56rpx 30rpx;
|
|
|
@include ossBg("subTreePage/diary-bg.png");
|
|
|
.diary-head{
|
|
|
display: flex;
|
|
|
@@ -162,10 +221,10 @@
|
|
|
}
|
|
|
}
|
|
|
.diary-cont{
|
|
|
- padding: 120rpx 60rpx 0 26rpx;
|
|
|
+ padding: 80rpx 60rpx 0 26rpx;
|
|
|
.text{
|
|
|
width: 72%;
|
|
|
- margin: auto;
|
|
|
+ margin: 60rpx auto;
|
|
|
font-weight: 500;
|
|
|
position: relative;
|
|
|
&::before{
|
|
|
@@ -209,6 +268,53 @@
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
}
|
|
|
+ .template-1{
|
|
|
+ .photo-group{
|
|
|
+ margin:0 -14rpx 240rpx 10rpx;
|
|
|
+ .img{
|
|
|
+ width: 354rpx;
|
|
|
+ height: 240rpx;
|
|
|
+ border: 10rpx solid rgba(255, 255, 255, 0.6);
|
|
|
+ box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ .float{
|
|
|
+ width: 400rpx;
|
|
|
+ height: 264rpx;
|
|
|
+ float: right;
|
|
|
+ margin-top: -130rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ width: 55%;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .template-2{
|
|
|
+ .photo-group{
|
|
|
+ margin:0 -10rpx 220rpx 10rpx;
|
|
|
+ .img{
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ width: 440rpx;
|
|
|
+ height: 300rpx;
|
|
|
+ border: 10rpx solid rgba(255, 255, 255, 0.3);
|
|
|
+ box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ .float{
|
|
|
+ width: 332rpx;
|
|
|
+ height: 222rpx;
|
|
|
+ float: right;
|
|
|
+ margin-top: -100rpx;
|
|
|
+ transform: rotate(10deg);
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ width: 66%;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
wangsisi