换皮肤功能完善了

src/api/openApi/type.d.ts

@@ -15,6 +15,7 @@ export declare namespace openApiRes {
             reportMap: { 潮湿平衡: string; 缺失五行评语: string; 缺失十神评语: string;财运:string }
             guoGuanMap: { "1": string, "2": string, "3": string }
             ganZhiRowVoList: {
+                enColor: string
                 gongWei: string
                 xi: string
                 ji: string
@@ -24,7 +25,7 @@ export declare namespace openApiRes {
                 shiShen1: string
                 shiShen2: string
                 shiShen3: string
-                textColor?: string
+                hexColor?: string
 
             }[]
             ganZhiNaYinVoList: {

src/pages/forecast/index.vue

@@ -1,10 +1,23 @@
 <template>
     <view :data-theme="theme" class="bg">
         <view class="categorys">
-            <view class="" v-for="item in categorys">{{ item.text }}</view>
+            <view style="width:100%">
+                <view class="categorys-item" v-for="item in categorys">
+                    <view :data-theme="theme" @click="() => {
+                        currentPoint = item.point
+                    }" :class="{
+    'categorys-item-text_selected': currentPoint == item.point
+}" class="categorys-item-text">{{ item.text }}</view>
+                    <view :data-theme="theme" :class="{
+                        'categorys-item-mark_selected': currentPoint == item.point
+                    }" class="categorys-item-mark"></view>
+                </view>
+                <view class=""></view>
+            </view>
+
         </view>
-        <view class="content">
-            <view class="user">
+        <scroll-view :scroll-into-view="currentPoint" :scroll-with-animation="false" :scroll-y="true" class="content">
+            <view id="bzmp" class="user">
                 <view style="width:50%">
                     <text>【姓 名】</text>
                     <text>{{ userData.username }}</text>
@@ -65,32 +78,32 @@
                     <view :data-theme="theme" class="body">
                         <view :data-theme="theme" class="row">天干</view>
                         <view :style="{
-                            color: userData.ganZhiProRowVoList[0][0].textColor
+                            color: userData.ganZhiProRowVoList[0][0].hexColor
                         }" :data-theme="theme" class="row">{{ userData.ganZhiProRowVoList[0][0].name }}</view>
                         <view :style="{
-                            color: userData.ganZhiProRowVoList[1][0].textColor
+                            color: userData.ganZhiProRowVoList[1][0].hexColor
                         }" :data-theme="theme" class="row">{{ userData.ganZhiProRowVoList[1][0].name }}</view>
                         <view :style="{
-                            color: userData.ganZhiProRowVoList[2][0].textColor
+                            color: userData.ganZhiProRowVoList[2][0].hexColor
                         }" :data-theme="theme" class="row">{{ userData.ganZhiProRowVoList[2][0].name }}</view>
                         <view :style="{
-                            color: userData.ganZhiProRowVoList[3][0].textColor
+                            color: userData.ganZhiProRowVoList[3][0].hexColor
                         }" :data-theme="theme" class="row">{{ userData.ganZhiProRowVoList[3][0].name }}</view>
 
                     </view>
                     <view :data-theme="theme" class="body">
                         <view :data-theme="theme" class="row">地支</view>
                         <view :data-theme="theme" :style="{
-                            color: userData.ganZhiProRowVoList[0][1].textColor
+                            color: userData.ganZhiProRowVoList[0][1].hexColor
                         }" class="row">{{ userData.ganZhiProRowVoList[0][1].name }}</view>
                         <view :data-theme="theme" :style="{
-                            color: userData.ganZhiProRowVoList[1][1].textColor
+                            color: userData.ganZhiProRowVoList[1][1].hexColor
                         }" class="row">{{ userData.ganZhiProRowVoList[1][1].name }}</view>
                         <view :data-theme="theme" :style="{
