首页开发中6

src/api/openApi/index.ts

@@ -1,5 +1,6 @@
 import { Axios, AxiosPromise } from "axios";
 import request from "../request";
+import { openApiRes } from "./type";
 export default {
     openApiGanZhiList(params:{
         color?:string

src/api/openApi/type.d.ts

@@ -3,7 +3,7 @@ interface commonRes {
     msg: string
 
 }
-declare namespace openApiRes {
+export declare namespace openApiRes {
     interface openApiGanZhiGet8ziByDate extends commonRes {
         data: {
             username: string
@@ -12,6 +12,28 @@ declare namespace openApiRes {
             nongDay:string
             score:number
             riYuan:string
+            ganZhiRowVoList:{
+                gongWei:string
+                xi:string
+                ji:string 
+                name:string
+                five:string
+                color:string
+                shiShen1:string
+                shiShen2:string
+                shiShen3:string
+                textColor?:string
+
+            }[]
+            ganZhiNaYinVoList:{
+                naYin:string
+                zhu:string
+
+            }[]
+            ganZhiKongWangVoList:{
+                kongWang:string 
+                zhu:string
+            }[]
             
 
         }

src/pages/forecast/index.vue

@@ -9,15 +9,15 @@
                 </view>
                 <view style="width:50%">
                     <text>【性 别】</text>
-                    <text>男</text>
+                    <text>{{ userData.sex == 1 ? '男' : '女' }}</text>
                 </view>
                 <view style="width:100%">
                     <text>【公 历】</text>
-                    <text>1988年11月22日17时25分</text>
+                    <text>{{ userData.birthDay }}</text>
                 </view>
                 <view style="width:100%">
                     <text>【农 历】</text>
-                    <text>1988年(生肖龙)十月十四酉时</text>
+                    <text>{{ userData.nongDay }}</text>
                 </view>
             </view>
             <view class="table">
@@ -38,48 +38,87 @@
                         时柱
                     </view>
                 </view>
-                <view class="body">
-                    <view class="row">天干</view>
-                    <view class="row">戊</view>
-                    <view class="row">戊</view>
-                    <view class="row">壬</view>
-                    <view style="border: none;" class="row">甲</view>
-                </view>
-                <view class="body">
-                    <view class="row">地支</view>
-                    <view class="row">戊</view>
-                    <view class="row">戊</view>
-                    <view class="row">壬</view>
-                    <view style="border: none;" class="row">甲</view>
-                </view>
-                <view class="body">
-                    <view class="row">地支</view>
-                    <view class="row">戊</view>
-                    <view class="row">戊</view>
-                    <view class="row">壬</view>
-                    <view style="border: none;" class="row">甲</view>
-                </view>
-                <view class="body">
-                    <view class="row">地支</view>
-                    <view class="row">戊</view>
-                    <view class="row">戊</view>
-                    <view class="row">壬</view>
-                    <view style="border: none;" class="row">甲</view>
-                </view>
-                <view class="body">
-                    <view class="row">地支</view>
-                    <view class="row">戊</view>
-                    <view class="row">戊</view>
-                    <view class="row">壬</view>
-                    <view style="border: none;" class="row">甲</view>
-                </view>
-                <view class="body">
-                    <view class="row">地支</view>
-                    <view class="row">戊</view>
-                    <view class="row">戊</view>
-                    <view class="row">壬</view>
-                    <view style="border: none;" class="row">甲</view>
+                <view
+                    style="display: flex;flex-flow: row wrap;height: 576rpx;width: 100%; border-left: 2rpx solid #006494;border-right: 4rpx solid #006494;">
+                    <view style="color: #333;" class="body">
+                        <view class="row">十神</view>
+                        <view class="row">{{
+                            userData.ganZhiProRowVoList[0][0].shiShen1 || '' + userData.ganZhiProRowVoList[0][0].shiShen2 || '' + userData.ganZhiProRowVoList[0][0].shiShen3 || ''
+                        }}</view>
+                        <view class="row">{{
+                            userData.ganZhiProRowVoList[1][0].shiShen1 || '' + userData.ganZhiProRowVoList[1][0].shiShen2 || '' + userData.ganZhiProRowVoList[1][0].shiShen3 || ''
+                        }}</view>
+                        <view style="color: #006494;" class="row">{{ userData.ganZhiProRowVoList[2][0].shiShen1 || '' +
+                            userData.ganZhiProRowVoList[2][0].shiShen2 || '' + userData.ganZhiProRowVoList[2][0].shiShen3 || '' }}
+                        </view>
+                        <view class="row">{{
+                            userData.ganZhiProRowVoList[3][0].shiShen1 || '' + userData.ganZhiProRowVoList[3][0].shiShen2 || '' + userData.ganZhiProRowVoList[3][0].shiShen3 || ''
+                        }}</view>
+
+                    </view>
+                    <view class="body">
+                        <view class="row">天干</view>
+                        <view :style="{
+                            color: userData.ganZhiProRowVoList[0][0].textColor
+                        }" class="row">{{ userData.ganZhiProRowVoList[0][0].name }}</view>
+                        <view :style="{
+                            color: userData.ganZhiProRowVoList[1][0].textColor
+                        }" class="row">{{ userData.ganZhiProRowVoList[1][0].name }}</view>
+                        <view :style="{
+                            color: userData.ganZhiProRowVoList[2][0].textColor
+                        }" class="row">{{ userData.ganZhiProRowVoList[2][0].name }}</view>
+                        <view :style="{
+                            color: userData.ganZhiProRowVoList[3][0].textColor
+                        }" class="row">{{ userData.ganZhiProRowVoList[3][0].name }}</view>
+
+                    </view>
+                    <view class="body">
+                        <view class="row">地支</view>
+                        <view :style="{
+                            color: userData.ganZhiProRowVoList[0][1].textColor
+                        }" class="row">{{ userData.ganZhiProRowVoList[0][1].name }}</view>
+                        <view :style="{
+                            color: userData.ganZhiProRowVoList[1][1].textColor
+                        }" class="row">{{ userData.ganZhiProRowVoList[1][1].name }}</view>
+                        <view :style="{
+                            color: userData.ganZhiProRowVoList[2][1].textColor
+                        }" class="row">{{ userData.ganZhiProRowVoList[2][1].name }}</view>
+                        <view :style="{
+                            color: userData.ganZhiProRowVoList[3][1].textColor
+                        }" class="row">{{ userData.ganZhiProRowVoList[3][1].name }}</view>
+
+                    </view>
+                    <view class="body">
+                        <view style="line-height: 154rpx;" class="row">藏干</view>
+                        <view style="font-size: 26rpx;height: 154rpx;" class="row">{{
+                            userData.ganZhiProRowVoList[0][1].shiShen1 }}</view>
+                        <view style="font-size: 26rpx;height: 154rpx;" class="row">{{
+                            userData.ganZhiProRowVoList[1][1].shiShen1 }}</view>
+                        <view style="font-size: 26rpx;height: 154rpx;" class="row">{{
+                            userData.ganZhiProRowVoList[2][1].shiShen1 }}</view>
+                        <view style="font-size: 26rpx;height: 154rpx;" class="row">{{
+                            userData.ganZhiProRowVoList[3][1].shiShen1 }}</view>
+
+                    </view>
+                    <view class="body">
+                        <view class="row">纳音</view>
+                        <view class="row">{{ userData.ganZhiNaYinVoList[0].naYin }}</view>
+                        <view class="row">{{ userData.ganZhiNaYinVoList[1].naYin }}</view>
+                        <view class="row">{{ userData.ganZhiNaYinVoList[2].naYin }}</view>
+                        <view class="row">{{ userData.ganZhiNaYinVoList[3].naYin }}</view>
+
+                    </view>
+                    <view class="body">
+                        <view class="row">空亡</view>
+                        <view class="row">{{ userData.ganZhiKongWangVoList[0].kongWang }}</view>
+                        <view class="row">{{ userData.ganZhiKongWangVoList[1].kongWang }}</view>
+                        <view class="row">{{ userData.ganZhiKongWangVoList[2].kongWang }}</view>
+                        <view class="row">{{ userData.ganZhiKongWangVoList[3].kongWang }}</view>
+
+                    </view>
+
                 </view>
