|
@@ -11,19 +11,74 @@
|
|
|
|
|
|
<uni-popup ref="popupRef" type="dialog">
|
|
|
<view class="popupContent">
|
|
|
- <view class="">上上签</view>
|
|
|
- <view class="ss-m-y-10">今日运势:上</view>
|
|
|
- <view class="d-flex align-center justify-center">
|
|
|
+ <!-- <image class="img" src="https://menduner.citupro.com:3443/dev/f7b4ce5cdd4a96286640a88c868c47694fd98b536a79218d1e755498db547725.png"></image>
|
|
|
+ <view class="title">{{ calendarInfo.yangli }}</view>
|
|
|
+ <view class="d-flex align-center justify-center" style="margin-top: 55px;">
|
|
|
幸运色:
|
|
|
<view class="luckyColor" :style="{ 'background-color': currentColor }"></view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="color-666 font-size-13 ss-m-t-30" style="text-align: left;">
|
|
|
- <view>宜:炼丹悟道 结善缘 精心修养</view>
|
|
|
- <view>忌:远行 投资 冲动决策</view>
|
|
|
- <view>今日贵人相助,修行精进</view>
|
|
|
+ <view class="font-size-12 ss-m-t-30" style="text-align: left; color: #888;">
|
|
|
+ <view>阴历:{{ calendarInfo.yinli }}</view>
|
|
|
+ <view class="ss-m-y-10">宜:{{ calendarInfo.yi }}</view>
|
|
|
+ <view>忌:{{ calendarInfo.ji }}</view>
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+ <view class="content-box">
|
|
|
+ <view class="text-center ss-p-y-30">
|
|
|
+ <view class="yangli">{{ calendarInfo.yangli }}</view>
|
|
|
+ <view class="yinli">{{ calendarInfo.yinli }}</view>
|
|
|
+ <view class="d-flex align-center justify-center">
|
|
|
+ <span style="color: #7f7f7f;">幸运色</span>
|
|
|
+ <view class="luckyColor ss-m-l-20" :style="{ 'background-color': `${currentColor || '#2979ff'}` }"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="center-box ss-p-y-30 ss-p-x-30">
|
|
|
+ <view class="d-flex">
|
|
|
+ <view class="yi d-flex align-center justify-center">宜</view>
|
|
|
+ <view class="font-size-15" style="flex: 1; color: #c6b393;">{{ calendarInfo.yi }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="d-flex ss-m-t-30">
|
|
|
+ <view class="ji d-flex align-center justify-center">忌</view>
|
|
|
+ <view class="font-size-15" style="flex: 1; color: #7f7f7f;">{{ calendarInfo.ji }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-box">
|
|
|
+ <view class="bottom-box-item d-flex flex-column align-center justify-center">
|
|
|
+ <view class="padding">
|
|
|
+ <view class="label">五行</view>
|
|
|
+ <view class="value">{{ calendarInfo.wuxing }}</view>
|
|
|
+ </view>
|
|
|
+ <view style="border-top: 1px solid #c2a08c; height: 1px; width: 100%;"></view>
|
|
|
+ <view class="padding">
|
|
|
+ <view class="label">吉神</view>
|
|
|
+ <view class="value">{{ calendarInfo.jishen }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-box-item d-flex align-center justify-center">
|
|
|
+ <view class="padding">
|
|
|
+ <view class="label">彭祖</view>
|
|
|
+ <view class="value">{{ calendarInfo.baiji }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-box-item d-flex flex-column align-center justify-center">
|
|
|
+ <view class="padding">
|
|
|
+ <view class="label">冲煞</view>
|
|
|
+ <view class="value">{{ calendarInfo.chongsha }}</view>
|
|
|
+ </view>
|
|
|
+ <view style="border-top: 1px solid #c2a08c; height: 1px; width: 100%;"></view>
|
|
|
+ <view class="padding">
|
|
|
+ <view class="label">凶神</view>
|
|
|
+ <view class="value">{{ calendarInfo.xiongshen }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <view class="text-center ss-m-t-50">
|
|
|
+ <uni-icons type="close" size="40" color="#fff" @click="handleClose"></uni-icons>
|
|
|
+ </view>
|
|
|
</uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
@@ -32,6 +87,7 @@
|
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
|
import { ref } from 'vue'
|
|
|
import Calendar from '@/components/uni-calendar/components/uni-calendar/uni-calendar.vue'
|
|
|
+import { getDrawLots } from '@/api/drawLots.js'
|
|
|
|
|
|
/**
|
|
|
* 获取任意时间
|
|
@@ -60,54 +116,175 @@ import Calendar from '@/components/uni-calendar/components/uni-calendar/uni-cale
|
|
|
}
|
|
|
|
|
|
const selected = ref([])
|
|
|
+ const setSelectedDates = () => {
|
|
|
+ selected.value = [
|
|
|
+ {
|
|
|
+ date: getDate(new Date(),-20).fullDate,
|
|
|
+ color: '#d3e3fd',
|
|
|
+ url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: getDate(new Date(),-16).fullDate,
|
|
|
+ color: '#f8bbd0',
|
|
|
+ url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: getDate(new Date(),-12).fullDate,
|
|
|
+ color: '#3bb19b',
|
|
|
+ url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: getDate(new Date(),-7).fullDate,
|
|
|
+ color: '#facd89',
|
|
|
+ url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: getDate(new Date(),-3).fullDate,
|
|
|
+ color: '#d7ccc8',
|
|
|
+ url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: getDate(new Date(),-2).fullDate,
|
|
|
+ color: '#c5cae9',
|
|
|
+ url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
|
|
|
onLoad(() => {
|
|
|
+ // const birthday = uni.getStorageSync('birthday')
|
|
|
+ // if (!birthday) {
|
|
|
+ // uni.reLaunch({
|
|
|
+ // url: '/pages/drawLots/form'
|
|
|
+ // })
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 设置选中项
|
|
|
setTimeout(() => {
|
|
|
- selected.value = [
|
|
|
- {
|
|
|
- date: getDate(new Date(),-3).fullDate,
|
|
|
- color: '#2196F3',
|
|
|
- url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
|
|
|
- },
|
|
|
- {
|
|
|
- date: getDate(new Date(),-2).fullDate,
|
|
|
- color: '#ff5252',
|
|
|
- url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
|
|
|
- },
|
|
|
- {
|
|
|
- date: getDate(new Date(),-1).fullDate,
|
|
|
- color: '#26A69A',
|
|
|
- url: 'https://menduner.citupro.com:3443/dev/2dbc20a5db2122e399b491638889ba9f8aea4e1c7a44463ee0df40b25f85b8cc.png'
|
|
|
- }
|
|
|
- ]
|
|
|
+ setSelectedDates()
|
|
|
}, 2000)
|
|
|
})
|
|
|
|
|
|
|
|
|
const popupRef = ref()
|
|
|
const currentColor = ref(null)
|
|
|
- const handleChange = (e) => {
|
|
|
- // console.log('change 返回:', e)
|
|
|
- if (e.isBackToday) return
|
|
|
- if (e.extraInfo) {
|
|
|
+
|
|
|
+ const calendarInfo = ref({})
|
|
|
+ const handleChange = async (e) => {
|
|
|
+ if (e.isBackToday) return // 点击左上角“今日”按钮不弹窗
|
|
|
+
|
|
|
+ try {
|
|
|
+ const { result } = await getDrawLots({ date: e.fulldate })
|
|
|
+ // console.log(result, '成功信息')
|
|
|
+ calendarInfo.value = result || {}
|
|
|
+
|
|
|
popupRef.value.open()
|
|
|
- currentColor.value = e.extraInfo?.color || '#2979ff'
|
|
|
+ currentColor.value = result?.color || e.extraInfo?.color
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error, '错误信息')
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ const handleClose = () => {
|
|
|
+ popupRef.value.close()
|
|
|
+ currentColor.value = null
|
|
|
+ calendarInfo.value = {}
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+$commonColor: #c2a08c;
|
|
|
+$size: 25px;
|
|
|
+
|
|
|
.popupContent {
|
|
|
+ position: relative;
|
|
|
background-color: #fff;
|
|
|
- border-radius: 6px;
|
|
|
- width: 400rpx;
|
|
|
- height: 400rpx;
|
|
|
- text-align: center;
|
|
|
+ // border-radius: 12px;
|
|
|
+ width: 70vw;
|
|
|
+ // height: 400rpx;
|
|
|
+ // text-align: center;
|
|
|
padding: 30rpx;
|
|
|
+ .content-box {
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid $commonColor;
|
|
|
+ border-radius: 6px;
|
|
|
+ // padding: 20rpx;
|
|
|
+ }
|
|
|
+ .yangli {
|
|
|
+ font-weight: bold;
|
|
|
+ color: $commonColor;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ .yinli {
|
|
|
+ color: #7f7f7f;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ .center-box {
|
|
|
+ border-top: 1px solid $commonColor;
|
|
|
+ border-bottom: 1px solid $commonColor;
|
|
|
+ .yi {
|
|
|
+ width: $size;
|
|
|
+ height: $size;
|
|
|
+ background-color: #c39c87;
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #fff;
|
|
|
+ margin-right: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .ji {
|
|
|
+ width: $size;
|
|
|
+ height: $size;
|
|
|
+ background-color: #bfbfbf;
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #fff;
|
|
|
+ margin-right: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom-box {
|
|
|
+ display: flex;
|
|
|
+ &-item {
|
|
|
+ width: 33.3%;
|
|
|
+ text-align: center;
|
|
|
+ border-right: 1px solid $commonColor;
|
|
|
+ &:nth-child(3n) {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ font-size: 17px;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ color: #7f7f7f;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .padding {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.luckyColor {
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
+
|
|
|
+ .img {
|
|
|
+ position: absolute;
|
|
|
+ top: -56px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ position: absolute;
|
|
|
+ top: 7px;
|
|
|
+ left: 50%;
|
|
|
+ color: #F49610;
|
|
|
+ font-weight: bold;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|