-                            color: userData.ganZhiProRowVoList[2][1].textColor
+                            color: userData.ganZhiProRowVoList[2][1].hexColor
                         }" class="row">{{ userData.ganZhiProRowVoList[2][1].name }}</view>
                         <view :data-theme="theme" :style="{
-                            color: userData.ganZhiProRowVoList[3][1].textColor
+                            color: userData.ganZhiProRowVoList[3][1].hexColor
                         }" class="row">{{ userData.ganZhiProRowVoList[3][1].name }}</view>
 
                     </view>
@@ -123,15 +136,15 @@
                     </view>
                 </view>
             </view>
-            <view class="result">
+
+            <view id="grtd" class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                 <view :data-theme="theme" class="imgTitle"><text>个</text><text>人</text><text>特</text><text>点</text></view>
-                <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
-                <view class="result-content">
+                <img mode="widthFix" class="imgHeader"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
+                <view class="result-content" :data-theme="theme">
                     <view class="result-desc result-desc_limit">
                         <div v-for="(item, index) in userData.guoGuanMap">{{ index }}.{{ item }}</div>
-
-
                     </view>
                     <!-- <view class="result-pay">开通会员立即查看</view> -->
                     <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
@@ -140,15 +153,17 @@
                         </view>
                     </view> -->
                 </view>
-                <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
+                <img mode="widthFix" class="imgFooter"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
             </view>
             <view style="width: 100%;height: 35rpx;"></view>
 
-            <view class="result">
+            <view id="cyfx" class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                 <view :data-theme="theme" class="imgTitle"><text>财</text><text>运</text><text>分</text><text>析</text></view>
-                <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
-                <view class="result-content">
+                <img mode="widthFix" class="imgHeader"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
+                <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
                         {{ userData.reportMap['财运'] }}
 
@@ -161,14 +176,16 @@
                         </view>
                     </view> -->
                 </view>
-                <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
+                <img mode="widthFix" class="imgFooter"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
             </view>
             <view style="width: 100%;height: 35rpx;"></view>
-            <view class="result">
+            <view id="hyqg" class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                 <view :data-theme="theme" class="imgTitle"><text>婚</text><text>姻</text><text>情</text><text>感</text></view>
-                <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
-                <view class="result-content">
+                <img mode="widthFix" class="imgHeader"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
+                <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
                         {{ userData.qingGan }}
 
@@ -181,15 +198,17 @@
                         </view>
                     </view> -->
                 </view>
-                <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
+                <img mode="widthFix" class="imgFooter"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
             </view>
 
             <view style="width: 100%;height: 35rpx;"></view>
-            <view class="result">
+            <view id="wxpy" class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                 <view :data-theme="theme" class="imgTitle"><text>五</text><text>行</text><text>评</text><text>语</text></view>
-                <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
-                <view class="result-content">
+                <img mode="widthFix" class="imgHeader"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
+                <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
                         {{ userData.reportMap['缺失五行评语'] }}
 
@@ -202,15 +221,17 @@
                         </view>
                     </view> -->
                 </view>
-                <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
+                <img mode="widthFix" class="imgFooter"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
             </view>
 
             <view style="width: 100%;height: 35rpx;"></view>
-            <view class="result">
+            <view id="csph" class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                 <view :data-theme="theme" class="imgTitle"><text>潮</text><text>湿</text><text>平</text><text>衡</text></view>
-                <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
-                <view class="result-content">
+                <img mode="widthFix" class="imgHeader"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
+                <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
                         {{ userData.reportMap['潮湿平衡'] }}
 
@@ -223,19 +244,22 @@
                         </view>
                     </view> -->
                 </view>
-                <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
+                <img mode="widthFix" class="imgFooter"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
             </view>
 
             <view style="width: 100%;height: 35rpx;"></view>
-            <view class="result">
+            <view id="xysz" class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                 <view :data-theme="theme" class="imgTitle"><text>喜</text><text>用</text><text>数</text><text>字</text></view>
-                <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
-                <view class="result-content">
+                <img mode="widthFix" class="imgHeader"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
+                <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
                         <view v-for="item in userData.numberYunMap.numberYunList"
                             style="position: relative;margin-bottom: 10px;" class="">