+
             </view>
             <view class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
@@ -107,28 +146,222 @@
 <script lang="ts">
 import Vue from 'vue';
 import api from '@/api'
+import responseDecorator from '@/utils/responseDecorator'
 export default Vue.extend({
     data() {
         return {
             title: '国学',
-            form:{
-                birthDay:'1997-05-16 23:00:00',
-                isSave:0,
-                sex:0,
-                username:''
+            form: {
+                birthDay: '1997-05-16 23:00:00',
+                isSave: 0,
+                sex: 1,
+                username: '张生'
             },
-            userData:{
+            userData: {
+                username: '',
+                sex: 1,
+                birthDay: '',
+                nongDay: '',
+                ganZhiProRowVoList: [[{
+                    "gongWei": "",
+                    "name": "",
+                    "color": "",
+                    "five": "",
+                    "xi": '',
+                    "ji": '',
+                    "shiShen1": "",
+                    "shiShen2": '',
+                    "shiShen3": ''
+                },
+                {
+                    "gongWei": "",
+                    "name": "",
+                    "color": "",
+                    "five": "",
+                    "xi": '',
+                    "ji": '',
+                    "shiShen1": "",
+                    "shiShen2": "",
+                    "shiShen3": ""
+                }], [{
+                    "gongWei": "",
+                    "name": "",
+                    "color": "",
+                    "five": "",
+                    "xi": '',
+                    "ji": '',
+                    "shiShen1": "",
+                    "shiShen2": '',
+                    "shiShen3": ''
+                },
+                {
+                    "gongWei": "",
+                    "name": "",
+                    "color": "",
+                    "five": "",
+                    "xi": '',
+                    "ji": '',
+                    "shiShen1": "",
+                    "shiShen2": "",
+                    "shiShen3": ""
+                }], [{
+                    "gongWei": "",
+                    "name": "",
+                    "color": "",
+                    "five": "",
+                    "xi": '',
+                    "ji": '',
+                    "shiShen1": "",
+                    "shiShen2": '',
+                    "shiShen3": ''
+                },
+                {
+                    "gongWei": "",
+                    "name": "",
+                    "color": "",
+                    "five": "",
+                    "xi": '',
+                    "ji": '',
+                    "shiShen1": "",
+                    "shiShen2": "",
+                    "shiShen3": ''
+                }], [{
+                    "gongWei": "",
+                    "name": "",
+                    "color": "",
+                    "five": "",
+                    "xi": '',
+                    "ji": '',
+                    "shiShen1": "",
+                    "shiShen2": '',
+                    "shiShen3": ''
+                },
+                {
+                    "gongWei": "",
+                    "name": "",
+                    "color": "",
+                    "five": "",
+                    "xi": '',
+                    "ji": '',
+                    "shiShen1": "",
+                    "shiShen2": "",
+                    "shiShen3": ''
+                }]],
+                ganZhiRowVoList: [
+                    {
+                        "gongWei": "年干",
+                        "name": "丁",
+                        "color": "红",
+                        "five": "火",
+                        "xi": '',
+                        "ji": '',
+                        "shiShen1": "正印",
+                        "shiShen2": '',
+                        "shiShen3": ''
+                    },
+                    {
+                        "gongWei": "年支",
+                        "name": "丑",
+                        "color": "棕",
+                        "five": "土",
+                        "xi": '',
+                        "ji": '',
+                        "shiShen1": "己（劫财）",
+                        "shiShen2": "辛（伤官）",
+                        "shiShen3": "癸（正财）"
+                    },
+                    {
+                        "gongWei": "月干",
+                        "name": "乙",
+                        "color": "绿",
+                        "five": "木",
+                        "xi": '',
+                        "ji": '',
+                        "shiShen1": "正官",
+                        "shiShen2": '',
+                        "shiShen3": ''
+                    },
+                    {
+                        "gongWei": "月支",
+                        "name": "巳",
+                        "color": "红",
+                        "five": "火",
+                        "xi": '',
+                        "ji": '',
+                        "shiShen1": "丙（偏印）",
+                        "shiShen2": "戊（比肩）",
+                        "shiShen3": "庚（食神）"
+                    },
+                    {
+                        "gongWei": "日干",
+                        "name": "戊",
+                        "color": "棕",
+                        "five": "土",
+                        "xi": '',
+                        "ji": '',
+                        "shiShen1": "元男",
+                        "shiShen2": '',
+                        "shiShen3": ''
+                    },
+                    {
+                        "gongWei": "日支",
+                        "name": "午",
+                        "color": "红",
+                        "five": "火",
+                        "xi": '',
+                        "ji": '',
+                        "shiShen1": "丁（正印）",
+                        "shiShen2": "己（劫财）",
+                        "shiShen3": ''
+                    },
+                    {
+                        "gongWei": "时干",
+                        "name": "甲",
+                        "color": "绿",
+                        "five": "木",
+                        "xi": '',
+                        "ji": '',
+                        "shiShen1": "七杀",
+                        "shiShen2": '',
+                        "shiShen3": ''
+                    },
+                    {
+                        "gongWei": "时支",
+                        "name": "午",
+                        "color": "蓝",
+                        "five": "水",
+                        "xi": '',
+                        "ji": '',
+                        "shiShen1": "丁（正印）",
+                        "shiShen2": "己（劫财）",
+                        "shiShen3": ''
+                    }
+                ],
+                ganZhiNaYinVoList: [{
+                    naYin: '',
+                    zhu: ''
+                }, {
+                    naYin: '',
+                    zhu: ''
+                }, {
+                    naYin: '',
+                    zhu: ''
+                }, {
+                    naYin: '',
+                    zhu: ''
+                }],
+                ganZhiKongWangVoList: [{ kongWang: '', zhu: '' }, { kongWang: '', zhu: '' }, { kongWang: '', zhu: '' }, { kongWang: '', zhu: '' }]
+
 
             }
         }
     },
     onLoad() {
-        api.openApi.openApiGanZhiGet8ziByDate(this.form).then(res=>{
-            this.userData = res.data.data
-            
-
+        api.openApi.openApiGanZhiGet8ziByDate(this.form).then(res => {
+            this.userData = responseDecorator.get8ziByDateDecorator(res.data.data)
+            console.log(this.userData)
         })
-        
+
     },
     methods: {
 
@@ -157,7 +390,12 @@ export default Vue.extend({
 
     .table {
         width: 568rpx;
+
         margin: 0 auto;
+        margin-bottom: 35rpx;
+        display: flex;
+        flex-wrap: wrap;
+
 
 
         .header {
@@ -177,17 +415,29 @@ export default Vue.extend({
 
         .body {
             width: 100%;
-            line-height: 82rpx;
-            border: 4rpx solid #006494;
+            min-height: 82rpx;
+
+
             display: flex;
+            flex-wrap: wrap;
+            flex-direction: row;
             text-align: center;
             background-color: #A7DDF8;
             border-top: none;
+            align-items: center;
+            align-content: center;
+            border-bottom: 2rpx solid #006494;
 
             .row {
+                min-height: 82rpx;
                 width: 20%;
-                color: white;
-                border-right: 2rpx solid #006494;
+                border-left: 2rpx solid #006494;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                align-content: center;
+                font-weight: bold;
+
 
             }
         }
@@ -243,5 +493,4 @@ export default Vue.extend({
             width: 100%;
         }
     }
-}
-</style>
+}</style>

src/utils/responseDecorator.ts

@@ -0,0 +1,57 @@
+
+import { openApiRes } from '@/api/openApi/type'
+import { def } from '@vue/shared'
+import { Color } from 'XrFrame/xrFrameSystem'
+type openApiGanZhiGet8ziByDate = openApiRes.openApiGanZhiGet8ziByDate["data"]
+interface ganZhiGet8ziByDate extends openApiGanZhiGet8ziByDate {
+    ganZhiProRowVoList: openApiGanZhiGet8ziByDate["ganZhiRowVoList"][]
+}
+
+const textSwitchColor = (text: string) => {
+    let color = '#333'
+    switch (text) {
+        case '棕':
+            color = '#9C4B08'
+            break;
+        case '红':
+            color = '#CB2C00'
+            break;
+        case '绿':
+            color = '#53996B'
+            break;
+        case '蓝':
+            color = '#006494'
+            break;
+        case '黄':
+            color = '#D19C03'
+            break;
+        default:
+            color = '#333'
+    }
+    return color
+
+
+}
+const get8ziByDateDecorator = function (responseData: openApiRes.openApiGanZhiGet8ziByDate["data"]) {
+    const respData: ganZhiGet8ziByDate = {
+        ...responseData,
+        ganZhiProRowVoList: []
+
+    }
+    for (let index = 0; index < (respData.ganZhiRowVoList.length / 2); index++) {
+        const element1 = respData.ganZhiRowVoList[index * 2];
+        const element2 = respData.ganZhiRowVoList[index * 2 + 1];
+        element1.textColor = textSwitchColor(element1.color)
+        element2.textColor = textSwitchColor(element2.color)
+        respData.ganZhiProRowVoList.push([element1, element2])
+
+
+    }
+    return respData
+
+
+}
+
+export default {
+    get8ziByDateDecorator
+}