-                            <image class="result-desc-icon1" mode="widthFix" src="/static/icon/green_rect@2x.png" />
+                            <image class="result-desc-icon1" mode="widthFix"
+                                :src="'/static/icon/' + theme + '_xysz_rect@2x.png'" />
                             <view class="result-desc-lucktext">数字{{ item.id }}</view>
                             <text>
                                 {{ item.caiYun }}
@@ -257,15 +281,17 @@
                         </view>
                     </view> -->
                 </view>
-                <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
+                <img mode="widthFix" class="imgFooter"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
             </view>
 
             <view style="width: 100%;height: 35rpx;"></view>
-            <view class="result">
+            <view id="gjpq" class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                 <view :data-theme="theme" class="imgTitle"><text>格</text><text>局</text><text>脾</text><text>气</text></view>
-                <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
-                <view class="result-content">
+                <img mode="widthFix" class="imgHeader"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
+                <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
                         <view>{{ userData.piQi }}</view>
 
@@ -278,15 +304,17 @@
                         </view>
                     </view> -->
                 </view>
-                <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
+                <img mode="widthFix" class="imgFooter"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
             </view>
 
             <view style="width: 100%;height: 35rpx;"></view>
-            <view class="result">
+            <view id="cgpy" class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                 <view :data-theme="theme" class="imgTitle"><text>称</text><text>骨</text><text>评</text><text>语</text></view>
-                <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
-                <view class="result-content">
+                <img mode="widthFix" class="imgHeader"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
+                <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
                         <view style="text-align: left;">称骨重量:{{ userData.chenGuMap['称骨重量'] }}</view>
                         <view>{{ userData.chenGuMap['称骨评语'] }}</view>
@@ -300,15 +328,17 @@
                         </view>
                     </view> -->
                 </view>
-                <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
+                <img mode="widthFix" class="imgFooter"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
             </view>
 
             <view style="width: 100%;height: 35rpx;"></view>
-            <view class="result">
+            <view id="jkyf" class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                 <view :data-theme="theme" class="imgTitle"><text>健</text><text>康</text><text>预</text><text>防</text></view>
-                <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
-                <view class="result-content">
+                <img mode="widthFix" class="imgHeader"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
+                <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
                         <view class="result-disease">
                             <view v-for="(item, index) in userData.diseasePartList" class="">
@@ -326,15 +356,17 @@
                         </view>
                     </view> -->
                 </view>
-                <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
+                <img mode="widthFix" class="imgFooter"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
             </view>
 
             <view style="width: 100%;height: 35rpx;"></view>
-            <view class="result">
+            <view id="xyfw" class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                 <view :data-theme="theme" class="imgTitle"><text>喜</text><text>用</text><text>方</text><text>位</text></view>
-                <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
-                <view class="result-content">
+                <img mode="widthFix" class="imgHeader"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
+                <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
                         {{ userData.xiFangWei }}
                     </view>
@@ -347,15 +379,17 @@
                         <view class="result-content-border2">
                         </view>
                     </view> -->
-                <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
+                <img mode="widthFix" class="imgFooter"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
             </view>
 
             <view style="width: 100%;height: 35rpx;"></view>
-            <view class="result">
+            <view id="mzgr" class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                 <view :data-theme="theme" class="imgTitle"><text>命</text><text>中</text><text>贵</text><text>人</text></view>
-                <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
-                <view class="result-content">
+                <img mode="widthFix" class="imgHeader"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
+                <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
                         {{ userData.guiren }}
                     </view>
@@ -368,14 +402,16 @@
                         <view class="result-content-border2">
                         </view>
                     </view> -->
-                <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
+                <img mode="widthFix" class="imgFooter"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
             </view>
             <view style="width: 100%;height: 35rpx;"></view>
-            <view class="result">
+            <view id="tjhy" class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                 <view :data-theme="theme" class="imgTitle"><text>推</text><text>荐</text><text>行</text><text>业</text></view>
-                <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
-                <view class="result-content">
+                <img mode="widthFix" class="imgHeader"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
+                <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
                         {{ userData.industry }}
                     </view>
@@ -388,14 +424,15 @@
                         <view class="result-content-border2">
                         </view>
                     </view> -->
-                <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
+                <img mode="widthFix" class="imgFooter"
+                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
             </view>
 
 
             <!-- <view class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                 <view :data-theme="theme" class="imgTitle"><text>十</text><text>神</text><text>评</text><text>语</text></view>
-                <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
+                <img mode="widthFix" class="imgHeader" :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_'+theme+'_top@2x.png'" />
                 <view class="result-content ">
                     
                     <view class="result-desc">
@@ -418,13 +455,13 @@
                         </view>
                     </view> -->
             <!-- </view>
-                <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
+                <img mode="widthFix" class="imgFooter" :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_'+theme+'_bottom@2x.png'" />
             </view> -->
             <!-- <view style="width: 100%;height: 35rpx;"></view>
             <view class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                 <view :data-theme="theme" class="imgTitle"><text>五</text><text>行</text><text>评</text><text>语</text></view>
-                <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
+                <img mode="widthFix" class="imgHeader" :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_'+theme+'_top@2x.png'" />
                 <view class="result-content ">
                     <view class="result-desc">
                         当我们关注身体健康时，了解各宫位的能量分布可以帮助我们判断可能出现的疾病。请特别留意以下身体部位可能存在的问题，并在早期进行检查，以便及时预防。
@@ -440,9 +477,9 @@
 
                 
                 </view>
-                <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
+                <img mode="widthFix" class="imgFooter" :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_'+theme+'_bottom@2x.png'" />
             </view> -->
-        </view>
+        </scroll-view>
     </view>
 </template>
 
@@ -453,7 +490,8 @@ import responseDecorator from '@/utils/responseDecorator'
 export default Vue.extend({
     data() {
         return {
-            theme: 'red',
+            currentPoint: 'bzmp',
+            theme: 'yellow',
             title: '国学',
             categorys: [{ text: '八字命盘', point: 'bzmp' },
             { text: '个人特点', point: 'grtd' },
@@ -470,10 +508,10 @@ export default Vue.extend({
             { text: '推荐行业', point: 'tjhy' }],
 
             form: {
-                birthDay: '1997-05-16 23:00:00',
+                birthDay: '2000-01-01 23:00:00',
                 isSave: 0,
                 sex: 1,
-                username: '张生'
+                username: '默认用户'
             },
             userData: {
                 username: '',
@@ -504,7 +542,9 @@ export default Vue.extend({
                     "ji": '',
                     "shiShen1": "",
                     "shiShen2": '',
-                    "shiShen3": ''
+                    "shiShen3": '',
+                    "hexColor": '',
+                    "enColor": ''
                 },
                 {
                     "gongWei": "",
@@ -515,7 +555,9 @@ export default Vue.extend({
                     "ji": '',
                     "shiShen1": "",
                     "shiShen2": "",
-                    "shiShen3": ""
+                    "shiShen3": "",
+                    "hexColor": '',
+                    "enColor": ''
                 }], [{
                     "gongWei": "",
                     "name": "",
@@ -525,7 +567,9 @@ export default Vue.extend({
                     "ji": '',
                     "shiShen1": "",
                     "shiShen2": '',
-                    "shiShen3": ''
+                    "shiShen3": '',
+                    "hexColor": '',
+                    "enColor": ''
                 },
                 {
                     "gongWei": "",
@@ -536,7 +580,9 @@ export default Vue.extend({
                     "ji": '',
                     "shiShen1": "",
                     "shiShen2": "",
-                    "shiShen3": ""
+                    "shiShen3": "",
+                    "hexColor": '',
+                    "enColor": ''
                 }], [{
                     "gongWei": "",
                     "name": "",
@@ -546,7 +592,9 @@ export default Vue.extend({
                     "ji": '',
                     "shiShen1": "",
                     "shiShen2": '',
-                    "shiShen3": ''
+                    "shiShen3": '',
+                    "hexColor": '',
+                    "enColor": ''
                 },
                 {
                     "gongWei": "",
@@ -557,7 +605,9 @@ export default Vue.extend({
                     "ji": '',
                     "shiShen1": "",
                     "shiShen2": "",
-                    "shiShen3": ''
+                    "shiShen3": '',
+                    "hexColor": '',
+                    "enColor": ''
                 }], [{
                     "gongWei": "",
                     "name": "",
@@ -567,7 +617,9 @@ export default Vue.extend({
                     "ji": '',
                     "shiShen1": "",
                     "shiShen2": '',
-                    "shiShen3": ''
+                    "shiShen3": '',
+                    "hexColor": '',
+                    "enColor": ''
                 },
                 {
                     "gongWei": "",
@@ -578,7 +630,9 @@ export default Vue.extend({
                     "ji": '',
                     "shiShen1": "",
                     "shiShen2": "",
-                    "shiShen3": ''
+                    "shiShen3": '',
+                    "hexColor": '',
+                    "enColor": ''
                 }]],
                 ganZhiRowVoList: [
                     {
@@ -707,9 +761,15 @@ export default Vue.extend({
             }
         }
     },
-    onLoad() {
+    onLoad(query: any) {
+        console.log('query', query)
+        this.form.username = decodeURIComponent(query.username || this.form.username)
+        this.form.sex = Number(query.sex) || this.form.sex
+        this.form.birthDay = decodeURIComponent(query.birthDay || this.form.birthDay)
+
         api.openApi.openApiGanZhiGet8ziByDate(this.form).then(res => {
             this.userData = responseDecorator.get8ziByDateDecorator(res.data.data)
+            this.theme = this.userData.ganZhiProRowVoList[2][0].enColor
             console.log(this.userData)
         })
 
@@ -723,7 +783,8 @@ export default Vue.extend({
 <style lang="less" scoped>
 .bg {
     width: 100vw;
-    min-height: 100vh;
+    height: 100vh;
+
 }
 
 [data-theme=blue].bg {
@@ -751,18 +812,121 @@ export default Vue.extend({
 
 }
 
+.categorys::-webkit-scrollbar {
+    display: none;
+}
+
 .categorys {
     padding-left: 60rpx;
-    font-size: 34rpx;
+    padding-right: 60rpx;
+    width: 100%;
+    font-size: 30rpx;
     font-weight: bold;
     display: inline-block;
-    
+    white-space: nowrap;
+    overflow-x: scroll;
+    padding-top: 30rpx;
+
+    .categorys-item {
+        display: inline-block;
+        margin-right: 30rpx;
+
+
+        [data-theme=green].categorys-item-text {
+            color: #5D9673;
+        }
+
+        [data-theme=red].categorys-item-text {
+            color: #AA3D1E;
+        }
+
+        [data-theme=brown].categorys-item-text {
+            color: #653A17;
+        }
+
+        [data-theme=yellow].categorys-item-text {
+            color: #EAC354;
+        }
+
+        [data-theme=blue].categorys-item-text {
+            color: #3A97C2;
+        }
+
+        .categorys-item-text {}
+
+        [data-theme=green].categorys-item-text_selected {
+            font-size: 34rpx;
+
+            color: #417954;
+        }
+
+        [data-theme=red].categorys-item-text_selected {
+            color: #892104;
+            font-size: 34rpx;
+        }
+
+        [data-theme=yellow].categorys-item-text_selected {
+            color: #D19C03;
+            font-size: 34rpx;
+        }
+
+        [data-theme=brown].categorys-item-text_selected {
+            color: #411F04;
+            font-size: 34rpx;
+        }
+
+        [data-theme=blue].categorys-item-text_selected {
+            color: #006494;
+            font-size: 34rpx;
+        }
+
+
+
+        [data-theme=green].categorys-item-mark_selected {
+            background-color: #417954;
+        }
+
+        [data-theme=red].categorys-item-mark_selected {
+            background-color: #892104;
+        }
+
+        [data-theme=yellow].categorys-item-mark_selected {
+            background-color: #D19C03;
+        }
+
+        [data-theme=brown].categorys-item-mark_selected {
+            background-color: #411F04;
+        }
+
+        [data-theme=blue].categorys-item-mark_selected {
+            background-color: #006494;
+        }
+
+        .categorys-item-mark {
+            width: 60rpx;
+            height: 10rpx;
+
+            margin: 0 auto;
+            margin-top: 6rpx;
+
+            border-radius: 10rpx;
+        }
+
+        .categorys-item-mark {}
+
+    }
+
+
+
 
 }
 
 .content {
     padding: 50rpx 30rpx;
     font-weight: 600;
+    box-sizing: border-box;
+    height: calc(100vh - 92rpx);
+    padding-top: 0rpx;
 
     .user {
         padding: 0 36rpx;
@@ -770,6 +934,7 @@ export default Vue.extend({
         justify-content: space-between;
         flex-wrap: wrap;
         margin-bottom: 30rpx;
+        padding-top: 15rpx;
     }
 
     .table {
@@ -939,13 +1104,35 @@ export default Vue.extend({
         display: flex;
         flex-wrap: wrap;
         position: relative;
+        align-items: flex-start;
+        align-content: flex-start;
+
 
 
+        [data-theme=red].result-content {
+            background-image: url('https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_red_middle@2x.png');
+        }
+
+        [data-theme=yellow].result-content {
+            background-image: url('https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_yellow_middle@2x.png');
+        }
+
+        [data-theme=brown].result-content {
+            background-image: url('https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_brown_middle@2x.png');
+        }
+
+        [data-theme=blue].result-content {
+            background-image: url('https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_blue_middle@2x.png');
+        }
+
+        [data-theme=green].result-content {
+            background-image: url('https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_green_middle@2x.png');
+        }
 
         .result-content {
             width: 100%;
             min-height: 200rpx;
-            background-image: url("https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png");
+            // background-image: url("https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png");
             background-size: 100%;
             font-size: 30rpx;
             padding: 0 120rpx;
@@ -1047,5 +1234,4 @@ export default Vue.extend({
             width: 100%;
         }
     }
-}
-</style>
+}</style>

src/pages/index/index.vue

@@ -9,7 +9,7 @@
 					<view class="content-inputs-row">
 						<view class="content-inputs-row-label">命主姓名</view>
 						<view>
-							<input v-model="form.name" class="content-inputs-row-input" />
+							<input v-model="form.username" class="content-inputs-row-input" />
 						</view>
 					</view>
 					<view class="content-inputs-row">
@@ -29,23 +29,23 @@
 					<view style="height: auto;" class="content-inputs-row">
 						<view class="content-inputs-row-label">出生时间</view>
 						<view style="display: flex;flex-wrap: wrap;justify-content: space-between;" class="">
-							<picker @change="changeFormBirthDay" :value="form.birthday" fields="day" mode="date">
+							<picker @change="changeFormBirthDay" :value="form.birthDay" fields="day" mode="date">
 								<view class="content-inputs-row-menu">
-									{{ form.birthday.split('-')[0] }}年 <text
+									{{ form.birthDay.split('-')[0] }}年 <text
 										style="font-weight: normal;text-indent: 0.5em;">
 										V</text>
 								</view>
 							</picker>
 							<picker @change="changeFormBirthDay" fields="day" mode="date">
 								<view class="content-inputs-row-menu">
-									{{ form.birthday.split('-')[1] }}月 <text
+									{{ form.birthDay.split('-')[1] }}月 <text
 										style="font-weight: normal;text-indent:  0.5em;">
 										V</text>
 								</view>
 							</picker>
 							<picker @change="changeFormBirthDay" fields="day" mode="date">
 								<view class="content-inputs-row-menu">
-									{{ form.birthday.split('-')[2] }}日 <text
+									{{ form.birthDay.split('-')[2] }}日 <text
 										style="font-weight: normal;text-indent:  0.5em;">
 										V</text>
 								</view>
@@ -137,12 +137,12 @@ export default Vue.extend({
 			],
 			form: {
 				isPay:0,
-				birthday: '2023-11-01',
+				birthDay: '2023-11-01',
 				birthHour: '23:00',
 				birthChinaHour: '子时',
 				isSave: 0, //是否保存 0:不保存 1保存
 				sex: 1, //性别 1:男 2:女
-				name: "",
+				username: "",
 				type: '公历'
 			}
 		}
@@ -167,11 +167,15 @@ export default Vue.extend({
 	},
 	methods: {
 		submitForm(){
-			api.openApi.openApiBirthdayLog({
-				name:this.form.name,
-				sex:this.form.sex,
-				birthday:this.form.birthday+' '+this.form.birthHour+':00',
-				isPay:this.form.isPay
+			let that =this
+			// api.openApi.openApiBirthdayLog({
+			// 	name:this.form.name,
+			// 	sex:this.form.sex,
+			// 	birthday:this.form.birthday+' '+this.form.birthHour+':00',
+			// 	isPay:this.form.isPay
+			// })
+			uni.navigateTo({
+				url:`/pages/forecast/index?birthDay=${that.form.birthDay+' '+this.form.birthHour+':00'}&sex=${that.form.sex}&username=${that.form.username}`
 			})
 
 
@@ -196,11 +200,11 @@ export default Vue.extend({
 		},
 		changeFormBirthDay(e: WechatMiniprogram.PickerChange) {
 			console.log(e.detail)
-			this.form.birthday = e.detail.value as string
+			this.form.birthDay = e.detail.value as string
 			if (this.form.type == '农历') {
-				let birthDays = this.form.birthday.split('-')
+				let birthDays = this.form.birthDay.split('-')
 				let c = calendar.lunar2solar(birthDays[0], birthDays[1], birthDays[2])
-				this.form.birthday = `${c.cYear}-${c.cMonth}-${c.cDay}`
+				this.form.birthDay = `${c.cYear}-${c.cMonth}-${c.cDay}`
 			}
 
 		}

src/utils/responseDecorator.ts

@@ -7,7 +7,7 @@ interface ganZhiGet8ziByDate extends openApiGanZhiGet8ziByDate {
     ganZhiProRowVoList: openApiGanZhiGet8ziByDate["ganZhiRowVoList"][]
 }
 
-const textSwitchColor = (text: string) => {
+const switchTextToHexColor = (text: string) => {
     let color = '#333'
     switch (text) {
         case '棕':
@@ -29,6 +29,29 @@ const textSwitchColor = (text: string) => {
             color = '#333'
     }
     return color
+}
+const switchTextToEnColor = (text: string) => {
+    let color = ''
+    switch (text) {
+        case '棕':
+            color = 'brown'
+            break;
+        case '红':
+            color = 'red'
+            break;
+        case '绿':
+            color = 'green'
+            break;
+        case '蓝':
+            color = 'blue'
+            break;
+        case '黄':
+            color = 'yellow'
+            break;
+        default:
+            color = ''
+    }
+    return color
 
 
 }
@@ -41,8 +64,12 @@ const get8ziByDateDecorator = function (responseData: openApiRes.openApiGanZhiGe
     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)
+        element1.hexColor = switchTextToHexColor(element1.color)
+        element2.hexColor = switchTextToHexColor(element2.color)
+
+        element1.enColor = switchTextToEnColor(element1.color)
+        element2.enColor = switchTextToEnColor(element2.color)
+
         respData.ganZhiProRowVoList.push([element1, element2])